diff --git a/CHANGELOG.md b/CHANGELOG.md
index fcca15ca3..582810e3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,43 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.5.0] - 20-12-2021
+### Added
+- Add credit note on sales module.
+- Add vendor credit on purchases module.
+- Optimize landed costs on purchase invoices.
+- Display associated payment transactions on sale invoice drawer.
+- Display associated pamyment transactions on purchase invoice drawer.
+- Display item associate invoice, bill, estimate and receipt transactions.
+- Transactions locking on all transactions or individual modules.
+- Roles and permissions access control module.
+- Optimize readonly details style of invoice, receipt, estimate, payment receive,
+  purchase invoice, expense, manual journal, inventory adjustment and cashflow transaction.
+
+### Changed 
+- Dashboard meta boot and authenticated user request query.
+
+## [1.4.0] - 11-09-2021
+
+### Added
+- Add SMS notification on sale invoice, receipt, customers payments modules.
+- Customer quick create in customers list.
+- Item quick create in items list.
+
+### Changes
+ change: BIG-171 alerts in global scope and lazy loading.
+### Fixed
+ fix: BIG-140 - Reordering sell, cost and inventory account on item details.
+ fix: BIG-144 - Typo adjustment dialog success message.
+ fix: BIG-148 - Items entries ordered by index.
+ fix: BIG-132 AR/AP aging summary report filter by none transactions/zero contacts.
+
 ## [1.2.0-RC] - 03-09-2021
 
 Here we write upgrading notes for brands. It's a team effort to make them as
 straightforward as possible.
 
 ### Added
-
 - Add slidable sub-sidebar to improve user experience instead of sub-menu.
 - Add Subscription guard to ensure the organization's subscription is active or
   redirect all routes to subscription billing page.
@@ -35,13 +65,11 @@ straightforward as possible.
 - Add clickable datatable rows to display each row details. 
 
 ### Changed
-
 - Optimize style of datatable selection checkbox.
 - Disable animation in dashboard views tabs.
 - Optimize Arabic localization.
 
 ### Fixed
-
 - fix: disable submit buttons in pereferences pages.
 - fix: inventory adjustment cost field max/min range to avoid out of range error.
 - fix: transactions by customers/vendors report localization.
diff --git a/package.json b/package.json
index 38afbca86..0ef5d4084 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
     "deep-map-keys": "^2.0.1",
+    "dependency-graph": "^0.11.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^6.6.0",
@@ -46,6 +47,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "fast-deep-equal": "^3.1.3",
     "file-loader": "4.3.0",
     "flow-bin": "^0.123.0",
     "formik": "^2.2.5",
@@ -106,6 +108,7 @@
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
+    "stylis-rtlcss": "^2.1.1",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",
diff --git a/src/common/TableStyle.js b/src/common/TableStyle.js
new file mode 100644
index 000000000..d570a00fb
--- /dev/null
+++ b/src/common/TableStyle.js
@@ -0,0 +1,6 @@
+
+
+export const TableStyle = {
+  Constrant: 'constrant',
+  Regular: 'regular'
+}
\ No newline at end of file
diff --git a/src/common/abilityOption.js b/src/common/abilityOption.js
index 1a5625ca3..7f586f047 100644
--- a/src/common/abilityOption.js
+++ b/src/common/abilityOption.js
@@ -17,6 +17,8 @@ export const AbilitySubject = {
   Preferences: 'Preferences',
   ExchangeRate: 'ExchangeRate',
   SubscriptionBilling: 'SubscriptionBilling',
+  CreditNote: 'CreditNote',
+  VendorCredit: 'VendorCredit',
 };
 
 export const ItemAction = {
@@ -46,7 +48,7 @@ export const SaleInvoiceAction = {
   Create: 'Create',
   Edit: 'Edit',
   Delete: 'Delete',
-  Writeoff: 'Writeoff',
+  Writeoff: 'bad-debt',
   NotifyBySms: 'NotifyBySms',
 };
 
@@ -66,6 +68,21 @@ export const PaymentReceiveAction = {
   NotifyBySms: 'NotifyBySms',
 };
 
+export const CreditNoteAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Refund: 'Refund'
+};
+
+export const VendorCreditAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Refund: 'Refund'
+};
 export const BillAction = {
   View: 'View',
   Create: 'Create',
diff --git a/src/common/classes.js b/src/common/classes.js
index e1df0b33f..6b0872396 100644
--- a/src/common/classes.js
+++ b/src/common/classes.js
@@ -39,6 +39,8 @@ const CLASSES = {
   PAGE_FORM_ITEM: 'page-form--item',
   PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries',
   PAGE_FORM_EXPENSE: 'page-form--expense',
+  PAGE_FORM_CREDIT_NOTE:'page-form--credit-note',
+  PAGE_FORM_VENDOR_CREDIT_NOTE:'page-form--vendor-credit-note',
 
   FORM_GROUP_LIST_SELECT: 'form-group--select-list',
 
diff --git a/src/common/drawers.js b/src/common/drawers.js
index 3a1b21032..5ec6d05a2 100644
--- a/src/common/drawers.js
+++ b/src/common/drawers.js
@@ -14,4 +14,8 @@ export const DRAWERS = {
   QUICK_WRITE_VENDOR: 'quick-write-vendor',
   QUICK_CREATE_CUSTOMER: 'quick-create-customer',
   QUICK_CREATE_ITEM: 'quick-create-item',
+  CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
+  VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
+  REFUND_CREDIT_NOTE_DETAIL_DRAWER:'refund-credit-detail-drawer',
+  REFUND_VENDOR_CREDIT_DETAIL_DRAWER:'refund-vendor-detail-drawer'
 };
diff --git a/src/common/index.js b/src/common/index.js
new file mode 100644
index 000000000..25821fa35
--- /dev/null
+++ b/src/common/index.js
@@ -0,0 +1,4 @@
+
+
+
+export * from './TableStyle';
\ No newline at end of file
diff --git a/src/common/itemPaymentTranactionsOption.js b/src/common/itemPaymentTranactionsOption.js
new file mode 100644
index 000000000..0811c5183
--- /dev/null
+++ b/src/common/itemPaymentTranactionsOption.js
@@ -0,0 +1,51 @@
+import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  SaleInvoiceAction,
+  BillAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
+
+export const getItemPaymentTransactions = () => [
+  {
+    name: 'invoices',
+    label: intl.get('invoices'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.View,
+    },
+  },
+  {
+    name: 'estimates',
+    label: intl.get('estimates'),
+    permission: {
+      subject: AbilitySubject.Estimate,
+      ability: SaleEstimateAction.View,
+    },
+  },
+  {
+    name: 'receipts',
+    label: intl.get('receipts'),
+    permission: {
+      subject: AbilitySubject.Receipt,
+      ability: SaleReceiptAction.View,
+    },
+  },
+  {
+    name: 'bills',
+    label: intl.get('bills'),
+    permission: {
+      subject: AbilitySubject.Bill,
+      ability: BillAction.View,
+    },
+  },
+];
+
+export const useGetItemPaymentTransactionsMenu = () => {
+  const itemTransactionMenu = getItemPaymentTransactions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(itemTransactionMenu);
+};
diff --git a/src/common/permissionsSchema.js b/src/common/permissionsSchema.js
new file mode 100644
index 000000000..38347abf8
--- /dev/null
+++ b/src/common/permissionsSchema.js
@@ -0,0 +1,659 @@
+import { chain } from 'lodash';
+import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  AccountAction,
+  BillAction,
+  CreditNoteAction,
+  CustomerAction,
+  ExpenseAction,
+  ItemAction,
+  ManualJournalAction,
+  PaymentMadeAction,
+  PaymentReceiveAction,
+  ReportsAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  VendorAction,
+  VendorCreditAction,
+} from './abilityOption';
+
+export const ModulePermissionsStyle = {
+  Columns: 'columns',
+  Vertical: 'vertical',
+};
+
+const PermissionColumn = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+  Edit: 'edit',
+};
+
+export const getPermissionsSchema = () => [
+  {
+    label: intl.get('permissions.items_inventory'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.items'),
+        subject: AbilitySubject.Item,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ItemAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ItemAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ItemAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.inventory_adjustment'),
+        subject: AbilitySubject.InventoryAdjustment,
+        permissions: [
+          {
+            label: 'View',
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ItemAction.View }],
+          },
+          {
+            label: 'Edit',
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ItemAction.Create }],
+          },
+          {
+            label: 'Delete',
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ItemAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.contacts'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.customers'),
+        subject: AbilitySubject.Customer,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: CustomerAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: CustomerAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: CustomerAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: CustomerAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: CustomerAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: CustomerAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: CustomerAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.vendors'),
+        subject: AbilitySubject.Vendor,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: VendorAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: VendorAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: VendorAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: VendorAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: VendorAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: VendorAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: VendorAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.sales'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.sale_invoice'),
+        subject: AbilitySubject.Invoice,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleInvoiceAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleInvoiceAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleInvoiceAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleInvoiceAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleInvoiceAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleInvoiceAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleInvoiceAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.written_off_invoice'),
+            key: SaleInvoiceAction.Writeoff,
+            depend: [{ key: SaleInvoiceAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.sale_estimate'),
+        subject: AbilitySubject.Estimate,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleEstimateAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleEstimateAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleEstimateAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleEstimateAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleEstimateAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleEstimateAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleEstimateAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.sale_receipt'),
+        subject: AbilitySubject.Receipt,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleReceiptAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleReceiptAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleReceiptAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleReceiptAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleReceiptAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleReceiptAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleReceiptAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.credit_note'),
+        subject: AbilitySubject.CreditNote,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: CreditNoteAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: CreditNoteAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: CreditNoteAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: CreditNoteAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: CreditNoteAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: CreditNoteAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: CreditNoteAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.refund_credit_note'),
+            key: CreditNoteAction.Refund,
+            depend: [{ key: CreditNoteAction.View }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.payment_receive'),
+        subject: AbilitySubject.PaymentReceive,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: PaymentReceiveAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: PaymentReceiveAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: PaymentReceiveAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: PaymentReceiveAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: PaymentReceiveAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: PaymentReceiveAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: PaymentReceiveAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.purchases'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.bills'),
+        subject: AbilitySubject.Bill,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: BillAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: BillAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: BillAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: BillAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: BillAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: BillAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: BillAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.vendor_credits'),
+        subject: AbilitySubject.VendorCredit,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: VendorCreditAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: VendorCreditAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: VendorCreditAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: VendorCreditAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: VendorCreditAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: VendorCreditAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: VendorCreditAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.refund_vendor_credit'),
+            key: VendorCreditAction.Refund,
+            depend: [{ key: VendorCreditAction.View }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.payment_made'),
+        subject: AbilitySubject.PaymentMade,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: PaymentMadeAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: PaymentMadeAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: PaymentMadeAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: PaymentMadeAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: PaymentMadeAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: PaymentMadeAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: PaymentMadeAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.financial_accounting'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.manual_journals'),
+        subject: AbilitySubject.ManualJournal,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ManualJournalAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ManualJournalAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ManualJournalAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ManualJournalAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ManualJournalAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ManualJournalAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ManualJournalAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.chart_of_accounts'),
+        subject: AbilitySubject.Account,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: AccountAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: AccountAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: AccountAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: AccountAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: AccountAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: AccountAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: AccountAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.transactions_locking'),
+            key: AccountAction.TransactionsLocking,
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.expenses'),
+        subject: AbilitySubject.Expense,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ExpenseAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ExpenseAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ExpenseAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ExpenseAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ExpenseAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ExpenseAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ExpenseAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.reports'),
+    type: ModulePermissionsStyle.Vertical,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    services: [
+      {
+        label: intl.get('permissions.financial_reports'),
+        subject: AbilitySubject.Report,
+        permissions: [
+          {
+            label: intl.get('permissions.balance_sheet'),
+            key: ReportsAction.READ_BALANCE_SHEET,
+          },
+          {
+            label: intl.get('permissions.trial_balance_sheet'),
+            key: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+          },
+          {
+            label: intl.get('permissions.profit_loss_sheet'),
+            key: ReportsAction.READ_PROFIT_LOSS,
+          },
+          {
+            label: intl.get('permissions.cash_flow_sheet'),
+            key: ReportsAction.READ_CASHFLOW,
+          },
+          {
+            label: intl.get('permissions.journal_sheet'),
+            key: ReportsAction.READ_JOURNAL,
+          },
+          {
+            label: intl.get('permissions.general_ledger'),
+            key: ReportsAction.READ_GENERAL_LEDGET,
+          },
+          {
+            label: intl.get('permissions.a_r_aging_summary_report'),
+            key: ReportsAction.READ_AR_AGING_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.a_r_aging_summary_report'),
+            key: ReportsAction.READ_AP_AGING_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.purchases_by_items'),
+            key: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            label: intl.get('permissions.sales_by_items'),
+            key: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            label: intl.get('permissions.customers_transactions'),
+            key: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            label: intl.get('permissions.vendors_transactions'),
+            key: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            label: intl.get('permissions.customers_summary_balance'),
+            key: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            label: intl.get('permissions.vendors_summary_balance'),
+            key: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+          {
+            label: intl.get('permissions.inventory_valuation_summary'),
+            key: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.inventory_items_details'),
+            key: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            label: intl.get('permissions.cashflow_account_transactions'),
+            key: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export function getPermissionsSchemaService(subject) {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((perm) => perm.services)
+    .flatten()
+    .find((service) => service.subject === subject)
+    .value();
+}
+
+export function getPermissionsSchemaServices() {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((module) => module.services)
+    .flatten()
+    .value();
+}
diff --git a/src/common/resourcesTypes.js b/src/common/resourcesTypes.js
index 12ec85401..91e981aa8 100644
--- a/src/common/resourcesTypes.js
+++ b/src/common/resourcesTypes.js
@@ -11,4 +11,6 @@ export const RESOURCES_TYPES = {
   EXPENSE: 'expense',
   MANUAL_JOURNAL: 'manual_journal',
   ACCOUNT: 'account',
+  CREDIT_NOTE: 'credit_note',
+  VENDOR_CREDIT:'vendor_credit'
 };
diff --git a/src/common/tables.js b/src/common/tables.js
index 9acd9bd5c..59d6ca127 100644
--- a/src/common/tables.js
+++ b/src/common/tables.js
@@ -14,6 +14,8 @@ export const TABLES = {
   EXPENSES: 'expenses',
   CASHFLOW_ACCOUNTS: 'cashflow_accounts',
   CASHFLOW_Transactions: 'cashflow_transactions',
+  CREDIT_NOTES: 'credit_notes',
+  VENDOR_CREDITS: 'vendor_credits',
 };
 
 export const TABLE_SIZE = {
diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js
index 680f8da5a..e0c3dd61a 100644
--- a/src/components/Alert/index.js
+++ b/src/components/Alert/index.js
@@ -1,17 +1,60 @@
 import React from 'react';
 import clsx from 'classnames';
+import styled from 'styled-components';
 
-import Style from './style.module.scss';
-
-export function Alert({ title, description, intent }) {
+export function Alert({ title, description, children, intent, className }) {
   return (
-    <div
-      className={clsx(Style.root, {
-        [`${Style['root_' + intent]}`]: intent,
-      })}
-    >
-      {title && <h3 className={clsx(Style.title)}>{title}</h3>}
-      {description && <p class={clsx(Style.description)}>{description}</p>}
-    </div>
+    <AlertRoot className={clsx(className)} intent={intent}>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      {description && <AlertDesc>{description}</AlertDesc>}
+      {children && <AlertDesc>{children}</AlertDesc>}
+    </AlertRoot>
   );
 }
+
+const AlertRoot = styled.div`
+  border: 1px solid rgb(223, 227, 230);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  ${(props) =>
+    props.intent === 'danger' &&
+    `
+    border-color: rgb(249, 198, 198);
+    background: rgb(255, 248, 248);
+
+    ${AlertDesc} {
+      color: #d95759;
+    }
+    ${AlertTitle} {
+      color: rgb(205, 43, 49);
+    }
+  `}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+    background: #fff;
+    border-color: #98a8ee;
+
+    ${AlertTitle} {
+      color: #1a3bd4;
+    }
+    ${AlertDesc} {
+      color: #455883;
+    }
+  `}
+`;
+
+export const AlertTitle = styled.h3`
+  color: rgb(17, 24, 28);
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+export const AlertDesc = styled.p`
+  color: rgb(104, 112, 118);
+  margin: 0;
+`;
diff --git a/src/components/Alert/style.module.scss b/src/components/Alert/style.module.scss
deleted file mode 100644
index be866addf..000000000
--- a/src/components/Alert/style.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.root {
-  border: 1px solid rgb(223, 227, 230);
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
-
-  &_danger {
-    border-color: rgb(249, 198, 198);
-    background: rgb(255, 248, 248);
-
-    .description {
-      color: #d95759;
-    }
-
-    .title {
-      color: rgb(205, 43, 49);
-    }
-  }
-}
-
-
-.title {
-  color: rgb(17, 24, 28);
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.description {
-  color: rgb(104, 112, 118);
-  margin: 0;
-}
\ No newline at end of file
diff --git a/src/components/BankAccounts/index.js b/src/components/BankAccounts/index.js
index 0022eddfa..875889670 100644
--- a/src/components/BankAccounts/index.js
+++ b/src/components/BankAccounts/index.js
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
 import Icon from '../Icon';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const ACCOUNT_TYPE = {
   CASH: 'cash',
@@ -185,9 +184,7 @@ const MetaLineValue = styled.div`
   text-align: center;
   color: rgb(23, 43, 77);
   font-size: 11px;
-
-  ${whenLtr(`margin-left: auto;`)}
-  ${whenRtl(`margin-right: auto;`)}
+  margin-left: auto;
 `;
 
 const BankAccountMeta = styled.div`
@@ -204,7 +201,5 @@ const AccountIconWrap = styled.div`
   position: absolute;
   top: 14px;
   color: #abb3bb;
-
-  ${whenLtr(`right: 12px;`)}
-  ${whenRtl(`left: 12px;`)}
+  right: 12px;
 `;
diff --git a/src/components/Button/ButtonLink.js b/src/components/Button/ButtonLink.js
index 655cdc615..739f12ecc 100644
--- a/src/components/Button/ButtonLink.js
+++ b/src/components/Button/ButtonLink.js
@@ -5,6 +5,7 @@ export const ButtonLink = styled.button`
   border: 0;
   background: transparent;
   cursor: pointer;
+  text-align: inherit;
 
   &:hover,
   &:active {
diff --git a/src/components/Card.js b/src/components/Card.js
deleted file mode 100644
index 65dd41eed..000000000
--- a/src/components/Card.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
- 
-export default function Card({ className, children }) {
-  return <div className={classNames('card', className)}>{children}</div>;
-}
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
new file mode 100644
index 000000000..598085686
--- /dev/null
+++ b/src/components/Card/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function Card({ className, children }) {
+  return <CardRoot className={className}>{children}</CardRoot>;
+}
+
+const CardRoot = styled.div`
+  padding: 15px;
+  margin: 15px;
+  background: #fff;
+  border: 1px solid #d2dce2;
+`;
+
+export const CardFooterActions = styled.div`
+  padding-top: 16px;
+  border-top: 1px solid #e0e7ea;
+  margin-top: 30px;
+
+  .bp3-button {
+    min-width: 70px;
+
+    + .bp3-button {
+      margin-left: 10px;
+    }
+  }
+`;
diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js
new file mode 100644
index 000000000..c8e2c593b
--- /dev/null
+++ b/src/components/CommercialDoc/index.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Card } from '../Card';
+import DataTable from '../DataTable';
+
+export const CommercialDocBox = styled(Card)`
+  padding: 22px 20px;
+`;
+
+export const CommercialDocHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocTopHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocEntriesTable = styled(DataTable)`
+  .tbody .tr:last-child .td {
+    border-bottom: 1px solid #d2dce2;
+  }
+`;
+
+export const CommercialDocFooter = styled.div`
+  margin-top: 25px;
+`;
diff --git a/src/components/Customers/CustomerDrawerLink.js b/src/components/Customers/CustomerDrawerLink.js
new file mode 100644
index 000000000..e99c20244
--- /dev/null
+++ b/src/components/Customers/CustomerDrawerLink.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function CustomerDrawerLinkComponent({
+  // #ownProps
+  children,
+  customerId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleCustomerDrawer = () => {
+    openDrawer('customer-details-drawer', { customerId });
+  };
+
+  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
+}
+
+export const CustomerDrawerLink = R.compose(withDrawerActions)(
+  CustomerDrawerLinkComponent,
+);
diff --git a/src/components/Customers/index.js b/src/components/Customers/index.js
new file mode 100644
index 000000000..124141b39
--- /dev/null
+++ b/src/components/Customers/index.js
@@ -0,0 +1 @@
+export * from './CustomerDrawerLink';
diff --git a/src/components/Dashboard/DashboardActionsBar.js b/src/components/Dashboard/DashboardActionsBar.js
index b0ed85942..5d1795d5d 100644
--- a/src/components/Dashboard/DashboardActionsBar.js
+++ b/src/components/Dashboard/DashboardActionsBar.js
@@ -1,16 +1,19 @@
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'classnames';
 import { Navbar } from '@blueprintjs/core';
 
-export default function DashboardActionsBar({ children, name }) {
+export default function DashboardActionsBar({ className, children, name }) {
   return (
     <div
-      className={classnames({
-        'dashboard__actions-bar': true,
-        [`dashboard__actions-bar--${name}`]: !!name
-      })}
+      className={clsx(
+        {
+          'dashboard__actions-bar': true,
+          [`dashboard__actions-bar--${name}`]: !!name,
+        },
+        className,
+      )}
     >
-      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
+      <Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
     </div>
   );
 }
diff --git a/src/components/Dashboard/DashboardThemeProvider.js b/src/components/Dashboard/DashboardThemeProvider.js
index 23300ddb9..7a4289e75 100644
--- a/src/components/Dashboard/DashboardThemeProvider.js
+++ b/src/components/Dashboard/DashboardThemeProvider.js
@@ -1,9 +1,16 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import rtlcss from 'stylis-rtlcss';
 import { useAppIntlContext } from '../AppIntlProvider';
 
 export function DashboardThemeProvider({ children }) {
   const { direction } = useAppIntlContext();
 
-  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+  return (
+    <StyleSheetManager
+      {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
+    >
+      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+    </StyleSheetManager>
+  );
 }
diff --git a/src/components/Datatable/TableWrapper.js b/src/components/Datatable/TableWrapper.js
index 78646ea03..d98fab9b0 100644
--- a/src/components/Datatable/TableWrapper.js
+++ b/src/components/Datatable/TableWrapper.js
@@ -16,6 +16,7 @@ export default function TableWrapper({ children }) {
       expandable,
       virtualizedRows,
       className,
+      styleName,
       size,
     },
   } = useContext(TableContext);
@@ -28,6 +29,7 @@ export default function TableWrapper({ children }) {
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
+        [`table--${styleName}`]: styleName,
       })}
     >
       <ScrollSync>
diff --git a/src/components/Details/index.js b/src/components/Details/index.js
index ef1690f3c..ef480e1f2 100644
--- a/src/components/Details/index.js
+++ b/src/components/Details/index.js
@@ -17,6 +17,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
 export function DetailsMenu({
   children,
   direction = DIRECTION.VERTICAL,
+  textAlign,
   minLabelSize,
   className,
 }) {
@@ -27,6 +28,7 @@ export function DetailsMenu({
         {
           'details-menu--vertical': direction === DIRECTION.VERTICAL,
           'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
+          [`align-${textAlign}`]: textAlign,
         },
         className,
       )}
diff --git a/src/components/Dialog/DialogFooterActions.js b/src/components/Dialog/DialogFooterActions.js
index e24461203..bf7514527 100644
--- a/src/components/Dialog/DialogFooterActions.js
+++ b/src/components/Dialog/DialogFooterActions.js
@@ -2,6 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 
+/**
+ * Dialog footer actions.
+ * @returns {React.JSX}
+ */
 export function DialogFooterActions({ alignment = 'right', children }) {
   return (
     <DialogFooterActionsRoot
@@ -13,6 +17,19 @@ export function DialogFooterActions({ alignment = 'right', children }) {
   );
 }
 
+/**
+ * Dialog footer.
+ * @returns {React.JSX}
+ */
+export function DialogFooter({ ...props }) {
+  return <DialogFooterRoot {...props} />;
+}
+
+const DialogFooterRoot = styled.div`
+  flex: 0 0 auto;
+  margin: 0 20px;
+`;
+
 const DialogFooterActionsRoot = styled.div`
   ${(props) =>
     props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index 871e38a58..d9d3609c5 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -25,7 +25,13 @@ import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMS
 import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
 import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
 import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
-import TransactionsLockingDialog from '../containers/Dialogs/TransactionsLockingDialog';
+import RefundCreditNoteDialog from '../containers/Dialogs/RefundCreditNoteDialog';
+import RefundVendorCreditDialog from '../containers/Dialogs/RefundVendorCreditDialog';
+import ReconcileCreditNoteDialog from '../containers/Dialogs/ReconcileCreditNoteDialog';
+import ReconcileVendorCreditDialog from '../containers/Dialogs/ReconcileVendorCreditDialog';
+import LockingTransactionsDialog from '../containers/Dialogs/LockingTransactionsDialog';
+import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransactionsDialog';
+import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';
 
 /**
  * Dialogs container.
@@ -59,7 +65,15 @@ export default function DialogsContainer() {
 
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
-      <TransactionsLockingDialog dialogName={'transactions-locking'} />
+      <RefundCreditNoteDialog dialogName={'refund-credit-note'} />
+      <RefundVendorCreditDialog dialogName={'refund-vendor-credit'} />
+      <ReconcileCreditNoteDialog dialogName={'reconcile-credit-note'} />
+      <ReconcileVendorCreditDialog dialogName={'reconcile-vendor-credit'} />
+      <LockingTransactionsDialog dialogName={'locking-transactions'} />
+      <UnlockingTransactionsDialog dialogName={'unlocking-transactions'} />
+      <UnlockingPartialTransactionsDialog
+        dialogName={'unlocking-partial-transactions'}
+      />
     </div>
   );
 }
diff --git a/src/components/Drawer/DrawerActionsBar.js b/src/components/Drawer/DrawerActionsBar.js
new file mode 100644
index 000000000..d79be8b16
--- /dev/null
+++ b/src/components/Drawer/DrawerActionsBar.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+export function DrawerActionsBar({ ...props }) {
+  return <DrawerActionsBarRoot {...props} />;
+}
+
+const DrawerActionsBarRoot = styled(DashboardActionsBar)`
+  border-bottom: 1px solid #d9d9da;
+`;
diff --git a/src/components/Drawer/DrawerMainTabs.js b/src/components/Drawer/DrawerMainTabs.js
index 89ab0a52c..d2052e1f2 100644
--- a/src/components/Drawer/DrawerMainTabs.js
+++ b/src/components/Drawer/DrawerMainTabs.js
@@ -1,15 +1,54 @@
 import React from 'react';
 import { Tabs } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 /**
  * Drawer main tabs.
  */
 export function DrawerMainTabs({ children, ...restProps }) {
   return (
-    <div class="drawer__main-tabs">
+    <DrawerMainTabsRoot>
       <Tabs animate={true} large={true} {...restProps}>
         {children}
       </Tabs>
-    </div>
+    </DrawerMainTabsRoot>
   );
 }
+
+const DrawerMainTabsRoot = styled.div`
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+      padding: 0 15px;
+      border-bottom: 2px solid #e1e2e8;
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #7f8596;
+        margin: 0 1rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: #0052cc;
+        }
+      }
+      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+        height: 2px;
+        bottom: -2px;
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+`;
diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js
index 005735517..d39c1d758 100644
--- a/src/components/Drawer/index.js
+++ b/src/components/Drawer/index.js
@@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) {
 export function DrawerBody({ children }) {
   return <div className={Classes.DRAWER_BODY}>{children}</div>;
 }
+
+export * from './DrawerActionsBar';
\ No newline at end of file
diff --git a/src/components/DrawersContainer.js b/src/components/DrawersContainer.js
index 135dcb8a3..e508519bd 100644
--- a/src/components/DrawersContainer.js
+++ b/src/components/DrawersContainer.js
@@ -17,6 +17,10 @@ import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTrans
 import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
 import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
 import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
+import CreditNoteDetailDrawer from '../containers/Drawers/CreditNoteDetailDrawer';
+import VendorCreditDetailDrawer from '../containers/Drawers/VendorCreditDetailDrawer';
+import RefundCreditNoteDetailDrawer from '../containers/Drawers/RefundCreditNoteDetailDrawer';
+import RefundVendorCreditDetailDrawer from '../containers/Drawers/RefundVendorCreditDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -47,6 +51,14 @@ export default function DrawersContainer() {
       <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
       <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
+      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAIL_DRAWER} />
+      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER} />
+      <RefundCreditNoteDetailDrawer
+        name={DRAWERS.REFUND_CREDIT_NOTE_DETAIL_DRAWER}
+      />
+      <RefundVendorCreditDetailDrawer
+        name={DRAWERS.REFUND_VENDOR_CREDIT_DETAIL_DRAWER}
+      />
     </div>
   );
 }
diff --git a/src/components/Forms/FormikObserver.js b/src/components/Forms/FormikObserver.js
new file mode 100644
index 000000000..a93b06864
--- /dev/null
+++ b/src/components/Forms/FormikObserver.js
@@ -0,0 +1,14 @@
+
+import { useDeepCompareEffect } from 'hooks/utils';
+
+export function FormikObserver({ onChange, values }) {
+  useDeepCompareEffect(() => {
+    onChange(values);
+  }, [values]);
+
+  return null;
+}
+
+FormikObserver.defaultProps = {
+  onChange: () => null,
+};
diff --git a/src/components/Forms/index.js b/src/components/Forms/index.js
index 8deddad40..c531c474b 100644
--- a/src/components/Forms/index.js
+++ b/src/components/Forms/index.js
@@ -1 +1,2 @@
-export * from './FormObserver';
\ No newline at end of file
+export * from './FormObserver';
+export * from './FormikObserver';
\ No newline at end of file
diff --git a/src/components/Preferences/PreferencesPage.js b/src/components/Preferences/PreferencesPage.js
index a0e23dc97..f6be83dda 100644
--- a/src/components/Preferences/PreferencesPage.js
+++ b/src/components/Preferences/PreferencesPage.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import classNames from 'classnames';
+import * as R from 'ramda';
+
 import { CLASSES } from 'common/classes';
 
 import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
@@ -8,18 +10,28 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
 import 'style/pages/Preferences/Page.scss';
 
 /**
  * Preferences page.
  */
-export default function PreferencesPage() {
+function PreferencesPage({ toggleSidebarExpand }) {
+  // Shrink the dashboard sidebar once open application preferences page.
+  React.useEffect(() => {
+    toggleSidebarExpand(false);
+  }, [toggleSidebarExpand]);
+
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <div id={'dashboard'} className={classNames(
-        CLASSES.DASHBOARD_CONTENT,
-        CLASSES.DASHBOARD_CONTENT_PREFERENCES,
-      )}>
+      <div
+        id={'dashboard'}
+        className={classNames(
+          CLASSES.DASHBOARD_CONTENT,
+          CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+        )}
+      >
         <div className={classNames(CLASSES.PREFERENCES_PAGE)}>
           <PreferencesSidebar />
 
@@ -32,3 +44,5 @@ export default function PreferencesPage() {
     </ErrorBoundary>
   );
 }
+
+export default R.compose(withDashboardActions)(PreferencesPage);
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
new file mode 100644
index 000000000..9c5afe084
--- /dev/null
+++ b/src/components/Table/index.js
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  width: 100%;
+  vertical-align: top;
+  border-color: #dee2e6;
+  border-spacing: 0;
+`;
+export const TBody = styled.tbody``;
+export const TR = styled.tr``;
+export const TD = styled.td`
+  padding: 0.5rem 0.5rem;
+  border-bottom-width: 1px;
+  border-bottom-color: inherit;
+  border-bottom-style: solid;
+
+  ${(props) =>
+    props.textAlign === 'right' &&
+    `
+  text-align: right;`}
+`;
+
+export const TRDarkSingleLine = styled(TR)`
+  ${TD} {
+    border-bottom: 1px solid #000;
+  }
+`;
+
+export const TRDarkDoubleLines = styled(TR)`
+  ${TD} {
+    border-bottom: 3px double #000;
+  }
+`;
diff --git a/src/components/Tags/CurrencyTag.js b/src/components/Tags/CurrencyTag.js
new file mode 100644
index 000000000..a427c0230
--- /dev/null
+++ b/src/components/Tags/CurrencyTag.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const CurrencyTag = styled.span`
+  background: #3e9215;
+  color: #fff;
+  display: inline-block;
+  border-radius: 3px;
+  padding: 2px 4px;
+  line-height: 1;
+  margin-left: 4px;
+`;
diff --git a/src/components/Tags/index.js b/src/components/Tags/index.js
new file mode 100644
index 000000000..7eca83954
--- /dev/null
+++ b/src/components/Tags/index.js
@@ -0,0 +1,3 @@
+
+
+export * from './CurrencyTag';
\ No newline at end of file
diff --git a/src/components/TextStatus/index.js b/src/components/TextStatus/index.js
new file mode 100644
index 000000000..186956a41
--- /dev/null
+++ b/src/components/TextStatus/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function TextStatus({ intent, children }) {
+  return <TextStatusRoot intent={intent}>{children}</TextStatusRoot>;
+}
+
+const TextStatusRoot = styled.span`
+  ${(props) =>
+    props.intent === 'warning' &&
+    `
+  color: #ec5b0a;`}
+
+  ${(props) =>
+    props.intent === 'success' &&
+    `
+  color: #2ba01d;`}
+
+  ${(props) =>
+    props.intent === 'none' &&
+    `
+  color: #777;`}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+  color: #1652c8;`}
+`;
diff --git a/src/components/TotalLines/TotalLines.module.scss b/src/components/TotalLines/TotalLines.module.scss
deleted file mode 100644
index 5c92246b5..000000000
--- a/src/components/TotalLines/TotalLines.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.total_lines {}
-
-
-.total_line {
-    display: flex;
-    border-bottom: 1px solid #d2dde2;
-    
-    :global .amount,
-    :global .title{
-        padding: 8px;
-    }
-}
\ No newline at end of file
diff --git a/src/components/TotalLines/index.js b/src/components/TotalLines/index.js
index 793f70c0d..1b2d88fc6 100644
--- a/src/components/TotalLines/index.js
+++ b/src/components/TotalLines/index.js
@@ -1,23 +1,93 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import TotalLinesCls from './TotalLines.module.scss';
+export const TotalLineBorderStyle = {
+  SingleDark: 'SingleDark',
+  DoubleDark: 'DoubleDark',
+};
 
-export function TotalLines({ children, className }) {
+export const TotalLineTextStyle = {
+  Regular: 'Regular',
+  Bold: 'Bold',
+};
+
+export function TotalLines({
+  children,
+  amountColWidth,
+  labelColWidth,
+  className,
+}) {
   return (
-    <div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
+    <TotalLinesRoot
+      className={className}
+      amountColWidth={amountColWidth}
+      labelColWidth={labelColWidth}
+    >
       {children}
-    </div>
+    </TotalLinesRoot>
   );
 }
 
-export function TotalLine({ title, value, className }) {
+export function TotalLine({ title, value, borderStyle, textStyle, className }) {
   return (
-    <div
-      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
+    <TotalLineRoot
+      borderStyle={borderStyle}
+      textStyle={textStyle}
+      className={className}
     >
       <div class="title">{title}</div>
       <div class="amount">{value}</div>
-    </div>
+    </TotalLineRoot>
   );
 }
+
+export const TotalLinesRoot = styled.div`
+  display: table;
+
+  ${(props) =>
+    props.amountColWidth &&
+    `
+    .amount{
+      width: ${props.amountColWidth}
+    }
+  `}
+
+  ${(props) =>
+    props.labelColWidth &&
+    `
+    .title{
+      width: ${props.labelColWidth}
+    }
+  `}
+`;
+
+export const TotalLineRoot = styled.div`
+  display: table-row;
+
+  .amount,
+  .title {
+    display: table-cell;
+    padding: 8px;
+    border-bottom: 1px solid #d2dde2;
+
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.DoubleDark &&
+      `
+      border-bottom: 3px double #000;
+    `}
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.SingleDark &&
+      `
+      border-bottom: 1px double #000;
+    `}
+    ${(props) =>
+      props.textStyle === TotalLineTextStyle.Bold &&
+      `
+      font-weight: 600;
+    `}
+  }
+
+  .amount {
+    text-align: right;
+  }
+`;
diff --git a/src/components/Typo/Paragraph.js b/src/components/Typo/Paragraph.js
new file mode 100644
index 000000000..526425de3
--- /dev/null
+++ b/src/components/Typo/Paragraph.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import clsx from 'classnames';
+
+export function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}
\ No newline at end of file
diff --git a/src/components/Typo/index.js b/src/components/Typo/index.js
new file mode 100644
index 000000000..6d06a82b4
--- /dev/null
+++ b/src/components/Typo/index.js
@@ -0,0 +1,2 @@
+
+export * from './Paragraph';
\ No newline at end of file
diff --git a/src/components/Utils/Join.js b/src/components/Utils/Join.js
new file mode 100644
index 000000000..a2314599e
--- /dev/null
+++ b/src/components/Utils/Join.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function Join({ items, sep }) {
+  return items.length > 0
+    ? items.reduce((result, item) => (
+        <>
+          {result}
+          {sep}
+          {item}
+        </>
+      ))
+    : null;
+}
diff --git a/src/components/Utils/index.js b/src/components/Utils/index.js
index f1104e044..5be485ebc 100644
--- a/src/components/Utils/index.js
+++ b/src/components/Utils/index.js
@@ -1,4 +1,5 @@
 
 
 export * from './FormatNumber';
-export * from './FormatDate';
\ No newline at end of file
+export * from './FormatDate';
+export * from './Join';
\ No newline at end of file
diff --git a/src/components/Vendors/VendorDrawerLink.js b/src/components/Vendors/VendorDrawerLink.js
new file mode 100644
index 000000000..91b528e6f
--- /dev/null
+++ b/src/components/Vendors/VendorDrawerLink.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function VendorDrawerLinkComponent({
+  // #ownProps
+  children,
+  vendorId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleVendorDrawer = () => {
+    openDrawer('vendor-details-drawer', { vendorId });
+  };
+
+  return <ButtonLink onClick={handleVendorDrawer}>{children}</ButtonLink>;
+}
+
+export const VendorDrawerLink = R.compose(withDrawerActions)(VendorDrawerLinkComponent);
diff --git a/src/components/Vendors/index.js b/src/components/Vendors/index.js
new file mode 100644
index 000000000..8f9cc7544
--- /dev/null
+++ b/src/components/Vendors/index.js
@@ -0,0 +1 @@
+export * from './VendorDrawerLink'
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index f30398145..5e14f2288 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -54,7 +54,6 @@ import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
-import Card from './Card';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
@@ -87,6 +86,15 @@ export * from './Button';
 export * from './IntersectionObserver';
 export * from './SMSPreview';
 export * from './Contacts';
+export * from './Utils/Join';
+export * from './Typo';
+export * from './TextStatus';
+export * from './Tags';
+export * from './CommercialDoc';
+export * from './Card';
+export * from './Customers'
+export * from './Vendors'
+export * from './Table';
 
 const Hint = FieldHint;
 
@@ -153,7 +161,6 @@ export {
   MaterialProgressBar,
   MoneyFieldCell,
   ItemsMultiSelect,
-  Card,
   AvaterCell,
   MoreMenuItems,
 };
diff --git a/src/config/sidebarMenu.js b/src/config/sidebarMenu.js
index a847f8e52..1ea65f2a0 100644
--- a/src/config/sidebarMenu.js
+++ b/src/config/sidebarMenu.js
@@ -158,6 +158,10 @@ export default [
           ability: SaleReceiptAction.View,
         },
       },
+      {
+        text: <T id={'sidebar_credit_note'} />,
+        href: '/credit-notes',
+      },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
@@ -233,6 +237,10 @@ export default [
           ability: SaleReceiptAction.Create,
         },
       },
+      {
+        text: <T id={'credit_note.label.new_credit_note'} />,
+        href: '/credit-notes/new',
+      },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
@@ -254,6 +262,10 @@ export default [
           ability: BillAction.View,
         },
       },
+      {
+        text: <T id={'sidebar_vendor_credits'} />,
+        href: '/vendor-credits',
+      },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
@@ -298,6 +310,14 @@ export default [
           ability: BillAction.Create,
         },
       },
+      {
+        text: <T id={'vendor_credits.label.new_vendor_credit'} />,
+        href: '/vendor-credits/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
+      },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
@@ -408,10 +428,10 @@ export default [
       {
         text: <T id={'sidebar.transactions_locaking'} />,
         href: '/transactions-locking',
-        permission: {
-          subject: AbilitySubject.ManualJournal,
-          ability: ManualJournalAction.TransactionLocking,
-        },
+        // permission: {
+        //   subject: AbilitySubject.ManualJournal,
+        //   ability: ManualJournalAction.TransactionLocking,
+        // },
       },
       {
         text: <T id={'exchange_rate'} />,
diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js b/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js
index 595e9e3fb..15052ec05 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js
@@ -46,8 +46,7 @@ function ManualJournalsListProvider({ query, tableStateChanged, ...props }) {
     isEmptyStatus,
   };
 
-  const isPageLoading =
-    isManualJournalsLoading || isViewsLoading || isResourceMetaLoading;
+  const isPageLoading = isViewsLoading || isResourceMetaLoading;
 
   return (
     <DashboardInsider loading={isPageLoading} name={'manual-journals'}>
diff --git a/src/containers/Accounting/JournalsLanding/components.js b/src/containers/Accounting/JournalsLanding/components.js
index fab711e72..1384e3a87 100644
--- a/src/containers/Accounting/JournalsLanding/components.js
+++ b/src/containers/Accounting/JournalsLanding/components.js
@@ -101,13 +101,13 @@ export const StatusAccessor = (row) => {
   return (
     <Choose>
       <Choose.When condition={!!row.is_published}>
-        <Tag minimal={true}>
+        <Tag minimal={true} round={true}>
           <T id={'published'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
@@ -179,6 +179,7 @@ export const ActionsMenu = ({
         />
       </Can>
       <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_journal')}
           icon={<Icon icon="trash-16" iconSize={16} />}
diff --git a/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js b/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
index a95429551..469f722d1 100644
--- a/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
+++ b/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
@@ -151,6 +151,7 @@ export default function MakeJournalFloatingAction() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Accounting/MakeJournal/MakeJournalProvider.js b/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
index 2241ff28c..e382c1661 100644
--- a/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
+++ b/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
@@ -7,7 +7,8 @@ import {
   useJournal,
   useCreateJournal,
   useEditJournal,
-  useSettings
+  useSettings,
+  useSettingsManualJournals
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -40,7 +41,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isLoading: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});
diff --git a/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
new file mode 100644
index 000000000..740c7cd9e
--- /dev/null
+++ b/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteCreditNote } from 'hooks/query';
+import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from 'utils';
+
+/**
+ * Credit note delete alert.
+ */
+function CreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteCreditNoteMutate } =
+    useDeleteCreditNote();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditNoteDelete = () => {
+    deleteCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('credit-note-detail-drawer');
+      })
+      .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={handleCancelDeleteAlert}
+      onConfirm={handleConfirmCreditNoteDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(CreditNoteDeleteAlert);
diff --git a/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js b/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js
new file mode 100644
index 000000000..58b9e8554
--- /dev/null
+++ b/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenCreditNote } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note opened alert.
+ */
+function CreditNoteOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openCreditNoteMutate, isLoading } = useOpenCreditNote();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm credit note opened.
+  const handleAlertConfirm = () => {
+    openCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'credit_note_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CreditNoteOpenedAlert);
diff --git a/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js
new file mode 100644
index 000000000..7322fbf9d
--- /dev/null
+++ b/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js
@@ -0,0 +1,87 @@
+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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileCredit } from 'hooks/query';
+import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from 'utils';
+
+/**
+ * Reconcile credit note delete alert.
+ */
+function ReconcileCreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileCreditMutate } =
+    useDeleteReconcileCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmVendorCreditDelete = () => {
+    deleteReconcileCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_credit_note.alert.success_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={handleCancelDeleteAlert}
+      onConfirm={handleConfirmVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'reconcile_credit_note.once_you_delete_this_reconcile_credit_note'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileCreditNoteDeleteAlert);
diff --git a/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
new file mode 100644
index 000000000..da575c2af
--- /dev/null
+++ b/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
@@ -0,0 +1,76 @@
+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 { useDeleteRefundCreditNote } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit transactions delete alert
+ */
+function RefundCreditNoteDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundCreditMutate, isLoading } =
+    useDeleteRefundCreditNote();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundCreditDelete = () => {
+    deleteRefundCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('refund_credit_transactions.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-credit-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_credit_transactions.once_your_delete_this_refund_credit_note`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundCreditNoteDeleteAlert);
diff --git a/src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.js b/src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.js
new file mode 100644
index 000000000..d3e8ba0bc
--- /dev/null
+++ b/src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useCancelUnlockingPartialTransactions } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Cancel Unlocking partial transactions alerts.
+ */
+function CancelUnlockingPartialTarnsactions({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { module },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: cancelUnlockingPartial, isLoading } =
+    useCancelUnlockingPartialTransactions();
+
+  // Handle cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm.
+  const handleConfirm = () => {
+    const values = {
+      module: module,
+    };
+    cancelUnlockingPartial(values)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'unlocking_partial_transactions.alert.cancel_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'yes'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'unlocking_partial_transactions.alert.message'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelUnlockingPartialTarnsactions);
diff --git a/src/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert.js
new file mode 100644
index 000000000..bf493b47d
--- /dev/null
+++ b/src/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert.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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileVendorCredit } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Reconcile vendor credit delete alert.
+ */
+function ReconcileVendorCreditDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileVendorCreditMutate } =
+    useDeleteReconcileVendorCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmReconcileVendorCreditDelete = () => {
+    deleteReconcileVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_vendor_credit.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+        // closeDrawer('vendor-credit-detail-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmReconcileVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileVendorCreditDeleteAlert);
diff --git a/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
new file mode 100644
index 000000000..4e17eb2ec
--- /dev/null
+++ b/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
@@ -0,0 +1,78 @@
+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 { useDeleteRefundVendorCredit } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Refund Vendor transactions delete alert.
+ */
+function RefundVendorCreditDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundVendorCreditMutate, isLoading } =
+    useDeleteRefundVendorCredit();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundVendorCreditDelete = () => {
+    deleteRefundVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'refund_vendor_credit_transactions.alert.delete_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-vendor-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundVendorCreditDeleteAlert);
diff --git a/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
new file mode 100644
index 000000000..165b7000c
--- /dev/null
+++ b/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
@@ -0,0 +1,84 @@
+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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import { handleDeleteErrors } from '../../Purchases/CreditNotes/CreditNotesLanding/utils';
+import { useDeleteVendorCredit } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Vendor Credit delete alert.
+ */
+function VendorCreditDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteVendorCreditMutate } =
+    useDeleteVendorCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditDelete = () => {
+    deleteVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credits.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('vendor-credit-detail-drawer');
+      })
+      .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={handleCancelDeleteAlert}
+      onConfirm={handleConfirmCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'vendor_credits.note.once_delete_this_vendor_credit_note'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(VendorCreditDeleteAlert);
diff --git a/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js b/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js
new file mode 100644
index 000000000..56c0fe5bf
--- /dev/null
+++ b/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenVendorCredit } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Vendor credit opened alert.
+ */
+function VendorCreditOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openVendorCreditMutate, isLoading } =
+    useOpenVendorCredit();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm  vendor credit as opened.
+  const handleAlertConfirm = () => {
+    openVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credit_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'vendor_credit_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorCreditOpenedAlert);
diff --git a/src/containers/AlertsContainer/registered.js b/src/containers/AlertsContainer/registered.js
index d0e77fcfb..57d66288a 100644
--- a/src/containers/AlertsContainer/registered.js
+++ b/src/containers/AlertsContainer/registered.js
@@ -17,6 +17,9 @@ import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTr
 import UsersAlerts from '../Preferences/Users/UsersAlerts';
 import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
 import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
+import CreditNotesAlerts from '../Sales/CreditNotes/CreditNotesAlerts';
+import VendorCreditNotesAlerts from '../Purchases/CreditNotes/VendorCreditNotesAlerts';
+import TransactionsLockingAlerts from '../TransactionsLocking/TransactionsLockingAlerts'
 
 export default [
   ...AccountsAlerts,
@@ -38,4 +41,7 @@ export default [
   ...UsersAlerts,
   ...CurrenciesAlerts,
   ...RolesAlerts,
+  ...CreditNotesAlerts,
+  ...VendorCreditNotesAlerts,
+  ...TransactionsLockingAlerts
 ];
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
index f6ebecbe4..8b1621db2 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
@@ -18,7 +18,6 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from 'utils';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 /**
  * Account transactions data table.
@@ -129,8 +128,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
-        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
+        border-left: 1px solid #e6e6e6;
       }
     }
   }
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
index a41068f09..bdec0f6b0 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
@@ -14,7 +14,6 @@ import { curry } from 'lodash/fp';
 
 import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 function AccountSwitchButton() {
   const { currentAccount } = useAccountTransactionsContext();
@@ -23,7 +22,7 @@ function AccountSwitchButton() {
     <AccountSwitchButtonBase
       minimal={true}
       rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-    > 
+    >
       <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
     </AccountSwitchButtonBase>
   );
@@ -161,8 +160,7 @@ const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
   color: rgb(31, 50, 85);
-  ${whenLtr(`margin-left: 10px;`)}
-  ${whenRtl(`margin-right: 10px;`)}
+  margin-left: 10px;
 `;
 
 const AccountSwitchItemName = styled.div`
@@ -180,7 +178,6 @@ const AccountSwitchItemUpdatedAt = styled.div`
 
 const AccountSwitchButtonBase = styled(Button)`
   .bp3-button-text {
-    ${whenLtr(`margin-right: 5px;`)}
-    ${whenRtl(`margin-left: 5px;`)}
+    margin-right: 5px;
   }
 `;
diff --git a/src/containers/CashFlow/AccountTransactions/utils.js b/src/containers/CashFlow/AccountTransactions/utils.js
index 59f8b43ea..567422ea6 100644
--- a/src/containers/CashFlow/AccountTransactions/utils.js
+++ b/src/containers/CashFlow/AccountTransactions/utils.js
@@ -71,6 +71,14 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
       return openDrawer('payment-made-detail-drawer', {
         paymentMadeId: reference.reference_id,
       });
+    case 'RefundCreditNote':
+      return openDrawer('refund-credit-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
+    case 'RefundVendorCredit':
+      return openDrawer('refund-vendor-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
 
     default:
       return openDrawer('cashflow-transaction-drawer', {
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
index cf06161b9..dc6104046 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
@@ -271,6 +271,7 @@ function CashflowAccountContextMenu({
         </If>
       </Can>
       <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_account')}
           icon={<Icon icon="trash-16" iconSize={16} />}
diff --git a/src/containers/Customers/CustomersLanding/CustomersListProvider.js b/src/containers/Customers/CustomersLanding/CustomersListProvider.js
index cd38e45a5..6fcb66ad1 100644
--- a/src/containers/Customers/CustomersLanding/CustomersListProvider.js
+++ b/src/containers/Customers/CustomersLanding/CustomersListProvider.js
@@ -53,7 +53,7 @@ function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
+      loading={isViewsLoading || isResourceMetaLoading }
       name={'customers-list'}
     >
       <CustomersListContext.Provider value={state} {...props} />
diff --git a/src/containers/Customers/CustomersLanding/components.js b/src/containers/Customers/CustomersLanding/components.js
index 9d878bbf4..2eacc0103 100644
--- a/src/containers/Customers/CustomersLanding/components.js
+++ b/src/containers/Customers/CustomersLanding/components.js
@@ -63,6 +63,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_customer')}
diff --git a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js
index bd307ddbb..20f094ed1 100644
--- a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js
+++ b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js
@@ -1,7 +1,10 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import { MoneyFieldCell, DataTableEditable } from 'components';
+import styled from 'styled-components';
+
+import { DataTableEditable } from 'components';
+
 import { compose, updateTableCell } from 'utils';
+import { useAllocateLandedCostEntriesTableColumns } from './utils';
 
 /**
  * Allocate landed cost entries table.
@@ -11,42 +14,7 @@ export default function AllocateLandedCostEntriesTable({
   entries,
 }) {
   // Allocate landed cost entries table columns.
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('item'),
-        accessor: 'item.name',
-        disableSortBy: true,
-        width: '150',
-      },
-      {
-        Header: intl.get('quantity'),
-        accessor: 'quantity',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('rate'),
-        accessor: 'rate',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('amount'),
-        accessor: 'amount',
-        disableSortBy: true,
-        width: '100',
-      },
-      {
-        Header: intl.get('cost'),
-        accessor: 'cost',
-        width: '150',
-        Cell: MoneyFieldCell,
-        disableSortBy: true,
-      },
-    ],
-    [],
-  );
+  const columns = useAllocateLandedCostEntriesTableColumns();
 
   // Handle update data.
   const handleUpdateData = React.useCallback(
@@ -60,7 +28,7 @@ export default function AllocateLandedCostEntriesTable({
   );
 
   return (
-    <DataTableEditable
+    <AllocateLandeedCostEntriesEditableTable
       columns={columns}
       data={entries}
       payload={{
@@ -70,3 +38,18 @@ export default function AllocateLandedCostEntriesTable({
     />
   );
 }
+
+export const AllocateLandeedCostEntriesEditableTable = styled(
+  DataTableEditable,
+)`
+  .table {
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody .tr .td {
+      padding: 0.25rem;
+    }
+  }
+`;
diff --git a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js
index de5b7e16e..121f86aa5 100644
--- a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js
+++ b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js
@@ -12,12 +12,18 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+/**
+ * Allocate landed cost floating actions.
+ * @returns {React.JSX}
+ */
 function AllocateLandedCostFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
+
+  // Allocate landed cost dialog context.
   const { dialogName, costTransactionEntry, formattedUnallocatedCostAmount } =
     useAllocateLandedConstDialogContext();
 
@@ -27,7 +33,7 @@ function AllocateLandedCostFloatingActions({
   };
 
   return (
-    <DialogFooter>
+    <AllocateDialogFooter>
       <DialogFooterActions alignment={'left'}>
         {costTransactionEntry && (
           <UnallocatedAmount>
@@ -43,19 +49,23 @@ function AllocateLandedCostFloatingActions({
         </Button>
         <Button
           intent={Intent.PRIMARY}
-          style={{ minWidth: '100px' }}
+          style={{ minWidth: '95px' }}
           type="submit"
           loading={isSubmitting}
         >
           {<T id={'save'} />}
         </Button>
       </DialogFooterActions>
-    </DialogFooter>
+    </AllocateDialogFooter>
   );
 }
 
 export default compose(withDialogActions)(AllocateLandedCostFloatingActions);
 
+const AllocateDialogFooter = styled(DialogFooter)`
+  display: flex;
+`;
+
 const UnallocatedAmount = styled.div`
   color: #3f5278;
   align-self: center;
diff --git a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js
index 5cb1a2fa2..e4ac664cd 100644
--- a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js
+++ b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js
@@ -11,21 +11,7 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
 import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose, transformToForm } from 'utils';
-
-const defaultInitialItem = {
-  entry_id: '',
-  cost: '',
-};
-
-// Default form initial values.
-const defaultInitialValues = {
-  transaction_type: 'Bill',
-  transaction_id: '',
-  transaction_entry_id: '',
-  amount: '',
-  allocation_method: 'quantity',
-  items: [defaultInitialItem],
-};
+import { defaultInitialValues } from './utils';
 
 /**
  * Allocate landed cost form.
@@ -34,13 +20,8 @@ function AllocateLandedCostForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const {
-    dialogName,
-    bill,
-    billId,
-    createLandedCostMutate,
-    unallocatedCostAmount,
-  } = useAllocateLandedConstDialogContext();
+  const { dialogName, bill, billId, createLandedCostMutate } =
+    useAllocateLandedConstDialogContext();
 
   // Initial form values.
   const initialValues = {
@@ -51,7 +32,6 @@ function AllocateLandedCostForm({
       cost: '',
     })),
   };
-
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
     setSubmitting(true);
@@ -78,20 +58,33 @@ function AllocateLandedCostForm({
       setSubmitting(false);
       closeDialog(dialogName);
     };
-
     // Handle the request error.
-    const onError = () => {
+    const onError = (res) => {
+      const { errors } = res.response.data;
       setSubmitting(false);
-      AppToaster.show({
-        message: 'Something went wrong!',
-        intent: Intent.DANGER,
-      });
+
+      if (
+        errors.some(
+          (e) => e.type === 'COST_AMOUNT_BIGGER_THAN_UNALLOCATED_AMOUNT',
+        )
+      ) {
+        AppToaster.show({
+          message:
+            'The total located cost is bigger than the transaction line.',
+          intent: Intent.DANGER,
+        });
+      } else {
+        AppToaster.show({
+          message: 'Something went wrong!',
+          intent: Intent.DANGER,
+        });
+      }
     };
     createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
   };
 
   // Computed validation schema.
-  const validationSchema = AllocateLandedCostFormSchema(unallocatedCostAmount);
+  const validationSchema = AllocateLandedCostFormSchema();
 
   return (
     <Formik
diff --git a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js
index bce8ca648..af1df428a 100644
--- a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js
+++ b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js
@@ -1,19 +1,14 @@
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
-export const AllocateLandedCostFormSchema = (maxAmount) =>
+export const AllocateLandedCostFormSchema = () =>
   Yup.object().shape({
-    transaction_type: Yup.string()
-      .required()
-      .label(intl.get('transaction_type')),
-    transaction_id: Yup.string()
-      .required()
-      .label(intl.get('transaction_number')),
-    transaction_entry_id: Yup.string()
-      .required()
-      .label(intl.get('transaction_line')),
-    amount: Yup.number().max(maxAmount).label(intl.get('amount')),
-    allocation_method: Yup.string().required().trim(),
+    transaction_type: Yup.string().label(intl.get('transaction_type')),
+    transaction_date: Yup.date().label(intl.get('transaction_date')),
+    transaction_id: Yup.string().label(intl.get('transaction_number')),
+    transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
+    amount: Yup.number().label(intl.get('amount')),
+    allocation_method: Yup.string().trim(),
     items: Yup.array().of(
       Yup.object().shape({
         entry_id: Yup.number().nullable(),
diff --git a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js
index d71ebab2c..5dec5e145 100644
--- a/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js
+++ b/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js
@@ -103,8 +103,10 @@ export default function AllocateLandedCostFormFields() {
               selectedItem={value}
               selectedItemProp={'id'}
               textProp={'name'}
-              labelProp={'id'}
-              defaultText={intl.get('Select transaction')}
+              labelProp={'formatted_unallocated_cost_amount'}
+              defaultText={intl.get(
+                'landed_cost.dialog.label_select_transaction',
+              )}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -131,16 +133,17 @@ export default function AllocateLandedCostFormFields() {
             >
               <ListSelect
                 items={costTransactionEntries}
-                onItemSelect={({ id, unallocated_cost_amount }) => {
+                onItemSelect={(entry) => {
+                  const { id, unallocated_cost_amount: unallocatedAmount } =
+                    entry;
                   const { items, allocation_method } = form.values;
 
+                  form.setFieldValue('amount', unallocatedAmount);
                   form.setFieldValue('transaction_entry_id', id);
-                  form.setFieldValue('amount', unallocated_cost_amount);
-
                   form.setFieldValue(
                     'items',
                     allocateCostToEntries(
-                      unallocated_cost_amount,
+                      unallocatedAmount,
                       allocation_method,
                       items,
                     ),
@@ -150,7 +153,10 @@ export default function AllocateLandedCostFormFields() {
                 selectedItem={value}
                 selectedItemProp={'id'}
                 textProp={'name'}
-                defaultText={intl.get('Select transaction entry')}
+                labelProp={'formatted_unallocated_cost_amount'}
+                defaultText={intl.get(
+                  'landed_cost.dialog.label_select_transaction_entry',
+                )}
                 popoverProps={{ minimal: true }}
               />
             </FormGroup>
diff --git a/src/containers/Dialogs/AllocateLandedCostDialog/utils.js b/src/containers/Dialogs/AllocateLandedCostDialog/utils.js
index a19fff723..1cfd6775a 100644
--- a/src/containers/Dialogs/AllocateLandedCostDialog/utils.js
+++ b/src/containers/Dialogs/AllocateLandedCostDialog/utils.js
@@ -1,13 +1,25 @@
+import React from 'react';
 import { sumBy, round } from 'lodash';
 import * as R from 'ramda';
-import { defaultFastFieldShouldUpdate } from 'utils';
+import intl from 'react-intl-universal';
 
-/**
- * Retrieve the landed cost transaction by the given id.
- */
-export function getCostTransactionById(id, transactions) {
-  return transactions.find((trans) => trans.id === id);
-}
+import { defaultFastFieldShouldUpdate } from 'utils';
+import { MoneyFieldCell } from 'components';
+
+export const defaultInitialItem = {
+  entry_id: '',
+  cost: '',
+};
+
+// Default form initial values.
+export const defaultInitialValues = {
+  transaction_type: 'Bill',
+  transaction_id: '',
+  transaction_entry_id: '',
+  amount: '',
+  allocation_method: 'quantity',
+  items: [defaultInitialItem],
+};
 
 /**
  * Retrieve transaction entries of the given transaction id.
@@ -17,10 +29,23 @@ export function getEntriesByTransactionId(transactions, id) {
   return transaction ? transaction.entries : [];
 }
 
+/**
+ *
+ * @param {*} transaction
+ * @param {*} transactionEntryId
+ * @returns
+ */
 export function getTransactionEntryById(transaction, transactionEntryId) {
   return transaction.entries.find((entry) => entry.id === transactionEntryId);
 }
 
+/**
+ *
+ * @param {*} total
+ * @param {*} allocateType
+ * @param {*} entries
+ * @returns
+ */
 export function allocateCostToEntries(total, allocateType, entries) {
   return R.compose(
     R.when(
@@ -43,12 +68,12 @@ export function allocateCostToEntries(total, allocateType, entries) {
 export function allocateCostByValue(total, entries) {
   const totalAmount = sumBy(entries, 'amount');
 
-  const _entries = entries.map((entry) => ({
+  const entriesMapped = entries.map((entry) => ({
     ...entry,
     percentageOfValue: entry.amount / totalAmount,
   }));
 
-  return _entries.map((entry) => ({
+  return entriesMapped.map((entry) => ({
     ...entry,
     cost: round(entry.percentageOfValue * total, 2),
   }));
@@ -74,6 +99,13 @@ export function allocateCostByQuantity(total, entries) {
   }));
 }
 
+/**
+ * Retrieve the landed cost transaction by the given id.
+ */
+export function getCostTransactionById(id, transactions) {
+  return transactions.find((trans) => trans.id === id);
+}
+
 /**
  * Detarmines the transactions selet field when should update.
  */
@@ -84,7 +116,55 @@ export function transactionsSelectShouldUpdate(newProps, oldProps) {
   );
 }
 
-
+/**
+ *
+ * @param {*} entries
+ * @returns
+ */
 export function resetAllocatedCostEntries(entries) {
   return entries.map((entry) => ({ ...entry, cost: 0 }));
-}
\ No newline at end of file
+}
+
+/**
+ * Retrieves allocate landed cost entries table columns.
+ */
+export const useAllocateLandedCostEntriesTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item.name',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+        align: 'right',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.js b/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.js
new file mode 100644
index 000000000..ff1d56f16
--- /dev/null
+++ b/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useSaveSettings } from 'hooks/query';
+
+import { CreditNoteNumberDialogProvider } from './CreditNoteNumberDialogProvider';
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import { compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+/**
+ * credit note number dialog content
+ */
+function CreditNoteNumberDialogContent({
+  // #ownProps
+  initialValues,
+  onConfirm,
+
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: saveSettings } = useSaveSettings();
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Handle the form success.
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('credit-number-form');
+      onConfirm(values);
+    };
+    // Handle the form errors.
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'credit_note');
+
+    // Save the settings.
+    saveSettings({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  // Handle the dialog close.
+  const handleClose = () => {
+    closeDialog('credit-number-form');
+  };
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('credit_note.auto_increment.auto')
+      : intl.get('credit_note.auto_increment.manually');
+
+  return (
+    <CreditNoteNumberDialogProvider>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        description={description}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+      />
+    </CreditNoteNumberDialogProvider>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ creditNoteSettings }) => ({
+    autoIncrement: creditNoteSettings?.autoIncrement,
+    nextNumber: creditNoteSettings?.nextNumber,
+    numberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(CreditNoteNumberDialogContent);
diff --git a/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogProvider.js b/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogProvider.js
new file mode 100644
index 000000000..94daf467f
--- /dev/null
+++ b/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogProvider.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useSettingsCreditNotes } from 'hooks/query';
+
+const CreditNoteNumberDialogContext = React.createContext();
+
+/**
+ *Credit Note number dialog provider
+ */
+function CreditNoteNumberDialogProvider({ query, ...props }) {
+  const { isLoading: isSettingsLoading } = useSettingsCreditNotes();
+
+  // Provider payload.
+  const provider = {
+    isSettingsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <CreditNoteNumberDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCreditNoteNumberDialogContext = () =>
+  React.useContext(CreditNoteNumberDialogContext);
+
+export { CreditNoteNumberDialogProvider, useCreditNoteNumberDialogContext };
diff --git a/src/containers/Dialogs/CreditNoteNumberDialog/index.js b/src/containers/Dialogs/CreditNoteNumberDialog/index.js
new file mode 100644
index 000000000..c1786c324
--- /dev/null
+++ b/src/containers/Dialogs/CreditNoteNumberDialog/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose, saveInvoke } from 'utils';
+
+const CreditNoteNumberDialogContent = React.lazy(() =>
+  import('./CreditNoteNumberDialogContent'),
+);
+
+/**
+ * Credit note number dialog.
+ */
+function CreditNoteNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      title={<T id={'credit_note_number_settings'} />}
+      name={dialogName}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <CreditNoteNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(CreditNoteNumberDialog);
diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
index c66fe492f..a09bc38ed 100644
--- a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
+++ b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
@@ -24,7 +24,7 @@ function InviteUserFormContent({
   const handleClose = () => {
     closeDialog(dialogName);
   };
-  console.log(roles, 'XX');
+
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
@@ -49,7 +49,7 @@ function InviteUserFormContent({
         <FastField name={'role_id'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
-              label={<T id={'roles.label.role_name'} />}
+              label={<T id={'invite_user.label.role_name'} />}
               labelInfo={<FieldRequiredHint />}
               helperText={<ErrorMessage name="role_id" />}
               className={classNames(CLASSES.FILL, 'form-group--role_name')}
diff --git a/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsDialogContent.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsDialogContent.js
new file mode 100644
index 000000000..86c880e4c
--- /dev/null
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsDialogContent.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { LockingTransactionsFormProvider } from './LockingTransactionsFormProvider';
+import LockingTransactionsForm from './LockingTransactionsForm';
+
+/**
+ * Locking transactions dialog content.
+ */
+export default function LockingTransactionsDialogContent({
+  // #ownProps
+  dialogName,
+  moduleName,
+  isEnabled,
+}) {
+
+  return (
+    <LockingTransactionsFormProvider
+      isEnabled={isEnabled}
+      moduleName={moduleName}
+      dialogName={dialogName}
+    >
+      <LockingTransactionsForm />
+    </LockingTransactionsFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.js
new file mode 100644
index 000000000..d33226099
--- /dev/null
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.js
@@ -0,0 +1,89 @@
+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 { CreateLockingTransactionsFormSchema } from './LockingTransactionsForm.schema';
+
+import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
+import LockingTransactionsFormContent from './LockingTransactionsFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  module: '',
+  lock_to_date: moment(new Date()).format('YYYY-MM-DD'),
+  reason: '',
+};
+
+/**
+ * Locking Transactions Form.
+ */
+function LockingTransactionsForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    moduleName,
+    transactionLocking,
+    isEnabled,
+    createLockingTransactionMutate,
+  } = useLockingTransactionsContext();
+
+  // Initial form values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...(isEnabled
+        ? {
+            ...transformToForm(transactionLocking, defaultInitialValues),
+            module: moduleName,
+          }
+        : {
+            ...defaultInitialValues,
+            module: moduleName,
+          }),
+    }),
+    [isEnabled],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('locking_transactions.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    createLockingTransactionMutate(values).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateLockingTransactionsFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={LockingTransactionsFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(LockingTransactionsForm);
diff --git a/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.schema.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.schema.js
new file mode 100644
index 000000000..d2f8199f9
--- /dev/null
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.schema.js
@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  lock_to_date: Yup.date().required().label(intl.get('date')),
+  module: Yup.string().required(),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+});
+export const CreateLockingTransactionsFormSchema = Schema;
diff --git a/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormContent.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormContent.js
new file mode 100644
index 000000000..c7e46a26c
--- /dev/null
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import LockingTransactionsFormFields from './LockingTransactionsFormFields';
+import LockingTransactionsFormFloatingActions from './LockingTransactionsFormFloatingActions';
+
+/**
+ * locking Transactions form content.
+ */
+export default function LockingTransactionsFormContent() {
+  return (
+    <Form>
+      <LockingTransactionsFormFields />
+      <LockingTransactionsFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js
similarity index 75%
rename from src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js
rename to src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js
index bede9d2fc..1bcac265a 100644
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js
@@ -14,28 +14,28 @@ import {
 } from 'utils';
 
 /**
- * Transactions locking form fields.
+ *  locking Transactions form fields.
  */
-export default function TransactionsLockingFormFields() {
-  const dateFieldRef = useAutofocus();
+export default function LockingTransactionsFormFields() {
+  const reasonFieldRef = useAutofocus();
 
   return (
     <div className={Classes.DIALOG_BODY}>
-      {/*------------ Date -----------*/}
-      <FastField name={'date'}>
+      {/*------------  Locking Date -----------*/}
+      <FastField name={'lock_to_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'date'} />}
+            label={<T id={'locking_transactions.dialog.locking_date'} />}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
+            helperText={<ErrorMessage name="lock_to_date" />}
             minimal={true}
             className={classNames(CLASSES.FILL, 'form-group--date')}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
               onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('date', formattedDate);
+                form.setFieldValue('lock_to_date', formattedDate);
               })}
               value={tansformDateValue(value)}
               popoverProps={{
@@ -43,16 +43,16 @@ export default function TransactionsLockingFormFields() {
                 minimal: true,
               }}
               intent={inputIntent({ error, touched })}
-              inputRef={(ref) => (dateFieldRef.current = ref)}
             />
           </FormGroup>
         )}
       </FastField>
-      {/*------------  reasons -----------*/}
+
+      {/*------------ Locking  Reason -----------*/}
       <FastField name={'reason'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'reason'} />}
+            label={<T id={'locking_transactions.dialog.reason'} />}
             labelInfo={<FieldRequiredHint />}
             className={'form-group--reason'}
             intent={inputIntent({ error, touched })}
@@ -62,6 +62,7 @@ export default function TransactionsLockingFormFields() {
               growVertically={true}
               large={true}
               intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
               {...field}
             />
           </FormGroup>
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFloatingActions.js
similarity index 62%
rename from src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js
rename to src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFloatingActions.js
index 51c29dedc..b76ee054e 100644
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFloatingActions.js
@@ -3,21 +3,21 @@ import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'components';
 
-import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
+import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
 /**
- * Transactions locking floating actions.
+ * locking Transactions floating actions.
  */
-function TransactionsLockingFloatingActions({
+function LockingTransactionsFormFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
-  const { dialogName } = useTransactionLockingContext();
+  const { dialogName } = useLockingTransactionsContext();
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
@@ -27,24 +27,22 @@ function TransactionsLockingFloatingActions({
   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' }}
+          style={{ minWidth: '95px' }}
           type="submit"
+          loading={isSubmitting}
         >
-          {<T id={'submit'} />}
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
         </Button>
       </div>
     </div>
   );
 }
 
-export default compose(withDialogActions)(TransactionsLockingFloatingActions);
+export default compose(withDialogActions)(
+  LockingTransactionsFormFloatingActions,
+);
diff --git a/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormProvider.js b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormProvider.js
new file mode 100644
index 000000000..4c70e4d50
--- /dev/null
+++ b/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormProvider.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+  useCreateLockingTransactoin,
+  useEditTransactionsLocking,
+} from 'hooks/query';
+
+const LockingTransactionsContext = React.createContext();
+
+/**
+ * Locking transactions form provider.
+ */
+function LockingTransactionsFormProvider({
+  moduleName,
+  isEnabled,
+  dialogName,
+  ...props
+}) {
+  // Create locking transactions mutations.
+  const { mutateAsync: createLockingTransactionMutate } =
+    useCreateLockingTransactoin();
+
+  const { data: transactionLocking, isLoading: isTransactionsLockingLoading } =
+    useEditTransactionsLocking(moduleName, {
+      enabled: !!isEnabled,
+    });
+
+  // State provider.
+  const provider = {
+    dialogName,
+    moduleName,
+    createLockingTransactionMutate,
+    transactionLocking,
+    isEnabled,
+  };
+  return (
+    <DialogContent isLoading={isTransactionsLockingLoading}>
+      <LockingTransactionsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useLockingTransactionsContext = () =>
+  React.useContext(LockingTransactionsContext);
+
+export { LockingTransactionsFormProvider, useLockingTransactionsContext };
diff --git a/src/containers/Dialogs/LockingTransactionsDialog/index.js b/src/containers/Dialogs/LockingTransactionsDialog/index.js
new file mode 100644
index 000000000..d4b360653
--- /dev/null
+++ b/src/containers/Dialogs/LockingTransactionsDialog/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const LockingTransactionsDialogContent = React.lazy(() =>
+  import('./LockingTransactionsDialogContent'),
+);
+
+/**
+ * Locking Transactions dialog
+ */
+function LockingTransactionsDialog({
+  dialogName,
+  payload: { module, isEnabled },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      autoFocus={true}
+      title={<T id={'locking_transactions.dialog.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--transaction--locking'}
+    >
+      <DialogSuspense>
+        <LockingTransactionsDialogContent
+          moduleName={module}
+          dialogName={dialogName}
+          isEnabled={isEnabled}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(LockingTransactionsDialog);
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
index 39dae9941..bb5676293 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
@@ -86,7 +86,7 @@ function MoneyInForm({
         });
       })
       .finally(() => {
-        setSubmitting(true);
+        setSubmitting(false);
       });
   };
 
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
index 8b7f537c7..7d6436aaa 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
@@ -86,7 +86,7 @@ function MoneyOutForm({
         });
       })
       .finally(() => {
-        setSubmitting(true);
+        setSubmitting(false);
       });
   };
   return (
diff --git a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js
index 1b2a68b49..5b5e7637a 100644
--- a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js
+++ b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js
@@ -106,6 +106,6 @@ export default compose(
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
+    preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
   })),
 )(QuickPaymentReceiveForm);
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteDialogContent.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteDialogContent.js
new file mode 100644
index 000000000..62b18d718
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteDialogContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ReconcileCreditNoteFormProvider } from './ReconcileCreditNoteFormProvider';
+import ReconcileCreditNoteForm from './ReconcileCreditNoteForm';
+
+/**
+ * Reconcile credit note dialog content.
+ */
+export default function ReconcileCreditNoteDialogContent({
+  // #ownProps
+  dialogName,
+  creditNoteId,
+}) {
+  return (
+    <ReconcileCreditNoteFormProvider
+      creditNoteId={creditNoteId}
+      dialogName={dialogName}
+    >
+      <ReconcileCreditNoteForm />
+    </ReconcileCreditNoteFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js
new file mode 100644
index 000000000..b9ae7cb86
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import { defaultTo } from 'lodash';
+
+import { DataTableEditable } from 'components';
+import { compose, updateTableCell } from 'utils';
+import { useDeepCompareEffect } from 'hooks/utils';
+import {
+  useReconcileCreditNoteTableColumns,
+  maxAmountCreditFromRemaining,
+  maxCreditNoteAmountEntries,
+} from './utils';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+
+/**
+ * Reconcile credit note entries table.
+ */
+export default function ReconcileCreditNoteEntriesTable({
+  onUpdateData,
+  entries,
+  errors,
+}) {
+  // Retrieve the reconcile credit note table columns.
+  const columns = useReconcileCreditNoteTableColumns();
+
+  // Reconcile credit note context provider.
+  const {
+    creditNote: { credits_remaining },
+  } = useReconcileCreditNoteContext();
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+  // Deep compare entries to modify new entries.
+  useDeepCompareEffect(() => {
+    const newRows = compose(
+      maxCreditNoteAmountEntries(defaultTo(credits_remaining, 0)),
+      maxAmountCreditFromRemaining,
+    )(entries);
+
+    onUpdateData(newRows);
+  }, [entries]);
+
+  return (
+    <ReconcileCreditNoteEditableTable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: errors || [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}
+
+export const ReconcileCreditNoteEditableTable = styled(DataTableEditable)`
+  .table {
+    max-height: 400px;
+    overflow: auto;
+
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 2px 4px;
+        min-height: 38px;
+      }
+    }
+  }
+`;
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.js
new file mode 100644
index 000000000..5368cf3e5
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import '../../../style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss';
+import { AppToaster } from 'components';
+import { CreateReconcileCreditNoteFormSchema } from './ReconcileCreditNoteForm.schema';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+import ReconcileCreditNoteFormContent from './ReconcileCreditNoteFormContent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose, transformToForm } from 'utils';
+import { transformErrors } from './utils';
+
+// Default form initial values.
+const defaultInitialValues = {
+  entries: [
+    {
+      invoice_id: '',
+      amount: '',
+    },
+  ],
+};
+
+/**
+ * Reconcile credit note form.
+ */
+function ReconcileCreditNoteForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    creditNoteId,
+    reconcileCreditNotes,
+    createReconcileCreditNoteMutate,
+  } = useReconcileCreditNoteContext();
+
+  // Initial form values.
+  const initialValues = {
+    entries: reconcileCreditNotes.map((entry) => ({
+      ...entry,
+      invoice_id: entry.id,
+      amount: '',
+    })),
+  };
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Filters the entries.
+    const entries = values.entries
+      .filter((entry) => entry.invoice_id && entry.amount)
+      .map((entry) => transformToForm(entry, defaultInitialValues.entries[0]));
+
+    const form = {
+      ...values,
+      entries: entries,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('reconcile_credit_note.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      closeDialog(dialogName);
+    };
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
+    };
+
+    createReconcileCreditNoteMutate([creditNoteId, form])
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateReconcileCreditNoteFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={ReconcileCreditNoteFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(ReconcileCreditNoteForm);
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.schema.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.schema.js
new file mode 100644
index 000000000..a6cd9dc09
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.schema.js
@@ -0,0 +1,12 @@
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  entries: Yup.array().of(
+    Yup.object().shape({
+      invoice_id: Yup.number().required(),
+      amount: Yup.number().nullable(),
+    }),
+  ),
+});
+
+export const CreateReconcileCreditNoteFormSchema = Schema;
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormContent.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormContent.js
new file mode 100644
index 000000000..1c1e12d21
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormContent.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Form } from 'formik';
+import { Choose } from 'components';
+
+import ReconcileCreditNoteFormFields from './ReconcileCreditNoteFormFields';
+import ReconcileCreditNoteFormFloatingActions from './ReconcileCreditNoteFormFloatingActions';
+import { EmptyStatuCallout } from './utils';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+
+/**
+ * Reconcile credit note form content.
+ */
+export default function ReconcileCreditNoteFormContent() {
+  const { isEmptyStatus } = useReconcileCreditNoteContext();
+  return (
+    <Choose>
+      <Choose.When condition={isEmptyStatus}>
+        <EmptyStatuCallout />
+      </Choose.When>
+      <Choose.Otherwise>
+        <Form>
+          <ReconcileCreditNoteFormFields />
+          <ReconcileCreditNoteFormFloatingActions />
+        </Form>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js
new file mode 100644
index 000000000..8820c75dd
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import { FastField, useFormikContext } from 'formik';
+import { Classes } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { subtract } from 'lodash';
+import { getEntriesTotal } from 'containers/Entries/utils';
+import ReconcileCreditNoteEntriesTable from './ReconcileCreditNoteEntriesTable';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+import { formattedAmount } from 'utils';
+
+/**
+ * Reconcile credit note form fields.
+ */
+export default function ReconcileCreditNoteFormFields() {
+  const {
+    creditNote: { formatted_credits_remaining },
+  } = useReconcileCreditNoteContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <CreditRemainingRoot>
+        <T id={'reconcile_credit_note.dialog.credits_balance'} />
+
+        <CreditRemainingBalance>
+          {formatted_credits_remaining}
+        </CreditRemainingBalance>
+      </CreditRemainingRoot>
+
+      {/*------------ Reconcile credit entries table -----------*/}
+      <FastField name={'entries'}>
+        {({ form: { setFieldValue }, field: { value }, meta: { error } }) => (
+          <ReconcileCreditNoteEntriesTable
+            entries={value}
+            errors={error}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+          />
+        )}
+      </FastField>
+
+      <ReconcileCreditNoteTotalLines />
+    </div>
+  );
+}
+
+/**
+ * Reconcile credit note total lines.
+ * @returns {React.JSX}
+ */
+function ReconcileCreditNoteTotalLines() {
+  // Reconcile credit note context.
+  const {
+    creditNote: { credits_remaining, currency_code },
+  } = useReconcileCreditNoteContext();
+
+  // Formik form context.
+  const { values } = useFormikContext();
+
+  // Calculate the total amount of credit entries.
+  const totalAmount = React.useMemo(
+    () => getEntriesTotal(values.entries),
+    [values.entries],
+  );
+  // Calculate the total amount of credit remaining.
+  const creditsRemaining = subtract(credits_remaining, totalAmount);
+
+  return (
+    <ReconcileCreditNoteTotalLinesRoot>
+      <ReconcileTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={
+            <T id={'reconcile_credit_note.dialog.total_amount_to_credit'} />
+          }
+          value={formattedAmount(totalAmount, currency_code)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'reconcile_credit_note.dialog.remaining_credits'} />}
+          value={formattedAmount(creditsRemaining, currency_code)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </ReconcileTotalLines>
+    </ReconcileCreditNoteTotalLinesRoot>
+  );
+}
+
+export const CreditRemainingRoot = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 15px;
+`;
+
+export const CreditRemainingBalance = styled.span`
+  font-weight: 600;
+  color: #343463;
+  margin-left: 5px;
+`;
+
+export const ReconcileCreditNoteTotalLinesRoot = styled.div`
+  margin-top: 15px;
+`;
+
+export const ReconcileTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js
new file mode 100644
index 000000000..4d3c4f203
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Reconcile credit note floating actions.
+ */
+function ReconcileCreditNoteFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useReconcileCreditNoteContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '95px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(
+  ReconcileCreditNoteFormFloatingActions,
+);
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormProvider.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormProvider.js
new file mode 100644
index 000000000..92cc90bd1
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormProvider.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+  useCreditNote,
+  useReconcileCreditNote,
+  useCreateReconcileCreditNote,
+} from 'hooks/query';
+import { isEmpty } from 'lodash';
+
+const ReconcileCreditNoteDialogContext = React.createContext();
+
+/**
+ * Reconcile credit note provider.
+ */
+function ReconcileCreditNoteFormProvider({
+  creditNoteId,
+  dialogName,
+  ...props
+}) {
+  // Handle fetch reconcile credit note details.
+  const { isLoading: isReconcileCreditLoading, data: reconcileCreditNotes } =
+    useReconcileCreditNote(creditNoteId, {
+      enabled: !!creditNoteId,
+    });
+
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+
+  // Create reconcile credit note mutations.
+  const { mutateAsync: createReconcileCreditNoteMutate } =
+    useCreateReconcileCreditNote();
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(reconcileCreditNotes);
+
+  // provider payload.
+  const provider = {
+    dialogName,
+    reconcileCreditNotes,
+    createReconcileCreditNoteMutate,
+    isEmptyStatus,
+    creditNote,
+    creditNoteId,
+  };
+
+  return (
+    <DialogContent
+      isLoading={isReconcileCreditLoading || isCreditNoteLoading}
+      name={'reconcile-credit-note'}
+    >
+      <ReconcileCreditNoteDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useReconcileCreditNoteContext = () =>
+  React.useContext(ReconcileCreditNoteDialogContext);
+
+export { ReconcileCreditNoteFormProvider, useReconcileCreditNoteContext };
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/index.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/index.js
new file mode 100644
index 000000000..217d93b32
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ReconcileCreditNoteDialogContent = React.lazy(() =>
+  import('./ReconcileCreditNoteDialogContent'),
+);
+
+/**
+ * Reconcile credit note dialog.
+ */
+function ReconcileCreditNoteDialog({
+  dialogName,
+  payload: { creditNoteId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'reconcile_credit_note.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className="dialog--reconcile-credit-form"
+    >
+      <DialogSuspense>
+        <ReconcileCreditNoteDialogContent
+          creditNoteId={creditNoteId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ReconcileCreditNoteDialog);
diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js
new file mode 100644
index 000000000..100322f1b
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Callout, Intent, Classes } from '@blueprintjs/core';
+import * as R from 'ramda';
+import clsx from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { MoneyFieldCell, FormatDateCell, AppToaster, T } from 'components';
+
+export const transformErrors = (errors, { setErrors }) => {
+  if (errors.some((e) => e.type === 'INVOICES_HAS_NO_REMAINING_AMOUNT')) {
+    AppToaster.show({
+      message: 'The amount credit from the given invoice has no remaining amount.',
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find((error) => error.type === 'CREDIT_NOTE_HAS_NO_REMAINING_AMOUNT')
+  ) {
+    AppToaster.show({
+      message: 'The total amount bigger than from remaining credit note amount',
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+/**
+ * Empty status callout.
+ * @returns {React.JSX}
+ */
+export function EmptyStatuCallout() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Callout intent={Intent.PRIMARY}>
+        <p>
+          <T
+            id={'reconcile_credit_note.alert.there_is_no_open_sale_invoices'}
+          />
+        </p>
+      </Callout>
+    </div>
+  );
+}
+
+/**
+ * Retrieves reconcile credit note table columns.
+ * @returns
+ */
+export const useReconcileCreditNoteTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('invoice_date'),
+        accessor: 'formatted_invoice_date',
+        Cell: FormatDateCell,
+        disableSortBy: true,
+        width: '120',
+      },
+      {
+        Header: intl.get('invoice_no'),
+        accessor: 'invoice_no',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        Header: intl.get('reconcile_credit_note.column.remaining_amount'),
+        accessor: 'formatted_due_amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '150',
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        Header: intl.get('reconcile_credit_note.column.amount_to_credit'),
+        accessor: 'amount',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: '150',
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Sets max credit amount from sale invoicue balance.
+ */
+export const maxAmountCreditFromRemaining = (entries) => {
+  return entries.map((entry) => ({
+    ...entry,
+    amount: entry.amount ? Math.min(entry.balance, entry.amount) : '',
+  }));
+};
+
+/**
+ * Adjusts entries amount based on the given total.
+ */
+export const maxCreditNoteAmountEntries = R.curry((total, entries) => {
+  let balance = total;
+
+  return entries.map((entry) => {
+    const oldBalance = balance;
+    balance -= entry.amount ? entry.amount : 0;
+
+    return {
+      ...entry,
+      amount: entry.amount
+        ? Math.max(Math.min(entry.amount, oldBalance), 0)
+        : '',
+    };
+  });
+});
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditDialogContent.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditDialogContent.js
new file mode 100644
index 000000000..651b33756
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditDialogContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReconcileVendorCreditFormProvider } from './ReconcileVendorCreditFormProvider';
+import ReconcileVendorCreditForm from './ReconcileVendorCreditForm';
+
+export default function ReconcileVendorCreditDialogContent({
+  // #ownProps
+  dialogName,
+  vendorCreditId,
+}) {
+  return (
+    <ReconcileVendorCreditFormProvider
+      vendorCreditId={vendorCreditId}
+      dialogName={dialogName}
+    >
+      <ReconcileVendorCreditForm />
+    </ReconcileVendorCreditFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js
new file mode 100644
index 000000000..0155374ff
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import * as R from 'ramda';
+import { defaultTo } from 'lodash';
+
+import { useDeepCompareEffect } from 'hooks/utils';
+
+import { DataTableEditable } from 'components';
+import { compose, updateTableCell } from 'utils';
+import {
+  useReconcileVendorCreditTableColumns,
+  maxAmountCreditFromRemaining,
+} from './utils';
+import { maxCreditNoteAmountEntries } from '../ReconcileCreditNoteDialog/utils';
+import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
+
+/**
+ * Reconcile vendor credit entries table.
+ */
+export default function ReconcileVendorCreditEntriesTable({
+  onUpdateData,
+  entries,
+  errors,
+}) {
+  // Reconcile vendor credit table columns.
+  const columns = useReconcileVendorCreditTableColumns();
+
+  // Reconcile vendor credit context.
+  const {
+    vendorCredit: { credits_remaining },
+  } = useReconcileVendorCreditContext();
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  // Watches deeply entries to compose a new entries.
+  useDeepCompareEffect(() => {
+    const newEntries = R.compose(
+      maxCreditNoteAmountEntries(defaultTo(credits_remaining, 0)),
+      maxAmountCreditFromRemaining,
+    )(entries);
+
+    onUpdateData(newEntries);
+  }, [entries]);
+
+  return (
+    <ReconcileVendorCreditEditableTable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: errors || [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}
+
+export const ReconcileVendorCreditEditableTable = styled(DataTableEditable)`
+  .table {
+    max-height: 400px;
+    overflow: auto;
+
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 2px 4px;
+        min-height: 38px;
+      }
+    }
+  }
+`;
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js
new file mode 100644
index 000000000..82289491c
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function ReconcileVendorCreditFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useReconcileVendorCreditContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '95px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(ReconcileVendorCreditFloatingActions);
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.js
new file mode 100644
index 000000000..b45cad8f3
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import '../../../style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss';
+
+import { AppToaster } from 'components';
+import { CreateReconcileVendorCreditFormSchema } from './ReconcileVendorCreditForm.schema';
+import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
+import ReconcileVendorCreditFormContent from './ReconcileVendorCreditFormContent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose, transformToForm } from 'utils';
+
+// Default form initial values.
+const defaultInitialValues = {
+  entries: [
+    {
+      bill_id: '',
+      amount: '',
+    },
+  ],
+};
+
+/**
+ * Reconcile vendor credit form.
+ */
+function ReconcileVendorCreditForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    reconcileVendorCredits,
+    createReconcileVendorCreditMutate,
+    vendorCredit,
+  } = useReconcileVendorCreditContext();
+
+  // Initial form values.
+  const initialValues = {
+    entries: reconcileVendorCredits.map((entry) => ({
+      ...entry,
+      bill_id: entry.id,
+      amount: '',
+    })),
+  };
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    // Filters the entries.
+    const entries = values.entries
+      .filter((entry) => entry.bill_id && entry.amount)
+      .map((entry) => transformToForm(entry, defaultInitialValues.entries[0]));
+
+    const form = {
+      ...values,
+      entries: entries,
+    };
+
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('reconcile_vendor_credit.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      closeDialog(dialogName);
+    };
+
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      // if (errors) {
+      //   transformErrors(errors, { setErrors });
+      // }
+      setSubmitting(false);
+    };
+
+    createReconcileVendorCreditMutate([vendorCredit.id, form])
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateReconcileVendorCreditFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={ReconcileVendorCreditFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(ReconcileVendorCreditForm);
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.schema.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.schema.js
new file mode 100644
index 000000000..d15b472d9
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.schema.js
@@ -0,0 +1,12 @@
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  entries: Yup.array().of(
+    Yup.object().shape({
+      bill_id: Yup.number().required(),
+      amount: Yup.number().nullable(),
+    }),
+  ),
+});
+
+export const CreateReconcileVendorCreditFormSchema = Schema;
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormContent.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormContent.js
new file mode 100644
index 000000000..c88b1de20
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormContent.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Form } from 'formik';
+import { Choose } from 'components';
+
+import { EmptyStatuCallout } from './utils';
+import ReconcileVendorCreditFormFields from './ReconcileVendorCreditFormFields';
+import ReconcileVendorCreditFloatingActions from './ReconcileVendorCreditFloatingActions';
+import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
+
+export default function ReconcileVendorCreditFormContent() {
+  const { isEmptyStatus } = useReconcileVendorCreditContext();
+
+  return (
+    <Choose>
+      <Choose.When condition={isEmptyStatus}>
+        <EmptyStatuCallout />
+      </Choose.When>
+      <Choose.Otherwise>
+        <Form>
+          <ReconcileVendorCreditFormFields />
+          <ReconcileVendorCreditFloatingActions />
+        </Form>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js
new file mode 100644
index 000000000..16c5d48f8
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import { FastField, useFormikContext } from 'formik';
+import { Classes } from '@blueprintjs/core';
+import { subtract } from 'lodash';
+import styled from 'styled-components';
+
+import { getEntriesTotal } from 'containers/Entries/utils';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import ReconcileVendorCreditEntriesTable from './ReconcileVendorCreditEntriesTable';
+import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
+import { formattedAmount } from 'utils';
+
+export default function ReconcileVendorCreditFormFields() {
+  const {
+    vendorCredit: { formatted_credits_remaining },
+  } = useReconcileVendorCreditContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <CreditRemainingRoot>
+        <T id={'reconcile_vendor_note.dialog.credits_balance'} />
+
+        <CreditRemainingBalance>
+          {formatted_credits_remaining}
+        </CreditRemainingBalance>
+      </CreditRemainingRoot>
+
+      <FastField name={'entries'}>
+        {({
+          form: { setFieldValue, values },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ReconcileVendorCreditEntriesTable
+            entries={value}
+            errors={error}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+          />
+        )}
+      </FastField>
+
+      <ReconcileVendorCreditTotalLines />
+    </div>
+  );
+}
+
+/**
+ * Reconcile vendor credit total lines.
+ * @returns {React.JSX}
+ */
+function ReconcileVendorCreditTotalLines() {
+  const {
+    vendorCredit: { currency_code, credits_remaining },
+  } = useReconcileVendorCreditContext();
+
+  const { values } = useFormikContext();
+
+  // Calculate the total amount of credit entries.
+  const totalAmount = React.useMemo(
+    () => getEntriesTotal(values.entries),
+    [values.entries],
+  );
+
+  // Calculate the total amount of credit remaining.
+  const creditsRemaining = subtract(credits_remaining, totalAmount);
+
+  return (
+    <ReconcileVendorCreditTotalLinesRoot>
+      <ReconcileTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={
+            <T id={'reconcile_vendor_credit.dialog.total_amount_to_credit'} />
+          }
+          value={formattedAmount(totalAmount, currency_code)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'reconcile_vendor_credit.dialog.remaining_credits'} />}
+          value={formattedAmount(creditsRemaining, currency_code)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </ReconcileTotalLines>
+    </ReconcileVendorCreditTotalLinesRoot>
+  );
+}
+
+const CreditRemainingRoot = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 15px;
+`;
+
+const CreditRemainingBalance = styled.span`
+  font-weight: 600;
+  color: #343463;
+  margin-left: 5px;
+`;
+
+export const ReconcileVendorCreditTotalLinesRoot = styled.div`
+  margin-top: 15px;
+`;
+export const ReconcileTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormProvider.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormProvider.js
new file mode 100644
index 000000000..0b85497f7
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormProvider.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+  useVendorCredit,
+  useReconcileVendorCredit,
+  useCreateReconcileVendorCredit,
+} from 'hooks/query';
+import { isEmpty } from 'lodash';
+
+const ReconcileVendorCreditFormContext = React.createContext();
+
+/**
+ * Reconcile vendor credit provider.
+ */
+function ReconcileVendorCreditFormProvider({
+  vendorCreditId,
+  dialogName,
+  ...props
+}) {
+  
+  // Handle fetch reconcile
+  const {
+    isLoading: isReconcileVendorCreditLoading,
+    data: reconcileVendorCredits,
+  } = useReconcileVendorCredit(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  // Create reconcile vendor credit mutations.
+  const { mutateAsync: createReconcileVendorCreditMutate } =
+    useCreateReconcileVendorCredit();
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(reconcileVendorCredits);
+
+  // provider.
+  const provider = {
+    dialogName,
+    reconcileVendorCredits,
+    createReconcileVendorCreditMutate,
+    isEmptyStatus,
+    vendorCredit,
+  };
+
+  return (
+    <DialogContent
+      isLoading={isVendorCreditLoading || isReconcileVendorCreditLoading}
+      name={'reconcile-vendor-credit'}
+    >
+      <ReconcileVendorCreditFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useReconcileVendorCreditContext = () =>
+  React.useContext(ReconcileVendorCreditFormContext);
+
+export { ReconcileVendorCreditFormProvider, useReconcileVendorCreditContext };
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/index.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/index.js
new file mode 100644
index 000000000..8dc713917
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ReconcileVendorCreditDialogContent = React.lazy(() =>
+  import('./ReconcileVendorCreditDialogContent'),
+);
+
+/**
+ * Reconcile vendor credit dialog.
+ */
+function ReconcileVendorCreditDialog({
+  dialogName,
+  payload: { vendorCreditId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'reconcile_vendor_credit.dialog.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className="dialog--reconcile-vendor-credit-form"
+    >
+      <DialogSuspense>
+        <ReconcileVendorCreditDialogContent
+          vendorCreditId={vendorCreditId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ReconcileVendorCreditDialog);
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js
new file mode 100644
index 000000000..73e4221e1
--- /dev/null
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Callout, Intent, Classes } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { T } from 'components';
+import { MoneyFieldCell, FormatDateCell } from 'components';
+
+export const transformErrors = (errors, { setErrors }) => {};
+
+export function EmptyStatuCallout() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Callout intent={Intent.PRIMARY}>
+        <p>
+          <T id={'reconcile_vendor_credit.alert.there_is_no_open_bills'} />
+        </p>
+      </Callout>
+    </div>
+  );
+}
+
+/**
+ * Reconcile vendor credit table columns.
+ */
+export const useReconcileVendorCreditTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('bill_date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        disableSortBy: true,
+        width: '120',
+      },
+      {
+        Header: intl.get('reconcile_vendor_credit.column.bill_number'),
+        accessor: 'bill_number',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        Header: intl.get('reconcile_vendor_credit.column.remaining_amount'),
+        accessor: 'formatted_due_amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '150',
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        Header: intl.get('reconcile_vendor_credit.column.amount_to_credit'),
+        accessor: 'amount',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: '150',
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Sets max amount credit from purchase due amount.
+ */
+export const maxAmountCreditFromRemaining = (entries) => {
+  return entries.map((entry) => ({
+    ...entry,
+    amount: entry.amount ? Math.min(entry.due_amount, entry.amount) : '',
+  }));
+};
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteDialogContent.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteDialogContent.js
new file mode 100644
index 000000000..4cc99ae85
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteDialogContent.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import 'style/pages/RefundCreditNote/RefundCreditNote.scss';
+import { RefundCreditNoteFormProvider } from './RefundCreditNoteFormProvider';
+import RefundCreditNoteForm from './RefundCreditNoteForm';
+
+/**
+ * Refund credit note dialog content.
+ */
+export default function RefundCreditNoteDialogContent({
+  // #ownProps
+  dialogName,
+  creditNoteId,
+}) {
+  return (
+    <RefundCreditNoteFormProvider
+      creditNoteId={creditNoteId}
+      dialogName={dialogName}
+    >
+      <RefundCreditNoteForm />
+    </RefundCreditNoteFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFloatingActions.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFloatingActions.js
new file mode 100644
index 000000000..07e01d359
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFloatingActions.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Refund credit note floating actions.
+ */
+function RefundCreditNoteFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // refund credit note dialog context.
+  const { dialogName } = useRefundCreditNoteContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '120px' }}
+          type="submit"
+          text={<T id={'refund'} />}
+        />
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(RefundCreditNoteFloatingActions);
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
new file mode 100644
index 000000000..4250a14b1
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { omit } from 'lodash';
+
+import { AppToaster } from 'components';
+import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
+import { CreateRefundCreditNoteFormSchema } from './RefundCreditNoteForm.schema';
+import RefundCreditNoteFormContent from './RefundCreditNoteFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  from_account_id: '',
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  description: '',
+  amount: '',
+};
+
+/**
+ * Refund credit note form.
+ */
+function RefundCreditNoteForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, creditNote, createRefundCreditNoteMutate } =
+    useRefundCreditNoteContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...creditNote,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    const form = {
+      ...omit(values, ['currency_code', 'credits_remaining']),
+    };
+
+    // Handle request response success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: intl.get('refund_credit_note.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+    createRefundCreditNoteMutate([creditNote.id, form])
+      .then(onSaved)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateRefundCreditNoteFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={RefundCreditNoteFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(RefundCreditNoteForm);
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js
new file mode 100644
index 000000000..8ada6b557
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js
@@ -0,0 +1,12 @@
+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')),
+  amount: Yup.number().required(),
+  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  from_account_id: Yup.number().required().label(intl.get('deposit_account_')),
+  description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+});
+export const CreateRefundCreditNoteFormSchema = Schema;
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormContent.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormContent.js
new file mode 100644
index 000000000..d763729bb
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormContent.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+import RefundCreditNoteFormFields from './RefundCreditNoteFormFields';
+import RefundCreditNoteFloatingActions from './RefundCreditNoteFloatingActions';
+
+/**
+ * Refund credit note form content.
+ */
+export default function RefundCreditNoteFormContent() {
+  return (
+    <Form>
+      <RefundCreditNoteFormFields />
+      <RefundCreditNoteFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js
new file mode 100644
index 000000000..5af43fe97
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js
@@ -0,0 +1,164 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Icon,
+  FieldRequiredHint,
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  FormattedMessage as T,
+} from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { useAutofocus } from 'hooks';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
+
+/**
+ * Refund credit note form fields.
+ */
+function RefundCreditNoteFormFields() {
+  const { accounts } = useRefundCreditNoteContext();
+  const amountFieldRef = useAutofocus();
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ------------- Refund date ------------- */}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'refund_credit_note.dialog.refund_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+            // inline={true}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ------------- Amount ------------- */}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'refund_credit_note.dialog.amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--amount', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            // inline={true}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                intent={inputIntent({ error, touched })}
+                inputRef={(ref) => (amountFieldRef.current = ref)}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ------------ Reference No. ------------ */}
+      <FastField name={'reference_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+            // inline={true}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Form account ------------ */}
+      <FastField name={'from_account_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'refund_credit_note.dialog.from_account'} />}
+            className={classNames(
+              'form-group--from_account_id',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'from_account_id'} />}
+            // inline={true}
+          >
+            <AccountsSuggestField
+              selectedAccountId={value}
+              accounts={accounts}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('from_account_id', id)
+              }
+              inputProps={{
+                placeholder: intl.get('select_account'),
+              }}
+              filterByTypes={[
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.FIXED_ASSET,
+              ]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* --------- Statement --------- */}
+      <FastField name={'description'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'refund_credit_note.dialog.description'} />}
+            className={'form-group--description'}
+            // inline={true}
+          >
+            <TextArea growVertically={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default RefundCreditNoteFormFields;
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
new file mode 100644
index 000000000..978421272
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { pick } from 'lodash';
+
+import {
+  useAccounts,
+  useCreditNote,
+  useCreateRefundCreditNote,
+} from 'hooks/query';
+
+const RefundCreditNoteContext = React.createContext();
+
+/**
+ * Refund credit note form provider.
+ */
+function RefundCreditNoteFormProvider({ creditNoteId, dialogName, ...props }) {
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Handle fetch credit note data.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+  // Create and edit credit note mutations.
+  const { mutateAsync: createRefundCreditNoteMutate } =
+    useCreateRefundCreditNote();
+
+  // State provider.
+  const provider = {
+    creditNote: {
+      ...pick(creditNote, ['id', 'credits_remaining', 'currency_code']),
+      amount: creditNote.credits_remaining,
+    },
+    accounts,
+    dialogName,
+    createRefundCreditNoteMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading || isCreditNoteLoading}>
+      <RefundCreditNoteContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useRefundCreditNoteContext = () =>
+  React.useContext(RefundCreditNoteContext);
+
+export { RefundCreditNoteFormProvider, useRefundCreditNoteContext };
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/index.js b/src/containers/Dialogs/RefundCreditNoteDialog/index.js
new file mode 100644
index 000000000..cd83ab734
--- /dev/null
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const RefundCreditNoteDialogContent = React.lazy(() =>
+  import('./RefundCreditNoteDialogContent'),
+);
+
+/**
+ * Refund credit note dialog.
+ */
+function RefundCreditNoteDialog({
+  dialogName,
+  payload: { creditNoteId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'refund_credit_note.dialog.label'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--refund-credit-note'}
+      style={{ width: '450px' }}
+    >
+      <DialogSuspense>
+        <RefundCreditNoteDialogContent
+          dialogName={dialogName}
+          creditNoteId={creditNoteId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(RefundCreditNoteDialog);
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/utils.js b/src/containers/Dialogs/RefundCreditNoteDialog/utils.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditDialogContent.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditDialogContent.js
new file mode 100644
index 000000000..a454c1388
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditDialogContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import 'style/pages/RefundVendorCredit/RefundVendorCredit.scss';
+
+import { RefundVendorCreditFormProvider } from './RefundVendorCreditFormProvider';
+import RefundVendorCreditForm from './RefundVendorCreditForm';
+
+export default function RefundVendorCreditDialogContent({
+  // #ownProps
+  dialogName,
+  vendorCreditId,
+}) {
+  return (
+    <RefundVendorCreditFormProvider
+      vendorCreditId={vendorCreditId}
+      dialogName={dialogName}
+    >
+      <RefundVendorCreditForm />
+    </RefundVendorCreditFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js
new file mode 100644
index 000000000..8ab4496ad
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Refund vendor flaoting actions.
+ */
+function RefundVendorCreditFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+  // refund vendor credit  dialog context.
+  const { dialogName } = useRefundVendorCreditContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '120px' }}
+          type="submit"
+        >
+          <T id={'refund'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(RefundVendorCreditFloatingActions);
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js
new file mode 100644
index 000000000..0882a4dd8
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { omit, defaultTo } from 'lodash';
+
+import { AppToaster } from 'components';
+import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
+import { CreateVendorRefundCreditFormSchema } from './RefundVendorCreditForm.schema';
+import RefundVendorCreditFormContent from './RefundVendorCreditFormContent';
+
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose, transactionNumber } from 'utils';
+
+const defaultInitialValues = {
+  deposit_account_id: '',
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  description: '',
+  amount: '',
+};
+
+/**
+ * Refund Vendor credit form.
+ */
+function RefundVendorCreditForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { vendorCredit, dialogName, createRefundVendorCreditMutate } =
+    useRefundVendorCreditContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...vendorCredit,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
+    const form = {
+      ...omit(values, ['currency_code', 'credits_remaining']),
+    };
+
+    // Handle request response success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: intl.get('refund_vendor_credit.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    createRefundVendorCreditMutate([vendorCredit.id, form])
+      .then(onSaved)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateVendorRefundCreditFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={RefundVendorCreditFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(RefundVendorCreditForm);
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js
new file mode 100644
index 000000000..57c0b9f2d
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js
@@ -0,0 +1,14 @@
+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')),
+  amount: Yup.number().required(),
+  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  deposit_account_id: Yup.number()
+    .required()
+    .label(intl.get('deposit_account_')),
+  description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+});
+export const CreateVendorRefundCreditFormSchema = Schema;
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormContent.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormContent.js
new file mode 100644
index 000000000..dfc391028
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormContent.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Form } from 'formik';
+import RefundVendorCreditFormFields from './RefundVendorCreditFormFields';
+import RefundVendorCreditFloatingActions from './RefundVendorCreditFloatingActions';
+
+export default function RefundVendorCreditFormContent() {
+  return (
+    <Form>
+      <RefundVendorCreditFormFields />
+      <RefundVendorCreditFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js
new file mode 100644
index 000000000..3ea3862b7
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js
@@ -0,0 +1,161 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Icon,
+  FieldRequiredHint,
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  FormattedMessage as T,
+} from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  compose,
+} from 'utils';
+import { useAutofocus } from 'hooks';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
+
+/**
+ * Refund Vendor credit form fields.
+ */
+function RefundVendorCreditFormFields() {
+  const { accounts } = useRefundVendorCreditContext();
+  const amountFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ------------- Refund date ------------- */}
+      <FastField name={'refund_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="refund_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('refund_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ------------- Amount ------------- */}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'refund_vendor_credit.dialog.amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--amount', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                intent={inputIntent({ error, touched })}
+                inputRef={(ref) => (amountFieldRef.current = ref)}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ------------ Reference No. ------------ */}
+      <FastField name={'reference_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Form account ------------ */}
+      <FastField name={'deposit_account_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'refund_vendor_credit.dialog.deposit_to_account'} />}
+            className={classNames(
+              'form-group--deposit_account_id',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'deposit_account_id'} />}
+          >
+            <AccountsSuggestField
+              selectedAccountId={value}
+              accounts={accounts}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('deposit_account_id', id)
+              }
+              inputProps={{
+                placeholder: intl.get('select_account'),
+              }}
+              filterByTypes={[
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.FIXED_ASSET,
+              ]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* --------- Statement --------- */}
+      <FastField name={'description'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'refund_vendor_credit.dialog.description'} />}
+            className={'form-group--description'}
+          >
+            <TextArea growVertically={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default RefundVendorCreditFormFields;
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js
new file mode 100644
index 000000000..0f97aa814
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { pick } from 'lodash';
+
+import {
+  useAccounts,
+  useVendorCredit,
+  useCreateRefundVendorCredit,
+} from 'hooks/query';
+
+const RefundVendorCreditContext = React.createContext();
+
+function RefundVendorCreditFormProvider({
+  vendorCreditId,
+  dialogName,
+  ...props
+}) {
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  // Create refund vendor credit mutations.
+  const { mutateAsync: createRefundVendorCreditMutate } =
+    useCreateRefundVendorCredit();
+
+  // State provider.
+  const provider = {
+    vendorCredit: {
+      ...pick(vendorCredit, ['id', 'credits_remaining', 'currency_code']),
+      amount: vendorCredit.credits_remaining,
+    },
+    accounts,
+    dialogName,
+    createRefundVendorCreditMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading || isVendorCreditLoading}>
+      <RefundVendorCreditContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useRefundVendorCreditContext = () =>
+  React.useContext(RefundVendorCreditContext);
+
+export { RefundVendorCreditFormProvider, useRefundVendorCreditContext };
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/index.js b/src/containers/Dialogs/RefundVendorCreditDialog/index.js
new file mode 100644
index 000000000..006dfe69f
--- /dev/null
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const RefundVendorCreditDialogContent = React.lazy(() =>
+  import('./RefundVendorCreditDialogContent'),
+);
+
+/**
+ * Refund vendor credit dialog.
+ */
+function RefundVendorCreditDialog({
+  dialogName,
+  payload: { vendorCreditId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'refund_vendor_credit.dialog.label'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--refund-vendor-credit'}
+    >
+      <DialogSuspense>
+        <RefundVendorCreditDialogContent
+          dialogName={dialogName}
+          vendorCreditId={vendorCreditId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(RefundVendorCreditDialog);
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
index f9f72adad..90e70a27f 100644
--- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -12,8 +12,6 @@ import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
-import { whenRtl, whenLtr } from 'utils/styled-components';
-
 /**
  * SMS message form content.
  */
@@ -98,22 +96,16 @@ const MessageVariable = styled.div`
 const FormContent = styled.div`
   display: flex;
 `;
+
 const FormFields = styled.div`
   width: 55%;
 `;
+
 const FormPreview = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-
-  ${whenLtr(`
-    padding-left: 25px;
-    margin-left: 25px;
-    border-left: 1px solid #dcdcdd;
-  `)}
-  ${whenRtl(`
-    padding-right: 25px;
-    margin-right: 25px;
-    border-right: 1px solid #dcdcdd;
-  `)}
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
 `;
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js
deleted file mode 100644
index 28d763962..000000000
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js
+++ /dev/null
@@ -1,14 +0,0 @@
-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/TransactionsLockingForm.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js
deleted file mode 100644
index 9bba5437a..000000000
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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/TransactionsLockingFormContent.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js
deleted file mode 100644
index 43a1e1dda..000000000
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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/TransactionsLockingFormProvider.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js
deleted file mode 100644
index 7a8d95b96..000000000
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index d6ff27db8..000000000
--- a/src/containers/Dialogs/TransactionsLockingDialog/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-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/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsDialogContent.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsDialogContent.js
new file mode 100644
index 000000000..6b5772da2
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsDialogContent.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { UnlockingPartialTransactionsFormProvider } from './UnlockingPartialTransactionsFormProvider';
+import UnlockingPartialTransactionsForm from './UnlockingPartialTransactionsForm';
+
+/**
+ * Unlocking partail transactions dialog content.
+ */
+export default function UnlockingPartialTransactionsDialogContent({
+  // #ownProps
+  moduleName,
+  dialogName,
+}) {
+  return (
+    <UnlockingPartialTransactionsFormProvider
+      moduleName={moduleName}
+      dialogName={dialogName}
+    >
+      <UnlockingPartialTransactionsForm />
+    </UnlockingPartialTransactionsFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.js
new file mode 100644
index 000000000..6e6cb04e2
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.js
@@ -0,0 +1,79 @@
+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 { CreateUnLockingPartialTransactionsFormSchema } from './UnlockingPartialTransactionsForm.schema';
+
+import { useUnlockingPartialTransactionsContext } from './UnlockingPartialTransactionsFormProvider';
+import UnlockingPartialTransactionsFormContent from './UnlockingPartialTransactionsFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  module: '',
+  unlock_from_date: moment(new Date()).format('YYYY-MM-DD'),
+  unlock_to_date: moment(new Date()).format('YYYY-MM-DD'),
+  reason: '',
+};
+
+/**
+ * Partial Unlocking transactions form.
+ */
+function UnlockingPartialTransactionsForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, moduleName, createUnlockingPartialTransactionsMutate } =
+    useUnlockingPartialTransactionsContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    module: moduleName,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          'unlocking_partial_transactions.dialog.success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    createUnlockingPartialTransactionsMutate(values)
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateUnLockingPartialTransactionsFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={UnlockingPartialTransactionsFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(UnlockingPartialTransactionsForm);
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.schema.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.schema.js
new file mode 100644
index 000000000..92f228d45
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.schema.js
@@ -0,0 +1,15 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  unlock_from_date: Yup.date().required().label(intl.get('date')),
+  unlock_to_date: Yup.date().required().label(intl.get('date')),
+  module: Yup.string().required(),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+});
+export const CreateUnLockingPartialTransactionsFormSchema = Schema;
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormContent.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormContent.js
new file mode 100644
index 000000000..9a8c24cac
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import UnlockingPartialTransactionsFormFields from './UnlockingPartialTransactionsFormFields';
+import UnlockingPartialTransactionsFormFloatingActions from './UnlockingPartialTransactionsFormFloatingActions';
+
+/**
+ * Partial Unlocking trsnactions form content.
+ */
+export default function PartialUnlockingTransactionsFormContent() {
+  return (
+    <Form>
+      <UnlockingPartialTransactionsFormFields />
+      <UnlockingPartialTransactionsFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.js
new file mode 100644
index 000000000..e7bf7a164
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.js
@@ -0,0 +1,110 @@
+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, Col, Row, FormattedMessage as T } from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { useAutofocus } from 'hooks';
+
+/**
+ * Parial Unlocking transactions form fields.
+ */
+export default function UnlockingPartialTransactionsFormFields() {
+  const reasonFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={6}>
+          {/*------------  Unlocking from date  -----------*/}
+          <FastField name={'unlock_from_date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={
+                  <T id={'unlocking_partial_transactions.dialog.from_date'} />
+                }
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="unlock_from_date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('unlock_from_date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={6}>
+          {/*------------  Unlocking from date  -----------*/}
+          <FastField name={'unlock_to_date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={
+                  <T id={'unlocking_partial_transactions.dialog.to_date'} />
+                }
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="unlock_to_date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('unlock_to_date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      {/*------------ unLocking  reason -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'unlocking_partial_transactions.dialog.reason'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--reason'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFloatingActions.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFloatingActions.js
new file mode 100644
index 000000000..7457859c8
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFloatingActions.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useUnlockingPartialTransactionsContext } from './UnlockingPartialTransactionsFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Partial Unlocking transactions floating actions
+ */
+function UnlockingPartialTransactionsFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useUnlockingPartialTransactionsContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '95px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(
+  UnlockingPartialTransactionsFormFloatingActions,
+);
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormProvider.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormProvider.js
new file mode 100644
index 000000000..47266ea21
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormProvider.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCreateUnlockingPartialTransactions } from 'hooks/query';
+
+const UnlockingPartialTransactionsContext = React.createContext();
+
+/**
+ * Unlocking partial transactions form provider.
+ */
+function UnlockingPartialTransactionsFormProvider({
+  moduleName,
+  dialogName,
+  ...props
+}) {
+  // Create unlocking partial transactions mutations.
+  const { mutateAsync: createUnlockingPartialTransactionsMutate } =
+    useCreateUnlockingPartialTransactions();
+
+  // State provider.
+  const provider = {
+    dialogName,
+    moduleName,
+    createUnlockingPartialTransactionsMutate,
+  };
+
+  return (
+    <DialogContent>
+      <UnlockingPartialTransactionsContext.Provider
+        value={provider}
+        {...props}
+      />
+    </DialogContent>
+  );
+}
+
+const useUnlockingPartialTransactionsContext = () =>
+  React.useContext(UnlockingPartialTransactionsContext);
+
+export {
+  UnlockingPartialTransactionsFormProvider,
+  useUnlockingPartialTransactionsContext,
+};
diff --git a/src/containers/Dialogs/UnlockingPartialTransactionsDialog/index.js b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/index.js
new file mode 100644
index 000000000..ab0b7cad8
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingPartialTransactionsDialog/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const UnlockingPartialTransactionsDialogContent = React.lazy(() =>
+  import('./UnlockingPartialTransactionsDialogContent'),
+);
+
+/**
+ * UncLocking Partial transactions dialog.
+ */
+function UnLockingPartialTransactionsDilaog({
+  isOpen,
+  dialogName,
+  payload: { module },
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      autoFocus={true}
+      title={<T id={'unlocking_partial_transactions.dialog.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--transaction--locking'}
+    >
+      <DialogSuspense>
+        <UnlockingPartialTransactionsDialogContent
+          moduleName={module}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(UnLockingPartialTransactionsDilaog);
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsDialogContent.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsDialogContent.js
new file mode 100644
index 000000000..2b262c6d2
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsDialogContent.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import UnlockingTransactionsForm from './UnlockingTransactionsForm';
+import { UnlockingTransactionsFormProvider } from './UnlockingTransactionsFormProvider';
+
+export default function UnlockingTransactionsDialogContent({
+  // #ownProps
+  moduleName,
+  dialogName,
+}) {
+  return (
+    <UnlockingTransactionsFormProvider moduleName={moduleName} dialogName={dialogName}>
+      <UnlockingTransactionsForm />
+    </UnlockingTransactionsFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.js
new file mode 100644
index 000000000..e2d86efa5
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.js
@@ -0,0 +1,76 @@
+import React from 'react';
+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 { CreateUnlockingTransactionsFormSchema } from './UnlockingTransactionsForm.schema';
+
+import { useUnlockingTransactionsContext } from './UnlockingTransactionsFormProvider';
+import UnlockingTransactionsFormContent from './UnlockingTransactionsFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  module: '',
+  reason: '',
+};
+
+/**
+ * Unlocking transactions form.
+ */
+function UnlockingTransactionsForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    moduleName,
+    cancelLockingTransactionMutate,
+    cancelUnLockingPartialTransactionMutate,
+  } = useUnlockingTransactionsContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    module: moduleName,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('unlocking_transactions.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    cancelLockingTransactionMutate(values).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateUnlockingTransactionsFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={UnlockingTransactionsFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(UnlockingTransactionsForm);
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.schema.js
similarity index 70%
rename from src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js
rename to src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.schema.js
index a74058f3f..3208a4786 100644
--- a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.schema.js
@@ -3,11 +3,11 @@ 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')),
+  module: Yup.string().required(),
   reason: Yup.string()
     .required()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('reason')),
 });
-export const CreateTransactionsLockingFormSchema = Schema;
+export const CreateUnlockingTransactionsFormSchema = Schema;
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormContent.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormContent.js
new file mode 100644
index 000000000..351723de2
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import UnlockingTransactionsFormFields from './UnlockingTransactionsFormFields';
+import UnlockingTransactionsFormFloatingActions from './UnlockingTransactionsFormFloatingActions';
+
+/**
+ * Unlocking transactions form content.
+ */
+export default function UnlockingTransactionsFormContent() {
+  return (
+    <Form>
+      <UnlockingTransactionsFormFields />
+      <UnlockingTransactionsFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFields.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFields.js
new file mode 100644
index 000000000..085506abc
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFields.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { Classes, FormGroup, TextArea } from '@blueprintjs/core';
+import { FieldRequiredHint, FormattedMessage as T } from 'components';
+import { useAutofocus } from 'hooks';
+import { inputIntent } from 'utils';
+
+/**
+ * Unlocking transactions form fields.
+ */
+export default function UnlockingTransactionsFormFields() {
+  const reasonFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Locking  Reason -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'unlocking_transactions.dialog.reason'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--reason'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (reasonFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFloatingActions.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFloatingActions.js
new file mode 100644
index 000000000..a32c86efd
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFloatingActions.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useUnlockingTransactionsContext } from './UnlockingTransactionsFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Unlocking transactions form floating actions.
+ */
+function UnlockingTransactionsFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useUnlockingTransactionsContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '95px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(
+  UnlockingTransactionsFormFloatingActions,
+);
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormProvider.js b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormProvider.js
new file mode 100644
index 000000000..60efe8a10
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormProvider.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCancelLockingTransaction } from 'hooks/query';
+
+const UnlockingTransactionsContext = React.createContext();
+
+/**
+ * Unlocking transactions form provider.
+ */
+function UnlockingTransactionsFormProvider({
+  moduleName,
+  dialogName,
+  ...props
+}) {
+  // Cancle locking transactions mutations.
+  const { mutateAsync: cancelLockingTransactionMutate } =
+    useCancelLockingTransaction();
+
+  // State provider.
+  const provider = {
+    dialogName,
+    moduleName,
+    cancelLockingTransactionMutate,
+  };
+
+  return (
+    <DialogContent>
+      <UnlockingTransactionsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useUnlockingTransactionsContext = () =>
+  React.useContext(UnlockingTransactionsContext);
+
+export { useUnlockingTransactionsContext, UnlockingTransactionsFormProvider };
diff --git a/src/containers/Dialogs/UnlockingTransactionsDialog/index.js b/src/containers/Dialogs/UnlockingTransactionsDialog/index.js
new file mode 100644
index 000000000..e5fd6540d
--- /dev/null
+++ b/src/containers/Dialogs/UnlockingTransactionsDialog/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const UnlockingTransactionsDialogContent = React.lazy(() =>
+  import('./UnlockingTransactionsDialogContent'),
+);
+
+/**
+ * Unlocking transactions dialog.
+ */
+function UnlockingTransactionsDialog({
+  dialogName,
+  payload: { module },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      autoFocus={true}
+      title={<T id={'unlocking_transactions.dialog.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--transaction--locking'}
+    >
+      <DialogSuspense>
+        <UnlockingTransactionsDialogContent
+          moduleName={module}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(UnlockingTransactionsDialog);
diff --git a/src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDialogContent.js b/src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDialogContent.js
new file mode 100644
index 000000000..b9dcecc61
--- /dev/null
+++ b/src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDialogContent.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useSaveSettings } from 'hooks/query';
+
+import { VendorCreditNumberDilaogProvider } from './VendorCreditNumberDilaogProvider';
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import { compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+/**
+ * Vendor credit number dialog
+ */
+function VendorCreditNumberDialogContent({
+  // #ownProps
+  initialValues,
+  onConfirm,
+
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: saveSettings } = useSaveSettings();
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Handle the form success.
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('vendor-credit-form');
+      onConfirm(values);
+    };
+    // Handle the form errors.
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'vendor_credit');
+
+    // Save the settings.
+    saveSettings({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  // Handle the dialog close.
+  const handleClose = () => {
+    closeDialog('vendor-credit-form');
+  };
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('vendor_credit.auto_increment.auto')
+      : intl.get('vendor_credit.auto_increment.manually');
+
+  return (
+    <VendorCreditNumberDilaogProvider>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        description={description}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+      />
+    </VendorCreditNumberDilaogProvider>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    autoIncrement: vendorsCreditNoteSetting?.autoIncrement,
+    nextNumber: vendorsCreditNoteSetting?.nextNumber,
+    numberPrefix: vendorsCreditNoteSetting?.numberPrefix,
+  })),
+)(VendorCreditNumberDialogContent);
diff --git a/src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDilaogProvider.js b/src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDilaogProvider.js
new file mode 100644
index 000000000..0d285b6fc
--- /dev/null
+++ b/src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDilaogProvider.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useSettingsVendorCredits } from 'hooks/query';
+
+const VendorCreditNumberDialogContext = React.createContext();
+
+/**
+ * Vendor credit number dialog provider
+ */
+function VendorCreditNumberDilaogProvider({ query, ...props }) {
+  const { isLoading: isSettingsLoading } = useSettingsVendorCredits();
+
+  // Provider payload.
+  const provider = {
+    isSettingsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <VendorCreditNumberDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useVendorCreditNumberDialogContext = () =>
+  React.useContext(VendorCreditNumberDialogContext);
+
+export { VendorCreditNumberDilaogProvider, useVendorCreditNumberDialogContext };
diff --git a/src/containers/Dialogs/VendorCreditNumberDialog/index.js b/src/containers/Dialogs/VendorCreditNumberDialog/index.js
new file mode 100644
index 000000000..e92fdf702
--- /dev/null
+++ b/src/containers/Dialogs/VendorCreditNumberDialog/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose, saveInvoke } from 'utils';
+
+const VendorCreditNumberDialogContent = React.lazy(() =>
+  import('./VendorCreditNumberDialogContent'),
+);
+
+/**
+ * Vendor Credit number dialog.
+ */
+function VendorCreditNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      title={<T id={'vendor_credit_number_settings'} />}
+      name={dialogName}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <VendorCreditNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(VendorCreditNumberDialog);
diff --git a/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js b/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
index b4c37be86..1baf75136 100644
--- a/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
+++ b/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
@@ -25,7 +25,7 @@ export default function AccountDrawerHeader() {
         </DetailItem>
 
         <DetailItem name={'account-normal'} label={<T id={'account_normal'} />}>
-          {account.account_normal}
+          {account.account_normal_formatted}
           <Icon
             iconSize={14}
             icon={`arrow-${
diff --git a/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js b/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
index 9b3c6ab8f..649f01a86 100644
--- a/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
+++ b/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
@@ -1,26 +1,24 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
-import { DataTable, If } from 'components';
+import { Card, DataTable, If } from 'components';
 
 import { compose } from 'utils';
 import { useAccountReadEntriesColumns } from './utils';
 
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
+import { TableStyle } from '../../../common';
+import { useAppIntlContext } from 'components/AppIntlProvider';
 
 /**
  * account drawer table.
  */
 function AccountDrawerTable({ closeDrawer }) {
-  const {
-    account,
-    accounts,
-    drawerName,
-  } = useAccountDrawerContext();
+  const { account, accounts, drawerName } = useAccountDrawerContext();
 
   // Account read-only entries table columns.
   const columns = useAccountReadEntriesColumns();
@@ -29,23 +27,38 @@ function AccountDrawerTable({ closeDrawer }) {
   const handleLinkClick = () => {
     closeDrawer(drawerName);
   };
+  // Application intl context.
+  const { isRTL } = useAppIntlContext();
 
   return (
-    <div className={'account-drawer__table'}>
-      <DataTable columns={columns} data={accounts} payload={{ account }}/>
+    <Card>
+      <DataTable
+        columns={columns}
+        data={accounts}
+        payload={{ account }}
+        styleName={TableStyle.Constrant}
+      />
 
       <If condition={accounts.length > 0}>
-        <div class="account-drawer__table-footer">
+        <TableFooter>
           <Link
             to={`/financial-reports/general-ledger`}
             onClick={handleLinkClick}
           >
-            ←{intl.get('view_more_transactions')}
+            {isRTL ? '→' : '←'} {intl.get('view_more_transactions')}
           </Link>
-        </div>
+        </TableFooter>
       </If>
-    </div>
+    </Card>
   );
 }
 
 export default compose(withDrawerActions)(AccountDrawerTable);
+
+const TableFooter = styled.div`
+  padding: 6px 14px;
+  display: block;
+  border-top: 1px solid #d2dde2;
+  border-bottom: 1px solid #d2dde2;
+  font-size: 12px;
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
index d57e2f4c4..7f78410b5 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
@@ -8,7 +8,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 
@@ -16,12 +15,19 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, If, Icon, FormattedMessage as T } from 'components';
+import {
+  Can,
+  If,
+  Icon,
+  DrawerActionsBar,
+  FormattedMessage as T,
+} from 'components';
 import {
   BillAction,
   PaymentMadeAction,
   AbilitySubject,
 } from '../../../common/abilityOption';
+import { BillMenuItem } from './utils';
 
 import { safeCallback, compose } from 'utils';
 
@@ -45,6 +51,14 @@ function BillDetailActionsBar({
     closeDrawer('bill-drawer');
   };
 
+  // Handle convert to vendor credit.
+  const handleConvertToVendorCredit = () => {
+    history.push(`/vendor-credits/new?from_bill_id=${billId}`, {
+      billId: billId,
+    });
+    closeDrawer('bill-drawer');
+  };
+
   // Handle delete bill.
   const onDeleteBill = () => {
     openAlert('bill-delete', { billId });
@@ -55,8 +69,13 @@ function BillDetailActionsBar({
     openDialog('quick-payment-made', { billId });
   };
 
+  // Handle allocate landed cost button click.
+  const handleAllocateCostClick = () => {
+    openDialog('allocate-landed-cost', { billId });
+  };
+
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
           <Button
@@ -71,7 +90,7 @@ function BillDetailActionsBar({
           <If condition={bill.is_open && !bill.is_fully_paid}>
             <Button
               className={Classes.MINIMAL}
-              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              icon={<Icon icon="arrow-upward" iconSize={16} />}
               text={<T id={'add_payment'} />}
               onClick={handleQuickBillPayment}
             />
@@ -87,8 +106,17 @@ function BillDetailActionsBar({
             onClick={safeCallback(onDeleteBill)}
           />
         </Can>
+        <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+          <NavbarDivider />
+          <BillMenuItem
+            payload={{
+              onConvert: handleConvertToVendorCredit,
+              onAllocateLandedCost: handleAllocateCostClick,
+            }}
+          />
+        </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/BillDrawer/BillDetailFooter.js b/src/containers/Drawers/BillDrawer/BillDetailFooter.js
index 8bc47089f..c5d411cb1 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailFooter.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailFooter.js
@@ -1,41 +1,27 @@
 import React from 'react';
-import clsx from 'classnames';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
 
-import { FormatNumber, T, TotalLines, TotalLine } from '../../../components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
-
 /**
- * Bill read-only details footer.
+ * Bill detail footer.
+ * @returns {React.JSX}
  */
-export function BillDetailFooter() {
+export default function BillDetailFooter() {
   const { bill } = useBillDrawerContext();
-
   return (
-    <div className={clsx(BillDrawerCls.detail_panel_footer)}>
-      <TotalLines>
-        <TotalLine
-          title={<T id={'bill.details.subtotal'} />}
-          value={<FormatNumber value={bill.amount} />}
-          className={BillDrawerCls.total_line_subtotal}
-        />
-        <TotalLine
-          title={<T id={'bill.details.total'} />}
-          value={bill.formatted_amount}
-          className={BillDrawerCls.total_line_total}
-        />
-        <TotalLine
-          title={<T id={'bill.details.payment_amount'} />}
-          value={bill.formatted_payment_amount}
-          className={BillDrawerCls.total_line_payment}
-        />
-        <TotalLine
-          title={<T id={'bill.details.due_amount'} />}
-          value={bill.formatted_due_amount}
-          className={BillDrawerCls.total_line_dueAmount}
-        />
-      </TotalLines>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={bill.note}>
+          <DetailItem label={<T id={'note'} />}>{bill.note}</DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
diff --git a/src/containers/Drawers/BillDrawer/BillDetailHeader.js b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
index 30baef9eb..0ce3dc3b0 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailHeader.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
@@ -1,12 +1,22 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatDate, DetailsMenu, DetailItem } from 'components';
+import {
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  ButtonLink,
+  Row,
+  Col,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  VendorDrawerLink,
+} from 'components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import { BillDetailsStatus } from './utils';
 
 /**
  * Bill detail header.
@@ -15,44 +25,67 @@ export default function BillDetailHeader() {
   const { bill } = useBillDrawerContext();
 
   return (
-    <div className={clsx(BillDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem
-          label={intl.get('amount')}
-          children={<h3 class="big-number">{bill.formatted_amount}</h3>}
-        />
-        <DetailItem
-          label={intl.get('bill.details.bill_number')}
-          children={defaultTo(bill.bill_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('bill_date')}
-          children={<FormatDate value={bill.bill_date} />}
-        />
-        <DetailItem
-          label={intl.get('vendor_name')}
-          children={bill.vendor?.display_name}
-        />
-        <DetailItem
-          label={intl.get('due_date')}
-          children={<FormatDate value={bill.due_date} />}
-        />
-      </DetailsMenu>
-
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('due_amount')}
-          children={bill.formatted_due_amount}
-        />
-        <DetailItem
-          label={intl.get('reference')}
-          children={defaultTo(bill.reference_no, '--')}
-        />
-        <DetailItem
-          label={intl.get('bill.details.created_at')}
-          children={<FormatDate value={bill.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountDetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{bill.formatted_amount}</h3>
+          </AmountDetailItem>
+          <StatusDetailItem>
+            <BillDetailsStatus bill={bill} />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('bill_date')}>
+              <FormatDate value={bill.bill_date} />
+            </DetailItem>
+            <DetailItem label={intl.get('due_date')}>
+              <FormatDate value={bill.due_date} />
+            </DetailItem>
+            <DetailItem label={intl.get('vendor_name')}>
+              <VendorDrawerLink vendorId={bill.vendor_id}>
+                {bill.vendor?.display_name}
+              </VendorDrawerLink>
+            </DetailItem>
+            <DetailItem label={intl.get('bill.details.bill_number')}>
+              {defaultTo(bill.bill_number, '-')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            direction={'horizantal'}
+            minLabelSize={'140px'}
+            textAlign={'right'}
+          >
+            <DetailItem label={intl.get('due_amount')}>
+              <strong>{bill.formatted_due_amount}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(bill.reference_no, '--')}
+            />
+            <DetailItem
+              label={intl.get('bill.details.created_at')}
+              children={<FormatDate value={bill.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
+
+const AmountDetailItem = styled(DetailItem)`
+  width: 50%;
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillDetailTab.js b/src/containers/Drawers/BillDrawer/BillDetailTab.js
index 32466efd4..fd238d216 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailTab.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailTab.js
@@ -1,29 +1,22 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import BillDetailActionsBar from './BillDetailActionsBar';
 import BillDetailHeader from './BillDetailHeader';
 import BillDetailTable from './BillDetailTable';
-import { BillDetailFooter } from './BillDetailFooter'
-
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
-
+import { BillDetailTableFooter } from './BillDetailTableFooter';
+import BillDetailFooter from './BillDetailFooter';
 
 /**
  * Bill detail panel tab.
  */
 export default function BillDetailTab() {
   return (
-    <div className={clsx(BillDrawerCls.detail_panel)}>
-      <BillDetailActionsBar />
-
-      <Card>
-        <BillDetailHeader />
-        <BillDetailTable />
-        <BillDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <BillDetailHeader />
+      <BillDetailTable />
+      <BillDetailTableFooter />
+      <BillDetailFooter />
+    </CommercialDocBox>
   );
 }
diff --git a/src/containers/Drawers/BillDrawer/BillDetailTable.js b/src/containers/Drawers/BillDrawer/BillDetailTable.js
index 6ef30dd9d..cc8f0932f 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailTable.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailTable.js
@@ -1,26 +1,25 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 import { useBillReadonlyEntriesTableColumns } from './utils';
 
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import { TableStyle } from '../../../common';
 
 export default function BillDetailTable() {
-  const { bill: { entries } } = useBillDrawerContext();
+  const {
+    bill: { entries },
+  } = useBillDrawerContext();
 
   // Retrieve bill readonly entries table columns.
   const columns = useBillReadonlyEntriesTableColumns();
 
   return (
-    <div className={clsx(BillDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/BillDrawer/BillDetailTableFooter.js b/src/containers/Drawers/BillDrawer/BillDetailTableFooter.js
new file mode 100644
index 000000000..d55edc514
--- /dev/null
+++ b/src/containers/Drawers/BillDrawer/BillDetailTableFooter.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+  T,
+  TotalLines,
+  TotalLine,
+} from '../../../components';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+/**
+ * Bill read-only details table footer.
+ */
+export function BillDetailTableFooter() {
+  const { bill } = useBillDrawerContext();
+
+  return (
+    <BillDetailsFooterRoot>
+      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'bill.details.subtotal'} />}
+          value={<FormatNumber value={bill.amont} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'bill.details.total'} />}
+          value={bill.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'bill.details.payment_amount'} />}
+          value={bill.formatted_payment_amount}
+        />
+        <TotalLine
+          title={<T id={'bill.details.due_amount'} />}
+          value={bill.formatted_due_amount}
+        />
+      </BillTotalLines>
+    </BillDetailsFooterRoot>
+  );
+}
+
+export const BillDetailsFooterRoot = styled.div``;
+
+export const BillTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js b/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js
deleted file mode 100644
index bc8ca4660..000000000
--- a/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import BillLocatedLandedCostDeleteAlert from 'containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert';
-
-/**
- * Bill drawer alert.
- */
-export default function BillDrawerAlerts() {
-  return (
-    <div class="bills-alerts">
-      <BillLocatedLandedCostDeleteAlert name="bill-located-cost-delete" />
-    </div>
-  );
-}
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerContent.js b/src/containers/Drawers/BillDrawer/BillDrawerContent.js
index c5458fdc5..8b142d8c0 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerContent.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerContent.js
@@ -1,11 +1,8 @@
 import React from 'react';
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import { BillDrawerProvider } from './BillDrawerProvider';
 import BillDrawerDetails from './BillDrawerDetails';
-import BillDrawerAlerts from './BillDrawerAlerts';
 
 /**
  * Bill drawer content.
@@ -18,7 +15,6 @@ export default function BillDrawerContent({
     <BillDrawerProvider billId={billId}>
       <DrawerBody>
         <BillDrawerDetails />
-        <BillDrawerAlerts />
       </DrawerBody>
     </BillDrawerProvider>
   );
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 8369fb7b8..a196fc6d1 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -1,49 +1,67 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
-
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+import { useAbilityContext } from 'hooks/utils';
 import BillDetailTab from './BillDetailTab';
 import LocatedLandedCostTable from './LocatedLandedCostTable';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { useBillDrawerContext } from './BillDrawerProvider';
-
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import BillGLEntriesTable from './BillGLEntriesTable';
+import BillPaymentTransactionTable from './BillPaymentTransactions/BillPaymentTransactionTable';
+import BillDetailActionsBar from './BillDetailActionsBar';
 
 /**
- * Bill view details.
+ * Bill details tabs.
  */
-export default function BillDrawerDetails() {
-  const {
-    data: { transactions },
-  } = useBillDrawerContext();
+function BillDetailsTabs() {
+  const ability = useAbilityContext();
 
   return (
-    <div className={clsx(BillDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
+    <DrawerMainTabs
+      renderActiveTabPanelOnly={true}
+      defaultSelectedTabId="details"
+    >
+      <Tab
+        title={intl.get('overview')}
+        id={'details'}
+        panel={<BillDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<BillGLEntriesTable />}
+      />
+      {ability.can(PaymentMadeAction.View, AbilitySubject.PaymentMade) && (
         <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<BillDetailTab />}
-        />
-        <Tab
-          title={intl.get('journal_entries')}
-          id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-        <Tab
-          title={intl.get('located_landed_cost')}
-          id={'landed_cost'}
-          panel={<LocatedLandedCostTable />}
-        />
-        {/* <Tab
           title={intl.get('payment_transactions')}
           id={'payment_transactions'}
-          // panel={}
-        /> */}
-      </DrawerMainTabs>
-    </div>
+          panel={<BillPaymentTransactionTable />}
+        />
+      )}
+      <Tab
+        title={intl.get('located_landed_cost')}
+        id={'landed_cost'}
+        panel={<LocatedLandedCostTable />}
+      />
+    </DrawerMainTabs>
   );
 }
+
+/**
+ * Bill view detail.
+ */
+export default function BillDetails() {
+  return (
+    <BillDetailsRoot>
+      <BillDetailActionsBar />
+      <BillDetailsTabs />
+    </BillDetailsRoot>
+  );
+}
+
+export const BillDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerProvider.js b/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
index bef541bb0..338a11157 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import {
-  useBill,
-  useTransactionsByReference,
-  useBillLocatedLandedCost,
-} from 'hooks/query';
+import { useBill, useBillLocatedLandedCost } from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
 
@@ -18,15 +14,6 @@ function BillDrawerProvider({ billId, ...props }) {
     enabled: !!billId,
   });
 
-  // Handle fetch transaction by reference.
-  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
-    {
-      reference_id: billId,
-      reference_type: 'Bill',
-    },
-    { enabled: !!billId },
-  );
-
   // Handle fetch bill located landed cost transaction.
   const { isLoading: isLandedCostLoading, data: transactions } =
     useBillLocatedLandedCost(billId, {
@@ -35,19 +22,20 @@ function BillDrawerProvider({ billId, ...props }) {
 
   //provider.
   const provider = {
-    transactions,
     billId,
-    data,
+    transactions,
     bill,
   };
 
-  const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
+  const loading = isLandedCostLoading || isBillLoading;
 
   return (
     <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="bill-drawer"
-        title={intl.get('bill_details')}
+        title={intl.get('bill.drawer.title', {
+          number: bill.bill_number ? `(${bill.bill_number})` : null,
+        })}
       />
       <BillDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/containers/Drawers/BillDrawer/BillGLEntriesTable.js b/src/containers/Drawers/BillDrawer/BillGLEntriesTable.js
new file mode 100644
index 000000000..593f41a59
--- /dev/null
+++ b/src/containers/Drawers/BillDrawer/BillGLEntriesTable.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Bill GL entries table.
+ * @returns {React.JSX}
+ */
+export default function BillGLEntriesTable() {
+  const { billId } = useBillDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: billId,
+      reference_type: 'Bill',
+    },
+    { enabled: !!billId },
+  );
+
+  return (
+    <BilleGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <BillGLEntriesDatatable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </BilleGLEntriesRoot>
+  );
+}
+
+const BilleGLEntriesRoot = styled(Card)``;
+
+const BillGLEntriesDatatable = styled(JournalEntriesTable)`
+  .table .tbody .tr:last-child .td {
+    border-bottom: 0;
+  }
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
new file mode 100644
index 000000000..f19c23bd4
--- /dev/null
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { DataTable, Card } from 'components';
+
+import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
+import { useBillDrawerContext } from '../BillDrawerProvider';
+import { useBillPaymentTransactions } from 'hooks/query';
+
+import { TableStyle } from '../../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Bill payment transactions datatable.
+ */
+function BillPaymentTransactionTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useBillPaymentTransactionsColumns();
+
+  const { billId } = useBillDrawerContext();
+
+  // Handle fetch bill payment transaction.
+  const {
+    isLoading: isPaymentTransactionsLoading,
+    isFetching: isPaymentTransactionFetching,
+    data: paymentTransactions,
+  } = useBillPaymentTransactions(billId, {
+    enabled: !!billId,
+  });
+
+  // Handles delete bill payment transactions.
+  const handleDeleteBillPaymentTransactons = ({ bill_payment_id }) => {
+    openAlert('payment-made-delete', {
+      paymentMadeId: bill_payment_id,
+    });
+  };
+
+  // Handles edit  bill payment transactions.
+  const handleEditBillPaymentTransactions = ({ bill_payment_id }) => {
+    history.push(`/payment-mades/${bill_payment_id}/edit`);
+    closeDrawer('bill-drawer');
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={paymentTransactions}
+        loading={isPaymentTransactionsLoading}
+        headerLoading={isPaymentTransactionsLoading}
+        progressBarLoading={isPaymentTransactionFetching}
+        TableLoadingRenderer={TableSkeletonRows}
+        styleName={TableStyle.Constrant}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteBillPaymentTransactons,
+          onEdit: handleEditBillPaymentTransactions,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactionTable);
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
new file mode 100644
index 000000000..36ed3e7dc
--- /dev/null
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { Can, FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve bill payment transactions table columns.
+ */
+export const useBillPaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('payment_date'),
+        accessor: 'formatted_payment_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        id: 'payment_account_name',
+        Header: intl.get('bill_transactions.column.deposit_account'),
+        accessor: 'payment_account_name',
+        width: 120,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'formatted_payment_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'payment_number',
+        Header: intl.get('payment_no'),
+        accessor: 'payment_number',
+        width: 100,
+        className: 'payment_number',
+      },
+      {
+        id: 'reference',
+        Header: intl.get('reference_no'),
+        accessor: 'payment_reference_no',
+        width: 90,
+        className: 'payment_reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
index c06848a30..4d667ec19 100644
--- a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
+++ b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
-import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
+import { DataTable, Card, FormattedMessage as T } from 'components';
 
 import { useLocatedLandedCostColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from './BillDrawerProvider';
@@ -9,9 +8,11 @@ import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import { TableStyle } from '../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
 import { compose } from 'utils';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import Icon from 'components/Icon';
+
 
 /**
  * Located landed cost table.
@@ -26,7 +27,10 @@ function LocatedLandedCostTable({
   // #withDrawerActions
   openDrawer,
 }) {
+  // Located landed cost table columns.
   const columns = useLocatedLandedCostColumns();
+
+  // Bill drawer context.
   const { transactions, billId } = useBillDrawerContext();
 
   // Handle the transaction delete action.
@@ -34,11 +38,6 @@ function LocatedLandedCostTable({
     openAlert('bill-located-cost-delete', { BillId: id });
   };
 
-  // Handle allocate landed cost button click.
-  const handleAllocateCostClick = () => {
-    openDialog('allocate-landed-cost', { billId });
-  };
-
   // Handle from transaction link click.
   const handleFromTransactionClick = (original) => {
     const { from_transaction_type, from_transaction_id } = original;
@@ -57,27 +56,17 @@ function LocatedLandedCostTable({
 
   return (
     <div>
-      <DashboardActionsBar>
-        <NavbarGroup>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon="receipt-24" />}
-            text={'Allocate landed cost'}
-            onClick={handleAllocateCostClick}
-          />
-        </NavbarGroup>
-      </DashboardActionsBar>
-
       <Card>
         <DataTable
           columns={columns}
           data={transactions}
           ContextMenu={ActionsMenu}
+          TableLoadingRenderer={TableSkeletonRows}
+          styleName={TableStyle.Constrant}
           payload={{
             onDelete: handleDeleteTransaction,
             onFromTranscationClick: handleFromTransactionClick,
           }}
-          className={'datatable--landed-cost-transactions'}
         />
       </Card>
     </div>
diff --git a/src/containers/Drawers/BillDrawer/components.js b/src/containers/Drawers/BillDrawer/components.js
index 2a4d29f93..ec60f31ba 100644
--- a/src/containers/Drawers/BillDrawer/components.js
+++ b/src/containers/Drawers/BillDrawer/components.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import clsx from 'classnames';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Icon } from 'components';
+import { CLASSES } from 'common/classes';
+import {  Icon } from 'components';
+
 /**
  * Actions menu.
  */
@@ -24,7 +28,7 @@ export function ActionsMenu({ row: { original }, payload: { onDelete } }) {
  */
 export function FromTransactionCell({
   row: { original },
-  payload: { onFromTranscationClick }
+  payload: { onFromTranscationClick },
 }) {
   // Handle the link click
   const handleAnchorClick = () => {
@@ -38,6 +42,18 @@ export function FromTransactionCell({
   );
 }
 
+/**
+ * Name accessor.
+ */
+export const NameAccessor = (row) => {
+  return (
+    <span className="name">
+      <LabelName>{row.name}</LabelName>
+      <LabelDescription>{row.description}</LabelDescription>
+    </span>
+  );
+};
+
 /**
  * Retrieve bill located landed cost table columns.
  */
@@ -46,30 +62,41 @@ export function useLocatedLandedCostColumns() {
     () => [
       {
         Header: intl.get('name'),
-        accessor: 'description',
+        accessor: NameAccessor,
         width: 150,
-        className: 'name',
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'formatted_amount',
         width: 100,
-        className: 'amount',
+        align: 'right',
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'from_transaction',
         Header: intl.get('From transaction'),
         Cell: FromTransactionCell,
         width: 100,
-        className: 'from-transaction',
+        textOverview: true,
       },
       {
         Header: intl.get('allocation_method'),
         accessor: 'allocation_method_formatted',
         width: 100,
-        className: 'allocation-method',
+        textOverview: true,
       },
     ],
     [],
   );
 }
+
+const LabelName = styled.div``;
+
+const LabelDescription = styled.div`
+  font-size: 12px;
+  margin-top: 2px;
+  display: block;
+  opacity: 0.75;
+`;
diff --git a/src/containers/Drawers/BillDrawer/utils.js b/src/containers/Drawers/BillDrawer/utils.js
index fea0879cd..2b5871332 100644
--- a/src/containers/Drawers/BillDrawer/utils.js
+++ b/src/containers/Drawers/BillDrawer/utils.js
@@ -1,51 +1,136 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
-import { FormatNumberCell } from '../../../components';
+import styled from 'styled-components';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Intent,
+  Tag,
+} from '@blueprintjs/core';
+import {
+  FormatNumberCell,
+  FormattedMessage as T,
+  Choose,
+  Icon,
+} from '../../../components';
 
 /**
  * Retrieve bill readonly details entries table columns.
  */
 export const useBillReadonlyEntriesTableColumns = () =>
-React.useMemo(
-  () => [
-    {
-      Header: intl.get('product_and_service'),
-      accessor: 'item.name',
-      width: 150,
-      className: 'item',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('description'),
-      accessor: 'description',
-      className: 'description',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('quantity'),
-      accessor: 'quantity',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('rate'),
-      accessor: 'rate',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('amount'),
-      accessor: 'amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-  ],
-  [],
-);
\ No newline at end of file
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'item',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        className: 'description',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+
+/**
+ * Bill details status.
+ * @returns {React.JSX}
+ */
+export function BillDetailsStatus({ bill }) {
+  return (
+    <Choose>
+      <Choose.When condition={bill.is_fully_paid && bill.is_open}>
+        <StatusTag intent={Intent.SUCCESS} round={true}>
+          <T id={'paid'} />
+        </StatusTag>
+      </Choose.When>
+
+      <Choose.When condition={bill.is_open}>
+        <Choose>
+          <Choose.When condition={bill.is_overdue}>
+            <StatusTag intent={Intent.WARNING} round={true}>
+              <T id={'overdue'} />
+            </StatusTag>
+          </Choose.When>
+          <Choose.Otherwise>
+            <StatusTag intent={Intent.PRIMARY} round={true}>
+              <T id={'due'} />
+            </StatusTag>
+          </Choose.Otherwise>
+        </Choose>
+      </Choose.When>
+      <Choose.Otherwise>
+        <StatusTag round={true} minimal={true}>
+          <T id={'draft'} />
+        </StatusTag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+export const BillMenuItem = ({
+  payload: { onConvert, onAllocateLandedCost },
+}) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onAllocateLandedCost}
+            text={<T id={'bill.allocate_landed_coast'} />}
+          />
+          <MenuItem
+            onClick={onConvert}
+            text={<T id={'bill.convert_to_credit_note'} />}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};
+
+const StatusTag = styled(Tag)`
+  min-width: 65px;
+  text-align: center;
+`;
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
index a843373c3..9331ca5f8 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { Can, FormattedMessage as T, DrawerActionsBar } from 'components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
@@ -25,7 +24,7 @@ function CashflowTransactionDrawerActionBar({
 
   return (
     <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
-      <DashboardActionsBar>
+      <DrawerActionsBar>
         <NavbarGroup>
           <Button
             className={Classes.MINIMAL}
@@ -35,8 +34,9 @@ function CashflowTransactionDrawerActionBar({
             onClick={handleDeleteCashflowTransaction}
           />
         </NavbarGroup>
-      </DashboardActionsBar>
+      </DrawerActionsBar>
     </Can>
   );
 }
+
 export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
index d14b2d8fa..26cf19169 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
@@ -13,6 +13,7 @@ export default function CashflowTransactionDrawerDetails() {
   return (
     <div className={'cashflow-drawer'}>
       <CashflowTransactionDrawerActionBar />
+
       <div className="cashflow-drawer__content">
         <Card>
           <CashflowTransactionDrawerHeader />
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
index 713bc1888..a236832a6 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
@@ -5,6 +5,9 @@ import {
   DetailItem,
   FormatDate,
   FormattedMessage as T,
+  Row,
+  Col,
+  CommercialDocHeader,
 } from 'components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 
@@ -12,52 +15,45 @@ import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawer
  * Cashlflow transaction drawer detail Header.
  */
 export default function CashflowTransactionDrawerHeader() {
-  const {
-    cashflowTransaction: {
-      formatted_amount,
-      transaction_type,
-      transaction_number,
-      reference_no,
-      date,
-      description,
-    },
-  } = useCashflowTransactionDrawerContext();
+  const { cashflowTransaction } = useCashflowTransactionDrawerContext();
 
   return (
-    <div className={'cashflow-drawer__content-header'}>
-      <DetailsMenu>
-        <DetailItem name={'total'} label={<T id={'total'} />}>
-          <h3 class="amount">{formatted_amount}</h3>
-        </DetailItem>
+    <CommercialDocHeader>
+      <CommercialDocHeader>
+        <DetailsMenu>
+          <DetailItem name={'total'} label={<T id={'total'} />}>
+            <h3 class="big-number">{cashflowTransaction.formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocHeader>
 
-        <DetailItem
-          name={'transaction_type'}
-          label={<T id={'cash_flow_drawer.label_transaction_type'} />}
-        >
-          {transaction_type}
-        </DetailItem>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              name={'transaction_type'}
+              label={<T id={'cash_flow_drawer.label_transaction_type'} />}
+            >
+              {cashflowTransaction.transaction_type_formatted}
+            </DetailItem>
 
-        <DetailItem
-          name={'transaction_number'}
-          label={<T id={'cash_flow.drawer.label_transaction_no'} />}
-        >
-          {transaction_number}
-        </DetailItem>
-        <DetailItem
-          label={<T id={'date'} />}
-          children={<FormatDate value={date} />}
-        />
-        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-          {defaultTo(reference_no, '-')}
-        </DetailItem>
-      </DetailsMenu>
+            <DetailItem
+              name={'transaction_number'}
+              label={<T id={'cash_flow.drawer.label_transaction_no'} />}
+            >
+              {cashflowTransaction.transaction_number}
+            </DetailItem>
 
-      <div class="cashflow-drawer__content-description">
-        <b class="title">
-          <T id={'description'} />
-        </b>
-        : {defaultTo(description, '—')}
-      </div>
-    </div>
+            <DetailItem label={<T id={'date'} />}>
+              <FormatDate value={cashflowTransaction.date} />
+            </DetailItem>
+
+            <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+              {defaultTo(cashflowTransaction.reference_no, '-')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
index 96b2f7b87..caa496bdf 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DataTable, If, FormattedMessage as T } from 'components';
+import { CommercialDocEntriesTable } from 'components';
 
 import { useCashflowTransactionColumns } from './utils';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -14,9 +14,5 @@ export default function CashflowTransactionDrawerTable() {
     cashflowTransaction: { transactions },
   } = useCashflowTransactionDrawerContext();
 
-  return (
-    <div className="cashflow-drawer__content-table">
-      <DataTable columns={columns} data={transactions} />
-    </div>
-  );
+  return <CommercialDocEntriesTable columns={columns} data={transactions} />;
 }
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
new file mode 100644
index 000000000..12a2a31a4
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+
+import { useAbilityContext } from 'hooks/utils';
+import { DrawerMainTabs } from 'components';
+import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
+import CreditNoteDetailPanel from './CreditNoteDetailPanel';
+import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
+import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
+import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+/**
+ * Credit Note view detail.
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetail() {
+  return (
+    <CreditNoteRoot>
+      <CreditNoteDetailActionsBar />
+      <CreditNoteDetailsTabs />
+    </CreditNoteRoot>
+  );
+}
+
+/**
+ * Credit note details tabs.
+ * @returns {React.JSX}
+ */
+function CreditNoteDetailsTabs() {
+  const ability = useAbilityContext();
+
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<CreditNoteDetailPanel />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<CreditNoteGLEntriesTable />}
+      />
+
+      {ability.can(CreditNoteAction.View, AbilitySubject.CreditNote) && (
+        <Tab
+          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundCreditNoteTransactionsTable />}
+        />
+      )}
+      {ability.can(CreditNoteAction.View, AbilitySubject.CreditNote) && (
+        <Tab
+          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileCreditNoteTransactionsTable />}
+        />
+      )}
+    </DrawerMainTabs>
+  );
+}
+
+const CreditNoteRoot = styled.div``;
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
new file mode 100644
index 000000000..5d7810b34
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import {
+  DrawerActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  If,
+} from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
+import { CreditNoteMenuItem } from './utils';
+
+/**
+ * Credit note detail actions bar.
+ */
+function CreditNoteDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { creditNoteId, creditNote } = useCreditNoteDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit credit note.
+  const handleEditCreditNote = () => {
+    history.push(`/credit-notes/${creditNoteId}/edit`);
+    closeDrawer('credit-note-detail-drawer');
+  };
+
+  const handleRefundCreditNote = () => {
+    openDialog('refund-credit-note', { creditNoteId });
+  };
+
+  // Handle delete credit note.
+  const handleDeleteCreditNote = () => {
+    openAlert('credit-note-delete', { creditNoteId });
+  };
+
+  const handleReconcileCreditNote = () => {
+    openDialog('reconcile-credit-note', { creditNoteId });
+  };
+
+  return (
+    <DrawerActionsBar>
+      <NavbarGroup>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'credit_note.action.edit_credit_note'} />}
+            onClick={handleEditCreditNote}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+          <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-upward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundCreditNote}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCreditNote}
+          />
+        </Can>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+          <If condition={creditNote.is_published && !creditNote.is_closed}>
+            <NavbarDivider />
+            <CreditNoteMenuItem
+              payload={{
+                onReconcile: handleReconcileCreditNote,
+              }}
+            />
+          </If>
+        </Can>
+      </NavbarGroup>
+    </DrawerActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(CreditNoteDetailActionsBar);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js
new file mode 100644
index 000000000..9e9641a9c
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import CreditNoteDetail from './CreditNoteDetail';
+import { CreditNoteDetailDrawerProvider } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note detail drawer content.
+ */
+export default function CreditNoteDetailDrawerContent({
+  // #ownProp
+  creditNoteId,
+}) {
+  return (
+    <CreditNoteDetailDrawerProvider creditNoteId={creditNoteId}>
+      <DrawerBody>
+        <CreditNoteDetail />
+      </DrawerBody>
+    </CreditNoteDetailDrawerProvider>
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
new file mode 100644
index 000000000..1dbf5030b
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  useCreditNote,
+  useRefundCreditNote,
+  useReconcileCreditNote,
+  useReconcileCreditNotes,
+} from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const CreditNoteDetailDrawerContext = React.createContext();
+
+/**
+ * Credit note detail drawer provider.
+ */
+function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+
+  // Handle fetch refund credit note.
+  const {
+    data: refundCreditNote,
+    isFetching: isRefundCreditNoteFetching,
+    isLoading: isRefundCreditNoteLoading,
+  } = useRefundCreditNote(creditNoteId, {
+    enabled: !!creditNoteId,
+  });
+
+  // Handle fetch refund credit note.
+  const {
+    data: reconcileCreditNotes,
+    isLoading: isReconcileCreditNoteLoading,
+  } = useReconcileCreditNotes(creditNoteId, {
+    enabled: !!creditNoteId,
+  });
+
+  // Handle fetch reconcile credit note details.
+  const { isLoading: isReconcileCreditLoading, data: reconcileCreditNote } =
+    useReconcileCreditNote(creditNoteId, {
+      enabled: !!creditNoteId,
+    });
+
+  const provider = {
+    creditNote,
+    refundCreditNote,
+    reconcileCreditNote,
+    reconcileCreditNotes,
+
+    isRefundCreditNoteLoading,
+    isRefundCreditNoteFetching,
+    creditNoteId,
+  };
+
+  return (
+    <DrawerLoading
+      loading={
+        isCreditNoteLoading ||
+        isRefundCreditNoteLoading ||
+        isReconcileCreditNoteLoading ||
+        isReconcileCreditLoading
+      }
+    >
+      <DrawerHeaderContent
+        name="credit-note-detail-drawer"
+        title={intl.get('credit_note.drawer.title', {
+          number: creditNote.credit_note_number,
+        })}
+      />
+      <CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useCreditNoteDetailDrawerContext = () =>
+  React.useContext(CreditNoteDetailDrawerContext);
+
+export { CreditNoteDetailDrawerProvider, useCreditNoteDetailDrawerContext };
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js
new file mode 100644
index 000000000..24a1cc598
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note detail footer
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetailFooter() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={creditNote.terms_conditions}>
+          <DetailItem label={<T id={'terms_conditions'} />}>
+            {creditNote.terms_conditions}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
new file mode 100644
index 000000000..ead8b8243
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import styled from 'styled-components';
+
+import {
+  FormatDate,
+  T,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  ButtonLink,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  CustomerDrawerLink,
+} from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import { CreditNoteDetailsStatus } from './utils';
+
+/**
+ * Credit note details drawer header.
+ */
+export default function CreditNoteDetailHeader() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">{creditNote.formatted_amount}</span>
+          </AmountItem>
+
+          <StatusItem>
+            <CreditNoteDetailsStatus creditNote={creditNote} />
+          </StatusItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_no')}
+            >
+              {defaultTo(creditNote.credit_note_number, '-')}
+            </DetailItem>
+
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={creditNote.customer_id}>
+                {creditNote.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_date')}
+            >
+              <FormatDate value={creditNote.formatted_credit_note_date} />
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credits_remaining')}
+            >
+              <strong>{creditNote.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(creditNote.reference_no, '-')}
+            />
+            <DetailItem
+              label={intl.get('note')}
+              children={defaultTo(creditNote.note, '-')}
+            />
+
+            <DetailItem
+              label={<T id={'credit_note.drawer.label_created_at'} />}
+              children={<FormatDate value={creditNote.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}
+
+const StatusItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
new file mode 100644
index 000000000..00be70f26
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { CommercialDocBox } from 'components';
+
+import CreditNoteDetailHeader from './CreditNoteDetailHeader';
+import CreditNoteDetailTable from './CreditNoteDetailTable';
+import CreditNoteDetailTableFooter from './CreditNoteDetailTableFooter';
+import CreditNoteDetailFooter from './CreditNoteDetailFooter';
+
+/**
+ * Credit note details panel.
+ */
+export default function CreditNoteDetailPanel() {
+  return (
+    <CommercialDocBox>
+      <CreditNoteDetailHeader />
+      <CreditNoteDetailTable />
+      <CreditNoteDetailTableFooter />
+      <CreditNoteDetailFooter />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js
new file mode 100644
index 000000000..72f4b84ca
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { CommercialDocEntriesTable } from 'components';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+import { useCreditNoteReadOnlyEntriesColumns } from './utils';
+
+/**
+ * Credit note detail table.
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetailTable() {
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  // Credit note entries table columns.
+  const columns = useCreditNoteReadOnlyEntriesColumns();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      className={'table-constrant'}
+    />
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.js
new file mode 100644
index 000000000..ee39586ef
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  FormatNumber,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note details panel footer.
+ */
+export default function CreditNoteDetailTableFooter() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <CreditNoteDetailsFooterRoot>
+      <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'credit_note.drawer.label_subtotal'} />}
+          value={<FormatNumber value={creditNote.formatted_amount} />}
+        />
+        <TotalLine
+          title={<T id={'credit_note.drawer.label_total'} />}
+          value={creditNote.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </CreditNoteTotalLines>
+    </CreditNoteDetailsFooterRoot>
+  );
+}
+
+export const CreditNoteDetailsFooterRoot = styled.div``;
+
+export const CreditNoteTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
new file mode 100644
index 000000000..189ae4625
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Card } from 'components';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import { useTransactionsByReference } from 'hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Journal entries table.
+ */
+export function CreditNoteGLEntriesTable() {
+  const { creditNoteId } = useCreditNoteDetailDrawerContext();
+
+  // Credit note GL entries table columns.
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: creditNoteId,
+      reference_type: 'creditNote',
+    },
+    { enabled: !!creditNoteId },
+  );
+
+  return (
+    <Card>
+      <AmountDisplayedBaseCurrencyMessage />
+
+      <JournalEntriesTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+      />
+    </Card>
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
new file mode 100644
index 000000000..4a796704a
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell, Icon } from '../../../../components';
+
+import 'style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js
new file mode 100644
index 000000000..dcee43131
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { TableStyle } from 'common';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import {
+  useReconcileCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Reconcile credit transactions table.
+ */
+function RefundCreditNoteTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  // Credit note drawer context.
+  const { reconcileCreditNotes } = useCreditNoteDetailDrawerContext();
+
+  // Reconcile credit transactions table columns.
+  const columns = useReconcileCreditTransactionsTableColumns();
+
+  // Handle delete reconile credit.
+  const handleDeleteReconcileCreditNote = ({ id }) => {
+    openAlert('reconcile-credit-delete', { creditNoteId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={reconcileCreditNotes}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteReconcileCreditNote,
+        }}
+        styleName={TableStyle.Constrant}
+        className={'datatable--refund-transactions'}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteTransactionsTable);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js
new file mode 100644
index 000000000..3398cf8e3
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { Can, FormatDateCell, Icon } from 'components';
+import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Credit note reconcilation with invoices table columns.
+ */
+export function useReconcileCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_credit_note_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('invoice_no'),
+        accessor: 'invoice_number',
+        width: 100,
+        className: 'invoice_number',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formtted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js
new file mode 100644
index 000000000..dacb3ba25
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { TableStyle } from 'common';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import {
+  useRefundCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit note transactions table.
+ */
+function RefundCreditNoteTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundCreditNote } = useCreditNoteDetailDrawerContext();
+
+  // Refund credit transactions table columns.
+  const columns = useRefundCreditTransactionsTableColumns();
+
+  // Handle delete refund credit.
+  const handleDeleteRefundCreditNote = ({ id }) => {
+    openAlert('refund-credit-delete', { creditNoteId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={refundCreditNote}
+        ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
+        payload={{
+          onDelete: handleDeleteRefundCreditNote,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteTransactionsTable);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
new file mode 100644
index 000000000..f815408b6
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { Can, FormatDateCell, Icon } from 'components';
+import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+export function useRefundCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('refund_credit_transactions.column.amount_refunded'),
+        accessor: 'formtted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+      {
+        id: 'from_account',
+        Header: intl.get(
+          'refund_credit_transactions.column.withdrawal_account',
+        ),
+        accessor: ({ from_account }) => from_account.name,
+        width: 100,
+        className: 'from_account',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 100,
+        className: 'reference_no',
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/index.js b/src/containers/Drawers/CreditNoteDetailDrawer/index.js
new file mode 100644
index 000000000..abcd19afb
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const CreditNoteDetailDrawerContent = React.lazy(() =>
+  import('./CreditNoteDetailDrawerContent'),
+);
+
+/**
+ * Credit note detail drawer.
+ */
+function CreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { creditNoteId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <CreditNoteDetailDrawerContent creditNoteId={creditNoteId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(CreditNoteDetailDrawer);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
new file mode 100644
index 000000000..9b35a08d8
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Tag,
+  Intent,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  FormattedMessage as T,
+  FormatNumberCell,
+  Choose,
+} from '../../../components';
+
+export const useCreditNoteReadOnlyEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        className: 'description',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+
+/**
+ * Credit note more actions mneu.
+ * @returns {React.JSX}
+ */
+export function CreditNoteMenuItem({ payload: { onReconcile } }) {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={<T id={'credit_note.action.reconcile_with_invoices'} />}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}
+
+/**
+ * Credit note details status.
+ * @returns {React.JSX}
+ */
+export function CreditNoteDetailsStatus({ creditNote }) {
+  return (
+    <Choose>
+      <Choose.When condition={creditNote.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}
diff --git a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js
index 2eecd2c93..414dbf8c0 100644
--- a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js
+++ b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js
@@ -28,15 +28,10 @@ export default function CustomerDetailsHeader() {
           <h3 class="big-number">{customer.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'customer.drawer.label.customer_name'} />}
-          name={'name'}
-          children={customer?.display_name}
-        />
         <DetailItem
           label={<T id={'customer.drawer.label.customer_type'} />}
           name={'type'}
-          children={customer?.customer_type}
+          children={customer?.formatted_customer_type }
         />
         <DetailItem label={<T id={'customer.drawer.label.unused_credits'} />}>
           0
@@ -44,6 +39,13 @@ export default function CustomerDetailsHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
+        <DetailItem
+          label={<T id={'customer.drawer.label.customer_name'} />}
+          name={'name'}
+        >
+          <strong>{customer?.display_name}</strong>
+        </DetailItem>
+
         <DetailItem
           label={<T id={'customer.drawer.label.company_name'} />}
           children={defaultTo(customer?.company_name, '--')}
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js
index 2de7affc9..725f7dc78 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js
@@ -1,26 +1,39 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
 import { DrawerMainTabs } from 'components';
 
+import EstimateDetailActionsBar from './EstimateDetailActionsBar';
 import EstimateDetailPanel from './EstimateDetailPanel';
-import clsx from 'classnames';
 
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+/**
+ * Estimate details tabs.
+ * @returns {React.JSX}
+ */
+function EstimateDetailsTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<EstimateDetailPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
 
 /**
  * Estimate view detail
  */
 export default function EstimateDetail() {
   return (
-    <div className={clsx(EstimateDetailsCls.root)}>
-      <DrawerMainTabs>
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<EstimateDetailPanel />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <EstimateDetailsRoot>
+      <EstimateDetailActionsBar />
+      <EstimateDetailsTabs />
+    </EstimateDetailsRoot>
   );
 }
+
+const EstimateDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
index d512f4386..21c669274 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
@@ -8,7 +8,7 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -19,7 +19,13 @@ import {
   AbilitySubject,
 } from '../../../common/abilityOption';
 
-import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
+import {
+  DrawerActionsBar,
+  Icon,
+  FormattedMessage as T,
+  MoreMenuItems,
+  Can,
+} from 'components';
 
 import { compose } from 'utils';
 
@@ -36,8 +42,10 @@ function EstimateDetailActionsBar({
   // #withDrawerActions
   closeDrawer,
 }) {
+  // Estimate details drawer context.
   const { estimateId } = useEstimateDetailDrawerContext();
 
+  // History.
   const history = useHistory();
 
   // Handle edit sale estimate.
@@ -61,7 +69,7 @@ function EstimateDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
           <Button
@@ -90,13 +98,15 @@ function EstimateDetailActionsBar({
           />
           <NavbarDivider />
         </Can>
-        <MoreMenuItems
-          payload={{
-            onNotifyViaSMS: handleNotifyViaSMS,
-          }}
-        />
+        <Can I={SaleEstimateAction.NotifyBySms} a={AbilitySubject.Estimate}>
+          <MoreMenuItems
+            payload={{
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
index bf11ea143..3fb3f62fa 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
@@ -24,7 +24,9 @@ function EstimateDetailDrawerProvider({ estimateId, ...props }) {
     <DrawerLoading loading={isEstimateLoading}>
       <DrawerHeaderContent
         name="estimate-detail-drawer"
-        title={intl.get('estimate_details')}
+        title={intl.get('estimate.drawer.title', {
+          number: estimate.estimate_number,
+        })}
       />
       <EstimateDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
index d473b4bef..c97691e78 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
@@ -1,40 +1,35 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 
 /**
- * Estimate details panel footer content.
+ * Estimate details footer.
+ * @returns {React.JSX}
  */
 export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
-
+  
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
-      <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
-        <TotalLine
-          title={<T id={'estimate.details.subtotal'} />}
-          value={<FormatNumber value={estimate.amount} />}
-          className={EstimateDetailsCls.total_line_subtotal}
-        />
-        <TotalLine
-          title={<T id={'estimate.details.total'} />}
-          value={estimate.formatted_amount}
-          className={EstimateDetailsCls.total_line_total}
-        />
-      </TotalLines>
-
-      <If condition={false}>
-        <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
-          <p>
-            <b><T id={'estimate.details.note'} />:</b> --
-          </p>
-        </div>
-      </If>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={estimate.terms_conditions}>
+          <DetailItem label={<T id={'estimate.details.terms_conditions'} />}>
+            {estimate.terms_conditions}
+          </DetailItem>
+        </If>
+        <If condition={estimate.note}>
+          <DetailItem label={<T id={'estimate.details.note'} />}>
+            {estimate.note}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
index 8d1170601..bf0572278 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
@@ -1,12 +1,22 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import {
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  FormatDate,
+  T,
+  DetailsMenu,
+  DetailItem,
+  Row,
+  Col,
+  ButtonLink,
+  CustomerDrawerLink,
+} from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+import { EstimateDetailsStatus } from './components';
 
 /**
  * Estimate read-only details drawer header.
@@ -15,39 +25,70 @@ export default function EstimateDetailHeader() {
   const { estimate } = useEstimateDetailDrawerContext();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <span class="big-number">{estimate.formatted_amount}</span>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('estimate.details.estimate_number')}
-          children={defaultTo(estimate.estimate_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={estimate.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('estimate_date')}
-          children={estimate.formatted_estimate_date}
-        />
-        <DetailItem
-          label={intl.get('expiration_date')}
-          children={estimate.formatted_expiration_date}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountEstimateDetail label={intl.get('amount')}>
+            <span class="big-number">{estimate.formatted_amount}</span>
+          </AmountEstimateDetail>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('reference')}
-          children={defaultTo(estimate.reference, '-')}
-        />
-        <DetailItem
-          label={<T id={'estimate.details.created_at'} />}
-          children={<FormatDate value={estimate.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+          <EstimateStatusDetail>
+            <EstimateDetailsStatus estimate={estimate} />
+          </EstimateStatusDetail>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('estimate.details.estimate_number')}
+              children={defaultTo(estimate.estimate_number, '-')}
+            />
+
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={estimate.customer_id}>
+                {estimate.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('estimate_date')}
+              children={estimate.formatted_estimate_date}
+            />
+
+            <DetailItem
+              label={intl.get('expiration_date')}
+              children={estimate.formatted_expiration_date}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(estimate.reference, '-')}
+            />
+            <DetailItem
+              label={<T id={'estimate.details.created_at'} />}
+              children={<FormatDate value={estimate.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const EstimateStatusDetail = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+const AmountEstimateDetail = styled(DetailItem)`
+  width: 50%;
+`;
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js
index cb2c22ff1..def91b3d6 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js
@@ -1,25 +1,20 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import EstimateDetailActionsBar from './EstimateDetailActionsBar';
 import EstimateDetailHeader from './EstimateDetailHeader';
 import EstimateDetailTable from './EstimateDetailTable';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+import EstimateDetailTableFooter from './EstimateDetailTableFooter';
 import EstimateDetailFooter from './EstimateDetailFooter';
 
+
 export default function EstimateDetailTab() {
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel)}>
-      <EstimateDetailActionsBar />
-
-      <Card>
-        <EstimateDetailHeader />
-        <EstimateDetailTable />
-        <EstimateDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <EstimateDetailHeader />
+      <EstimateDetailTable />
+      <EstimateDetailTableFooter />
+      <EstimateDetailFooter />
+    </CommercialDocBox>
   );
 }
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js
index af5f6b6ba..9be02e2f8 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
+
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-
 import { useEstimateReadonlyEntriesColumns } from './utils';
 
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+import { TableStyle } from '../../../common';
 
 /**
  * Estimate detail table.
@@ -20,12 +19,10 @@ export default function EstimateDetailTable() {
   const columns = useEstimateReadonlyEntriesColumns();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.js
new file mode 100644
index 000000000..38c877917
--- /dev/null
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate details panel footer content.
+ */
+export default function EstimateDetailTableFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <EstimateDetailsFooterRoot>
+      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'estimate.details.subtotal'} />}
+          value={<FormatNumber value={estimate.amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'estimate.details.total'} />}
+          value={estimate.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </EstimateTotalLines>
+    </EstimateDetailsFooterRoot>
+  );
+}
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/EstimateDetailDrawer/components.js b/src/containers/Drawers/EstimateDetailDrawer/components.js
new file mode 100644
index 000000000..a3f6ea63a
--- /dev/null
+++ b/src/containers/Drawers/EstimateDetailDrawer/components.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Intent, Tag } from '@blueprintjs/core';
+
+import { T, Choose } from 'components';
+
+/**
+ * Estimate details status.
+ * @return {React.JSX}
+ */
+export function EstimateDetailsStatus({ estimate }) {
+  return (
+    <Choose>
+      <Choose.When condition={estimate.is_approved}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'approved'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={estimate.is_rejected}>
+        <Tag intent={Intent.DANGER} round={true}>
+          <T id={'rejected'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={estimate.is_expired}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'estimate.status.expired'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={estimate.is_delivered}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'delivered'} />
+        </Tag>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
index 97eec5a7f..65093a190 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
@@ -8,15 +8,17 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { DrawerActionsBar, 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';
 
-import { compose } from 'utils';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
+import { compose } from 'utils';
+
 /**
  * Expense drawer action bar.
  */
@@ -28,6 +30,8 @@ function ExpenseDrawerActionBar({
   closeDrawer,
 }) {
   const history = useHistory();
+
+  // Expense drawer context.
   const { expense } = useExpenseDrawerContext();
 
   // Handle the expense edit action.
@@ -42,7 +46,7 @@ function ExpenseDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
           <Button
@@ -63,7 +67,7 @@ function ExpenseDrawerActionBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
index 810533ade..5a5795a1a 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
@@ -2,8 +2,6 @@ import React from 'react';
 
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ExpenseDrawer.scss';
-
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
 import ExpenseDrawerDetails from './ExpenseDrawerDetails';
 
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
index 859d4c96d..51a068ba4 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from '../../../components';
 
 import ExpenseDrawerActionBar from './ExpenseDrawerActionBar';
 import ExpenseDrawerHeader from './ExpenseDrawerHeader';
@@ -12,16 +13,16 @@ import ExpenseDrawerFooter from './ExpenseDrawerFooter';
  */
 export default function ExpenseDrawerDetails() {
   return (
-    <div className={'expense-drawer'}>
+    <ExpenseDetailsRoot>
       <ExpenseDrawerActionBar />
 
-      <div className="expense-drawer__content">
-        <Card>
-          <ExpenseDrawerHeader />
-          <ExpenseDrawerTable />
-          <ExpenseDrawerFooter />
-        </Card>
-      </div>
-    </div>
+      <CommercialDocBox>
+        <ExpenseDrawerHeader />
+        <ExpenseDrawerTable />
+        <ExpenseDrawerFooter />
+      </CommercialDocBox>
+    </ExpenseDetailsRoot>
   );
 }
+
+const ExpenseDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
index e6f00b272..2063fe3cb 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
@@ -1,8 +1,14 @@
 import React from 'react';
-import { T } from 'components';
-import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import styled from 'styled-components';
 
-import { FormatNumber } from '../../../components';
+import {
+  T,
+  TotalLines,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { FormatNumber, TotalLine } from '../../../components';
 
 /**
  * Footer details of expense readonly details.
@@ -11,23 +17,26 @@ export default function ExpenseDrawerFooter() {
   const { expense } = useExpenseDrawerContext();
 
   return (
-    <div className="expense-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
-            <T id={'expense.details.subtotal'} />
-          </div>
-          <div class="amount">
-            {<FormatNumber value={expense.total_amount} />}
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
-            <T id={'expense.details.total'} />
-          </div>
-          <div class="amount">{expense.formatted_amount}</div>
-        </div>
-      </div>
-    </div>
+    <ExpenseDetailsFooterRoot>
+      <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'expense.details.subtotal'} />}
+          value={<FormatNumber value={expense.total_amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'expense.details.total'} />}
+          value={<FormatNumber value={expense.formatted_amount} />}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </ExpenseTotalLines>
+    </ExpenseDetailsFooterRoot>
   );
 }
+
+export const ExpenseDetailsFooterRoot = styled.div``;
+
+export const ExpenseTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
index 8fddabe15..c01cb292c 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
@@ -1,58 +1,79 @@
 import React from 'react';
 import moment from 'moment';
 import { defaultTo } from 'lodash';
+import styled from 'styled-components';
 
-import { DetailItem, DetailsMenu, Money } from 'components';
-import { FormattedMessage as T } from 'components';
+import {
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  Row,
+  Col,
+  DetailItem,
+  DetailsMenu,
+  Money,
+  FormattedMessage as T,
+} from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { ExpenseDetailsStatus } from './components';
 
 /**
  * Expense drawer content.
  */
 export default function ExpenseDrawerHeader() {
-  const {
-    expense: {
-      total_amount,
-      payment_date,
-      currency_code,
-      reference_no,
-      description,
-      published_at,
-    },
-  } = useExpenseDrawerContext();
+  const { expense } = useExpenseDrawerContext();
 
   return (
-    <div className={'expense-drawer__content-header'}>
-      <DetailsMenu>
-        <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
-          <h3 class="big-number">
-            <Money amount={total_amount} currency={currency_code} />
-          </h3>
-        </DetailItem>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
+            <h3 class="big-number">{expense.formatted_amount}</h3>
+          </DetailItem>
 
-        <DetailItem name={'date'} label={<T id={'date'} />}>
-          {moment(payment_date).format('YYYY MMM DD')}
-        </DetailItem>
+          <StatusDetailItem>
+            <ExpenseDetailsStatus expense={expense} />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-        <DetailItem name={'currency'} label={<T id={'currency'} />}>
-          {currency_code}
-        </DetailItem>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem name={'date'} label={<T id={'date'} />}>
+              {moment(expense.payment_date).format('YYYY MMM DD')}
+            </DetailItem>
 
-        <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
-          {defaultTo(reference_no, '-')}
-        </DetailItem>
+            <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
+              {defaultTo(expense.reference_no, '-')}
+            </DetailItem>
 
-        <DetailItem label={<T id={'published_at'} />}>
-          {moment(published_at).format('YYYY MMM DD')}
-        </DetailItem>
-      </DetailsMenu>
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(expense.description, '—')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
 
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem label={<T id={'description'} />}>
-          {defaultTo(description, '—')}
-        </DetailItem>
-        <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
-      </DetailsMenu>
-    </div>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem label={<T id={'published_at'} />}>
+              {moment(expense.published_at).format('YYYY MMM DD')}
+            </DetailItem>
+
+            <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
index 8a46ef316..54b171f5c 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
@@ -1,18 +1,27 @@
 import React from 'react';
-import { DataTable } from 'components';
+
+import { CommercialDocEntriesTable } from 'components';
+
 import { useExpenseReadEntriesColumns } from './utils';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
+import { TableStyle } from '../../../common';
+
 /**
  * Expense details table.
  */
 export default function ExpenseDrawerTable() {
+  // Expense readonly entries columns.
   const columns = useExpenseReadEntriesColumns();
+
+  // Expense drawer context.
   const { expense } = useExpenseDrawerContext();
 
   return (
-    <div className="expense-drawer__content--table">
-      <DataTable columns={columns} data={expense.categories} />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={expense.categories}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/ExpenseDrawer/components.js b/src/containers/Drawers/ExpenseDrawer/components.js
new file mode 100644
index 000000000..be4e2738f
--- /dev/null
+++ b/src/containers/Drawers/ExpenseDrawer/components.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tag, Intent } from '@blueprintjs/core';
+
+import { T } from 'components';
+
+/**
+ * Expense details status.
+ * @returns {React.JSX}
+ */
+export function ExpenseDetailsStatus({ expense }) {
+  return expense.is_published ? (
+    <Tag round={true} minimal={true}>
+      <T id={'published'} />
+    </Tag>
+  ) : (
+    <Tag round={true} intent={Intent.WARNING}>
+      <T id={'draft'} />
+    </Tag>
+  );
+}
diff --git a/src/containers/Drawers/ExpenseDrawer/index.js b/src/containers/Drawers/ExpenseDrawer/index.js
index 1764da1fa..cb3c56f66 100644
--- a/src/containers/Drawers/ExpenseDrawer/index.js
+++ b/src/containers/Drawers/ExpenseDrawer/index.js
@@ -22,7 +22,7 @@ function ExpenseDrawer({
     <Drawer
       isOpen={isOpen}
       name={name}
-      title={intl.get('expense')}
+      title={intl.get('expense.drawer.title')}
       size={'65%'}
       style={{ minWidth: '700px', maxWidth: '900px' }}
     >
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
index 9c7e6b6c6..3586a45b0 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
@@ -1,26 +1,48 @@
 import React from 'react';
-import clsx from 'classnames';
-
-import { Card } from 'components';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
+import { DrawerMainTabs } from 'components';
+import InventoryAdjustmentDetailTab from './InventoryAdjustmentDetailTab';
 import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActionsBar';
-import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
-import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
-
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
+import InventoryAdjustmentDetailGLEntriesPanel from './InventoryAdjustmentDetailGLEntriesPanel';
 
 /**
  * Inventory adjustment detail
+ * @returns {React.JSX}
  */
 export default function InventoryAdjustmentDetail() {
   return (
-    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel)}>
+    <InventoryAdjustmentDetailsRoot>
       <InventoryAdjustmentDetailActionsBar />
-
-      <Card>
-        <InventoryAdjustmentDetailHeader />
-        <InventoryAdjustmentDetailTable />
-      </Card>
-    </div>
+      <InventoryAdjustmentDetailTabs />
+    </InventoryAdjustmentDetailsRoot>
   );
 }
+
+/**
+ * Invenoty adjusment details tabs.
+ * @returns {React.JSX}
+ */
+function InventoryAdjustmentDetailTabs() {
+  return (
+    <DrawerMainTabs
+      renderActiveTabPanelOnly={true}
+      defaultSelectedTabId="details"
+    >
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<InventoryAdjustmentDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<InventoryAdjustmentDetailGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const InventoryAdjustmentDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
index a2fac2adb..160af535c 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
@@ -1,13 +1,11 @@
 import React from 'react';
-
 import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { Icon, FormattedMessage as T, Can } from 'components';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
 import {
   InventoryAdjustmentAction,
   AbilitySubject,
@@ -34,7 +32,7 @@ function InventoryAdjustmentDetailActionsBar({
       I={InventoryAdjustmentAction.Delete}
       a={AbilitySubject.InventoryAdjustment}
     >
-      <DashboardActionsBar>
+      <DrawerActionsBar>
         <NavbarGroup>
           <Button
             className={Classes.MINIMAL}
@@ -44,7 +42,7 @@ function InventoryAdjustmentDetailActionsBar({
             onClick={handleDeleteInventoryAdjustment}
           />
         </NavbarGroup>
-      </DashboardActionsBar>
+      </DrawerActionsBar>
     </Can>
   );
 }
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js
new file mode 100644
index 000000000..e3866fadb
--- /dev/null
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Inentory adjustmet detail GL entries panel.
+ * @returns {React.JSX}
+ */
+export default function InventoryAdjustmentDetailGLEntriesPanel() {
+  const { inventoryId } = useInventoryAdjustmentDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: inventoryId,
+      reference_type: 'inventoryAdjustment',
+    },
+    { enabled: !!inventoryId },
+  );
+
+  return (
+    <InventoryAdjustmentGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </InventoryAdjustmentGLEntriesRoot>
+  );
+}
+
+const InventoryAdjustmentGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
index 91e23344d..91529092d 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
@@ -14,43 +14,37 @@ import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdju
  * Inventory detail header.
  */
 export default function InventoryAdjustmentDetailHeader() {
-  const {
-    inventoryAdjustment: {
-      date,
-      type,
-      adjustment_account,
-      inventory_direction,
-      description,
-      reference_no,
-      reason,
-      published_at,
-      created_at,
-    },
-  } = useInventoryAdjustmentDrawerContext();
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
 
   return (
     <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <DetailItem label={intl.get('date')}>
-          {moment(date).format('YYYY MMM DD')}
+          {moment(inventoryAdjustment.date).format('YYYY MMM DD')}
         </DetailItem>
-        <DetailItem label={intl.get('type')}>{type}</DetailItem>
+
+        <DetailItem label={intl.get('type')}>
+          {inventoryAdjustment.formatted_type}
+        </DetailItem>
+
         <DetailItem label={intl.get('adjustment_account')}>
-          {adjustment_account.name}
+          {inventoryAdjustment.adjustment_account.name}
         </DetailItem>
+
         <DetailItem name={'reference'} label={intl.get('reference_no')}>
-          {defaultTo(reference_no, '-')}
+          {defaultTo(inventoryAdjustment.reference_no, '-')}
         </DetailItem>
+
         <DetailItem label={intl.get('published_at')}>
-          {moment(published_at).format('YYYY MMM DD')}
+          {moment(inventoryAdjustment.published_at).format('YYYY MMM DD')}
         </DetailItem>
-      </DetailsMenu>
-      <DetailsMenu direction={'horizantal'}>
+
         <DetailItem label={intl.get('reason')}>
-          {defaultTo(reason, '—')}
+          {defaultTo(inventoryAdjustment.reason, '—')}
         </DetailItem>
+
         <DetailItem label={intl.get('created_at')}>
-          {moment(created_at).format('YYYY MMM DD')}
+          {moment(inventoryAdjustment.created_at).format('YYYY MMM DD')}
         </DetailItem>
       </DetailsMenu>
     </div>
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js
new file mode 100644
index 000000000..c677ae86e
--- /dev/null
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CommercialDocBox } from 'components';
+
+import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
+import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
+
+export default function InventoryAdjustmentDetailTab() {
+  return (
+    <CommercialDocBox>
+      <InventoryAdjustmentDetailHeader />
+      <InventoryAdjustmentDetailTable />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
index 45b72d638..d52d856ff 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
@@ -1,30 +1,24 @@
 import React from 'react';
-import clsx from 'classnames';
-
-import { DataTable } from 'components';
 
+import { CommercialDocEntriesTable } from 'components';
 import { useInventoryAdjustmentEntriesColumns } from './utils';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
-
 /**
  * Inventory adjustment detail entries table.
  */
 export default function InventoryAdjustmentDetailTable() {
+  // Inventory adjustment entries columns.
   const columns = useInventoryAdjustmentEntriesColumns();
 
-  const {
-    inventoryAdjustment: { entries },
-  } = useInventoryAdjustmentDrawerContext();
+  // Inventory adjustment details drawer context.
+  const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
 
   return (
-    <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={inventoryAdjustment.entries}
+      className={'table-constrant'}
+    />
   );
 }
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js
index fd9b0a12d..f614bc782 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js
@@ -19,7 +19,12 @@ function InventoryAdjustmentDetailDrawer({
   payload: { inventoryId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <InventoryAdjustmentDrawerContent inventoryId={inventoryId} />
       </DrawerSuspense>
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js
index e30135d69..56bd7501a 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js
@@ -5,7 +5,7 @@ export const useInventoryAdjustmentEntriesColumns = () =>
   React.useMemo(
     () => [
       {
-        Header: intl.get('product_and_service'),
+        Header: intl.get('inventory_adjustment.column.product'),
         accessor: 'item.name',
         width: 150,
         className: 'name',
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
index 224e948a0..b432a4db2 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
@@ -1,41 +1,66 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 
+import { useAbilityContext } from 'hooks/utils';
 import { DrawerMainTabs } from 'components';
-
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
+import InvoiceGLEntriesTable from './InvoiceGLEntriesTable';
+import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';
 import InvoiceDetailTab from './InvoiceDetailTab';
-import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+/**
+ * Invoice details tabs.
+ * @returns {React.JSX}
+ */
+function InvoiceDetailsTabs() {
+  const ability = useAbilityContext();
+
+  return (
+    <DrawerMainTabs
+      renderActiveTabPanelOnly={true}
+      defaultSelectedTabId="details"
+    >
+      <Tab
+        title={intl.get('overview')}
+        id={'details'}
+        panel={<InvoiceDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<InvoiceGLEntriesTable />}
+      />
+      {ability.can(
+        PaymentReceiveAction.View,
+        AbilitySubject.PaymentReceive,
+      ) && (
+        <Tab
+          title={intl.get('payment_transactions')}
+          id={'payment_transactions'}
+          panel={<InvoicePaymentTransactionsTable />}
+        />
+      )}
+    </DrawerMainTabs>
+  );
+}
 
 /**
  * Invoice view detail.
+ * @returns {React.JSX}
  */
 export default function InvoiceDetail() {
-  const { transactions } = useInvoiceDetailDrawerContext();
-
   return (
-    <div className={clsx(InvoiceDrawerCls.invoice_details)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<InvoiceDetailTab />}
-        />
-        <Tab
-          title={intl.get('journal_entries')}
-          id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-        {/* <Tab
-          title={intl.get('payment_transactions')}
-          id={'payment_transactions'}
-          // panel={}
-        /> */}
-      </DrawerMainTabs>
-    </div>
+    <InvoiceDetailsRoot>
+      <InvoiceDetailActionsBar />
+      <InvoiceDetailsTabs />
+    </InvoiceDetailsRoot>
   );
 }
+
+export const InvoiceDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index e71ce8243..3042ae0db 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import {
   Button,
   NavbarGroup,
@@ -8,7 +7,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
@@ -16,7 +14,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Can, Icon, FormattedMessage as T } from 'components';
+import {
+  If,
+  Can,
+  Icon,
+  DrawerActionsBar,
+  FormattedMessage as T,
+} from 'components';
 import {
   SaleInvoiceAction,
   PaymentReceiveAction,
@@ -24,7 +28,6 @@ import {
 } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
-
 import { BadDebtMenuItem } from './utils';
 
 /**
@@ -51,6 +54,14 @@ function InvoiceDetailActionsBar({
     closeDrawer('invoice-detail-drawer');
   };
 
+  // Handle convert to invoice.
+  const handleConvertToCreitNote = () => {
+    history.push(`/credit-notes/new?from_invoice_id=${invoiceId}`, {
+      invoiceId: invoiceId,
+    });
+    closeDrawer('invoice-detail-drawer');
+  };
+
   // Handle delete sale invoice.
   const handleDeleteInvoice = () => {
     openAlert('invoice-delete', { invoiceId });
@@ -81,7 +92,7 @@ function InvoiceDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
           <Button
@@ -90,14 +101,13 @@ function InvoiceDetailActionsBar({
             text={<T id={'edit_invoice'} />}
             onClick={handleEditInvoice}
           />
-
           <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} />}
+              icon={<Icon icon="arrow-downward" iconSize={18} />}
               text={<T id={'add_payment'} />}
               onClick={handleQuickPaymentInvoice}
             />
@@ -120,19 +130,20 @@ function InvoiceDetailActionsBar({
             intent={Intent.DANGER}
             onClick={handleDeleteInvoice}
           />
-          <NavbarDivider />
         </Can>
         <Can I={SaleInvoiceAction.Writeoff} a={AbilitySubject.Invoice}>
+          <NavbarDivider />
           <BadDebtMenuItem
             payload={{
               onBadDebt: handleBadDebtInvoice,
               onCancelBadDebt: handleCancelBadDebtInvoice,
               onNotifyViaSMS: handleNotifyViaSMS,
+              onConvert: handleConvertToCreitNote,
             }}
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
index f0f02e483..5bc6109b0 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import InvoiceDetail from './InvoiceDetail';
 import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
 
 /**
  * Invoice detail drawer content.
+ * @returns {React.JSX}
  */
 export default function InvoiceDetailDrawerContent({
   // #ownProp
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index ccb64799b..fa5a342d9 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -1,41 +1,30 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useTransactionsByReference, useInvoice } from 'hooks/query';
+import { useInvoice } from 'hooks/query';
 
 const InvoiceDetailDrawerContext = React.createContext();
 /**
  * Invoice detail provider.
  */
 function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: invoiceId,
-      reference_type: 'SaleInvoice',
-    },
-    { enabled: !!invoiceId },
-  );
-
   // Fetch sale invoice details.
   const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
     enabled: !!invoiceId,
   });
 
-  //provider.
+  // Provider.
   const provider = {
-    transactions,
     invoiceId,
     invoice,
   };
   return (
-    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
+    <DrawerLoading loading={isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
-        title={intl.get('invoice_details')}
+        title={intl.get('invoice_details.drawer.title', {
+          invoiceNumber: invoice.invoice_no,
+        })}
       />
       <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
index b62823464..1c2c061cf 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
@@ -1,40 +1,39 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { T, TotalLines, FormatNumber, TotalLine } from 'components';
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
  * Invoice details footer.
+ * @returns {React.JSX}
  */
 export function InvoiceDetailFooter() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
+  if (!invoice.terms_conditions && !invoice.invoice_message) {
+    return null;
+  }
   return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
-      <TotalLines>
-        <TotalLine
-          title={<T id={'invoice.details.subtotal'} />}
-          value={<FormatNumber value={invoice.balance} />}
-          className={InvoiceDrawerCls.total_line_subtotal}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.total'} />}
-          value={invoice.formatted_amount}
-          className={InvoiceDrawerCls.total_line_total}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.payment_amount'} />}
-          value={invoice.formatted_payment_amount}
-          className={InvoiceDrawerCls.total_line_payment}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.due_amount'} />}
-          value={invoice.formatted_due_amount}
-          className={InvoiceDrawerCls.total_line_dueAmount}
-        />
-      </TotalLines>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={invoice.terms_conditions}>
+          <DetailItem label={<T id={'terms_conditions'} />}>
+            {invoice.terms_conditions}
+          </DetailItem>
+        </If>
+
+        <If condition={invoice.invoice_message}>
+          <DetailItem label={<T id={'invoice.details.invoice_message'} />}>
+            {invoice.invoice_message}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
index 9714cbb6e..144dab077 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
@@ -1,12 +1,21 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import {
+  ButtonLink,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  FormatDate,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  CustomerDrawerLink,
+} from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
-
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+import { InvoiceDetailsStatus } from './utils';
 
 /**
  * Invoice detail header.
@@ -14,44 +23,81 @@ import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss
 export default function InvoiceDetailHeader() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
-  return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number">{invoice.formatted_amount}</h3>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('invoice_no')}
-          children={invoice.invoice_no}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={invoice.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('invoice_date')}
-          children={<FormatDate value={invoice.invoice_date} />}
-        />
-        <DetailItem
-          label={intl.get('due_date')}
-          children={<FormatDate value={invoice.due_date} />}
-        />
-      </DetailsMenu>
+  const handleCustomerLinkClick = () => {};
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('due_amount')}
-          children={invoice.formatted_due_amount}
-        />
-        <DetailItem
-          label={intl.get('reference')}
-          children={defaultTo(invoice.reference_no, '--')}
-        />
-        <DetailItem
-          label={intl.get('invoice.details.created_at')}
-          children={<FormatDate value={invoice.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountDetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{invoice.formatted_amount}</h3>
+          </AmountDetailItem>
+
+          <StatusDetailItem label={''}>
+            <InvoiceDetailsStatus invoice={invoice} />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('invoice_date')}>
+              <FormatDate value={invoice.invoice_date} />
+            </DetailItem>
+
+            <DetailItem label={intl.get('due_date')}>
+              <FormatDate value={invoice.due_date} />
+            </DetailItem>
+
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={invoice.customer_id}>
+                {invoice.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+
+            <DetailItem label={intl.get('invoice.details.invoice_no')}>
+              {invoice.invoice_no}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+            textAlign={'right'}
+          >
+            <DetailItem label={intl.get('due_amount')}>
+              <strong>{invoice.formatted_due_amount}</strong>
+            </DetailItem>
+
+            <DetailItem label={intl.get('invoice.details.payment_amount')}>
+              <strong>{invoice.formatted_payment_amount}</strong>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(invoice.reference_no, '--')}
+            />
+            <DetailItem
+              label={intl.get('invoice.details.created_at')}
+              children={<FormatDate value={invoice.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
+
+const AmountDetailItem = styled(DetailItem)`
+  width: 50%;
+`;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
index 5741f7674..e9b0dd72d 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
@@ -1,28 +1,22 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
 import InvoiceDetailHeader from './InvoiceDetailHeader';
 import InvoiceDetailTable from './InvoiceDetailTable';
+import { InvoiceDetailTableFooter } from './InvoiceDetailTableFooter';
 import { InvoiceDetailFooter } from './InvoiceDetailFooter';
 
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
-
 /**
  * Invoice readonly details tab panel.
  */
 export default function InvoiceDetailTab() {
   return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel)}>
-      <InvoiceDetailActionsBar />
-
-      <Card>
-        <InvoiceDetailHeader />
-        <InvoiceDetailTable />
-        <InvoiceDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <InvoiceDetailHeader />
+      <InvoiceDetailTable />
+      <InvoiceDetailTableFooter />
+      <InvoiceDetailFooter />
+    </CommercialDocBox>
   );
-}
\ No newline at end of file
+}
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
index 95fa6d8a9..6fabdf886 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
@@ -1,30 +1,29 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
 
 import { useInvoiceReadonlyEntriesColumns } from './utils';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
-import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+import { TableStyle } from '../../../common';
 
 /**
  * Invoice readonly details entries table columns.
  */
 export default function InvoiceDetailTable() {
+  // Invoice readonly entries table columns.
   const columns = useInvoiceReadonlyEntriesColumns();
 
+  // Invoice details drawer context.
   const {
     invoice: { entries },
   } = useInvoiceDetailDrawerContext();
 
   return (
-    <div className={clsx(InvoiceDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
-}
+}
\ No newline at end of file
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js
new file mode 100644
index 000000000..994c109ef
--- /dev/null
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  FormatNumber,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice details footer.
+ */
+export function InvoiceDetailTableFooter() {
+  const { invoice } = useInvoiceDetailDrawerContext();
+
+  return (
+    <InvoiceDetailsFooterRoot>
+      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'invoice.details.subtotal'} />}
+          value={<FormatNumber value={invoice.balance} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.total'} />}
+          value={invoice.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.payment_amount'} />}
+          value={invoice.formatted_payment_amount}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.due_amount'} />}
+          value={invoice.formatted_due_amount}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </InvoiceTotalLines>
+    </InvoiceDetailsFooterRoot>
+  );
+}
+
+const InvoiceDetailsFooterRoot = styled.div``;
+
+const InvoiceTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
new file mode 100644
index 000000000..aade4e656
--- /dev/null
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Invoice GL entries table.
+ * @returns {React.JSX}
+ */
+export default function InvoiceGLEntriesTable() {
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: invoiceId,
+      reference_type: 'SaleInvoice',
+    },
+    { enabled: !!invoiceId },
+  );
+
+  return (
+    <InvoiceGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <InvoiceGLEntriesDatatable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </InvoiceGLEntriesRoot>
+  );
+}
+
+const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)``;
+
+const InvoiceGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
new file mode 100644
index 000000000..b047ceb4d
--- /dev/null
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { DataTable, Card } from 'components';
+
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
+import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
+import { useInvoicePaymentTransactions } from 'hooks/query';
+
+import { TableStyle } from '../../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice payment transactions datatable.
+ */
+function InvoicePaymentTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Invoice payment transactions table columns.
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  // Invoice drawer context.
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Fetch invoice payment transactions.
+  const {
+    data: paymentTransactions,
+    isFetching: isPaymentTransactionFetching,
+    isLoading: isPaymentTransactionLoading,
+  } = useInvoicePaymentTransactions(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ payment_receive_id }) => {
+    openAlert('payment-receive-delete', {
+      paymentReceiveId: payment_receive_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ payment_receive_id }) => {
+    history.push(`/payment-receives/${payment_receive_id}/edit`);
+    closeDrawer('invoice-detail-drawer');
+  };
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={paymentTransactions}
+        loading={isPaymentTransactionLoading}
+        headerLoading={isPaymentTransactionLoading}
+        progressBarLoading={isPaymentTransactionFetching}
+        TableLoadingRenderer={TableSkeletonRows}
+        styleName={TableStyle.Constrant}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentTransactons,
+          onEdit: handleEditPaymentTransactions,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactionsTable);
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
new file mode 100644
index 000000000..d65038f9e
--- /dev/null
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { FormatDateCell, Icon, Can } from '../../../../components';
+import { safeCallback } from 'utils';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve invoice payment transactions table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('payment_date'),
+        accessor: 'formatted_payment_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        id: 'deposit_account_name',
+        Header: intl.get('invoice_transactions.column.withdrawal_account'),
+        accessor: 'deposit_account_name',
+        width: 120,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'formatted_payment_amount',
+        align: 'right',
+        width: 120,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'payment_number.',
+        Header: intl.get('payment_no'),
+        accessor: 'payment_number',
+        width: 100,
+        className: 'payment_number',
+        textOverview: true,
+      },
+      {
+        id: 'payment_reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'payment_reference_no',
+        width: 90,
+        className: 'payment_reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/index.js b/src/containers/Drawers/InvoiceDetailDrawer/index.js
index 97c85d71e..fbc89234b 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/index.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/index.js
@@ -21,7 +21,7 @@ function InvoiceDetailDrawer({
     <Drawer
       isOpen={isOpen}
       name={name}
-      style={{ minWidth: '700px', maxWidth: '900px' }}
+      style={{ minWidth: '700px', maxWidth: '1000px' }}
       size={'65%'}
     >
       <DrawerSuspense>
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
index 68c4cbc29..fcb35f3a2 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 import {
   Button,
   Popover,
@@ -7,9 +8,20 @@ import {
   Position,
   MenuItem,
   Menu,
+  Intent,
+  Tag,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T, Choose } from 'components';
-import { FormatNumberCell } from '../../../components';
+import {
+  FormatNumberCell,
+  Icon,
+  FormattedMessage as T,
+  Choose,
+  Can,
+} from 'components';
+import {
+  SaleInvoiceAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
@@ -59,8 +71,12 @@ export const useInvoiceReadonlyEntriesColumns = () =>
     [],
   );
 
+/**
+ * Invoice details more actions menu.
+ * @returns {React.JSX}
+ */
 export const BadDebtMenuItem = ({
-  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
+  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS, onConvert },
 }) => {
   const { invoice } = useInvoiceDetailDrawerContext();
 
@@ -88,10 +104,18 @@ export const BadDebtMenuItem = ({
               />
             </Choose.When>
           </Choose>
-          <MenuItem
-            onClick={onNotifyViaSMS}
-            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
-          />
+          <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+            <MenuItem
+              onClick={onConvert}
+              text={<T id={'invoice.convert_to_credit_note'} />}
+            />
+          </Can>
+          <Can I={SaleInvoiceAction.NotifyBySms} a={AbilitySubject.Invoice}>
+            <MenuItem
+              onClick={onNotifyViaSMS}
+              text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+            />
+          </Can>
         </Menu>
       }
     >
@@ -99,3 +123,44 @@ export const BadDebtMenuItem = ({
     </Popover>
   );
 };
+
+/**
+ * Invoice details status.
+ * @returns {React.JSX}
+ */
+export function InvoiceDetailsStatus({ invoice }) {
+  return (
+    <Choose>
+      <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
+        <StatusTag intent={Intent.SUCCESS} round={true}>
+          <T id={'paid'} />
+        </StatusTag>
+      </Choose.When>
+
+      <Choose.When condition={invoice.is_delivered}>
+        <Choose>
+          <Choose.When condition={invoice.is_overdue}>
+            <StatusTag intent={Intent.WARNING} round={true}>
+              <T id={'overdue'} />
+            </StatusTag>
+          </Choose.When>
+          <Choose.Otherwise>
+            <StatusTag intent={Intent.PRIMARY} round={true}>
+              <T id={'delivered'} />
+            </StatusTag>
+          </Choose.Otherwise>
+        </Choose>
+      </Choose.When>
+      <Choose.Otherwise>
+        <StatusTag round={true} minimal={true}>
+          <T id={'draft'} />
+        </StatusTag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+const StatusTag = styled(Tag)`
+  min-width: 65px;
+  text-align: center;
+`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
index 140e72543..e2044c0e1 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
@@ -1,9 +1,7 @@
 import React from 'react';
 
+import ItemDetailTab from './ItemDetailTab';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
-import ItemDetailHeader from './ItemDetailHeader';
-
-import { Card } from 'components';
 
 /**
  * Item detail.
@@ -12,10 +10,7 @@ export default function ItemDetail() {
   return (
     <div className="item-drawer">
       <ItemDetailActionsBar />
-
-      <Card>
-        <ItemDetailHeader />
-      </Card>
+      <ItemDetailTab />
     </div>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
index bb83783b3..c748e559b 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
@@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext();
  * Item detail provider
  */
 function ItemDetailDrawerProvider({ itemId, ...props }) {
+  // transaction type payload.
+  const [value, setValue] = React.useState('invoices');
+
   // Fetches the given item detail.
   const { isLoading: isItemLoading, data: item } = useItem(itemId, {
     enabled: !!itemId,
@@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
     item,
     itemId,
     isItemLoading,
+    value,
+    setValue,
   };
 
   return (
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
index 0511a2c4f..ce2f9ab8d 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import classNames from 'classnames';
 
-import { If, DetailsMenu, DetailItem } from 'components';
+import { If, DetailsMenu, DetailItem, Card } from 'components';
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
 
 /**
@@ -13,70 +13,72 @@ export default function ItemDetailHeader() {
   const { item } = useItemDetailDrawerContext();
 
   return (
-    <div class="item-drawer__content">
-      <DetailsMenu direction={'vertical'}>
-        <DetailItem
-          name={'name'}
-          label={intl.get('item_name')}
-          children={item.name}
-        />
-        <DetailItem
-          label={intl.get('sell_price')}
-          children={item.sell_price_formatted}
-          align={'right'}
-        />
-        <DetailItem
-          label={intl.get('cost_price')}
-          children={item.cost_price_formatted}
-          align={'right'}
-        />
-      </DetailsMenu>
-
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem label={intl.get('item_type')} children={item.type} />
-        <DetailItem
-          label={intl.get('item_code')}
-          children={defaultTo(item.code, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
-          <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
-            <span
-              className={classNames({
-                mines: item.quantity_on_hand <= 0,
-                plus: item.quantity_on_hand > 0,
-              })}
-            >
-              {defaultTo(item.quantity_on_hand, '-')}
-            </span>
-          </DetailItem>
-        </If>
-        <DetailItem
-          label={intl.get('category_name')}
-          children={defaultTo(item.category?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('sell_account_id')}
-          children={defaultTo(item?.sell_account?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('cost_account_id')}
-          children={defaultTo(item.cost_account?.name, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
+    <Card>
+      <div class="item-drawer__content">
+        <DetailsMenu direction={'vertical'}>
           <DetailItem
-            label={intl.get('inventory_account')}
-            children={defaultTo(item?.inventory_account?.name, '-')}
+            name={'name'}
+            label={intl.get('item_name')}
+            children={item.name}
           />
-        </If>
-        <DetailItem
-          label={intl.get('item.sell_description')}
-          children={defaultTo(item.sell_description, '-')}
-        />
-        <DetailItem
-          label={intl.get('item.purchase_description')}
-          children={defaultTo(item.cost_description, '-')}
-        />
-      </DetailsMenu>
-    </div>
+          <DetailItem
+            label={intl.get('sell_price')}
+            children={item.sell_price_formatted}
+            align={'right'}
+          />
+          <DetailItem
+            label={intl.get('cost_price')}
+            children={item.cost_price_formatted}
+            align={'right'}
+          />
+        </DetailsMenu>
+
+        <DetailsMenu direction={'horizantal'}>
+          <DetailItem label={intl.get('item_type')} children={item.type_formatted} />
+          <DetailItem
+            label={intl.get('item_code')}
+            children={defaultTo(item.code, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
+              <span
+                className={classNames({
+                  mines: item.quantity_on_hand <= 0,
+                  plus: item.quantity_on_hand > 0,
+                })}
+              >
+                {defaultTo(item.quantity_on_hand, '-')}
+              </span>
+            </DetailItem>
+          </If>
+          <DetailItem
+            label={intl.get('category_name')}
+            children={defaultTo(item.category?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('sell_account_id')}
+            children={defaultTo(item?.sell_account?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('cost_account_id')}
+            children={defaultTo(item.cost_account?.name, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem
+              label={intl.get('inventory_account')}
+              children={defaultTo(item?.inventory_account?.name, '-')}
+            />
+          </If>
+          <DetailItem
+            label={intl.get('item.sell_description')}
+            children={defaultTo(item.sell_description, '-')}
+          />
+          <DetailItem
+            label={intl.get('item.purchase_description')}
+            children={defaultTo(item.purchase_description, '-')}
+          />
+        </DetailsMenu>
+      </div>
+    </Card>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
new file mode 100644
index 000000000..e964d4bd5
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { ItemPaymentTransactions } from './ItemPaymentTransactions';
+import ItemDetailHeader from './ItemDetailHeader';
+
+
+export default function ItemDetailTab() {
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        id={'overview'}
+        title={<T id={'overview'} />}
+        panel={<ItemDetailHeader />}
+      />
+      <Tab
+        id={'transactions'}
+        title={<T id={'transactions'} />}
+        panel={<ItemPaymentTransactions />}
+      />
+    </DrawerMainTabs>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
new file mode 100644
index 000000000..e0755777f
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+import {
+  BillAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve bill transactions associated with item table columns.
+ */
+export const useBillTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor'),
+        accessor: 'vendor_display_name',
+        width: 140,
+        className: 'vendor',
+        textOverview: true,
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        align: 'right',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
new file mode 100644
index 000000000..92b0250fb
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { TableStyle } from 'common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
+
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedBillTransactions } from 'hooks/query';
+import { useBillTransactionsColumns, ActionsMenu } from './components';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Bill payment transactions data table.
+ */
+function BillPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useBillTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isBillTransactionsLoading,
+    isFetching: isBillTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedBillTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isBillTransactionsLoading}
+      headerLoading={isBillTransactionsLoading}
+      progressBarLoading={isBillTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
+    />
+  );
+}
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactions);
+
+
+
+
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
new file mode 100644
index 000000000..2c8d92524
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve estimate transactions associated with item table columns.
+ */
+export const useEstimateTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_estimate_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 120,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        align: 'right',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
new file mode 100644
index 000000000..b21c05384
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { TableStyle } from 'common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedEstimateTransactions } from 'hooks/query';
+import { useEstimateTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Esimtate payment transactions.
+ */
+function EstimatePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useEstimateTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isEstimateTransactionsLoading,
+    isFetching: isEstimateTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedEstimateTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ estimate_id }) => {
+    openAlert('estimate-delete', {
+      estimateId: estimate_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ estimate_id }) => {
+    history.push(`/estimates/${estimate_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isEstimateTransactionsLoading}
+      headerLoading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
+    />
+  );
+}
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(EstimatePaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
new file mode 100644
index 000000000..9f145b381
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+import {
+  SaleInvoiceAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve invoice payment transactions associated with item table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_invoice_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_number',
+        width: 120,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        align: 'right',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: intl.get('rate'),
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
new file mode 100644
index 000000000..28e4fb3ee
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
+
+import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
+import { TableStyle } from 'common';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice payment transactions.
+ */
+function InvoicePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch invoice associated transactions.
+  const {
+    isLoading: isInvoiceTransactionsLoading,
+    isFetching: isInvoiceTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedInvoiceTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ invoice_id }) => {
+    openAlert('invoice-delete', {
+      invoiceId: invoice_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ invoice_id }) => {
+    history.push(`/invoices/${invoice_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isInvoiceTransactionsLoading}
+      headerLoading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
new file mode 100644
index 000000000..dd8866f89
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import InvoicePaymentTransactions from './InvoicePaymentTransactions';
+import EstimatePaymentTransactions from './EstimatePaymentTransactions';
+import ReceiptPaymentTransactions from './ReceiptPaymentTransactions';
+import BillPaymentTransactions from './BillPaymentTransactions';
+
+export default function ItemPaymentTransactionsContent({ tansactionType }) {
+  const handleType = () => {
+    switch (tansactionType) {
+      case 'invoices':
+      default:
+        return <InvoicePaymentTransactions />;
+      case 'estimates':
+        return <EstimatePaymentTransactions />;
+      case 'receipts':
+        return <ReceiptPaymentTransactions />;
+      case 'bills':
+        return <BillPaymentTransactions />;
+    }
+  };
+  return handleType();
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
new file mode 100644
index 000000000..393d5c48d
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve receipt transactions associated with item table columns.
+ */
+export const useReceiptTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_receipt_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receip_number',
+        width: 120,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        align: 'right',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
new file mode 100644
index 000000000..d9d96e705
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
+import { TableStyle } from 'common';
+
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedReceiptTransactions } from 'hooks/query';
+import { useReceiptTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Receipt payment transactions.
+ */
+function ReceiptPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useReceiptTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch receipts associated transactions.
+  const {
+    isLoading: isReceiptTransactionsLoading,
+    isFetching: isReceiptTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedReceiptTransactions(itemId, {
+    enabled: !!itemId,
+  });
+  
+    // Handles delete payment transactions.
+    const handleDeletePaymentTransactons = ({ receipt_id }) => {
+      openAlert('receipt-delete', {
+        receiptId: receipt_id,
+      });
+    };
+  
+    // Handles edit payment transactions.
+    const handleEditPaymentTransactions = ({ receipt_id }) => {
+      history.push(`/receipts/${receipt_id}/edit`);
+      closeDrawer('item-detail-drawer');
+    };
+  
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isReceiptTransactionsLoading}
+      headerLoading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(ReceiptPaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
new file mode 100644
index 000000000..4b5799128
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import { ItemManuTransaction } from './utils';
+import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
+
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+
+export function ItemPaymentTransactions() {
+  const { value } = useItemDetailDrawerContext();
+
+  return (
+    <Card>
+      <ItemTransactionsHeader />
+      <ItemPaymentTransactionContent tansactionType={value} />
+    </Card>
+  );
+}
+
+/**
+ * Item transactions header.
+ * @returns {React.JSX}
+ */
+export function ItemTransactionsHeader() {
+  const { setValue } = useItemDetailDrawerContext();
+
+  // handle item change.
+  const handleItemChange = (item) => {
+    setValue(item);
+  };
+
+  return (
+    <ItemTransactionsHeaderRoot>
+      <ItemManuTransaction onChange={handleItemChange} />
+    </ItemTransactionsHeaderRoot>
+  );
+}
+
+export const ItemTransactionsHeaderRoot = styled.div`
+  margin-bottom: 10px;
+`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
new file mode 100644
index 000000000..c07f85dfd
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  Button,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import styled from 'styled-components';
+import { FormattedMessage as T } from 'components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useGetItemPaymentTransactionsMenu } from '../../../../common/itemPaymentTranactionsOption';
+
+export const ItemManuTransaction = ({ onChange }) => {
+  const { value, setValue } = useItemDetailDrawerContext();
+  const itemTransactionMenu = useGetItemPaymentTransactionsMenu();
+
+  if (itemTransactionMenu.length === 0) {
+    return null;
+  }
+
+  const handleClickItem = (item) => {
+    onChange && onChange(item);
+  };
+
+  const content = itemTransactionMenu.map(({ name, label }) => (
+    <MenuItem onClick={() => handleClickItem(name)} text={label} />
+  ));
+
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={<Menu>{content}</Menu>}
+    >
+      <ItemSwitchButton
+        minimal={true}
+        text={<T id={'item.drawer_transactions_by'} />}
+        rightIcon={'caret-down'}
+      >
+        <ItemSwitchText>
+          <T id={value} />
+        </ItemSwitchText>
+      </ItemSwitchButton>
+    </Popover>
+  );
+};
+
+const ItemSwitchButton = styled(Button)`
+  .bp3-button-text {
+    display: flex;
+    color: #727983;
+  }
+`;
+
+const ItemSwitchText = styled.span`
+  font-weight: 600;
+  color: #33304a;
+  padding-left: 3px;
+`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/index.js b/src/containers/Drawers/ItemDetailDrawer/index.js
index af6ef5569..9cd4f3b42 100644
--- a/src/containers/Drawers/ItemDetailDrawer/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/index.js
@@ -19,7 +19,12 @@ function ItemDetailDrawer({
   payload: { itemId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <ItemDetailDrawerContent itemId={itemId} />
       </DrawerSuspense>
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
index 007edf042..a4d435107 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
@@ -8,9 +8,8 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
@@ -47,7 +46,7 @@ function ManualJournalDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
           <Button
@@ -68,7 +67,7 @@ function ManualJournalDrawerActionBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
index 67794ea93..8750994e3 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
@@ -1,31 +1,28 @@
 import React from 'react';
+import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from '../../../components';
 
 import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
 import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
 import ManualJournalDrawerTable from './ManualJournalDrawerTable';
 import ManualJournalDrawerFooter from './ManualJournalDrawerFooter';
 
-import { useManualJournalDrawerContext } from 'containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider';
-
 /**
  * Manual journal view details.
  */
 export default function ManualJournalDrawerDetails() {
-  const { manualJournal } = useManualJournalDrawerContext();
-
   return (
-    <div className={'journal-drawer'}>
-      <ManualJournalDrawerActionBar manualJournal={manualJournal} />
+    <ManualJournalDetailsRoot>
+      <ManualJournalDrawerActionBar />
 
-      <div className="journal-drawer__content">
-        <Card>
-          <ManualJournalDrawerHeader />
-          <ManualJournalDrawerTable />
-          <ManualJournalDrawerFooter />
-        </Card>
-      </div>
-    </div>
+      <CommercialDocBox>
+        <ManualJournalDrawerHeader />
+        <ManualJournalDrawerTable />
+        <ManualJournalDrawerFooter />
+      </CommercialDocBox>
+    </ManualJournalDetailsRoot>
   );
 }
+
+const ManualJournalDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
index 3661ce341..a30d35a35 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
@@ -1,7 +1,15 @@
 import React from 'react';
-import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import styled from 'styled-components';
 
-import { T, FormatNumber } from '../../../components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import {
+  TRDarkSingleLine,
+  TRDarkDoubleLines,
+  T,
+  FormatNumber,
+  Table,
+  TD,
+} from '../../../components';
 
 /**
  * Manual journal readonly details footer.
@@ -13,26 +21,41 @@ export default function ManualJournalDrawerFooter() {
 
   return (
     <div className="journal-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
+      <JournalTotalTable>
+        <TRDarkSingleLine>
+          <TDLabel>
             <T id={'manual_journal.details.subtotal'} />
-          </div>
-          <div class="debit">
+          </TDLabel>
+          <TDAmount textAlign={'right'}>
             <FormatNumber value={amount} />
-          </div>
-          <div class="credit">
+          </TDAmount>
+          <TDAmount textAlign={'right'}>
             <FormatNumber value={amount} />
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
+          </TDAmount>
+        </TRDarkSingleLine>
+
+        <TRDarkDoubleLines>
+          <TDLabel>
             <T id={'manual_journal.details.total'} />
-          </div>
-          <div class="debit">{formatted_amount}</div>
-          <div class="credit">{formatted_amount}</div>
-        </div>
-      </div>
+          </TDLabel>
+          <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
+          <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
+        </TRDarkDoubleLines>
+      </JournalTotalTable>
     </div>
   );
 }
+
+const JournalTotalTable = styled(Table)`
+  font-weight: 600;
+  width: auto;
+  margin-left: auto;
+`;
+
+const TDLabel = styled(TD)`
+  width: 220px;
+`;
+
+const TDAmount = styled(TD)`
+  width: 155px;
+`;
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
index e9b4315f7..c31873726 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
@@ -1,53 +1,71 @@
 import React from 'react';
 import { defaultTo } from 'lodash';
-import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
+import styled from 'styled-components';
+
+import {
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  FormattedMessage as T,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from 'components';
+import { ManualJournalDetailsStatus } from './utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Manual journal details header.
  */
 export default function ManualJournalDrawerHeader() {
-  const {
-    manualJournal: {
-      formatted_amount,
-      journal_type,
-      journal_number,
-      reference,
-      currency_code,
-      description,
-    },
-  } = useManualJournalDrawerContext();
+  const { manualJournal } = useManualJournalDrawerContext();
 
   return (
-    <div className={'journal-drawer__content-header'}>
-      <DetailsMenu>
-        <DetailItem name={'total'} label={<T id={'total'} />}>
-          <h3 class="amount">{formatted_amount}</h3>
-        </DetailItem>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem name={'total'} label={<T id={'total'} />}>
+            <h3 class="big-number">{manualJournal.formatted_amount}</h3>
+          </DetailItem>
 
-        <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
-          {journal_type}
-        </DetailItem>
+          <StatusDetailItem>
+            <ManualJournalDetailsStatus manualJournal={manualJournal} />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-        <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
-          {journal_number}
-        </DetailItem>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
+              {manualJournal.journal_type}
+            </DetailItem>
 
-        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-          {defaultTo(reference, '-')}
-        </DetailItem>
+            <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
+              {manualJournal.journal_number}
+            </DetailItem>
 
-        <DetailItem name={'currency'} label={<T id={'currency'} />}>
-          {currency_code}
-        </DetailItem>
-      </DetailsMenu>
+            <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+              {defaultTo(manualJournal.reference, '-')}
+            </DetailItem>
 
-      <div class="journal-drawer__content-description">
-        <b class="title">
-          <T id={'manual_journal.details.description'} />
-        </b>
-        : {defaultTo(description, '—')}
-      </div>
-    </div>
+            <DetailItem name={'currency'} label={<T id={'currency'} />}>
+              {manualJournal.currency_code}
+            </DetailItem>
+
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(manualJournal.description, '—')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
index 0d007e7fb..77ac64aff 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
@@ -31,7 +31,7 @@ function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
     <DrawerLoading loading={isJournalLoading}>
       <DrawerHeaderContent
         name={'journal-drawer'}
-        title={intl.get('manual_journal_number', {
+        title={intl.get('manual_journal.drawer.title', {
           number: manualJournal?.journal_number,
         })}
       />
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
index 5ae255d15..19bada867 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
@@ -1,27 +1,23 @@
 import React from 'react';
 
-import { DataTable, If } from 'components';
+import { CommercialDocEntriesTable  } from 'components';
 import { useManualJournalEntriesColumns } from './utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
+import { TableStyle } from '../../../common';
+
 /**
  * Manual journal drawer table.
  */
 export default function ManualJournalDrawerTable() {
   const columns = useManualJournalEntriesColumns();
-  const {
-    manualJournal: { entries, description },
-  } = useManualJournalDrawerContext();
+  const { manualJournal } = useManualJournalDrawerContext();
 
   return (
-    <div className="journal-drawer__content-table">
-      <DataTable columns={columns} data={entries} />
-
-      <If condition={description}>
-        <p className={'desc'}>
-          <b>Description</b>: {description}
-        </p>
-      </If>
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={manualJournal.entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/ManualJournalDrawer/utils.js b/src/containers/Drawers/ManualJournalDrawer/utils.js
index 1d2a1f5c1..944c4f784 100644
--- a/src/containers/Drawers/ManualJournalDrawer/utils.js
+++ b/src/containers/Drawers/ManualJournalDrawer/utils.js
@@ -1,8 +1,8 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';
+import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core';
 
-import { FormatNumberCell, If, Icon } from '../../../components';
+import { T, Choose, FormatNumberCell, If, Icon } from '../../../components';
 
 /**
  * Note column accessor.
@@ -22,6 +22,27 @@ export function NoteAccessor(row) {
   );
 }
 
+/**
+ * Publish column accessor.
+ */
+export function ManualJournalDetailsStatus({ manualJournal }) {
+  return (
+    <Choose>
+      <Choose.When condition={!!manualJournal.is_published}>
+        <Tag minimal={true} round={true}>
+          <T id={'published'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
 /**
  * Retrieve read-only manual journal entries columns.
  */
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
index c3f804381..3023f8e2c 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
@@ -1,8 +1,6 @@
 import React from 'react';
+
 import { DrawerBody } from 'components';
-
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import PaymentMadeDetails from './PaymentMadeDetails';
 import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
 
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
index eedf8e9c4..5ba3e99ff 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
@@ -1,8 +1,13 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine } from 'components';
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
 /**
@@ -12,19 +17,26 @@ export default function PaymentMadeDetailFooter() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
-      <TotalLines>
+    <PaymentMadeFooterRoot>
+      <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'payment_made.details.subtotal'} />}
           value={paymentMade.amount}
-          className={clsx(PaymentDrawerCls.total_line_subtotal)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'payment_made.details.total'} />}
           value={paymentMade.formatted_amount}
-          className={clsx(PaymentDrawerCls.total_line_total)}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-    </div>
+      </PaymentMadeTotalLines>
+    </PaymentMadeFooterRoot>
   );
 }
+
+export const PaymentMadeFooterRoot = styled.div``;
+
+export const PaymentMadeTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
index 84e182164..6e36411f5 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -1,13 +1,20 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  ButtonLink,
+  VendorDrawerLink,
+} from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
 /**
  * Payment made - detail panel - header.
  */
@@ -15,39 +22,55 @@ export default function PaymentMadeDetailHeader() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number" children={paymentMade.formatted_amount} />
-        </DetailItem>
-        <DetailItem
-          label={intl.get('payment_made.details.payment_number')}
-          children={defaultTo(paymentMade.payment_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={paymentMade.vendor?.display_name}
-        />
-        <DetailItem
-          label={intl.get('payment_account')}
-          children={paymentMade.payment_account?.name}
-        />
-        <DetailItem
-          label={intl.get('payment_date')}
-          children={<FormatDate value={paymentMade.payment_date} />}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{paymentMade.formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
-        <DetailItem
-          label={intl.get('description')}
-          children={defaultTo(paymentMade.statement, '-')}
-        />
-        <DetailItem
-          label={intl.get('created_at')}
-          children={<FormatDate value={paymentMade.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_made.details.payment_number')}
+              children={defaultTo(paymentMade.payment_number, '-')}
+            />
+            <DetailItem label={intl.get('vendor_name')}>
+              <VendorDrawerLink vendorId={paymentMade.vendor_id}>
+                {paymentMade.vendor?.display_name}
+              </VendorDrawerLink>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('payment_account')}
+              children={paymentMade.payment_account?.name}
+            />
+
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentMade.payment_date} />}
+            />
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('description')}
+              children={defaultTo(paymentMade.statement, '-')}
+            />
+            <DetailItem
+              label={intl.get('created_at')}
+              children={<FormatDate value={paymentMade.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index 478f08ee3..6cccd96c0 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -20,32 +20,24 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
       enabled: !!paymentMadeId,
     },
   );
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: paymentMadeId,
-      reference_type: 'BillPayment',
-    },
-    { enabled: !!paymentMadeId },
-  );
 
   //provider.
   const provider = {
-    transactions,
     paymentMadeId,
     paymentMade,
   };
 
-  const loading = isTransactionLoading || isPaymentMadeLoading;
+  const loading = isPaymentMadeLoading;
 
   return (
     <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="payment-made-detail-drawer"
-        title={intl.get('payment_made_details')}
+        title={intl.get('payment_made.drawer.title', {
+          number: paymentMade.payment_number
+            ? `(${paymentMade.payment_number})`
+            : '',
+        })}
       />
       <PaymentMadeDetailContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
index 58902503c..292639a13 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
@@ -1,28 +1,21 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
 import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
 import PaymentMadeDetailTable from './PaymentMadeDetailTable';
 import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
 /**
  * Payment made detail tab.
+ * @returns {React.JSX}
  */
 export default function PaymentMadeDetailTab() {
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel)}>
-      <PaymentMadeDetailActionsBar />
-
-      <Card>
-        <PaymentMadeDetailHeader />
-        <PaymentMadeDetailTable />
-        <PaymentMadeDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <PaymentMadeDetailHeader />
+      <PaymentMadeDetailTable />
+      <PaymentMadeDetailFooter />
+    </CommercialDocBox>
   );
 }
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
index 2c79fc3d0..5d090f10f 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
+
+import { CommercialDocEntriesTable } from 'components';
 
 import { usePaymentMadeEntriesColumns } from './utils';
-import { DataTable } from 'components';
-
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import { TableStyle } from 'common';
 
 /**
  * Payment made read-only details table.
@@ -19,12 +18,10 @@ export default function PaymentMadeDetailTable() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={paymentMade.entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={paymentMade.entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
index 32e6e8937..6941263cc 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
@@ -1,35 +1,47 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
-import PaymentMadeDetailTab from './PaymentMadeDetailTab';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
+import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
 
 /**
  * Payment made - view detail.
+ * @returns {React.JSX}
  */
-export default function PaymentMadeDetails() {
-  const { transactions } = usePaymentMadeDetailContext();
 
+function PaymentMadeDetailsTabs() {
   return (
-    <div className={clsx(PaymentDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          id={'details'}
-          title={intl.get('details')}
-          panel={<PaymentMadeDetailTab />}
-        />
-        <Tab
-          id={'journal_entries'}
-          title={intl.get('journal_entries')}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        id={'details'}
+        title={intl.get('details')}
+        panel={<PaymentMadeDetailTab />}
+      />
+      <Tab
+        id={'journal_entries'}
+        title={intl.get('journal_entries')}
+        panel={<PaymentMadeGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
   );
 }
+
+/**
+ * Payment made view detail.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeDetail() {
+  return (
+    <PaymentMadeDetailsRoot>
+      <PaymentMadeDetailActionsBar />
+      <PaymentMadeDetailsTabs />
+    </PaymentMadeDetailsRoot>
+  );
+}
+
+const PaymentMadeDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js
new file mode 100644
index 000000000..cd667fd9c
--- /dev/null
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made GL entries table panel.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeGLEntriesPanel() {
+  const { paymentMadeId } = usePaymentMadeDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentMadeId,
+      reference_type: 'BillPayment',
+    },
+    { enabled: !!paymentMadeId },
+  );
+
+  return (
+    <PaymentMadeGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </PaymentMadeGLEntriesRoot>
+  );
+}
+
+const PaymentMadeGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index 61af4b4e2..5f2cad543 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import {
   Button,
   NavbarGroup,
@@ -8,7 +7,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -16,7 +14,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import {
+  Can,
+  Icon,
+  FormattedMessage as T,
+  MoreMenuItems,
+  DrawerActionsBar,
+} from 'components';
 import {
   PaymentReceiveAction,
   AbilitySubject,
@@ -59,7 +63,7 @@ function PaymentReceiveActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
           <Button
@@ -80,13 +84,18 @@ function PaymentReceiveActionsBar({
           />
           <NavbarDivider />
         </Can>
-        <MoreMenuItems
-          payload={{
-            onNotifyViaSMS: handleNotifyViaSMS,
-          }}
-        />
+        <Can
+          I={PaymentReceiveAction.NotifyBySms}
+          a={AbilitySubject.PaymentReceive}
+        >
+          <MoreMenuItems
+            payload={{
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
index ce98e4ee0..2bf9a0b17 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
@@ -1,36 +1,46 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
+
 import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+import { PaymentReceiveGLEntriesPanel } from './PaymentReceiveGLEntriesPanel';
 
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
-
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+/**
+ * Payment receive details tabs.
+ * @returns {React.JSX}
+ */
+function PaymentReceiveDetailsTabs() {
+  return (
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        id={'details'}
+        title={intl.get('details')}
+        panel={<PaymentReceiveDetailTab />}
+      />
+      <Tab
+        id={'journal_entries'}
+        title={intl.get('journal_entries')}
+        panel={<PaymentReceiveGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
 
 /**
  * Payment receive view detail.
+ * @returns {React.JSX}
  */
 export default function PaymentReceiveDetail() {
-  const { transactions } = usePaymentReceiveDetailContext();
-
   return (
-    <div className={clsx(PaymentDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          id={'details'}
-          title={intl.get('details')}
-          panel={<PaymentReceiveDetailTab />}
-        />
-        <Tab
-          id={'journal_entries'}
-          title={intl.get('journal_entries')}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <PaymentReceiveDetailsRoot>
+      <PaymentReceiveActionsBar />
+      <PaymentReceiveDetailsTabs />
+    </PaymentReceiveDetailsRoot>
   );
 }
+
+const PaymentReceiveDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
index 88bf62cad..6f4f37199 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
@@ -1,31 +1,30 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { FormatNumber, T, TotalLine, TotalLines } from 'components';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
 /**
  * Payment receive detail footer.
+ * @returns {React.JSX}
  */
 export default function PaymentReceiveDetailFooter() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
-
+  
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
-      <TotalLines>
-        <TotalLine
-          title={<T id={'payment_receive.details.subtotal'} />}
-          value={<FormatNumber value={paymentReceive.amount} />}
-          className={PaymentDrawerCls.total_line_subtotal}
-        />
-        <TotalLine
-          title={<T id={'payment_receive.details.total'} />}
-          value={paymentReceive.formatted_amount}
-          className={PaymentDrawerCls.total_line_total}
-        />
-      </TotalLines>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={paymentReceive.statement}>
+          <DetailItem label={<T id={'payment_receive.details.statement'} />}>
+            {paymentReceive.statement}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
index d57659edf..182f9d7dd 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -1,13 +1,20 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { FormatDate, DetailsMenu, DetailItem } from 'components';
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  ButtonLink,
+  CustomerDrawerLink,
+} from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
 /**
  * Payment receive detail header.
  */
@@ -15,42 +22,56 @@ export default function PaymentReceiveDetailHeader() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem
-          label={intl.get('amount')}
-          children={
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
             <h3 class="big-number">{paymentReceive.formatted_amount}</h3>
-          }
-        />
-        <DetailItem
-          label={intl.get('payment_receive.details.payment_number')}
-          children={defaultTo(paymentReceive.payment_receive_no, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={paymentReceive.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('deposit_account')}
-          children={paymentReceive.deposit_account?.name}
-        />
-        <DetailItem
-          label={intl.get('payment_date')}
-          children={<FormatDate value={paymentReceive.payment_date} />}
-        />
-      </DetailsMenu>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('description')}
-          children={defaultTo(paymentReceive.statement, '—')}
-        />
-        <DetailItem
-          label={intl.get('created_at')}
-          children={<FormatDate value={paymentReceive.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_receive.details.payment_number')}
+              children={defaultTo(paymentReceive.payment_receive_no, '-')}
+            />
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={paymentReceive.customer_id}>
+                {paymentReceive.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('deposit_account')}
+              children={paymentReceive.deposit_account?.name}
+            />
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentReceive.payment_date} />}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('description')}
+              children={defaultTo(paymentReceive.statement, '—')}
+            />
+            <DetailItem
+              label={intl.get('created_at')}
+              children={<FormatDate value={paymentReceive.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
index aa79010e1..65aac0d3d 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useTransactionsByReference, usePaymentReceive } from 'hooks/query';
+import { usePaymentReceive } from 'hooks/query';
 
 const PaymentReceiveDetailContext = React.createContext();
 
@@ -9,6 +9,7 @@ const PaymentReceiveDetailContext = React.createContext();
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  // Fetches specific payment receive details.
   const {
     data: paymentReceive,
     isLoading: isPaymentLoading,
@@ -17,31 +18,20 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
     enabled: !!paymentReceiveId,
   });
 
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: paymentReceiveId,
-      reference_type: 'paymentReceive',
-    },
-    { enabled: !!paymentReceiveId },
-  );
-
   // Provider.
   const provider = {
     isPaymentFetching,
-    transactions,
     paymentReceive,
     paymentReceiveId,
   };
 
   return (
-    <DrawerLoading loading={isTransactionLoading || isPaymentLoading}>
+    <DrawerLoading loading={isPaymentLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
-        title={intl.get('payment_receive_details')}
+        title={intl.get('payment_receive.drawer.title', {
+          number: paymentReceive.payment_receive_no,
+        })}
       />
       <PaymentReceiveDetailContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
index 33c627c14..f84f2c633 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
@@ -1,25 +1,28 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
 import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
 import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
+import PaymentReceiveDetailTableFooter from './PaymentReceiveDetailTableFooter';
 import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
+/**
+ * Payment receive - overview panel.
+ * @returns {React.JSX}
+ */
 export default function PaymentReceiveDetailTab() {
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel)}>
-      <PaymentReceiveActionsBar />
-
-      <Card>
+    <PaymentReceiveDetailsTabPanelRoot>
+      <CommercialDocBox>
         <PaymentReceiveDetailHeader />
         <PaymentReceiveDetailTable />
+        <PaymentReceiveDetailTableFooter />
         <PaymentReceiveDetailFooter />
-      </Card>
-    </div>
+      </CommercialDocBox>
+    </PaymentReceiveDetailsTabPanelRoot>
   );
 }
+
+const PaymentReceiveDetailsTabPanelRoot = styled.div``;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
index b5b941c5a..c08736b3b 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
+
+import { CommercialDocEntriesTable } from 'components';
 
 import { usePaymentReceiveEntriesColumns } from './utils';
-import { DataTable } from 'components';
-
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+import { TableStyle } from 'common';
 
 /**
  * Payment receive readonly details table.
@@ -19,12 +18,10 @@ export default function PaymentReceiveDetailTable() {
   } = usePaymentReceiveDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.js
new file mode 100644
index 000000000..5b677ae4a
--- /dev/null
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  FormatNumber,
+  TotalLineTextStyle,
+  TotalLineBorderStyle,
+  T,
+  TotalLine,
+  TotalLines,
+} from 'components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail table footer.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetailTableFooter() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <PaymentReceiveDetailsFooterRoot>
+      <PaymentReceiveTotalLines
+        labelColWidth={'180px'}
+        amountColWidth={'180px'}
+      >
+        <TotalLine
+          title={<T id={'payment_receive.details.subtotal'} />}
+          value={<FormatNumber value={paymentReceive.amount} />}
+        />
+        <TotalLine
+          title={<T id={'payment_receive.details.total'} />}
+          value={paymentReceive.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </PaymentReceiveTotalLines>
+    </PaymentReceiveDetailsFooterRoot>
+  );
+}
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
index 564bf5e42..a9105e610 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
@@ -46,8 +46,7 @@
       border-bottom: 1px solid #000;
     }
     &_total {
-      border-bottom: 3px double #000;
-      font-weight: 600;
+      
     }
   }
 }
\ No newline at end of file
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.js
new file mode 100644
index 000000000..49105d8c0
--- /dev/null
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive GL entries table panel.
+ * @returns {React.JSX}
+ */
+export function PaymentReceiveGLEntriesPanel() {
+  const { paymentReceiveId } = usePaymentReceiveDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionsLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentReceiveId,
+      reference_type: 'paymentReceive',
+    },
+    { enabled: !!paymentReceiveId },
+  );
+
+  return (
+    <PaymentReceiveGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionsLoading}
+        transactions={transactions}
+      />
+    </PaymentReceiveGLEntriesRoot>
+  );
+}
+
+const PaymentReceiveGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
index 2f7dfa695..2e6a4bae2 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
@@ -1,35 +1,45 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import ReceiptDetailTab from './ReceiptDetailTab';
-import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import ReceiptDetailActionBar from './ReceiptDetailActionBar';
+import { ReceiptDetailsGLEntriesPanel } from './ReceiptDetailsGLEntriesPanel';
 
 /**
  * Receipt view detail.
+ * @returns {React.JSX}
  */
 export default function ReceiptDetail() {
-  const { transactions } = useReceiptDetailDrawerContext();
-
   return (
-    <div className={clsx(ReceiptDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<ReceiptDetailTab />}
-        />
-        <Tab
-          title={intl.get('journal_entries')}
-          id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <ReceiptDetailsRoot>
+      <ReceiptDetailActionBar />
+      <ReceiptDetailsTabs />
+    </ReceiptDetailsRoot>
   );
 }
+
+/**
+ * Receipt details tabs bar.
+ * @returns {React.JSX}
+ */
+function ReceiptDetailsTabs() {
+  return (
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<ReceiptDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<ReceiptDetailsGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const ReceiptDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
index 1931905b8..4d78f8d74 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -8,13 +8,18 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import {
+  Can,
+  Icon,
+  FormattedMessage as T,
+  MoreMenuItems,
+  DrawerActionsBar,
+} from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 import {
   SaleReceiptAction,
@@ -23,6 +28,10 @@ import {
 
 import { safeCallback, compose } from 'utils';
 
+/**
+ * Receipt details actions bar.
+ * @returns {React.JSX}
+ */
 function ReceiptDetailActionBar({
   // #withDialogActions
   openDialog,
@@ -50,13 +59,13 @@ function ReceiptDetailActionBar({
   const onPrintReceipt = () => {
     openDialog('receipt-pdf-preview', { receiptId });
   };
-
   // Handle notify via SMS.
   const handleNotifyViaSMS = () => {
     openDialog('notify-receipt-via-sms', { receiptId });
   };
+
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
           <Button
@@ -85,13 +94,15 @@ function ReceiptDetailActionBar({
           />
           <NavbarDivider />
         </Can>
-        <MoreMenuItems
-          payload={{
-            onNotifyViaSMS: handleNotifyViaSMS,
-          }}
-        />
+        <Can I={SaleReceiptAction.NotifyBySms} a={AbilitySubject.Receipt}>
+          <MoreMenuItems
+            payload={{
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
index 29fc0d98d..88d384b77 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import ReceiptDetail from './ReceiptDetail';
 import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
 
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
index 41365d214..7578db3f4 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useTransactionsByReference, useReceipt } from 'hooks/query';
+import { useReceipt } from 'hooks/query';
 
 // useTransactionsByReference
 const ReceiptDetailDrawerContext = React.createContext();
@@ -18,32 +18,19 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
     },
   );
 
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: receiptId,
-      reference_type: 'SaleReceipt',
-    },
-    { enabled: !!receiptId },
-  );
-
   // Provider.
   const provider = {
-    transactions,
     receiptId,
     receipt,
   };
 
-  const loading = isTransactionLoading || isReceiptLoading;
-
   return (
-    <DrawerLoading loading={loading}>
+    <DrawerLoading loading={isReceiptLoading}>
       <DrawerHeaderContent
         name="receipt-detail-drawer"
-        title={intl.get('receipt_details')}
+        title={intl.get('receipt.drawer.title', {
+          number: receipt.receipt_number,
+        })}
       />
       <ReceiptDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
index 0a1f95d79..31d214119 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
@@ -1,43 +1,35 @@
 import React from 'react';
-import clsx from 'classnames';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
 
-import { T, TotalLines, TotalLine } from 'components';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
-import { FormatNumber } from '../../../components';
-
 /**
- * Receipts read-only details footer.
+ * Receipt details footer
+ * @returns {React.JSX}
  */
-export function ReceiptDetailFooter() {
+export default function ReceiptDetailFooter() {
   const { receipt } = useReceiptDetailDrawerContext();
 
   return (
-    <div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
-      <TotalLines>
-        <TotalLine
-          title={<T id={'receipt.details.subtotal'} />}
-          value={<FormatNumber value={receipt.amount} />}
-          className={ReceiptDrawerCls.total_line_subtotal}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.total'} />}
-          value={receipt.formatted_amount}
-          className={ReceiptDrawerCls.total_line_total}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.payment_amount'} />}
-          value={receipt.formatted_amount}
-          className={ReceiptDrawerCls.total_line_payment}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.due_amount'} />}
-          value={'0'}
-          className={ReceiptDrawerCls.total_line_dueAmount}
-        />
-      </TotalLines>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={receipt.statement}>
+          <DetailItem label={<T id={'receipt.details.statement'} />}>
+            {receipt.statement}
+          </DetailItem>
+        </If>
+        <If condition={receipt.receipt_message}>
+          <DetailItem label={<T id={'receipt.details.receipt_message'} />}>
+            {receipt.receipt_message}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
index 60889d43e..ae25c7a73 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
@@ -1,58 +1,91 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatDate, DetailsMenu, DetailItem } from 'components';
+import {
+  ButtonLink,
+  CustomerDrawerLink,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from 'components';
+import { Row, Col, FormatDate, DetailsMenu, DetailItem } from 'components';
 
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import { ReceiptDetailsStatus } from './components';
 
 /**
- * receipt detail content.
+ * Receipt details header.
  */
 export default function ReceiptDetailHeader() {
   const { receipt } = useReceiptDetailDrawerContext();
 
   return (
-    <div className={clsx(ReceiptDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number">{receipt.formatted_amount}</h3>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('receipt.details.receipt_number')}
-          children={defaultTo(receipt.receipt_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={receipt.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('receipt_date')}
-          children={<FormatDate value={receipt.receipt_date} />}
-        />
-        <DetailItem
-          label={intl.get('closed_date')}
-          children={<FormatDate value={receipt.closed_at_date} />}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountReceiptItem label={intl.get('amount')}>
+            <h3 class="big-number">{receipt.formatted_amount}</h3>
+          </AmountReceiptItem>
 
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem
-          label={intl.get('deposit_account')}
-          children={receipt.deposit_account?.name}
-        />
-        <DetailItem
-          label={intl.get('reference')}
-          children={defaultTo(receipt.reference_no, '--')}
-        />
-        <DetailItem
-          label={intl.get('receipt.details.created_at')}
-          children={<FormatDate value={receipt.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+          <StatusReceiptItem>
+            <ReceiptDetailsStatus receipt={receipt} />
+          </StatusReceiptItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('receipt.details.receipt_number')}
+              children={defaultTo(receipt.receipt_number, '-')}
+            />
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={receipt.customer_id}>
+                {receipt.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('receipt_date')}
+              children={<FormatDate value={receipt.receipt_date} />}
+            />
+            <DetailItem
+              label={intl.get('closed_date')}
+              children={<FormatDate value={receipt.closed_at_date} />}
+            />
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+            textAlign={'right'}
+          >
+            <DetailItem
+              label={intl.get('deposit_account')}
+              children={receipt.deposit_account?.name}
+            />
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(receipt.reference_no, '--')}
+            />
+            <DetailItem
+              label={intl.get('receipt.details.created_at')}
+              children={<FormatDate value={receipt.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const AmountReceiptItem = styled(DetailItem)`
+  width: 50%;
+`;
+
+const StatusReceiptItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
index 34ef3e24f..c594f5285 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
@@ -1,25 +1,24 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import ReceiptDetailActionBar from './ReceiptDetailActionBar';
 import ReceiptDetailHeader from './ReceiptDetailHeader';
 import ReceiptDetailTable from './ReceiptDetailTable';
-import { ReceiptDetailFooter } from './ReceiptDetailFooter';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import ReceiptDetailTableFooter from './ReceiptDetailTableFooter';
+import ReceiptDetailFooter from './ReceiptDetailFooter';
 
 export default function ReceiptDetailTab() {
   return (
-    <div className={clsx(ReceiptDrawerCls.detail_panel)}>
-      <ReceiptDetailActionBar />
-
-      <Card>
+    <ReceiptDetailsOverviewRoot>
+      <CommercialDocBox>
         <ReceiptDetailHeader />
         <ReceiptDetailTable />
+        <ReceiptDetailTableFooter />
         <ReceiptDetailFooter />
-      </Card>
-    </div>
+      </CommercialDocBox>
+    </ReceiptDetailsOverviewRoot>
   );
 }
+
+const ReceiptDetailsOverviewRoot = styled.div``;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js
index 21155a0c0..38f276869 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js
@@ -1,17 +1,17 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
 
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 import { useReceiptReadonlyEntriesTableColumns } from './utils';
 
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import { TableStyle } from '../../../common';
 
 /**
  * Receipt readonly details table columns.
  */
 export default function ReceiptDetailTable() {
+  // Receipt details drawer context.
   const {
     receipt: { entries },
   } = useReceiptDetailDrawerContext();
@@ -20,12 +20,10 @@ export default function ReceiptDetailTable() {
   const columns = useReceiptReadonlyEntriesTableColumns();
 
   return (
-    <div className={clsx(ReceiptDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js
new file mode 100644
index 000000000..370221e9a
--- /dev/null
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+/**
+ * Receipts read-only details table footer.
+ */
+export default function ReceiptDetailTableFooter() {
+  const { receipt } = useReceiptDetailDrawerContext();
+
+  return (
+    <ReceiptDetailsFooterRoot>
+      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'receipt.details.subtotal'} />}
+          value={<FormatNumber value={receipt.amount} />}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.total'} />}
+          value={receipt.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.payment_amount'} />}
+          value={receipt.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.due_amount'} />}
+          value={'0'}
+        />
+      </ReceiptTotalLines>
+    </ReceiptDetailsFooterRoot>
+  );
+}
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailsGLEntriesPanel.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailsGLEntriesPanel.js
new file mode 100644
index 000000000..e26166622
--- /dev/null
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailsGLEntriesPanel.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Receipt details GL entries panel.
+ * @returns {React.JSX}
+ */
+export function ReceiptDetailsGLEntriesPanel() {
+  // Receipt details drawer context.
+  const { receiptId } = useReceiptDetailDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: receiptId,
+      reference_type: 'SaleReceipt',
+    },
+    { enabled: !!receiptId },
+  );
+
+  return (
+    <ReceiptGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </ReceiptGLEntriesRoot>
+  );
+}
+
+const ReceiptGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/components.js b/src/containers/Drawers/ReceiptDetailDrawer/components.js
new file mode 100644
index 000000000..10c036221
--- /dev/null
+++ b/src/containers/Drawers/ReceiptDetailDrawer/components.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Intent, Tag } from '@blueprintjs/core';
+
+import { Choose, T } from 'components';
+
+/**
+ * Receipt details status.
+ * @returns {React.JSX}
+ */
+export function ReceiptDetailsStatus({ receipt }) {
+  return (
+    <Choose>
+      <Choose.When condition={receipt.is_closed}>
+        <Tag round={true} intent={Intent.SUCCESS}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js
new file mode 100644
index 000000000..1eef75ad7
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { DrawerMainTabs } from 'components';
+import RefundCreditNoteDetailTab from './RefundCreditNoteDetailTab';
+import RefundCreditNoteDetailActionsBar from './RefundCreditNoteDetailActionsBar';
+
+/**
+ * Refund credit note detail.
+ * @returns {React.JSX}
+ */
+export default function RefundCreditNoteDetail() {
+  return (
+    <RefundCreditNoteDetailRoot>
+      <RefundCreditNoteDetailActionsBar />
+      <RefundCreditNoteDetailTabs />
+    </RefundCreditNoteDetailRoot>
+  );
+}
+
+/**
+ * Refund credit note detail tabs.
+ * @returns {React.JSX}
+ */
+function RefundCreditNoteDetailTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<RefundCreditNoteDetailTab />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const RefundCreditNoteDetailRoot = styled.div``;
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js
new file mode 100644
index 000000000..8d66d7852
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+
+import { useRefundCreditNoteDrawerContext } from './RefundCreditNoteDrawerProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit note actions bar.
+ */
+function RefundCreditNoteDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundTransactionId } = useRefundCreditNoteDrawerContext();
+
+  // Handle delete refund credit.
+  const handleDeleteRefundCreditNote = () => {
+    openAlert('refund-credit-delete', { creditNoteId: refundTransactionId });
+  };
+
+  return (
+    <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteRefundCreditNote}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteDetailActionsBar);
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js
new file mode 100644
index 000000000..de38a473b
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  CommercialDocHeader,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
+
+import { useRefundCreditNoteDrawerContext } from './RefundCreditNoteDrawerProvider';
+
+export default function RefundCreditNoteDetailHeader() {
+  const { refundCreditTransaction } = useRefundCreditNoteDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem
+          label={intl.get('date')}
+          children={
+            <FormatDate value={refundCreditTransaction.formatted_date} />
+          }
+        />
+        <DetailItem label={intl.get('refund_credit.drawer.label.amount')}>
+          <strong>{refundCreditTransaction.formtted_amount}</strong>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('refund_credit.drawer.label.credit_note_no')}
+          children={refundCreditTransaction.credit_note?.credit_note_number}
+        />
+
+        <DetailItem
+          label={intl.get('refund_credit.drawer.label.withdrawal_account')}
+          children={refundCreditTransaction.from_account.name}
+        />
+        <DetailItem label={intl.get('refund_credit.drawer.label.reference_no')}>
+          {defaultTo(refundCreditTransaction.reference_no, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('refund_credit.drawer.label.description')}>
+          {defaultTo(refundCreditTransaction.description, '—')}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocHeader>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js
new file mode 100644
index 000000000..808a30fad
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { CommercialDocBox } from 'components';
+import RefundCreditNoteDetailHeader from './RefundCreditNoteDetailHeader';
+
+/**
+ * Refund credit note detail tab.
+ * @returns
+ */
+export default function RefundCreditNoteDetailTab() {
+  return (
+    <CommercialDocBox>
+      <RefundCreditNoteDetailHeader />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js
new file mode 100644
index 000000000..912385421
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import RefundCreditNoteDetail from './RefundCreditNoteDetail';
+import { RefundCreditNoteDrawerProvider } from './RefundCreditNoteDrawerProvider';
+
+/**
+ * Refund credit note drawer content.
+ */
+export default function RefundCreditNoteDrawerContent({ refundTransactionId }) {
+  return (
+    <RefundCreditNoteDrawerProvider refundTransactionId={refundTransactionId}>
+      <DrawerBody>
+        <RefundCreditNoteDetail />
+      </DrawerBody>
+    </RefundCreditNoteDrawerProvider>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js
new file mode 100644
index 000000000..37f465f61
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useRefundCreditTransaction } from 'hooks/query';
+
+const RefundCreditNoteDrawerContext = React.createContext();
+
+/**
+ * Refund credit note drawer provider.
+ */
+function RefundCreditNoteDrawerProvider({ refundTransactionId, ...props }) {
+  // Handle fetch refund credit note transaction.
+  const {
+    data: refundCreditTransaction,
+    isLoading: isRefundCreditTransaction,
+  } = useRefundCreditTransaction(refundTransactionId, {
+    enabled: !!refundTransactionId,
+  });
+
+  // provider
+  const provider = {
+    refundTransactionId,
+    refundCreditTransaction,
+  };
+
+  return (
+    <DrawerLoading loading={isRefundCreditTransaction}>
+      <DrawerHeaderContent
+        name="refund-credit-detail-drawer"
+        title={intl.get('refund_credit.drawer.title')}
+      />
+      <RefundCreditNoteDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useRefundCreditNoteDrawerContext = () =>
+  React.useContext(RefundCreditNoteDrawerContext);
+
+export { RefundCreditNoteDrawerProvider, useRefundCreditNoteDrawerContext };
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js
new file mode 100644
index 000000000..44defcdb2
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const RefundCreditNoteDrawerContent = React.lazy(() =>
+  import('./RefundCreditNoteDrawerContent'),
+);
+
+/**
+ * Refund credit note detail.
+ * @returns
+ */
+function RefundCreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { refundTransactionId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '750px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <RefundCreditNoteDrawerContent
+          refundTransactionId={refundTransactionId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(RefundCreditNoteDetailDrawer);
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js
new file mode 100644
index 000000000..b9ad02b71
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { DrawerMainTabs } from 'components';
+import RefundVendorCreditDetailTab from './RefundVendorCreditDetailTab'
+import RefundVendorCreditDetailActionsBar from './RefundVendorCreditDetailActionsBar';
+
+/**
+ * Refund vendor credit detail.
+ * @returns {React.JSX}
+ */
+export default function RefundVendorCreditDetail() {
+  return (
+    <RefundVendorCreditDetailRoot>
+      <RefundVendorCreditDetailActionsBar />
+      <RefundVendorCreditDetailTabs />
+    </RefundVendorCreditDetailRoot>
+  );
+}
+
+/**
+ * Refund vendor credit detail tabs.
+ * @returns {React.JSX}
+ */
+function RefundVendorCreditDetailTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<RefundVendorCreditDetailTab />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const RefundVendorCreditDetailRoot = styled.div``;
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js
new file mode 100644
index 000000000..a31694c51
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useRefundVendorCreditNoteDrawerContext } from './RefundVendorCreditDrawerProvider';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
+
+/**
+ * Refund vendor credit actions bar.
+ */
+function RefundVendorCreditDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundTransactionId } = useRefundVendorCreditNoteDrawerContext();
+
+  // Handle delete refund vendor credit.
+  const handleDeleteRefundVendorCredit = () => {
+    openAlert('refund-vendor-delete', { vendorCreditId: refundTransactionId });
+  };
+
+  return (
+    <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteRefundVendorCredit}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(RefundVendorCreditDetailActionsBar);
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js
new file mode 100644
index 000000000..4140abe88
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  CommercialDocHeader,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
+
+import { useRefundVendorCreditNoteDrawerContext } from './RefundVendorCreditDrawerProvider';
+
+export default function RefundVendorCreditDetailHeader() {
+  const { refundVendorTransaction } = useRefundVendorCreditNoteDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem
+          label={intl.get('date')}
+          children={
+            <FormatDate value={refundVendorTransaction.formatted_date} />
+          }
+        />
+        <DetailItem label={intl.get('refund_vendor_credit.drawer.label.amount')}>
+          <strong>{refundVendorTransaction.formtted_amount}</strong>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('refund_vendor_credit.drawer.label.vendor_credit_no')}
+          children={refundVendorTransaction.vendor_credit?.vendor_credit_number}
+        />
+
+        <DetailItem
+          label={intl.get('refund_vendor_credit.drawer.label.deposit_account')}
+          children={refundVendorTransaction.deposit_account.name}
+        />
+        <DetailItem label={intl.get('refund_vendor_credit.drawer.label.reference_no')}>
+          {defaultTo(refundVendorTransaction.reference_no, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('refund_vendor_credit.drawer.label.description')}>
+          {defaultTo(refundVendorTransaction.description, '—')}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocHeader>
+  );
+}
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js
new file mode 100644
index 000000000..3e01d4a2d
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { CommercialDocBox } from 'components';
+import RefundVendorCreditDetailHeader from './RefundVendorCreditDetailHeader';
+
+/**
+ * Refund vendor credit detail tab.
+ */
+export default function RefundVendorCreditDetailTab() {
+  return (
+    <CommercialDocBox>
+      <RefundVendorCreditDetailHeader />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js
new file mode 100644
index 000000000..eb2353d05
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import RefundVendorCreditDetail from './RefundVendorCreditDetail';
+import { RefundVendorCreditDrawerProvider } from './RefundVendorCreditDrawerProvider';
+
+/**
+ * Refund vendor credit drawer content.
+ * @returns
+ */
+export default function RefundVendorCreditDrawerContent({
+  refundTransactionId,
+}) {
+  return (
+    <RefundVendorCreditDrawerProvider refundTransactionId={refundTransactionId}>
+      <DrawerBody>
+        <RefundVendorCreditDetail />
+      </DrawerBody>
+    </RefundVendorCreditDrawerProvider>
+  );
+}
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js
new file mode 100644
index 000000000..dbca85739
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useRefundVendorCreditTransaction } from 'hooks/query';
+
+const RefundVendorCreditDrawerContent = React.createContext();
+
+/**
+ * Refund vendor credit drawer provider.
+ */
+function RefundVendorCreditDrawerProvider({ refundTransactionId, ...props }) {
+  // Handle fetch refund credit note transaction.
+  const {
+    data: refundVendorTransaction,
+    isLoading: isRefundVendorTransaction,
+  } = useRefundVendorCreditTransaction(refundTransactionId, {
+    enabled: !!refundTransactionId,
+  });
+
+  // provider
+  const provider = {
+    refundTransactionId,
+    refundVendorTransaction,
+  };
+
+  return (
+    <DrawerLoading loading={isRefundVendorTransaction}>
+      <DrawerHeaderContent
+        name="refund-vendor-detail-drawer"
+        title={intl.get('refund_vendor_credit.drawer.title')}
+      />
+      <RefundVendorCreditDrawerContent.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useRefundVendorCreditNoteDrawerContext = () =>
+  React.useContext(RefundVendorCreditDrawerContent);
+
+export {
+  RefundVendorCreditDrawerProvider,
+  useRefundVendorCreditNoteDrawerContext,
+};
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js
new file mode 100644
index 000000000..a99cd279e
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const RefundVendorCreditDrawerContent = React.lazy(() =>
+  import('./RefundVendorCreditDrawerContent'),
+);
+
+/**
+ * Refund credit note detail.
+ * @returns
+ */
+function RefundCreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { refundTransactionId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '750px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <RefundVendorCreditDrawerContent
+          refundTransactionId={refundTransactionId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(RefundCreditNoteDetailDrawer);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
new file mode 100644
index 000000000..315892958
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import { useTransactionsByReference } from 'hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Journal entries vendor credit transactions table.
+ */
+export function VendorCreditGLEntriesTable() {
+  const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: vendorCreditId,
+      reference_type: 'vendorCredit',
+    },
+    { enabled: !!vendorCreditId },
+  );
+
+  return (
+    <Card>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+      />
+    </Card>
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js
new file mode 100644
index 000000000..eb1135002
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell } from '../../../../components';
+
+import 'style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable.js
new file mode 100644
index 000000000..e9bf201a4
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { TableStyle } from 'common';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import {
+  useReconcileVendorCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+import { compose } from 'utils';
+
+/**
+ * Reconcile vendor credit transactions table.
+ */
+function ReconcileVendorCreditTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const columns = useReconcileVendorCreditTransactionsTableColumns();
+
+  const { reconcileVendorCredits } = useVendorCreditDetailDrawerContext();
+
+  // Handle delete reconile credit.
+  const handleDeleteReconcileVendorCredit = ({ id }) => {
+    openAlert('reconcile-vendor-delete', { vendorCreditId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={reconcileVendorCredits}
+        ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
+        payload={{
+          onDelete: handleDeleteReconcileVendorCredit,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(
+  ReconcileVendorCreditTransactionsTable,
+);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js
new file mode 100644
index 000000000..3cae35af1
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { Can, FormatDateCell, Icon } from 'components';
+import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+export function useReconcileVendorCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('bill_number'),
+        accessor: 'bill_reference_no',
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js
new file mode 100644
index 000000000..6458ffc93
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { TableStyle } from 'common';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import {
+  useRefundCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Refund vendor transactions table.
+ */
+function RefundVendorCreditTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundVendorCredit } = useVendorCreditDetailDrawerContext();
+
+  const columns = useRefundCreditTransactionsTableColumns();
+
+  // Handle delete refund vendor credit.
+  const handleDeleteRefundVendorCredit = ({ id }) => {
+    openAlert('refund-vendor-delete', { vendorCreditId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={refundVendorCredit}
+        ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
+        payload={{
+          onDelete: handleDeleteRefundVendorCredit,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundVendorCreditTransactionsTable);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
new file mode 100644
index 000000000..cbf32dc9e
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import { Can, FormatDateCell, Icon } from 'components';
+import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+export function useRefundCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('refund_vendor_credit.column.amount'),
+        accessor: 'formtted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+      {
+        Header: intl.get('refund_vendor_credit.column.withdrawal_account'),
+        accessor: ({ deposit_account }) => deposit_account.name,
+        width: 100,
+        className: 'deposit_account',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 100,
+        className: 'reference_no',
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
new file mode 100644
index 000000000..43c9644e5
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { useAbilityContext } from 'hooks/utils';
+import { DrawerMainTabs } from 'components';
+import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
+import VendorCreditDetailPanel from './VendorCreditDetailPanel';
+import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
+import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
+import { VendorCreditGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+/**
+ * Vendor credit view detail.
+ *
+ */
+export default function VendorCreditDetail() {
+  return (
+    <VendorCreditRoot>
+      <VendorCreditDetailActionsBar />
+      <VendorCreditDetailsTabs />
+    </VendorCreditRoot>
+  );
+}
+
+/**
+ * Vendor Credit details tabs.
+ * @returns {React.JSX}
+ */
+function VendorCreditDetailsTabs() {
+  const ability = useAbilityContext();
+
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<VendorCreditDetailPanel />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<VendorCreditGLEntriesTable />}
+      />
+      {ability.can(VendorCreditAction.View, AbilitySubject.VendorCredit) && (
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundVendorCreditTransactionsTable />}
+        />
+      )}
+      {ability.can(VendorCreditAction.View, AbilitySubject.VendorCredit) && (
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileVendorCreditTransactionsTable />}
+        />
+      )}
+    </DrawerMainTabs>
+  );
+}
+
+const VendorCreditRoot = styled.div``;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
new file mode 100644
index 000000000..5a7cf5f42
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { VendorCreditMenuItem } from './utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { If, Icon, FormattedMessage as T, Can } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Vendor credit detail actions bar.
+ */
+function VendorCreditDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { vendorCreditId, vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit credit note.
+  const handleEditVendorCredit = () => {
+    history.push(`/vendor-credits/${vendorCreditId}/edit`);
+    closeDrawer('vendor-credit-detail-drawer');
+  };
+
+  // Handle delete credit note.
+  const handleDeleteVendorCredit = () => {
+    openAlert('vendor-credit-delete', { vendorCreditId });
+  };
+
+  const handleRefundVendorCredit = () => {
+    openDialog('refund-vendor-credit', { vendorCreditId });
+  };
+
+  const handleReconcileVendorCredit = () => {
+    openDialog('reconcile-vendor-credit', { vendorCreditId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
+            onClick={handleEditVendorCredit}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-downward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundVendorCredit}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteVendorCredit}
+          />
+        </Can>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <NavbarDivider />
+            <VendorCreditMenuItem
+              payload={{
+                onReconcile: handleReconcileVendorCredit,
+              }}
+            />
+          </If>
+        </Can>
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(VendorCreditDetailActionsBar);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js
new file mode 100644
index 000000000..8ac7786e6
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import VendorCreditDetail from './VendorCreditDetail';
+import { VendorCreditDetailDrawerProvider } from './VendorCreditDetailDrawerProvider';
+
+/**
+ * Vendor credit detail drawer content.
+ */
+export default function VendorCreditDetailDrawerContent({ vendorCreditId }) {
+  return (
+    <VendorCreditDetailDrawerProvider vendorCreditId={vendorCreditId}>
+      <DrawerBody>
+        <VendorCreditDetail />
+      </DrawerBody>
+    </VendorCreditDetailDrawerProvider>
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
new file mode 100644
index 000000000..e2e601b44
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
+
+/**
+ * Vendor Credit detail panel footer.
+ */
+export default function VendorCreditDetailDrawerFooter() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  return (
+    <VendorCreditFooterRoot>
+      <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'vendor_credit.drawer.label_subtotal'} />}
+          value={<FormatNumber value={vendorCredit.formatted_amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'vendor_credit.drawer.label_total'} />}
+          value={vendorCredit.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </VendorCreditTotalLines>
+    </VendorCreditFooterRoot>
+  );
+}
+
+export const VendorCreditFooterRoot = styled.div``;
+
+export const VendorCreditTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
new file mode 100644
index 000000000..e9265fe72
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  useVendorCredit,
+  useRefundVendorCredit,
+  useReconcileVendorCredits,
+} from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const VendorCreditDetailDrawerContext = React.createContext();
+
+/**
+ * Vendor credit drawer provider.
+ */
+function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  // Handle fetch refund credit note.
+  const {
+    data: refundVendorCredit,
+    isFetching: isRefundVendorCreditFetching,
+    isLoading: isRefundVendorCreditLoading,
+  } = useRefundVendorCredit(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
+  // Handle fetch refund credit note.
+  const {
+    data: reconcileVendorCredits,
+    isFetching: isReconcileVendorCreditFetching,
+    isLoading: isReconcileVendorCreditLoading,
+  } = useReconcileVendorCredits(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
+  const provider = {
+    vendorCredit,
+    refundVendorCredit,
+    reconcileVendorCredits,
+    isRefundVendorCreditLoading,
+    isRefundVendorCreditFetching,
+    vendorCreditId,
+  };
+
+  return (
+    <DrawerLoading
+      loading={
+        isVendorCreditLoading ||
+        isRefundVendorCreditLoading ||
+        isReconcileVendorCreditLoading
+      }
+    >
+      <DrawerHeaderContent
+        name="vendor-credit-detail-drawer"
+        title={intl.get('vendor_credit.drawer_vendor_credit_detail', {
+          vendorNumber: vendorCredit.vendor_credit_number,
+        })}
+      />
+      <VendorCreditDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useVendorCreditDetailDrawerContext = () =>
+  React.useContext(VendorCreditDetailDrawerContext);
+
+export { VendorCreditDetailDrawerProvider, useVendorCreditDetailDrawerContext };
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
new file mode 100644
index 000000000..c24d95041
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import styled from 'styled-components';
+
+import {
+  FormatDate,
+  T,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  ButtonLink,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  VendorDrawerLink,
+} from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { VendorCreditDetailsStatus } from './utils';
+
+/**
+ * Vendor credit detail drawer header.
+ */
+export default function VendorCreditDetailHeader() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">{vendorCredit.formatted_amount}</span>
+          </AmountItem>
+          <StatusItem>
+            <VendorCreditDetailsStatus vendorCredit={vendorCredit} />
+          </StatusItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
+            >
+              {defaultTo(vendorCredit.vendor_credit_number, '-')}
+            </DetailItem>
+
+            <DetailItem label={intl.get('vendor_name')}>
+              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>
+                {vendorCredit.vendor?.display_name}
+              </VendorDrawerLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
+            >
+              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+            >
+              <strong>{vendorCredit.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(vendorCredit.reference_no, '-')}
+            />
+            <DetailItem
+              label={intl.get('note')}
+              children={defaultTo(vendorCredit.note, '-')}
+            />
+            <DetailItem
+              label={<T id={'vendor_credit.drawer.label_created_at'} />}
+              children={<FormatDate value={vendorCredit.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}
+
+const StatusItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
new file mode 100644
index 000000000..f158d0fff
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { CommercialDocBox } from 'components';
+
+import VendorCreditDetailHeader from './VendorCreditDetailHeader';
+import VendorCreditDetailTable from './VendorCreditDetailTable';
+import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+
+/**
+ * Vendor credit details panel.
+ * @returns {React.JSX}
+ */
+export default function VendorCreditDetailPanel() {
+  return (
+    <CommercialDocBox>
+      <VendorCreditDetailHeader />
+      <VendorCreditDetailTable />
+      <VendorCreditDetailDrawerFooter />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js
new file mode 100644
index 000000000..1e2fe7c2e
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CommercialDocEntriesTable } from 'components';
+
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { useVendorCreditReadonlyEntriesTableColumns } from './utils';
+
+import { TableStyle } from '../../../common';
+
+/**
+ * Vendor Credit detail table.
+ */
+export default function VendorCreditDetailTable() {
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+
+  // Vendor Credit entries table columns.
+  const columns = useVendorCreditReadonlyEntriesTableColumns();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/index.js b/src/containers/Drawers/VendorCreditDetailDrawer/index.js
new file mode 100644
index 000000000..38b3ea3ed
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const VendorCreditDetailDrawerContent = React.lazy(() =>
+  import('./VendorCreditDetailDrawerContent'),
+);
+
+/**
+ * Vendor Credit detail drawer.
+ */
+function VendorCreditDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { vendorCreditId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <VendorCreditDetailDrawerContent vendorCreditId={vendorCreditId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(VendorCreditDetailDrawer);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
new file mode 100644
index 000000000..5784fe8c7
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Tag,
+  Intent,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  FormattedMessage as T,
+  FormatNumberCell,
+  Choose,
+} from '../../../components';
+
+/**
+ * Retrieve vendor credit readonly details entries table columns.
+ */
+export const useVendorCreditReadonlyEntriesTableColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'item',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        className: 'description',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+
+/**
+ * Vendor note more actions menu.
+ * @returns {React.JSX}
+ */
+export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};
+
+/**
+ * Vendor Credit details status.
+ * @returns {React.JSX}
+ */
+export function VendorCreditDetailsStatus({ vendorCredit }) {
+  return (
+    <Choose>
+      <Choose.When condition={vendorCredit.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={vendorCredit.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={vendorCredit.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}
diff --git a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js
index a367cf926..2181f6e4e 100644
--- a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js
+++ b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js
@@ -28,17 +28,19 @@ export default function VendorDetailsHeader() {
           <h3 class="big-number">{vendor.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'vendor.drawer.label.vendor'} />}
-          name={'name'}
-          children={vendor?.display_name}
-        />
         <DetailItem label={<T id={'vendor.drawer.label.unused_credits'} />}>
           0
         </DetailItem>
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
+        <DetailItem
+          label={<T id={'vendor.drawer.label.vendor'} />}
+          name={'name'}
+        >
+          <strong>{vendor?.display_name}</strong>
+        </DetailItem>
+
         <DetailItem
           label={<T id={'vendor.drawer.label.company_name'} />}
           children={defaultTo(vendor?.company_name, '--')}
diff --git a/src/containers/Entries/components.js b/src/containers/Entries/components.js
index 80fcce6e3..a6881db6d 100644
--- a/src/containers/Entries/components.js
+++ b/src/containers/Entries/components.js
@@ -99,7 +99,7 @@ export function IndexTableCell({ row: { index } }) {
 const LandedCostHeaderCell = () => {
   return (
     <>
-      <T id={'Landed'} />
+      <T id={'landed'} />
       <Hint content={<T id={'item_entries.landed.hint'} />} />
     </>
   );
diff --git a/src/containers/Entries/utils.js b/src/containers/Entries/utils.js
index 22d8adb54..6d3f5fe15 100644
--- a/src/containers/Entries/utils.js
+++ b/src/containers/Entries/utils.js
@@ -65,8 +65,12 @@ export const ensureEntriesHaveEmptyLine = R.curry((defaultEntry, entries) => {
   return entries;
 });
 
+/**
+ * Disable landed cost checkbox once the item type is not service or non-inventorty.
+ * @returns {boolean}
+ */
 export const isLandedCostDisabled = (item) =>
-  ['service', 'non-inventory'].indexOf(item.type) !== -1;
+  ['service', 'non-inventory'].indexOf(item.type) === -1;
 
 /**
  * Handle fetch item row details and retrieves the new table row.
@@ -107,7 +111,7 @@ export function useFetchItemRow({ landedCost, itemType, notifyNewRow }) {
 
       const description =
         itemType === ITEM_TYPE.PURCHASABLE
-          ? item.cost_description
+          ? item.purchase_description
           : item.sell_description;
 
       // Detarmines whether the landed cost checkbox should be disabled.
diff --git a/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js b/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
index c6d30be2f..46107d276 100644
--- a/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
+++ b/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
@@ -32,7 +32,7 @@ export default function ExpenseFloatingFooter() {
 
   // Handle submit & publish button click.
   const handleSubmitPublishBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, publish: true});
+    setSubmitPayload({ redirect: true, publish: true });
     submitForm();
   };
 
@@ -152,6 +152,7 @@ export default function ExpenseFloatingFooter() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Expenses/ExpenseForm/components.js b/src/containers/Expenses/ExpenseForm/components.js
index fb52ac569..1763e9269 100644
--- a/src/containers/Expenses/ExpenseForm/components.js
+++ b/src/containers/Expenses/ExpenseForm/components.js
@@ -56,12 +56,8 @@ const ActionsCellRenderer = ({
 const LandedCostHeaderCell = () => {
   return (
     <>
-      <T id={'Landed'} />
-      <Hint
-        content={
-          'This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.'
-        }
-      />
+      <T id={'landed'} />
+      <Hint content={<T id={'item_entries.landed.hint'} />} />
     </>
   );
 };
diff --git a/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js b/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
index 9262c922e..3a93799c7 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
@@ -53,7 +53,7 @@ function ExpensesListProvider({ query, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isExpensesLoading || isResourceMetaLoading}
+      loading={isViewsLoading || isResourceMetaLoading}
       name={'expenses'}
     >
       <ExpensesListContext.Provider value={provider} {...props} />
diff --git a/src/containers/Expenses/ExpensesLanding/components.js b/src/containers/Expenses/ExpensesLanding/components.js
index 14f77d23b..662b5c091 100644
--- a/src/containers/Expenses/ExpensesLanding/components.js
+++ b/src/containers/Expenses/ExpensesLanding/components.js
@@ -12,11 +12,13 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import {
   FormatDateCell,
   FormattedMessage as T,
-  Money,
   Icon,
   If,
   Can,
@@ -73,6 +75,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_expense')}
@@ -98,23 +101,16 @@ export function ActionsCell(props) {
   );
 }
 
-/**
- * Total amount accessor.
- */
-export function TotalAmountAccessor(row) {
-  return <Money amount={row.total_amount} currency={row.currency_code} />;
-}
-
 /**
  * Publish accessor.
  */
 export function PublishAccessor(row) {
   return row.is_published ? (
-    <Tag minimal={true}>
+    <Tag round={true} minimal={true}>
       <T id={'published'} />
     </Tag>
   ) : (
-    <Tag minimal={true} intent={Intent.WARNING}>
+    <Tag round={true} minimal={true} intent={Intent.WARNING}>
       <T id={'draft'} />
     </Tag>
   );
@@ -149,11 +145,12 @@ export function useExpensesTableColumns() {
       {
         id: 'amount',
         Header: intl.get('full_amount'),
-        accessor: TotalAmountAccessor,
+        accessor: 'formatted_amount',
         className: 'amount',
         align: 'right',
         width: 150,
         clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'payment_account',
diff --git a/src/containers/FinancialStatements/APAgingSummary/components.js b/src/containers/FinancialStatements/APAgingSummary/components.js
index 8b2f6c299..825154fa5 100644
--- a/src/containers/FinancialStatements/APAgingSummary/components.js
+++ b/src/containers/FinancialStatements/APAgingSummary/components.js
@@ -28,7 +28,7 @@ export const useAPAgingSummaryColumns = () => {
       {
         Header: <T id={'vendor_name'} />,
         accessor: 'name',
-        className: 'name',
+        className: 'vendor_name',
         width: 240,
         sticky: 'left',
         textOverview: true,
diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
index 295725768..3ff054d9e 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
@@ -1,13 +1,12 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useCustomersTransactionsColumns } from './components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
-import { defaultExpanderReducer, getColumnWidth } from 'utils';
+import { defaultExpanderReducer } from 'utils';
 
 /**
  * Customers transactions table.
@@ -16,19 +15,20 @@ export default function CustomersTransactionsTable({
   // #ownProps
   companyName,
 }) {
-  
-
+  // Customers transactions context.
   const {
     customersTransactions: { tableRows },
     isCustomersTransactionsLoading,
     query,
   } = useCustomersTransactionsContext();
 
+  // Customers transactions table columns.
   const columns = useCustomersTransactionsColumns();
 
-  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [
-    tableRows,
-  ]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 4),
+    [tableRows],
+  );
 
   const rowClassNames = (row) => {
     return [`row-type--${row.original.row_types}`];
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils.js b/src/containers/FinancialStatements/InventoryItemDetails/utils.js
index 35d2e29f1..cffc6058f 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/utils.js
+++ b/src/containers/FinancialStatements/InventoryItemDetails/utils.js
@@ -18,6 +18,7 @@ const columnsMapper = (data, index, column) => ({
     magicSpacing: 10,
   }),
   disableSortBy: true,
+  textOverview: true,
 });
 
 /**
diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
index 637115d88..a12f2408b 100644
--- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
+++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
@@ -1,13 +1,12 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useVendorsTransactionsColumns } from './components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 
-import { defaultExpanderReducer, getColumnWidth } from 'utils';
+import { defaultExpanderReducer } from 'utils';
 
 /**
  * Vendors transactions table.
@@ -17,19 +16,20 @@ export default function VendorsTransactionsTable({
   // #ownProps
   companyName,
 }) {
-  
-
+  // Vendor transactions context.
   const {
     vendorsTransactions: { tableRows },
     isVendorsTransactionsLoading,
     query,
   } = useVendorsTransactionsContext();
 
+  // Retireve vendor transactions table columns.
   const columns = useVendorsTransactionsColumns();
 
-  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 5), [
-    tableRows,
-  ]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 5),
+    [tableRows],
+  );
 
   const rowClassNames = (row) => {
     return [`row-type--${row.original.row_types}`];
diff --git a/src/containers/GlobalErrors/GlobalErrors.js b/src/containers/GlobalErrors/GlobalErrors.js
index 20ae7dae9..513715753 100644
--- a/src/containers/GlobalErrors/GlobalErrors.js
+++ b/src/containers/GlobalErrors/GlobalErrors.js
@@ -52,6 +52,27 @@ function GlobalErrors({
       toastKeySomethingWrong,
     );
   }
+  if (globalErrors.transactionsLocked) {
+    const lockedToDate =
+      globalErrors.transactionsLocked.formatted_locked_to_date;
+
+    AppToaster.show({
+      message: `Transactions before ${lockedToDate} has been locked. Hence action cannot be performed.`,
+      intent: Intent.DANGER,
+      onDismiss: () => {
+        globalErrorsSet({ transactionsLocked: false });
+      },
+    });
+  }
+  if (globalErrors.userInactive) {
+    AppToaster.show({
+      message: 'The authorized user is inactive.',
+      intent: Intent.DANGER,
+      onDismiss: () => {
+        globalErrorsSet({ userInactive: false });
+      },
+    });
+  }
   return null;
 }
 
diff --git a/src/containers/InventoryAdjustments/InventoryAdjustmentList.js b/src/containers/InventoryAdjustments/InventoryAdjustmentList.js
index dddb4e756..99ba1c7d8 100644
--- a/src/containers/InventoryAdjustments/InventoryAdjustmentList.js
+++ b/src/containers/InventoryAdjustments/InventoryAdjustmentList.js
@@ -26,8 +26,6 @@ function InventoryAdjustmentList({
         <DashboardContentTable>
           <InventoryAdjustmentTable />
         </DashboardContentTable>
-
-
       </DashboardPageContent>
     </InventoryAdjustmentsProvider>
   );
diff --git a/src/containers/InventoryAdjustments/components.js b/src/containers/InventoryAdjustments/components.js
index 49e74316f..bdf4c3645 100644
--- a/src/containers/InventoryAdjustments/components.js
+++ b/src/containers/InventoryAdjustments/components.js
@@ -26,11 +26,11 @@ import {
  */
 export const PublishAccessor = (r) => {
   return r.is_published ? (
-    <Tag minimal={true}>
+    <Tag minimal={true} round={true}>
       <T id={'published'} />
     </Tag>
   ) : (
-    <Tag minimal={true} intent={Intent.WARNING}>
+    <Tag minimal={true} intent={Intent.WARNING} round={true}>
       <T id={'draft'} />
     </Tag>
   );
@@ -40,9 +40,9 @@ export const PublishAccessor = (r) => {
  * Type column accessor.
  */
 export const TypeAccessor = (row) => {
-  return row.type ? (
+  return row.formatted_type ? (
     <Tag minimal={true} round={true} intent={Intent.NONE}>
-      {intl.get(row.type)}
+      {row.formatted_type}
     </Tag>
   ) : (
     ''
diff --git a/src/containers/Items/ItemsAlerts.js b/src/containers/Items/ItemsAlerts.js
index 6918fe4a2..ad82b4e75 100644
--- a/src/containers/Items/ItemsAlerts.js
+++ b/src/containers/Items/ItemsAlerts.js
@@ -16,6 +16,10 @@ const ItemBulkDeleteAlert = React.lazy(() =>
   import('containers/Alerts/Items/ItemBulkDeleteAlert'),
 );
 
+const cancelUnlockingPartialAlert = React.lazy(() =>
+  import('../Alerts/TransactionLocking/cancelUnlockingPartialAlert'),
+);
+
 /**
  * Items alert.
  */
diff --git a/src/containers/Items/ItemsListProvider.js b/src/containers/Items/ItemsListProvider.js
index 51918764a..e64c77032 100644
--- a/src/containers/Items/ItemsListProvider.js
+++ b/src/containers/Items/ItemsListProvider.js
@@ -63,7 +63,7 @@ function ItemsListProvider({ tableState, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isItemsLoading || isResourceLoading}
+      loading={isViewsLoading || isResourceLoading}
       name={'items-list'}
     >
       <ItemsContext.Provider value={state} {...props} />
diff --git a/src/containers/Items/components.js b/src/containers/Items/components.js
index bbc01fb84..5de8e29ff 100644
--- a/src/containers/Items/components.js
+++ b/src/containers/Items/components.js
@@ -69,9 +69,9 @@ export const SellPriceCell = ({ cell: { value } }) => {
 };
 
 export const ItemTypeAccessor = (row) => {
-  return row.type ? (
+  return row.type_formatted ? (
     <Tag minimal={true} round={true} intent={Intent.NONE}>
-      {intl.get(row.type)}
+      {row.type_formatted}
     </Tag>
   ) : null;
 };
@@ -140,6 +140,7 @@ export function ItemsActionMenuList({
         </If>
       </Can>
       <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_item')}
           icon={<Icon icon="trash-16" iconSize={16} />}
diff --git a/src/containers/JournalEntriesTable/JournalEntriesTable.js b/src/containers/JournalEntriesTable/JournalEntriesTable.js
index 16379f8f1..b17f8e7f9 100644
--- a/src/containers/JournalEntriesTable/JournalEntriesTable.js
+++ b/src/containers/JournalEntriesTable/JournalEntriesTable.js
@@ -1,58 +1,54 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import { DataTable } from 'components';
 
-import 'style/pages/JournalEntries/List.scss';
+import styled from 'styled-components';
+import * as R from 'ramda';
+
+import { CurrencyTag } from 'components';
+import { TableStyle } from '../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { useGLEntriesTableColumns } from './utils';
 
 /**
  * Journal entries table.
  */
-export default function JournalEntriesTable({ transactions }) {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('date'),
-        accessor: 'date',
-        accessor: ({ formatted_date }) =>
-          moment(formatted_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'date',
-      },
-      {
-        Header: intl.get('account_name'),
-        accessor: 'account_name',
-        width: 140,
-        className: 'account_name',
-      },
-      {
-        Header: intl.get('contact'),
-        accessor: 'contactTypeFormatted',
-        width: 140,
-      },
-      {
-        Header: intl.get('credit'),
-        accessor: ({ credit }) => credit.formatted_amount,
-        width: 100,
-        className: 'credit',
-      },
-      {
-        Header: intl.get('debit'),
-        accessor: ({ debit }) => debit.formatted_amount,
-        width: 100,
-        className: 'debit',
-      },
-    ],
-    [],
-  );
+export default function JournalEntriesTable({ transactions, ...restProps }) {
+  const columns = useGLEntriesTableColumns();
 
   return (
-    <Card>
-      <DataTable
-        columns={columns}
-        data={transactions}
-        className={'datatable--journal-entries'}
-      />
-    </Card>
+    <DataTable
+      columns={columns}
+      data={transactions}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
+      {...restProps}
+    />
   );
 }
+
+/**
+ *
+ * @returns {React.JSX}
+ */
+export function AmountDisplayedBaseCurrencyMessageJSX({
+  organization: { base_currency: baseCurrency },
+}) {
+  return (
+    <Message>
+      {intl.get('journal_entries.amount_displayed_base_currency')}
+      <CurrencyTag>{baseCurrency}</CurrencyTag>
+    </Message>
+  );
+}
+
+export const AmountDisplayedBaseCurrencyMessage = R.compose(
+  withCurrentOrganization(),
+)(AmountDisplayedBaseCurrencyMessageJSX);
+
+const Message = styled.div`
+  font-size: 10px;
+  margin-bottom: 12px;
+`;
diff --git a/src/containers/JournalEntriesTable/utils.js b/src/containers/JournalEntriesTable/utils.js
new file mode 100644
index 000000000..3ad3418e9
--- /dev/null
+++ b/src/containers/JournalEntriesTable/utils.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+
+export const useGLEntriesTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: ({ formatted_date }) =>
+          moment(formatted_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+        textAligment: 'right',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
index 5a51e958b..6af373a5c 100644
--- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
+++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js
@@ -15,7 +15,6 @@ import { FormObserver, SMSMessagePreview } from 'components';
 import { transformToForm, safeInvoke } from 'utils';
 import { getSMSUnits } from './utils';
 
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const defaultInitialValues = {
   notification_key: '',
@@ -147,17 +146,9 @@ const SMSPreviewSectionRoot = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-
-  ${whenLtr(`
-    padding-left: 25px;
-    margin-left: 25px;
-    border-left: 1px solid #dcdcdd;
-  `)}
-  ${whenRtl(`
-    padding-right: 25px;
-    margin-right: 25px;
-    border-right: 1px solid #dcdcdd;
-  `)}
+  padding-left: 25px;
+  margin-left: 25px;
+  border-left: 1px solid #dcdcdd;
 `;
 
 const SMSPreviewSectionNote = styled.div`
diff --git a/src/containers/Preferences/Accountant/Accountant.schema.js b/src/containers/Preferences/Accountant/Accountant.schema.js
index 0c029efa5..3b0b55373 100644
--- a/src/containers/Preferences/Accountant/Accountant.schema.js
+++ b/src/containers/Preferences/Accountant/Accountant.schema.js
@@ -4,9 +4,9 @@ const Schema = Yup.object().shape({
   accounting_basis: Yup.string().required(),
   account_code_required: Yup.boolean().nullable(),
   account_code_unique: Yup.boolean().nullable(),
-  deposit_account: Yup.number().nullable(),
   withdrawal_account: Yup.number().nullable(),
-  advance_deposit: Yup.number().nullable(),
+  preferred_deposit_account: Yup.number().nullable(),
+  preferred_advance_deposit: Yup.number().nullable(),
 });
 
 export const AccountantSchema = Schema;
diff --git a/src/containers/Preferences/Accountant/AccountantForm.js b/src/containers/Preferences/Accountant/AccountantForm.js
index 870833e78..fc5e1c233 100644
--- a/src/containers/Preferences/Accountant/AccountantForm.js
+++ b/src/containers/Preferences/Accountant/AccountantForm.js
@@ -15,8 +15,10 @@ import {
   FormattedMessage as T,
   AccountsSelectList,
   FieldRequiredHint,
+  CardFooterActions,
 } from 'components';
 import { handleStringChange, inputIntent } from 'utils';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
 
 import { useAccountantFormContext } from './AccountantFormProvider';
 
@@ -113,7 +115,7 @@ export default function AccountantForm() {
       </FastField>
 
       {/* ----------- Deposit customer account ----------- */}
-      <FastField name={'deposit_account'}>
+      <FastField name={'preferred_deposit_account'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -138,11 +140,15 @@ export default function AccountantForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('deposit_account', id);
+                setFieldValue('preferred_deposit_account', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
-              // filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
             />
           </FormGroup>
         )}
@@ -178,13 +184,18 @@ export default function AccountantForm() {
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
             />
           </FormGroup>
         )}
       </FastField>
 
       {/* ----------- Withdrawal customer account ----------- */}
-      <FastField name={'advance_deposit'}>
+      <FastField name={'preferred_advance_deposit'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -209,7 +220,7 @@ export default function AccountantForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('advance_deposit', id);
+                setFieldValue('preferred_advance_deposit', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
@@ -219,14 +230,14 @@ export default function AccountantForm() {
         )}
       </FastField>
 
-      <div className={'card__footer'}>
+      <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
           <T id={'save'} />
         </Button>
         <Button disabled={isSubmitting} onClick={handleCloseClick}>
           <T id={'close'} />
         </Button>
-      </div>
+      </CardFooterActions>
     </Form>
   );
 }
diff --git a/src/containers/Preferences/Accountant/AccountantFormPage.js b/src/containers/Preferences/Accountant/AccountantFormPage.js
index 33d259f84..ab9fb326a 100644
--- a/src/containers/Preferences/Accountant/AccountantFormPage.js
+++ b/src/containers/Preferences/Accountant/AccountantFormPage.js
@@ -28,15 +28,13 @@ function AccountantFormPage({
   accountsSettings,
   billPaymentSettings,
 }) {
-  
-
   const { saveSettingMutate } = useAccountantFormContext();
 
   const accountantSettings = {
     ...billPaymentSettings,
     ...accountsSettings,
     ...pick(organizationSettings, ['accountingBasis']),
-    ...pick(paymentReceiveSettings, ['depositAccount', 'advanceDeposit']),
+    ...pick(paymentReceiveSettings, ['preferredDepositAccount', 'preferredAdvanceDeposit']),
   };
 
   const initialValues = {
diff --git a/src/containers/Preferences/Accountant/AccountantFormProvider.js b/src/containers/Preferences/Accountant/AccountantFormProvider.js
index 9e2305120..4ff29b567 100644
--- a/src/containers/Preferences/Accountant/AccountantFormProvider.js
+++ b/src/containers/Preferences/Accountant/AccountantFormProvider.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import { useAccounts, useSaveSettings, useSettings } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
@@ -35,16 +38,21 @@ function AccountantFormProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <AccountantFormCard>
         {isLoading ? (
           <PreferencesPageLoader />
         ) : (
           <AccountantFormContext.Provider value={provider} {...props} />
         )}
-      </div>
+      </AccountantFormCard>
     </div>
   );
 }
 
 const useAccountantFormContext = () => React.useContext(AccountantFormContext);
+
 export { AccountantFormProvider, useAccountantFormContext };
+
+const AccountantFormCard = styled(Card)`
+  padding: 25px;
+`;
diff --git a/src/containers/Preferences/Accountant/utils.js b/src/containers/Preferences/Accountant/utils.js
index 22f838ba4..0579127f5 100644
--- a/src/containers/Preferences/Accountant/utils.js
+++ b/src/containers/Preferences/Accountant/utils.js
@@ -11,13 +11,13 @@ export const transformToOptions = (option) => {
       group: 'bill_payments',
     },
     {
-      key: 'deposit_account',
-      value: option.deposit_account,
+      key: 'preferred_deposit_account',
+      value: option.preferred_deposit_account,
       group: 'payment_receives',
     },
     {
-      key: 'advance_deposit',
-      value: option.advance_deposit,
+      key: 'preferred_advance_deposit',
+      value: option.preferred_advance_deposit,
       group: 'payment_receives',
     },
     {
diff --git a/src/containers/Preferences/Currencies/Currencies.js b/src/containers/Preferences/Currencies/Currencies.js
index e110e72df..92d4e94c4 100644
--- a/src/containers/Preferences/Currencies/Currencies.js
+++ b/src/containers/Preferences/Currencies/Currencies.js
@@ -1,20 +1,26 @@
-
-
 import React from 'react';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import CurrenciesList from './CurrenciesList';
 
 export default function PreferencesCurrenciesPage() {
   return (
-    <div className={classNames(
-      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES,
-    )}>
-      <div className={classNames(CLASSES.CARD)}>
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES,
+      )}
+    >
+      <CurrenciesCard>
         <CurrenciesList />
-      </div>
+      </CurrenciesCard>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
+
+const CurrenciesCard = styled(Card)`
+  padding: 0;
+`;
diff --git a/src/containers/Preferences/Currencies/components.js b/src/containers/Preferences/Currencies/components.js
index 431628b27..2c25b607a 100644
--- a/src/containers/Preferences/Currencies/components.js
+++ b/src/containers/Preferences/Currencies/components.js
@@ -5,6 +5,7 @@ import {
   Button,
   Position,
   MenuItem,
+  MenuDivider,
   Intent,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
@@ -18,7 +19,6 @@ export function ActionMenuList({
   row: { original },
   payload: { onEditCurrency, onDeleteCurrency },
 }) {
-  
   return (
     <Menu>
       <MenuItem
@@ -26,6 +26,7 @@ export function ActionMenuList({
         text={intl.get('edit_currency')}
         onClick={safeCallback(onEditCurrency, original)}
       />
+      <MenuDivider />
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
         text={intl.get('delete_currency')}
@@ -51,8 +52,6 @@ export const ActionsCell = (props) => {
 };
 
 export function useCurrenciesTableColumns() {
-  
-
   return useMemo(
     () => [
       {
@@ -69,7 +68,7 @@ export function useCurrenciesTableColumns() {
       {
         Header: intl.get('currency_sign'),
         width: 120,
-        accessor: 'currency_sign'
+        accessor: 'currency_sign',
       },
       {
         id: 'actions',
diff --git a/src/containers/Preferences/General/GeneralForm.js b/src/containers/Preferences/General/GeneralForm.js
index 2fc72621d..7925d5279 100644
--- a/src/containers/Preferences/General/GeneralForm.js
+++ b/src/containers/Preferences/General/GeneralForm.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { ErrorMessage, FastField } from 'formik';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { FormattedMessage as T } from 'components';
 import { ListSelect, FieldRequiredHint } from 'components';
@@ -242,14 +243,28 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         )}
       </FastField>
 
-      <div className={'card__footer'}>
+      <CardFooterActions>
         <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
           <T id={'save'} />
         </Button>
         <Button onClick={handleCloseClick}>
           <T id={'close'} />
         </Button>
-      </div>
+      </CardFooterActions>
     </Form>
   );
 }
+
+const CardFooterActions = styled.div`
+  padding-top: 16px;
+  border-top: 1px solid #e0e7ea;
+  margin-top: 30px;
+
+  .bp3-button {
+    min-width: 70px;
+
+    + .bp3-button{
+      margin-left: 10px;
+    }
+  }
+`;
\ No newline at end of file
diff --git a/src/containers/Preferences/General/GeneralFormPage.js b/src/containers/Preferences/General/GeneralFormPage.js
index ae0bdf605..190a55215 100644
--- a/src/containers/Preferences/General/GeneralFormPage.js
+++ b/src/containers/Preferences/General/GeneralFormPage.js
@@ -42,7 +42,7 @@ function GeneralFormPage({
   const initialValues = {
     ...transformToForm(organization.metadata, defaultValues),
   };
-
+  // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
     // Handle request success.
     const onSuccess = (response) => {
diff --git a/src/containers/Preferences/General/GeneralFormProvider.js b/src/containers/Preferences/General/GeneralFormProvider.js
index e51da73cd..a6c450c3f 100644
--- a/src/containers/Preferences/General/GeneralFormProvider.js
+++ b/src/containers/Preferences/General/GeneralFormProvider.js
@@ -1,5 +1,8 @@
 import React, { createContext } from 'react';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import {
   useCurrentOrganization,
@@ -45,13 +48,13 @@ function GeneralFormProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <GeneralFormCard>
         {isOrganizationLoading || isDateFormatsLoading ? (
           <PreferencesPageLoader />
         ) : (
           <GeneralFormContext.Provider value={provider} {...props} />
         )}
-      </div>
+      </GeneralFormCard>
     </div>
   );
 }
@@ -59,3 +62,7 @@ function GeneralFormProvider({ ...props }) {
 const useGeneralFormContext = () => React.useContext(GeneralFormContext);
 
 export { GeneralFormProvider, useGeneralFormContext };
+
+const GeneralFormCard = styled(Card)`
+  padding: 25px;
+`;
diff --git a/src/containers/Preferences/Item/ItemPreferencesForm.js b/src/containers/Preferences/Item/ItemPreferencesForm.js
index 4f82fcf95..1dc6f0415 100644
--- a/src/containers/Preferences/Item/ItemPreferencesForm.js
+++ b/src/containers/Preferences/Item/ItemPreferencesForm.js
@@ -6,6 +6,7 @@ import {
   AccountsSelectList,
   FieldRequiredHint,
   FormattedMessage as T,
+  CardFooterActions
 } from 'components';
 import { inputIntent } from 'utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from 'common/accountTypes';
@@ -135,14 +136,14 @@ export default function ItemForm() {
         )}
       </FastField>
 
-      <div className={'card__footer'}>
+      <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
           <T id={'save'} />
         </Button>
         <Button onClick={handleCloseClick} disabled={isSubmitting}>
           <T id={'close'} />
         </Button>
-      </div>
+      </CardFooterActions>
     </Form>
   );
 }
diff --git a/src/containers/Preferences/Item/ItemPreferencesFormPage.js b/src/containers/Preferences/Item/ItemPreferencesFormPage.js
index f9b27fd63..af5308b70 100644
--- a/src/containers/Preferences/Item/ItemPreferencesFormPage.js
+++ b/src/containers/Preferences/Item/ItemPreferencesFormPage.js
@@ -3,6 +3,7 @@ import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
+import { pick, omit } from 'lodash';
 import { ItemPreferencesSchema } from './ItemPreferences.schema';
 import ItemPreferencesForm from './ItemPreferencesForm';
 
@@ -23,12 +24,16 @@ function ItemPreferencesFormPage({
 }) {
   const { saveSettingMutate } = useItemPreferencesFormContext();
 
+  const itemPerferencesSettings = {
+    ...omit(itemsSettings, ['tableSize']),
+  };
+  
   // Initial values.
   const initialValues = {
     preferred_sell_account: '',
     preferred_cost_account: '',
     preferred_inventory_account: '',
-    ...transformGeneralSettings(itemsSettings),
+    ...transformGeneralSettings(itemPerferencesSettings),
   };
 
   useEffect(() => {
@@ -37,8 +42,10 @@ function ItemPreferencesFormPage({
 
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const options = optionsMapToArray(values)
-      .map((option) => ({ ...option, group: 'items' }));
+    const options = optionsMapToArray(values).map((option) => ({
+      ...option,
+      group: 'items',
+    }));
 
     const onSuccess = () => {
       AppToaster.show({
diff --git a/src/containers/Preferences/Item/ItemPreferencesFormProvider.js b/src/containers/Preferences/Item/ItemPreferencesFormProvider.js
index 2b6162693..fd15c8122 100644
--- a/src/containers/Preferences/Item/ItemPreferencesFormProvider.js
+++ b/src/containers/Preferences/Item/ItemPreferencesFormProvider.js
@@ -1,7 +1,9 @@
 import React, { useContext, createContext } from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import styled from 'styled-components';
 
+import { CLASSES } from 'common/classes';
+import { Card } from 'components';
 import { useSettingsItems, useAccounts, useSaveSettings } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
@@ -38,13 +40,13 @@ function ItemPreferencesFormProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <ItemsPreferencesCard>
         {isLoading ? (
           <PreferencesPageLoader />
         ) : (
           <ItemFormContext.Provider value={provider} {...props} />
         )}
-      </div>
+      </ItemsPreferencesCard>
     </div>
   );
 }
@@ -52,3 +54,7 @@ function ItemPreferencesFormProvider({ ...props }) {
 const useItemPreferencesFormContext = () => useContext(ItemFormContext);
 
 export { useItemPreferencesFormContext, ItemPreferencesFormProvider };
+
+const ItemsPreferencesCard = styled(Card)`
+  padding: 25px;
+`;
diff --git a/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js b/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js
index ebad8a644..30c2062a1 100644
--- a/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js
+++ b/src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
 import { Tabs, Tab } from '@blueprintjs/core';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
 import SMSMessagesDataTable from './SMSMessagesDataTable';
+import { Card } from 'components';
 
 import '../../../style/pages/Preferences/SMSIntegration.scss';
 
@@ -12,6 +14,10 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+/**
+ * SMS Integration Tabs.
+ * @returns {React.JSX}
+ */
 function SMSIntegrationTabs({
   // #withDashboardActions
   changePreferencesPageTitle,
@@ -21,7 +27,7 @@ function SMSIntegrationTabs({
   }, [changePreferencesPageTitle]);
 
   return (
-    <div className={classNames(CLASSES.CARD)}>
+    <SMSIntegrationCard>
       <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
         <Tabs animate={true} defaultSelectedTabId={'sms_messages'}>
           <Tab
@@ -35,8 +41,12 @@ function SMSIntegrationTabs({
           />
         </Tabs>
       </div>
-    </div>
+    </SMSIntegrationCard>
   );
 }
 
 export default compose(withDashboardActions)(SMSIntegrationTabs);
+
+const SMSIntegrationCard = styled(Card)`
+  padding: 0;
+`;
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js
new file mode 100644
index 000000000..1f46d2979
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import styled from 'styled-components';
+import { Intent, Button } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+
+import { FormattedMessage as T } from 'components';
+
+/**
+ * Role form floating actions.
+ * @returns {React.JSX}
+ */
+export function RoleFormFloatingActions() {
+  // Formik form context.
+  const { isSubmitting } = useFormikContext();
+
+  // History context.
+  const history = useHistory();
+
+  // Handle close click.
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <RoleFormFloatingActionsRoot>
+      <Button
+        intent={Intent.PRIMARY}
+        loading={isSubmitting}
+        type="submit"
+        style={{ minWidth: '90px' }}
+      >
+        <T id={'save'} />
+      </Button>
+      <Button onClick={handleCloseClick} disabled={isSubmitting}>
+        <T id={'cancel'} />
+      </Button>
+    </RoleFormFloatingActionsRoot>
+  );
+}
+
+const RoleFormFloatingActionsRoot = styled.div`
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  padding: 14px 18px;
+  border-top: 1px solid #d2dde2;
+  box-shadow: 0px -1px 4px 0px rgb(0 0 0 / 5%);
+
+  .bp3-button {
+    margin-right: 10px;
+  }
+`;
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.js b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.js
new file mode 100644
index 000000000..92640fd5a
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { ErrorMessage, FastField } from 'formik';
+import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
+
+import { inputIntent } from 'utils';
+import { FormattedMessage as T, FieldRequiredHint, Card } from 'components';
+import { useAutofocus } from 'hooks';
+
+/**
+ * Role form header.
+ * @returns {React.JSX}
+ */
+export function RoleFormHeader() {
+  const roleNameFieldRef = useAutofocus();
+
+  return (
+    <Card>
+      {/* ---------- Name ----------  */}
+      <FastField name={'role_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={
+              <strong>
+                <T id={'roles.label.role_name'} />
+              </strong>
+            }
+            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}
+              placeholder="Max. 500 characters"
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </Card>
+  );
+}
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.js b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.js
new file mode 100644
index 000000000..281fbc58a
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { FormikObserver } from 'components';
+
+/**
+ * Role form observer.
+ * @returns {React.JSX}
+ */
+export function RoleFormObserver() {
+  const { values } = useFormikContext();
+
+  // Handles the form change.
+  const handleFormChange = () => {};
+
+  return <FormikObserver onChange={handleFormChange} values={values} />;
+}
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
index a1af99e4d..a558dbb43 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
@@ -3,31 +3,28 @@ import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { isEmpty } from 'lodash';
+import { Intent } from '@blueprintjs/core';
 
 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 withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import RolesFormContent from './RolesFormContent';
 import {
   getNewRoleInitialValues,
   transformToArray,
   transformToObject,
 } from './utils';
-
-import RolesFormContent from './RolesFormContent';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
+import { handleDeleteErrors } from '../utils';
 import { compose, transformToForm } from 'utils';
 
 const defaultValues = {
   role_name: '',
   role_description: '',
   permissions: {},
+  serviceFullAccess: {},
 };
 
 /**
@@ -82,8 +79,13 @@ function RolesForm({
       history.push('/preferences/users');
     };
 
-    const onError = (errors) => {
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
       setSubmitting(false);
+      handleDeleteErrors(errors);
     };
     if (isNewMode) {
       createRolePermissionMutate(form).then(onSuccess).catch(onError);
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
index b2f40ecdb..34a22674f 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
@@ -5,7 +5,6 @@ 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(),
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
index ae2267054..e736409d3 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
@@ -1,76 +1,22 @@
 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 { Form } from 'formik';
+
+import { RoleFormHeader } from './RoleFormHeader';
 import { RolesPermissionList } from './components';
+import { RoleFormFloatingActions } from './RoleFormFloatingActions';
+import { RoleFormObserver } from './RoleFormObserver';
 
 /**
  * Preferences - Roles Form content.
+ * @returns {React.JSX}
  */
 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>
+      <RoleFormHeader />
       <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>
+      <RoleFormFloatingActions />
+      <RoleFormObserver />
     </Form>
   );
 }
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
index 06fb0d076..aaaf6adbb 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import _, { isArray } from 'lodash';
 
 import {
   useCreateRolePermissionSchema,
@@ -10,7 +9,6 @@ import {
   useRolePermission,
 } from 'hooks/query';
 import PreferencesPageLoader from '../../../PreferencesPageLoader';
-import { transformToObject } from './utils';
 
 const RolesFormContext = React.createContext();
 
@@ -32,10 +30,12 @@ function RolesFormProvider({ roleId, ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  const { data: role, isLoading: isPermissionLoading } =
-    useRolePermission(roleId, {
+  const { data: role, isLoading: isPermissionLoading } = useRolePermission(
+    roleId,
+    {
       enabled: !!roleId,
-    });
+    },
+  );
 
   // Detarmines whether the new or edit mode.
   const isNewMode = !roleId;
@@ -59,13 +59,11 @@ function RolesFormProvider({ roleId, ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
-        {isPermissionsSchemaLoading || isPermissionLoading ? (
-          <PreferencesPageLoader />
-        ) : (
-          <RolesFormContext.Provider value={provider} {...props} />
-        )}
-      </div>
+      {isPermissionsSchemaLoading || isPermissionLoading ? (
+        <PreferencesPageLoader />
+      ) : (
+        <RolesFormContext.Provider value={provider} {...props} />
+      )}
     </div>
   );
 }
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/components.js b/src/containers/Preferences/Users/Roles/RolesForm/components.js
index 75b7921df..034ad5dfd 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/components.js
@@ -1,150 +1,512 @@
 import React from 'react';
-import { Checkbox } from '@blueprintjs/core';
+import { Checkbox, Popover } from '@blueprintjs/core';
 import styled from 'styled-components';
-import { castArray } from 'lodash';
+import { Field } from 'formik';
 
-import { FastField, useFormikContext } from 'formik';
-import { whenRtl, whenLtr } from 'utils/styled-components';
-import { Icon, Hint, If, Choose } from 'components';
-import { useRolesFormContext } from './RolesFormProvider';
+import {
+  getPermissionsSchema,
+  ModulePermissionsStyle,
+} from 'common/permissionsSchema';
+import { Card, If, ButtonLink, Choose, T } from 'components';
+import {
+  getSerivceColumnPermission,
+  getServiceExtraPermissions,
+  FULL_ACCESS_CHECKBOX_STATE,
+  handleCheckboxFullAccessChange,
+  handleCheckboxPermissionChange,
+} from './utils';
 
-const RoleLabelCheckbox = ({ subject, label, description }) => (
-  <>
-    <LabelCheckbox>
-      {/*------------- subject checbox ------------- */}
-      <FastField name={subject} type="checkbox">
-        {({ form: { setFieldValue, values }, field }) => (
-          <Checkbox
-            className={'block'}
+// Module permissions context.
+const ModulePermissionsContext = React.createContext();
+const ModuleServiceContext = React.createContext();
+
+/**
+ * Retrieves the module permissions provider.
+ * @returns {React.JSX}
+ */
+const useModulePermissionsProvider = () =>
+  React.useContext(ModulePermissionsContext);
+
+/**
+ * Module permissions service context provider.
+ */
+const useModulePermissionsServiceProvider = () =>
+  React.useContext(ModuleServiceContext);
+
+/**
+ * Module permissions context state provider.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsProvider({ module, children }) {
+  return (
+    <ModulePermissionsContext.Provider value={{ module }}>
+      {children}
+    </ModulePermissionsContext.Provider>
+  );
+}
+
+/**
+ * Module permissions service context state provider.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsServiceProvider({ service, children }) {
+  return (
+    <ModuleServiceContext.Provider value={{ service }}>
+      {children}
+    </ModuleServiceContext.Provider>
+  );
+}
+
+/**
+ * Permissions body columns.
+ * @returns {React.JSX}
+ */
+function PermissionBodyColumn({ column }) {
+  // Module permssions service context.
+  const { service } = useModulePermissionsServiceProvider();
+
+  // Retrieve the related permission of the given column key.
+  const permission = getSerivceColumnPermission(service, column.key);
+
+  // Display empty cell if the current column key has no related permissions.
+  if (!permission) {
+    return <td class={'permission-checkbox'}></td>;
+  }
+  return (
+    <td class={'permission-checkbox'}>
+      <Field
+        name={`permissions.${service.subject}/${permission.key}`}
+        type="checkbox"
+      >
+        {({ field, form }) => (
+          <PermissionCheckbox
             inline={true}
-            label={label}
-            name={subject}
+            {...field}
+            onChange={handleCheckboxPermissionChange(form, permission, service)}
           />
         )}
-      </FastField>
-      <p>{description}</p>
-    </LabelCheckbox>
-  </>
-);
+      </Field>
+    </td>
+  );
+}
+
+/**
+ *
+ * @returns {React.JSX}
+ */
+function ModulePermissionsTableColumns({ columns }) {
+  return columns.map((column) => <PermissionBodyColumn column={column} />);
+}
+
+/**
+ * Module columns permissions extra permissions popover.
+ * @returns {React.JSX}
+ */
+function ModuleExtraPermissionsPopover() {
+  const { service } = useModulePermissionsServiceProvider();
+
+  // Retrieve the extra permissions of the given service.
+  const extraPermissions = getServiceExtraPermissions(service);
 
-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} />
+    <Popover>
+      <MorePermissionsLink>
+        <T id={'permissions.more_permissions'} />
+      </MorePermissionsLink>
+
+      <ExtraPermissionsRoot>
+        {extraPermissions.map((permission) => (
+          <Field
+            name={`permissions.${service.subject}/${permission.key}`}
+            type="checkbox"
+          >
+            {({ form, field }) => (
+              <PermissionCheckbox
+                inline={true}
+                label={permission.label}
+                {...field}
+                onChange={handleCheckboxPermissionChange(
+                  form,
+                  permission,
+                  service,
+                )}
+              />
+            )}
+          </Field>
+        ))}
+      </ExtraPermissionsRoot>
+    </Popover>
+  );
+}
+
+/**
+ * Module permissions extra permissions.
+ * @returns {React.JSX}
+ */
+function ModulePermissionExtraPermissions() {
+  const { service } = useModulePermissionsServiceProvider();
+
+  // Retrieve the extra permissions of the given service.
+  const extraPermissions = getServiceExtraPermissions(service);
+
+  return (
+    <td>
+      <If condition={extraPermissions.length > 0}>
+        <ModuleExtraPermissionsPopover />
+      </If>
+    </td>
+  );
+}
+
+/**
+ * Module permissions table head.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsTableHead() {
+  const {
+    module: { serviceFullAccess, columns },
+  } = useModulePermissionsProvider();
+
+  return (
+    <thead>
+      <tr>
+        <th></th>
+        <If condition={serviceFullAccess}>
+          <th class={'full'}>
+            <T id={'permissions.column.full_access'} />
+          </th>
+        </If>
+        {columns.map((column) => (
+          <th class={'permission'}>{column.label}</th>
+        ))}
+        <th></th>
+      </tr>
+    </thead>
+  );
+}
+
+/**
+ * Module permissions service full access.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsServiceFullAccess() {
+  // Module permissions provider.
+  const { module } = useModulePermissionsProvider();
+
+  // Module service provider.
+  const { service } = useModulePermissionsServiceProvider();
+
+  return (
+    <If condition={module.serviceFullAccess}>
+      <td class="full-access-permission">
+        <Field name={`serviceFullAccess.${service.subject}`} type="checkbox">
+          {({ form, field }) => (
+            <PermissionCheckbox
+              inline={true}
+              {...field}
+              indeterminate={
+                field.value === FULL_ACCESS_CHECKBOX_STATE.INDETARMINE
+              }
+              onChange={handleCheckboxFullAccessChange(service, form)}
+            />
           )}
-        </FastField>
-      ))}
-    </AbilitieList>
+        </Field>
+      </td>
+    </If>
   );
-};
+}
 
-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();
+/**
+ * Module permissions table body.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsTableBody() {
+  const {
+    module: { services, columns },
+  } = useModulePermissionsProvider();
 
   return (
-    <GroupList>
-      <BoxedGroupList>
-        {permissionsSchema.map(
-          ({
-            subject,
-            subject_label,
-            description,
-            abilities,
-            extra_abilities,
-          }) => {
-            const extraAbilitiesList = Array.isArray(extra_abilities)
-              ? extra_abilities
-              : [];
+    <tbody>
+      {services.map((service) => (
+        <ModulePermissionsServiceProvider service={service}>
+          <tr>
+            <td className="service-label">{service.label} </td>
 
-            const abilitiesList = castArray(abilities) ? abilities : [];
+            <ModulePermissionsServiceFullAccess />
+            <ModulePermissionsTableColumns columns={columns} />
+            <ModulePermissionExtraPermissions />
+          </tr>
+        </ModulePermissionsServiceProvider>
+      ))}
+    </tbody>
+  );
+}
 
-            return (
-              <React.Fragment>
-                <RoleList>
-                  <RoleLabelCheckbox
-                    subject={subject}
-                    label={subject_label}
-                    description={description}
-                  />
+/**
+ * Module permissions table.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsTable() {
+  return (
+    <ModulePermissionsTableRoot>
+      <ModulePermissionsTableHead />
+      <ModulePermissionsTableBody />
+    </ModulePermissionsTableRoot>
+  );
+}
 
-                  <AbilitiesList subject={subject} abilities={abilitiesList} />
-                  <ExtraAbilitiesList
-                    subject={subject}
-                    extraAbilities={extraAbilitiesList}
-                  />
-                </RoleList>
-              </React.Fragment>
-            );
-          },
-        )}
-      </BoxedGroupList>
-    </GroupList>
+/**
+ * Module vertical table cells.
+ * @returns {React.JSX}
+ */
+function ModuleVerticalTableCells() {
+  const { service } = useModulePermissionsServiceProvider();
+
+  return (
+    <td class={'permissions'}>
+      {service.permissions.map((permission) => (
+        <div>
+          <Field
+            name={`permissions.${service.subject}/${permission.key}`}
+            type="checkbox"
+          >
+            {({ form, field }) => (
+              <PermissionCheckbox
+                inline={true}
+                label={permission.label}
+                {...field}
+                onChange={handleCheckboxPermissionChange(
+                  form,
+                  permission,
+                  service,
+                )}
+              />
+            )}
+          </Field>
+        </div>
+      ))}
+    </td>
+  );
+}
+
+/**
+ * Module permissions vertical services.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsVerticalServices() {
+  const { module } = useModulePermissionsProvider();
+
+  return (
+    <ModulePermissionsVerticalServicesRoot>
+      <ModulePermissionsVerticalTable>
+        <tbody>
+          {module.services.map((service) => (
+            <ModulePermissionsServiceProvider service={service}>
+              <tr>
+                <td class={'service-label'}>{service.label} </td>
+                <ModuleVerticalTableCells />
+              </tr>
+            </ModulePermissionsServiceProvider>
+          ))}
+        </tbody>
+      </ModulePermissionsVerticalTable>
+    </ModulePermissionsVerticalServicesRoot>
+  );
+}
+
+/**
+ * Module permissions body.
+ * @returns {React.JSX}
+ */
+function ModulePermissionsBody() {
+  const { module } = useModulePermissionsProvider();
+
+  return (
+    <ModulePermissionBodyRoot>
+      <Choose>
+        <Choose.When
+          condition={module.type === ModulePermissionsStyle.Vertical}
+        >
+          <ModulePermissionsVerticalServices />
+        </Choose.When>
+
+        <Choose.When condition={module.type === ModulePermissionsStyle.Columns}>
+          <ModulePermissionsTable />
+        </Choose.When>
+      </Choose>
+    </ModulePermissionBodyRoot>
+  );
+}
+
+/**
+ * Permissions module.
+ * @returns {React.JSX}
+ */
+function ModulePermissions({ module }) {
+  return (
+    <ModulePermissionsRoot>
+      <ModulePermissionsProvider module={module}>
+        <ModulePermissionHead>
+          <ModulePermissionTitle>{module.label} </ModulePermissionTitle>
+        </ModulePermissionHead>
+
+        <ModulePermissionsBody />
+      </ModulePermissionsProvider>
+    </ModulePermissionsRoot>
+  );
+}
+
+/**
+ * Permissions modules list.
+ * @return {React.JSX}
+ */
+export const RolesPermissionList = () => {
+  const permissions = getPermissionsSchema();
+
+  return (
+    <ModulesPermission>
+      {permissions.map((module) => (
+        <ModulePermissions module={module} />
+      ))}
+    </ModulesPermission>
   );
 };
 
-const GroupList = styled.div`
-  list-style: none;
-  border: 1px solid #d2dce2;
-  border-radius: 6px;
-  font-size: 13px;
+const PermissionCheckbox = styled(Checkbox)`
+  &.bp3-control.bp3-checkbox .bp3-control-indicator {
+    border-radius: 2px;
+    border-color: #555;
 
-  ul:first-child > li:last-child {
-    border-bottom: 0;
-    border-top: 0;
+    &,
+    &:before {
+      width: 15px;
+      height: 15px;
+    }
   }
 `;
 
-const BoxedGroupList = styled.ul`
-  margin: 0;
-  list-style: none;
+const ModulesPermission = styled.div``;
+
+const ModulePermissionsRoot = styled(Card)`
+  padding: 0 !important;
 `;
 
-const RoleList = styled.li`
-  display: block;
-  padding: 5px 10px;
-  margin: 0;
-  line-height: 20px;
-  border-bottom: 1px solid #e0e0e0;
+const ModulePermissionHead = styled.div`
+  border-bottom: 1px solid #d9d9d9;
+  height: 38px;
+  padding: 0 15px;
+  display: flex;
 `;
 
-const LabelCheckbox = styled.label`
-  > * {
-    display: inline-block;
+const ModulePermissionTitle = styled.div`
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 38px;
+  color: #878787;
+`;
+
+const ModulePermissionBodyRoot = styled.div``;
+
+const ModulePermissionsTableRoot = styled.table`
+  border-spacing: 0;
+
+  thead {
+    tr th {
+      font-weight: 400;
+      vertical-align: top;
+
+      &.full,
+      &.permission {
+        min-width: 70px;
+      }
+      &.full {
+        background-color: #fcfcfc;
+      }
+    }
   }
-  .block {
-    width: 220px;
-    padding: 2px 0;
-    font-weight: 500;
+  thead,
+  tbody {
+    tr td,
+    tr th {
+      border-bottom: 1px solid #eee;
+      border-left: 1px solid #eee;
+      padding: 10px;
+
+      &:first-of-type {
+        border-left: 0;
+      }
+    }
+
+    tr:last-of-type td {
+      border-bottom: 0;
+    }
+
+    tr td:last-of-type,
+    tr th:last-of-type {
+      width: 100%;
+    }
+  }
+
+  tbody {
+    tr td.service-label {
+      min-width: 250px;
+    }
+
+    tr td {
+      .bp3-control.bp3-inline {
+        margin: 0;
+      }
+
+      &.full-access-permission {
+        background-color: #fcfcfc;
+      }
+
+      &.full-access-permission,
+      &.permission-checkbox {
+        text-align: center;
+      }
+    }
   }
 `;
 
-const AbilitieList = styled.ul`
-  list-style: none;
-  /* margin-left: 12px; // 10px */
-  margin: 0px 10px 0px;
+const MorePermissionsLink = styled(ButtonLink)`
+  font-size: 12px;
+`;
 
-  > li {
-    display: inline-block;
-    margin-top: 3px;
+const ExtraPermissionsRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+`;
+
+const ModulePermissionsVerticalServicesRoot = styled.div``;
+
+const ModulePermissionsVerticalTable = styled.table`
+  border-spacing: 0;
+
+  tbody {
+    tr td {
+      padding: 10px;
+      vertical-align: top;
+      border-left: 1px solid #eee;
+      border-bottom: 1px solid #eee;
+
+      &.service-label {
+        min-width: 250px;
+        color: #333;
+      }
+
+      &:first-of-type {
+        border-left: 0;
+      }
+
+      &.permissions {
+        width: 100%;
+      }
+    }
+
+    tr:last-of-type td {
+      border-bottom: 0;
+    }
   }
 `;
-
-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
index 3d73bb7bf..d6efc6443 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/utils.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
@@ -1,3 +1,22 @@
+import { chain, isEmpty, castArray, memoize } from 'lodash';
+import * as R from 'ramda';
+import { DepGraph } from 'dependency-graph';
+import {
+  getPermissionsSchema,
+  getPermissionsSchemaService,
+  getPermissionsSchemaServices,
+} from 'common/permissionsSchema';
+
+export const FULL_ACCESS_CHECKBOX_STATE = {
+  INDETARMINE: -1,
+  ON: true,
+  OFF: false,
+};
+
+/**
+ * Transformes the permissions object to array.
+ * @returns
+ */
 export const transformToArray = ({ permissions }) => {
   return Object.keys(permissions).map((index) => {
     const [value, key] = index.split('/');
@@ -10,6 +29,20 @@ export const transformToArray = ({ permissions }) => {
   });
 };
 
+function transformPermissions(permissions) {
+  return Object.keys(permissions).map((permissionKey) => {
+    const [subject, key] = permissionKey.split('/');
+    const value = permissions[permissionKey];
+
+    return { key, subject, value };
+  });
+}
+
+/**
+ * Transformes permissions array to object.
+ * @param {*} permissions -
+ * @returns
+ */
 export const transformPermissionsToObject = (permissions) => {
   const output = {};
   permissions.forEach((item) => {
@@ -18,11 +51,20 @@ export const transformPermissionsToObject = (permissions) => {
   return output;
 };
 
+/**
+ *
+ * @param {*} role
+ * @returns
+ */
 export const transformToObject = (role) => {
+  const permissions = transformPermissionsToObject(role.permissions);
+  const serviceFullAccess = getInitialServicesFullAccess(permissions);
+
   return {
     role_name: role.name,
     role_description: role.description,
-    permissions: transformPermissionsToObject(role.permissions),
+    permissions,
+    serviceFullAccess,
   };
 };
 
@@ -44,10 +86,227 @@ export const getDefaultValuesFromSchema = (schema) => {
     .flat();
 };
 
+/**
+ * Retrieve initial values of full access services.
+ * @param {*} formPermissions
+ * @returns
+ */
+export const getInitialServicesFullAccess = (formPermissions) => {
+  const services = getPermissionsSchemaServices();
+
+  return chain(services)
+    .map((service) => {
+      const { subject } = service;
+      const isFullChecked = isServiceFullChecked(subject, formPermissions);
+      const isFullUnchecked = isServiceFullUnchecked(subject, formPermissions);
+      const value = detarmineCheckboxState(isFullChecked, isFullUnchecked);
+
+      return [service.subject, value];
+    })
+    .fromPairs()
+    .value();
+};
+
+/**
+ *
+ * @param {*} schema
+ * @returns
+ */
 export const getNewRoleInitialValues = (schema) => {
+  const permissions = transformPermissionsToObject(
+    getDefaultValuesFromSchema(schema),
+  );
+  const serviceFullAccess = getInitialServicesFullAccess(permissions);
+
   return {
-    permissions: transformPermissionsToObject(
-      getDefaultValuesFromSchema(schema),
-    ),
+    permissions,
+    serviceFullAccess,
   };
 };
+
+/**
+ *
+ * @param {*} service
+ * @param {*} columnKey
+ * @returns
+ */
+export function getSerivceColumnPermission(service, columnKey) {
+  return service.permissions.find((permission) => {
+    return permission.relatedColumn === columnKey;
+  });
+}
+
+/**
+ *
+ * @param {*} service
+ * @returns
+ */
+export function getServiceExtraPermissions(service) {
+  return service.permissions.filter((permission) => {
+    return !permission.relatedColumn;
+  });
+}
+
+/**
+ * Detarmines the given service subject is full permissions checked.
+ */
+export function isServiceFullChecked(subject, permissions) {
+  const serviceSchema = getPermissionsSchemaService(subject);
+
+  return serviceSchema.permissions.every(
+    (permission) => permissions[`${subject}/${permission.key}`],
+  );
+}
+
+/**
+ * Detarmines the given service subject is fully associated permissions unchecked.
+ * @param {string} subject -
+ * @param {Object} permissionsMap -
+ */
+export function isServiceFullUnchecked(subject, permissionsMap) {
+  const serviceSchema = getPermissionsSchemaService(subject);
+
+  return serviceSchema.permissions.every(
+    (permission) => !permissionsMap[`${subject}/${permission.key}`],
+  );
+}
+
+/**
+ * Handles permission checkbox change.
+ */
+export const handleCheckboxPermissionChange = R.curry(
+  (form, permission, service, event) => {
+    const { subject } = service;
+    const isChecked = event.currentTarget.checked;
+
+    const permissionsGraph = memoizedPermissionsGraph();
+    const dependencies = isChecked
+      ? permissionsGraph.dependenciesOf(`${subject}/${permission.key}`)
+      : permissionsGraph.dependantsOf(`${subject}/${permission.key}`);
+
+    const newDependsPermiss = chain(dependencies)
+      .map((dep) => [dep, isChecked])
+      .fromPairs()
+      .value();
+
+    const newValues = {
+      ...form.values,
+      permissions: {
+        ...form.values.permissions,
+        [`${subject}/${permission.key}`]: isChecked,
+        ...newDependsPermiss,
+      },
+    };
+    const isFullChecked = isServiceFullChecked(subject, newValues.permissions);
+    const isFullUnchecked = isServiceFullUnchecked(
+      subject,
+      newValues.permissions,
+    );
+    form.setFieldValue(`permissions.${subject}/${permission.key}`, isChecked);
+    form.setFieldValue(
+      `serviceFullAccess.${subject}`,
+      detarmineCheckboxState(isFullChecked, isFullUnchecked),
+    );
+
+    dependencies.forEach((depKey) => {
+      form.setFieldValue(`permissions.${depKey}`, isChecked);
+    });
+  },
+);
+
+/**
+ * Detarmines the permission checkbox state.
+ * @param {boolean} isFullChecked
+ * @param {boolean} isFullUnchecked
+ * @returns {FULL_ACCESS_CHECKBOX_STATE}
+ */
+function detarmineCheckboxState(isFullChecked, isFullUnchecked) {
+  return isFullChecked
+    ? FULL_ACCESS_CHECKBOX_STATE.ON
+    : isFullUnchecked
+    ? FULL_ACCESS_CHECKBOX_STATE.OFF
+    : FULL_ACCESS_CHECKBOX_STATE.INDETARMINE;
+}
+
+/**
+ * Retreive the service all permissions paths.
+ * @param {string} subject
+ * @returns {string[]}
+ */
+export function getServiceAllPermissionsPaths(subject) {
+  const service = getPermissionsSchemaService(subject);
+
+  return service.permissions.map(
+    (perm) => `permissions.${subject}/${perm.key}`,
+  );
+}
+
+/**
+ * Handle full access service checkbox change.
+ */
+export const handleCheckboxFullAccessChange = R.curry(
+  (service, form, event) => {
+    const isChecked = event.currentTarget.checked;
+    const permsPaths = getServiceAllPermissionsPaths(service.subject);
+
+    form.setFieldValue(`serviceFullAccess.${service.subject}`, isChecked);
+
+    permsPaths.forEach((permissionPath) => {
+      form.setFieldValue(
+        permissionPath,
+        isChecked
+          ? FULL_ACCESS_CHECKBOX_STATE.ON
+          : FULL_ACCESS_CHECKBOX_STATE.OFF,
+      );
+    });
+  },
+);
+
+/**
+ * Retrieves all flatten modules permissions.
+ */
+export function getAllFlattenPermissionsSchema() {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((module) => module.services)
+    .flatten()
+    .map((module) =>
+      module.permissions.map((permission) => ({
+        subject: module.subject,
+        ...permission,
+      })),
+    )
+    .flatten()
+    .value();
+}
+
+/**
+ * Retrieve the permissions schema dependencies graph.
+ * @returns {DepGraph}
+ */
+export const getPermissionsSchemaGraph = () => {
+  const graph = new DepGraph();
+  const permissions = getAllFlattenPermissionsSchema();
+
+  permissions.forEach((permission) => {
+    graph.addNode(`${permission.subject}/${permission.key}`, permission);
+  });
+  const nodesOrder = graph.overallOrder();
+
+  nodesOrder.forEach((key) => {
+    const node = graph.getNodeData(key);
+
+    if (isEmpty(node.depend)) return;
+
+    const depends = castArray(node.depend);
+
+    depends.forEach((dependRelation) => {
+      const subject = dependRelation.subject || node.subject;
+      graph.addDependency(key, `${subject}/${dependRelation.key}`);
+    });
+  });
+  return graph;
+};
+
+const memoizedPermissionsGraph = memoize(getPermissionsSchemaGraph);
diff --git a/src/containers/Preferences/Users/Roles/utils.js b/src/containers/Preferences/Users/Roles/utils.js
index 5e5bd0e14..8cb43dbea 100644
--- a/src/containers/Preferences/Users/Roles/utils.js
+++ b/src/containers/Preferences/Users/Roles/utils.js
@@ -10,4 +10,22 @@ export const handleDeleteErrors = (errors) => {
       intent: Intent.DANGER,
     });
   }
+  if (errors.find((error) => error.type === 'INVALIDATE_PERMISSIONS')) {
+    AppToaster.show({
+      message: intl.get('roles.error.the_submit_role_has_invalid_permissions'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'CANNOT_DELETE_ROLE_ASSOCIATED_TO_USERS',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'roles.error.you_cannot_delete_role_that_associated_to_users',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
 };
diff --git a/src/containers/Preferences/Users/Users.js b/src/containers/Preferences/Users/Users.js
index 4f453d0b6..f6b3388a5 100644
--- a/src/containers/Preferences/Users/Users.js
+++ b/src/containers/Preferences/Users/Users.js
@@ -2,9 +2,11 @@ import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import 'style/pages/Preferences/Users.scss';
 
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
 
@@ -23,7 +25,7 @@ function UsersPreferences({ openDialog }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <UsersPereferencesCard>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
             <Tab
@@ -38,9 +40,13 @@ function UsersPreferences({ openDialog }) {
             />
           </Tabs>
         </div>
-      </div>
+      </UsersPereferencesCard>
     </div>
   );
 }
 
 export default withUserPreferences(UsersPreferences);
+
+const UsersPereferencesCard = styled(Card)`
+  padding: 0;
+`;
diff --git a/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js b/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
index 52ae12712..ba6a64e81 100644
--- a/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
+++ b/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
@@ -61,7 +61,7 @@ export default function BillFloatingActions() {
 
   // Handle submit as draft & continue editing button click.
   const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: false, });
+    setSubmitPayload({ redirect: false, status: false });
     submitForm();
   };
 
@@ -149,6 +149,7 @@ export default function BillFloatingActions() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Purchases/Bills/BillForm/utils.js b/src/containers/Purchases/Bills/BillForm/utils.js
index 457dc1324..d4fb277cd 100644
--- a/src/containers/Purchases/Bills/BillForm/utils.js
+++ b/src/containers/Purchases/Bills/BillForm/utils.js
@@ -125,6 +125,16 @@ export const handleDeleteErrors = (errors) => {
       intent: Intent.DANGER,
     });
   }
+  if (
+    errors.find((error) => error.type === 'BILL_HAS_APPLIED_TO_VENDOR_CREDIT')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'bills.error.you_couldn_t_delete_bill_has_reconciled_with_vendor_credit',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
 };
 
 /**
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js b/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
index 698277a17..93a04fefa 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
@@ -7,7 +7,15 @@ const BillDeleteAlert = React.lazy(() =>
   import('containers/Alerts/Bills/BillDeleteAlert'),
 );
 
+const BillLocatedLandedCostDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert'),
+);
+
 export default [
   { name: 'bill-delete', component: BillDeleteAlert },
   { name: 'bill-open', component: BillOpenAlert },
+  {
+    name: 'bill-located-cost-delete',
+    component: BillLocatedLandedCostDeleteAlert,
+  },
 ];
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
index f2a2ef353..151e14603 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -70,6 +70,11 @@ function BillsDataTable({
     history.push(`/bills/${bill.id}/edit`);
   };
 
+  // Handle convert to vendor credit.
+  const handleConvertToVendorCredit = ({ id }) => {
+    history.push(`/vendor-credits/new?from_bill_id=${id}`, { billId: id });
+  };
+
   // Handle bill delete action.
   const handleDeleteBill = (bill) => {
     openAlert('bill-delete', { billId: bill.id });
@@ -137,6 +142,7 @@ function BillsDataTable({
           onQuick: handleQuickPaymentMade,
           onAllocateLandedCost: handleAllocateLandedCost,
           onViewDetails: handleViewDetailBill,
+          onConvert: handleConvertToVendorCredit,
         }}
       />
     </DashboardContentTable>
diff --git a/src/containers/Purchases/Bills/BillsLanding/components.js b/src/containers/Purchases/Bills/BillsLanding/components.js
index 61bcd403f..4da4aa53f 100644
--- a/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -34,6 +34,7 @@ export function ActionsMenu({
     onOpen,
     onDelete,
     onQuick,
+    onConvert,
     onViewDetails,
     onAllocateLandedCost,
   },
@@ -53,11 +54,16 @@ export function ActionsMenu({
           text={intl.get('edit_bill')}
           onClick={safeCallback(onEdit, original)}
         />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('bill.convert_to_credit_note')}
+          onClick={safeCallback(onConvert, original)}
+        />
 
         <If condition={!original.is_open}>
           <MenuItem
             icon={<Icon icon={'check'} iconSize={18} />}
-            text={intl.get('mark_as_opened')}
+            text={intl.get('mark_as_open')}
             onClick={safeCallback(onOpen, original)}
           />
         </If>
@@ -77,6 +83,7 @@ export function ActionsMenu({
         onClick={safeCallback(onAllocateLandedCost, original)}
       />
       <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_bill')}
           intent={Intent.DANGER}
@@ -137,12 +144,12 @@ export function StatusAccessor(bill) {
               animate={false}
               stripes={false}
               intent={Intent.PRIMARY}
-              value={calculateStatus(bill.payment_amount, bill.amount)}
+              value={calculateStatus(bill.balance, bill.amount)}
             />
           </If>
         </Choose.When>
         <Choose.Otherwise>
-          <Tag minimal={true}>
+          <Tag minimal={true} round={true}>
             <T id={'draft'} />
           </Tag>
         </Choose.Otherwise>
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
new file mode 100644
index 000000000..384afa055
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
@@ -0,0 +1,189 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { If, Icon, FormattedMessage as T } from 'components';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+/**
+ * Purchases Credit note floating actions.
+ */
+export default function VendorCreditNoteFloatingActions() {
+  const history = useHistory();
+
+  // Formik context.
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+
+  // Credit note form context.
+  const { setSubmitPayload, vendorCredit } = useVendorCreditNoteFormContext();
+
+  // Handle submit as open button click.
+  const handleSubmitOpenBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: true });
+    submitForm();
+  };
+
+  // Handle submit, open and anothe new button click.
+  const handleSubmitOpenAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as open & continue editing button click.
+  const handleSubmitOpenContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true });
+    submitForm();
+  };
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: false });
+    submitForm();
+  };
+
+  // handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: false });
+    submitForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Open  ----------- */}
+      <If condition={!vendorCredit || !vendorCredit?.is_open}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save_open'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'open_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'open_continue_editing'} />}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={vendorCredit && vendorCredit?.is_open}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={vendorCredit ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
new file mode 100644
index 000000000..010256b63
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
@@ -0,0 +1,172 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { isEmpty, pick } from 'lodash';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  CreateCreditNoteFormSchema,
+  EditCreditNoteFormSchema,
+} from './VendorCreditNoteForm.schema';
+
+import VendorCreditNoteFormHeader from './VendorCreditNoteFormHeader';
+import VendorCreditNoteItemsEntriesEditor from './VendorCreditNoteItemsEntriesEditor';
+import VendorCreditNoteFormFooter from './VendorCreditNoteFormFooter';
+import VendorCreditNoteFloatingActions from './VendorCreditNoteFloatingActions';
+import VendorCreditNoteFormDialogs from './VendorCreditNoteFormDialogs';
+
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+import { AppToaster } from 'components';
+import { compose, safeSumBy, transactionNumber } from 'utils';
+import {
+  defaultVendorsCreditNote,
+  filterNonZeroEntries,
+  transformToEditForm,
+  transformFormValuesToRequest,
+} from './utils';
+
+import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ * Vendor Credit note form.
+ */
+function VendorCreditNoteForm({
+  // #withSettings
+  vendorcreditAutoIncrement,
+  vendorcreditNumberPrefix,
+  vendorcreditNextNumber,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Vendor Credit note form context.
+  const {
+    isNewMode,
+    submitPayload,
+    vendorCredit,
+    newVendorCredit,
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+  } = useVendorCreditNoteFormContext();
+
+  // Credit number.
+  const vendorCreditNumber = transactionNumber(
+    vendorcreditNumberPrefix,
+    vendorcreditNextNumber,
+  );
+
+  // Initial values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...(!isEmpty(vendorCredit)
+        ? {
+            ...transformToEditForm(vendorCredit),
+          }
+        : {
+            ...defaultVendorsCreditNote,
+            ...(vendorcreditAutoIncrement && {
+              vendor_credit_number: vendorCreditNumber,
+            }),
+            ...newVendorCredit,
+          }),
+    }),
+    [vendorCredit, base_currency],
+  );
+
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
+    const entries = filterNonZeroEntries(values.entries);
+    const totalQuantity = safeSumBy(entries, 'quantity');
+
+    if (totalQuantity === 0) {
+      AppToaster.show({
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
+    const form = {
+      ...transformFormValuesToRequest(values),
+      open: submitPayload.open,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'vendor_credits.success_message'
+            : 'vendor_credits.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/vendor-credits');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createVendorCreditMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editVendorCreditMutate([vendorCredit.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_VENDOR_CREDIT_NOTE,
+      )}
+    >
+      <Formik
+        validationSchema={
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+        }
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <VendorCreditNoteFormHeader />
+          <VendorCreditNoteItemsEntriesEditor />
+          <VendorCreditNoteFormFooter />
+          <VendorCreditNoteFloatingActions />
+          <VendorCreditNoteFormDialogs />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    vendorcreditAutoIncrement: vendorsCreditNoteSetting?.autoIncrement,
+    vendorcreditNextNumber: vendorsCreditNoteSetting?.nextNumber,
+    vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix,
+  })),
+  withCurrentOrganization(),
+)(VendorCreditNoteForm);
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
new file mode 100644
index 000000000..aa5e2ffdc
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
@@ -0,0 +1,42 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
+
+const getSchema = Yup.object().shape({
+  vendor_id: Yup.number().required().label(intl.get('vendor_name_')),
+  vendor_credit_date: Yup.date().required().label(intl.get('bill_date_')),
+  vendor_credit_number: Yup.string()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('bill_number_')),
+  reference_no: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
+  note: Yup.string()
+    .trim()
+    .min(1)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('note')),
+  open: Yup.boolean(),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      quantity: Yup.number()
+        .nullable()
+        .max(DATATYPES_LENGTH.INT_10)
+        .when(['rate'], {
+          is: (rate) => rate,
+          then: Yup.number().required(),
+        }),
+      rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
+      item_id: Yup.number()
+        .nullable()
+        .when(['quantity', 'rate'], {
+          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
+          then: Yup.number().required(),
+        }),
+      discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),
+      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+    }),
+  ),
+});
+
+export const CreateCreditNoteFormSchema = getSchema;
+export const EditCreditNoteFormSchema = getSchema;
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormDialogs.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormDialogs.js
new file mode 100644
index 000000000..5d5d69df2
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormDialogs.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import VendorCreditNumberDialog from '../../../Dialogs/VendorCreditNumberDialog';
+import { useFormikContext } from 'formik';
+
+/**
+ * Vendor credit form dialog.
+ */
+export default function VendorCreditNoteFormDialogs() {
+  // Update the form once the vendor credit number form submit confirm.
+  const handleVendorCreditNumberFormConfirm = ({
+    incrementNumber,
+    manually,
+  }) => {
+    setFieldValue('vendor_credit_number', incrementNumber || '');
+    setFieldValue('vendor_credit_no_manually', manually);
+  };
+  const { setFieldValue } = useFormikContext();
+
+  return (
+    <React.Fragment>
+      <VendorCreditNumberDialog
+        dialogName={'vendor-credit-form'}
+        onConfirm={handleVendorCreditNumberFormConfirm}
+      />
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js
new file mode 100644
index 000000000..88a99e574
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { FastField } from 'formik';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { CLASSES } from 'common/classes';
+import { Row, Col, Postbox } from 'components';
+import { inputIntent } from 'utils';
+import classNames from 'classnames';
+
+/**
+ * Vendor Credit note form footer.
+ */
+export default function VendorCreditNoteFormFooter() {
+  return (
+    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Postbox
+        title={<T id={'vendor_credits_note.label_credit_note_details'} />}
+        defaultOpen={false}
+      >
+        <Row>
+          <Col md={8}>
+            <FastField name={'note'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'note'} />}
+                  className={'form-group--note'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
+        </Row>
+      </Postbox>
+    </div>
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js
new file mode 100644
index 000000000..921100831
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
+
+import { getEntriesTotal } from 'containers/Entries/utils';
+import { PageFormBigNumber } from 'components';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose } from 'utils';
+
+/**
+ * Vendor Credit note header.
+ */
+function VendorCreditNoteFormHeader({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { values } = useFormikContext();
+
+  // Calculate the total amount.
+  const totalAmount = React.useMemo(
+    () => getEntriesTotal(values.entries),
+    [values.entries],
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <VendorCreditNoteFormHeaderFields />
+      <PageFormBigNumber
+        label={intl.get('vendor_credits.label.amount_to_credit')}
+        amount={totalAmount}
+        currencyCode={base_currency}
+      />
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(VendorCreditNoteFormHeader);
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
new file mode 100644
index 000000000..c97bfb1bb
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
@@ -0,0 +1,198 @@
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import {
+  VendorSelectField,
+  FieldRequiredHint,
+  InputPrependButton,
+  Icon,
+  FormattedMessage as T,
+} from 'components';
+import {
+  vendorsFieldShouldUpdate,
+  useObserveVendorCreditNoSettings,
+} from './utils';
+
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from 'utils';
+
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+/**
+ * Vendor Credit note form header fields.
+ */
+function VendorCreditNoteFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  vendorcreditAutoIncrement,
+  vendorcreditNumberPrefix,
+  vendorcreditNextNumber,
+}) {
+  // Vendor Credit form context.
+  const { vendors } = useVendorCreditNoteFormContext();
+
+  // Handle vendor credit number changing.
+  const handleVendorCreditNumberChange = () => {
+    openDialog('vendor-credit-form');
+  };
+
+  // Handle vendor credit no. field blur.
+  const handleVendorCreditNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && vendorcreditAutoIncrement) {
+      openDialog('vendor-credit-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+  // Syncs vendor credit number settings with form.
+  useObserveVendorCreditNoSettings(
+    vendorcreditNumberPrefix,
+    vendorcreditNextNumber,
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Vendor name ----------- */}
+      <FastField
+        name={'vendor_id'}
+        vendors={vendors}
+        shouldUpdate={vendorsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--vendor')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'vendor_id'} />}
+          >
+            <VendorSelectField
+              contacts={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+              }}
+              popoverFill={true}
+              allowCreate={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Vendor Credit date ------- */}
+      <FastField name={'vendor_credit_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'credit_note.label_credit_note_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(
+              'form-group--vendor_credit_date',
+              CLASSES.FILL,
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="vendor_credit_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('vendor_credit_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Vendor Credit No # ----------- */}
+      <FastField name={'vendor_credit_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'credit_note.label_credit_note'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={('form-group--vendor_credit_number', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="vendor_credit_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleVendorCreditNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleVendorCreditNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T
+                      id={'setting_your_auto_generated_vendor_credit_number'}
+                    />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference_no'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    vendorcreditAutoIncrement: vendorsCreditNoteSetting?.autoIncrement,
+    vendorcreditNextNumber: vendorsCreditNoteSetting?.nextNumber,
+    vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix,
+  })),
+)(VendorCreditNoteFormHeaderFields);
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
new file mode 100644
index 000000000..31a4c3e3e
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import '../../../../style/pages/VendorsCreditNote/PageForm.scss';
+
+import VendorCreditNoteForm from './VendorCreditNoteForm';
+import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';
+
+/**
+ * Vendor Credit note form pages.
+ */
+export default function VendorCreditNoteFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
+
+  return (
+    <VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
+      <VendorCreditNoteForm />
+    </VendorCreditNoteFormProvider>
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
new file mode 100644
index 000000000..7f4e0e8b5
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { isEmpty, pick } from 'lodash';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { transformToEditForm } from './utils';
+import {
+  useCreateVendorCredit,
+  useEditVendorCredit,
+  useVendorCredit,
+  useItems,
+  useVendors,
+  useSettingsVendorCredits,
+  useBill,
+} from 'hooks/query';
+
+const VendorCreditNoteFormContext = React.createContext();
+
+/**
+ * Vendor Credit note data provider.
+ */
+function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
+  const { state } = useLocation();
+
+  const billId = state?.billId;
+
+  // Handle fetching the items table based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+  } = useItems({
+    page_size: 10000,
+  });
+
+  // Handle fetching settings.
+  useSettingsVendorCredits();
+
+  // Handle fetch vendors data table or list
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+  } = useVendors({ page_size: 10000 });
+
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = React.useState();
+
+  // Create and edit vendor credit mutations.
+  const { mutateAsync: createVendorCreditMutate } = useCreateVendorCredit();
+  const { mutateAsync: editVendorCreditMutate } = useEditVendorCredit();
+
+  // Determines whether the form in new mode.
+  const isNewMode = !vendorCreditId;
+
+  const newVendorCredit = !isEmpty(bill)
+    ? transformToEditForm({
+        ...pick(bill, ['vendor_id', 'entries']),
+      })
+    : [];
+
+  // Provider payload.
+  const provider = {
+    items,
+    vendors,
+    vendorCredit,
+    submitPayload,
+    isNewMode,
+    newVendorCredit,
+
+    isVendorCreditLoading,
+
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isVendorCreditLoading ||
+        isItemsLoading ||
+        isVendorsLoading ||
+        isVendorCreditLoading ||
+        isBillLoading
+      }
+      name={'vendor-credit-form'}
+    >
+      <VendorCreditNoteFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useVendorCreditNoteFormContext = () =>
+  React.useContext(VendorCreditNoteFormContext);
+
+export { VendorCreditNoteFormProvider, useVendorCreditNoteFormContext };
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteItemsEntriesEditor.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteItemsEntriesEditor.js
new file mode 100644
index 000000000..d86eb1f17
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteItemsEntriesEditor.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FastField } from 'formik';
+import { CLASSES } from 'common/classes';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
+import { entriesFieldShouldUpdate } from './utils';
+import { ITEM_TYPE } from 'containers/Entries/utils';
+
+export default function VendorCreditNoteItemsEntriesEditor() {
+  const { items } = useVendorCreditNoteFormContext();
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
new file mode 100644
index 000000000..554cfc3e0
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import * as R from 'ramda';
+import moment from 'moment';
+
+import {
+  defaultFastFieldShouldUpdate,
+  transformToForm,
+  repeatValue,
+  transactionNumber,
+  orderingLinesIndexes,
+} from 'utils';
+import {
+  updateItemsEntriesTotal,
+  ensureEntriesHaveEmptyLine,
+} from 'containers/Entries/utils';
+import { useFormikContext } from 'formik';
+
+export const MIN_LINES_NUMBER = 4;
+
+// Default Vendors Credit Note entry.
+export const defaultCreditNoteEntry = {
+  index: 0,
+  item_id: '',
+  rate: '',
+  discount: '',
+  quantity: '',
+  description: '',
+  amount: '',
+};
+
+// Default Vendors Credit Note.
+export const defaultVendorsCreditNote = {
+  vendor_id: '',
+  vendor_credit_number: '',
+  vendor_credit_no_manually: false,
+  open: '',
+  vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  note: '',
+  entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
+};
+
+/**
+ * Transformes the credit note to initial values of edit form.
+ */
+export const transformToEditForm = (creditNote) => {
+  const initialEntries = [
+    ...creditNote.entries.map((entry) => ({
+      ...transformToForm(entry, defaultCreditNoteEntry),
+    })),
+    ...repeatValue(
+      defaultCreditNoteEntry,
+      Math.max(MIN_LINES_NUMBER - creditNote.entries.length, 0),
+    ),
+  ];
+  const entries = R.compose(
+    ensureEntriesHaveEmptyLine(defaultCreditNoteEntry),
+    updateItemsEntriesTotal,
+  )(initialEntries);
+
+  return {
+    ...transformToForm(creditNote, defaultVendorsCreditNote),
+    entries,
+  };
+};
+
+/**
+ * Transformes credit note entries to submit request.
+ */
+export const transformEntriesToSubmit = (entries) => {
+  const transformCreditNoteEntry = R.compose(
+    R.omit(['amount']),
+    R.curry(transformToForm)(R.__, defaultCreditNoteEntry),
+  );
+  return R.compose(
+    orderingLinesIndexes,
+    R.map(transformCreditNoteEntry),
+  )(entries);
+};
+
+/**
+ * Filters the givne non-zero entries.
+ */
+export const filterNonZeroEntries = (entries) => {
+  return entries.filter((item) => item.item_id && item.quantity);
+};
+
+/**
+ * Transformes form values to request body.
+ */
+export const transformFormValuesToRequest = (values) => {
+  const entries = filterNonZeroEntries(values.entries);
+
+  return {
+    ...values,
+    entries: transformEntriesToSubmit(entries),
+    open: false,
+  };
+};
+
+/**
+ * Detarmines vendors fast field should update
+ */
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.vendors !== oldProps.vendors ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines entries fast field should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.items !== oldProps.items ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Syncs invoice no. settings with form.
+ */
+export const useObserveVendorCreditNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const creditNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('vendor_credit_number', creditNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
new file mode 100644
index 000000000..f762dadbe
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
@@ -0,0 +1,156 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  Can,
+  FormattedMessage as T,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+} from 'components';
+import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
+
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+import withSettings from '../../../Settings/withSettings';
+import withSettingsActions from '../../../Settings/withSettingsActions';
+
+import withVendorActions from './withVendorActions';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors Credit note  table actions bar.
+ */
+function VendorsCreditNoteActionsBar({
+  setVendorCreditsTableState,
+
+  // #withVendorsCreditNotes
+  vendorCreditFilterRoles,
+
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteTableState,
+
+  // #withSettings
+  creditNoteTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // vendor credit list context.
+  const { VendorCreditsViews, fields, refresh } =
+    useVendorsCreditNoteListContext();
+
+  // Handle click a new Vendor.
+  const handleClickNewVendorCredit = () => {
+    history.push('/vendor-credits/new');
+  };
+
+  // Handle view tab change.
+  const handleTabChange = (view) => {
+    setVendorCreditsTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle click a refresh credit note.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('vendorCredit', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'vendor_credit'}
+          views={VendorCreditsViews}
+          allMenuItemText={<T id={'all'} />}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'vendor_credits.label.new_vendor_credit'} />}
+            onClick={handleClickNewVendorCredit}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: vendorCreditFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setVendorsCreditNoteTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={vendorCreditFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={creditNoteTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withVendorsCreditNotesActions,
+  withVendorActions,
+  withSettingsActions,
+  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
+    vendorCreditFilterRoles: vendorsCreditNoteTableState.filterRoles,
+  })),
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
+  })),
+)(VendorsCreditNoteActionsBar);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
new file mode 100644
index 000000000..297cca23a
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import VendorsCreditNoteEmptyStatus from './VendorsCreditNoteEmptyStatus';
+import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../../Settings/withSettings';
+
+import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors Credit note data table.
+ */
+function VendorsCreditNoteDataTable({
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  creditNoteTableSize,
+}) {
+  const history = useHistory();
+
+  // Vendor credits context.
+  const {
+    vendorCredits,
+    pagination,
+    isEmptyStatus,
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+  } = useVendorsCreditNoteListContext();
+
+  // Credit note table columns.
+  const columns = useVendorsCreditNoteTableColumns();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.VENDOR_CREDITS);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setVendorsCreditNoteTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setVendorsCreditNoteTableState],
+  );
+
+  // Display create note empty status instead of the table.
+  if (isEmptyStatus) {
+    return <VendorsCreditNoteEmptyStatus />;
+  }
+
+  const handleViewDetailVendorCredit = ({ id }) => {
+    openDrawer('vendor-credit-detail-drawer', { vendorCreditId: id });
+  };
+
+  // Handle delete credit note.
+  const handleDeleteVendorCreditNote = ({ id }) => {
+    openAlert('vendor-credit-delete', { vendorCreditId: id });
+  };
+
+  // Handle edit credit note.
+  const hanldeEditVendorCreditNote = (vendorCredit) => {
+    history.push(`/vendor-credits/${vendorCredit.id}/edit`);
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('vendor-credit-detail-drawer', {
+      vendorCreditId: cell.row.original.id,
+    });
+  };
+
+  const handleRefundCreditVendor = ({ id }) => {
+    openDialog('refund-vendor-credit', { vendorCreditId: id });
+  };
+
+  // Handle cancel/confirm vendor credit open.
+  const handleOpenCreditNote = ({ id }) => {
+    openAlert('vendor-credit-open', { vendorCreditId: id });
+  };
+
+  // Handle reconcile credit note.
+  const handleReconcileVendorCredit = ({ id }) => {
+    openDialog('reconcile-vendor-credit', { vendorCreditId: id });
+  };
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={vendorCredits}
+        loading={isVendorCreditsLoading}
+        headerLoading={isVendorCreditsLoading}
+        progressBarLoading={isVendorCreditsFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={creditNoteTableSize}
+        payload={{
+          onViewDetails: handleViewDetailVendorCredit,
+          onDelete: handleDeleteVendorCreditNote,
+          onEdit: hanldeEditVendorCreditNote,
+          onRefund: handleRefundCreditVendor,
+          onOpen: handleOpenCreditNote,
+          onReconcile: handleReconcileVendorCredit,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withVendorsCreditNotesActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
+  })),
+)(VendorsCreditNoteDataTable);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
new file mode 100644
index 000000000..44abfe314
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+export default function VendorsCreditNoteEmptyStatus() {
+  const history = useHistory();
+  return (
+    <EmptyStatus
+      title={<T id={'vendor_credits.empty_status.title'} />}
+      description={
+        <p>
+          <T id={'vendor_credits.empty_status.description'} />
+        </p>
+      }
+      action={
+        <>
+          <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/vendor-credits/new')}
+            >
+              <T id={'vendor_credits.label.new_vendor_credit'} />
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
new file mode 100644
index 000000000..b4c7b80c2
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useVendorCredits,
+  useRefreshVendorCredits,
+} from 'hooks/query';
+
+import { getFieldsFromResourceMeta } from 'utils';
+
+const VendorsCreditNoteListContext = React.createContext();
+
+/**
+ * Vendors Credit note data provider.
+ */
+function VendorsCreditNoteListProvider({ query, tableStateChanged, ...props }) {
+  // Vendor Credits refresh action.
+  const { refresh } = useRefreshVendorCredits();
+
+  // Fetch accounts resource views and fields.
+  const { data: VendorCreditsViews, isLoading: isViewsLoading } =
+    useResourceViews('vendor_credits');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('vendor_credits');
+
+  // Fetch vendor credits list.
+  const {
+    data: { vendorCredits, pagination, filterMeta },
+    isLoading: isVendorCreditsLoading,
+    isFetching: isVendorCreditsFetching,
+  } = useVendorCredits(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(vendorCredits) && !isVendorCreditsLoading && !tableStateChanged;
+
+  // Provider payload.
+  const provider = {
+    vendorCredits,
+    pagination,
+    VendorCreditsViews,
+    refresh,
+
+    
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'vendor-credits'}
+    >
+      <VendorsCreditNoteListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useVendorsCreditNoteListContext = () =>
+  React.useContext(VendorsCreditNoteListContext);
+
+export { VendorsCreditNoteListProvider, useVendorsCreditNoteListContext };
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
new file mode 100644
index 000000000..6bdcac9ed
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+
+import { compose, transfromViewsToTabs } from 'utils';
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+
+/**
+ * Vendors Credit note views tabs.
+ */
+function VendorsCreditNoteViewTabs({
+  // #withVendorsCreditNotes
+  vendorCreditCurrentView,
+
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteTableState,
+}) {
+  // vendor credit list context.
+  const { VendorCreditsViews } = useVendorsCreditNoteListContext();
+
+  // Handle tab change.
+  const handleTabsChange = (viewSlug) => {
+    setVendorsCreditNoteTableState({ viewSlug: viewSlug || null });
+  };
+
+  const tabs = transfromViewsToTabs(VendorCreditsViews);
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={vendorCreditCurrentView}
+          resourceName={'vendor_credits'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withVendorsCreditNotesActions,
+  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
+    vendorCreditCurrentView: vendorsCreditNoteTableState.viewSlug,
+  })),
+)(VendorsCreditNoteViewTabs);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList.js
new file mode 100644
index 000000000..444d44c05
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import '../../../../style/pages/VendorsCreditNote/List.scss';
+
+import { DashboardPageContent } from 'components';
+import VendorsCreditNoteActionsBar from './VendorsCreditNoteActionsBar';
+import VendorsCreditNoteViewTabs from './VendorsCreditNoteViewTabs';
+import VendorsCreditNoteDataTable from './VendorsCreditNoteDataTable';
+
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+
+import { VendorsCreditNoteListProvider } from './VendorsCreditNoteListProvider';
+import { transformTableStateToQuery, compose } from 'utils';
+
+function VendorsCreditNotesList({
+  // #withVendorsCreditNotes
+  vendorsCreditNoteTableState,
+  vendorsCreditNoteTableStateChanged,
+
+  // #withVendorsCreditNotesActions
+  resetVendorsCreditNoteTableState,
+}) {
+  // Resets the credit note table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetVendorsCreditNoteTableState();
+    },
+    [resetVendorsCreditNoteTableState],
+  );
+
+  return (
+    <VendorsCreditNoteListProvider
+      query={transformTableStateToQuery(vendorsCreditNoteTableState)}
+      tableStateChanged={vendorsCreditNoteTableStateChanged}
+    >
+      <VendorsCreditNoteActionsBar />
+      <DashboardPageContent>
+        <VendorsCreditNoteViewTabs />
+        <VendorsCreditNoteDataTable />
+      </DashboardPageContent>
+    </VendorsCreditNoteListProvider>
+  );
+}
+
+export default compose(
+  withVendorsCreditNotesActions,
+  withVendorsCreditNotes(
+    ({ vendorsCreditNoteTableState, vendorsCreditNoteTableStateChanged }) => ({
+      vendorsCreditNoteTableState,
+      vendorsCreditNoteTableStateChanged,
+    }),
+  ),
+)(VendorsCreditNotesList);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
new file mode 100644
index 000000000..8b9fe457e
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -0,0 +1,189 @@
+import React from 'react';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Choose,
+  If,
+  Icon,
+  Can,
+} from 'components';
+import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onOpen, onRefund, onReconcile, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('vendor_credits.action.edit_vendor_credit')}
+          onClick={safeCallback(onEdit, original)}
+        />
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('vendor_credits.action.mark_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('vendor_credits.action.refund_vendor_credit')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <If
+          condition={
+            !original.is_draft && !original.is_closed && original.is_published
+          }
+        >
+          <MenuItem
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+            icon={<Icon icon="receipt-24" iconSize={16} />}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('vendor_credits.action.delete_vendor_credit')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(creditNote) {
+  return (
+    <div>
+      <Choose>
+        <Choose.When condition={creditNote.is_open}>
+          <Tag minimal={true} intent={Intent.WARNING} round={true}>
+            <T id={'open'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_closed}>
+          <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+            <T id={'closed'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true} round={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}
+
+/**
+ * Retrieve vendors credit note table columns.
+ */
+export function useVendorsCreditNoteTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'credit_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_vendor_credit_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'credit_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 180,
+        className: 'vendor_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'credit_number',
+        Header: intl.get('vendor_credits.column.vendor_credit_no'),
+        accessor: 'vendor_credit_number',
+        width: 100,
+        className: 'credit_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'formatted_credits_remaining',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        disableSortBy: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/utils.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/utils.js
new file mode 100644
index 000000000..dd703a459
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/utils.js
@@ -0,0 +1,28 @@
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find((error) => error.type === 'VENDOR_CREDIT_HAS_APPLIED_BILLS')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'vendor_credit.error.you_couldn_t_delete_vendor_credit_has_reconciled',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'VENDOR_CREDIT_HAS_REFUND_TRANSACTIONS',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'vendor_credit.error.you_couldn_t_delete_vendor_credit_that_has_associated_refund',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorActions.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorActions.js
new file mode 100644
index 000000000..fc9a533e1
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorActions.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import {
+  setVendorCreditTableState,
+  resetVendorCreditTableState,
+} from '../../../../store/VendorCredit/vendorCredit.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setVendorCreditsTableState: (queries) =>
+    dispatch(setVendorCreditTableState(queries)),
+  resetVendorCreditsTableState: () => dispatch(resetVendorCreditTableState()),
+});
+
+export default connect(null, mapDipatchToProps);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotes.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotes.js
new file mode 100644
index 000000000..1b3544513
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotes.js
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import {
+  getVendorCreditTableStateFactory,
+  isVendorCreditTableStateChangedFactory,
+} from '../../../../store/VendorCredit/vendorCredit.selector';
+
+export default (mapState) => {
+  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactory();
+  const isVendorsCreditNoteTableChanged =
+    isVendorCreditTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      vendorsCreditNoteTableState: getVendorsCreditNoteTableState(state, props),
+      vendorsCreditNoteTableStateChanged: isVendorsCreditNoteTableChanged(
+        state,
+        props,
+      ),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions.js
new file mode 100644
index 000000000..d397cd1ac
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import {
+  setVendorCreditTableState,
+  resetVendorCreditTableState,
+} from '../../../../store/VendorCredit/vendorCredit.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setVendorsCreditNoteTableState: (queries) =>
+    dispatch(setVendorCreditTableState(queries)),
+  resetVendorsCreditNoteTableState: () =>
+    dispatch(resetVendorCreditTableState()),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.js b/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.js
new file mode 100644
index 000000000..73c0b515a
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Intent } from '@blueprintjs/core';
+
+import { TextStatus, Icon, Choose, T } from 'components';
+
+import { RESOURCES_TYPES } from '../../../common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+import {
+  AbilitySubject,
+  VendorCreditAction,
+} from '../../../common/abilityOption';
+import { DRAWERS } from 'common/drawers';
+
+/**
+ * Vendor credit universal search item select action.
+ */
+function VendorCreditUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+  onAction,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.VENDOR_CREDIT) {
+    openDrawer(DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER, {
+      vendorCreditId: resourceId,
+    });
+    onAction && onAction();
+  }
+  return null;
+}
+
+export const VendorCreditUniversalSearchSelect = withDrawerActions(
+  VendorCreditUniversalSearchSelectComponent,
+);
+
+/**
+ * Status accessor.
+ */
+function VendorCreditUniversalSearchStatus({ receipt }) {
+  return (
+    <Choose>
+      <Choose.When condition={receipt.is_closed}>
+        <TextStatus intent={Intent.SUCCESS}>
+          <T id={'closed'} />
+        </TextStatus>
+      </Choose.When>
+
+      <Choose.When condition={receipt.is_open}>
+        <TextStatus intent={Intent.WARNING}>
+          <T id={'closed'} />
+        </TextStatus>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <TextStatus intent={Intent.NONE}>
+          <T id={'draft'} />
+        </TextStatus>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Credit note universal search item.
+ */
+export function VendorCreditUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{item.text}</div>
+          <span class="bp3-text-muted">
+            {item.reference.vendor_credit_number}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_vendor_credit_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">${item.reference.amount}</div>
+          <VendorCreditUniversalSearchStatus receipt={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--receipt'}
+    />
+  );
+}
+
+/**
+ * Transformes receipt resource item to search item.
+ */
+const transformVendorCreditsToSearch = (vendorCredit) => ({
+  id: vendorCredit.id,
+  text: vendorCredit.vendor.display_name,
+  label: vendorCredit.formatted_amount,
+  reference: vendorCredit,
+});
+
+/**
+ * Credit note universal search bind configuration.
+ */
+export const universalSearchVendorCreditBind = () => ({
+  resourceType: RESOURCES_TYPES.VENDOR_CREDIT,
+  optionItemLabel: intl.get('vendor_credit.label'),
+  selectItemAction: VendorCreditUniversalSearchSelect,
+  itemRenderer: VendorCreditUniversalSearchItem,
+  itemSelect: transformVendorCreditsToSearch,
+  permission: {
+    ability: VendorCreditAction.View,
+    subject: AbilitySubject.VendorCredit,
+  },
+});
diff --git a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
new file mode 100644
index 000000000..05bfbfef6
--- /dev/null
+++ b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const VendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/VendorCreditDeleteAlert'),
+);
+
+const RefundVendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert'),
+);
+
+const OpenVendorCreditAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/VendorCreditOpenedAlert'),
+);
+
+const ReconcileVendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert'),
+);
+
+/**
+ * Vendor Credit notes alerts.
+ */
+export default [
+  {
+    name: 'vendor-credit-delete',
+    component: VendorCreditDeleteAlert,
+  },
+  {
+    name: 'vendor-credit-open',
+    component: OpenVendorCreditAlert,
+  },
+  {
+    name: 'refund-vendor-delete',
+    component: RefundVendorCreditDeleteAlert,
+  },
+  {
+    name: 'reconcile-vendor-delete',
+    component: ReconcileVendorCreditDeleteAlert,
+  },
+];
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
index 147c3c8c4..3fd8f0030 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
@@ -64,6 +64,7 @@ export default function PaymentMadeFloatingActions() {
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
+          style={{ minWidth: '85px' }}
           text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
         />
         <Popover
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
index 15771db31..5e9f04151 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
@@ -107,9 +107,7 @@ function PaymentMadeForm({
 
     const onError = ({
       response: {
-        error: {
-          data: { errors },
-        },
+        data: { errors },
       },
     }) => {
       const getError = (errorType) => errors.find((e) => e.type === errorType);
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/utils.js b/src/containers/Purchases/PaymentMades/PaymentForm/utils.js
index 76c8fe7a0..d85a7931c 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/utils.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/utils.js
@@ -29,7 +29,7 @@ export const defaultPaymentMade = {
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference: '',
   payment_number: '',
-  // statement: '',
+  statement: '',
   currency_code: '',
   entries: [],
 };
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
index 4753c0aeb..b6b31506a 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
@@ -39,7 +39,7 @@ function PaymentMadesProvider({ query, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading || isPaymentsLoading}
+      loading={isViewsLoading || isFieldsLoading }
       name={'payment_made'}
     >
       <PaymentMadesContext.Provider value={provider} {...props} />
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index ae5951478..d009e8a2e 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -46,6 +46,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_payment_made')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
new file mode 100644
index 000000000..54caebbf5
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
@@ -0,0 +1,190 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { If, Icon, FormattedMessage as T } from 'components';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { useCreditNoteFormContext } from './CreditNoteFormProvider';
+
+/**
+ * Credit note floating actions.
+ */
+export default function CreditNoteFloatingActions() {
+  const history = useHistory();
+
+  // Formik context.
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+
+  // Credit note form context.
+  const { setSubmitPayload, creditNote } = useCreditNoteFormContext();
+
+  // Handle submit as open button click.
+  const handleSubmitOpenBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: true });
+    submitForm();
+  };
+
+  // Handle submit, open and anothe new button click.
+  const handleSubmitOpenAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as open & continue editing button click.
+  const handleSubmitOpenContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true });
+    submitForm();
+  };
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: false });
+    submitForm();
+  };
+
+  // handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: false });
+    submitForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Open  ----------- */}
+      <If condition={!creditNote || !creditNote?.is_open}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save_open'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'open_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'open_continue_editing'} />}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={creditNote && creditNote?.is_open}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={creditNote ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
new file mode 100644
index 000000000..c27023426
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
@@ -0,0 +1,173 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { isEmpty } from 'lodash';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  CreateCreditNoteFormSchema,
+  EditCreditNoteFormSchema,
+} from './CreditNoteForm.schema';
+
+import CreditNoteFormHeader from './CreditNoteFormHeader';
+import CreditNoteItemsEntriesEditorField from './CreditNoteItemsEntriesEditorField';
+import CreditNoteFormFooter from './CreditNoteFormFooter';
+import CreditNoteFloatingActions from './CreditNoteFloatingActions';
+import CreditNoteFormDialogs from './CreditNoteFormDialogs';
+
+import { AppToaster } from 'components';
+
+import { useCreditNoteFormContext } from './CreditNoteFormProvider';
+import {
+  filterNonZeroEntries,
+  transformToEditForm,
+  transformFormValuesToRequest,
+  defaultCreditNote,
+} from './utils';
+
+import {
+  compose,
+  orderingLinesIndexes,
+  transactionNumber,
+  safeSumBy,
+} from 'utils';
+
+import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ * Credit note form.
+ */
+function CreditNoteForm({
+  // #withSettings
+  creditAutoIncrement,
+  creditNumberPrefix,
+  creditNextNumber,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Credit note form context.
+  const {
+    isNewMode,
+    submitPayload,
+    creditNote,
+    newCreditNote,
+    createCreditNoteMutate,
+    editCreditNoteMutate,
+  } = useCreditNoteFormContext();
+
+  // Credit number.
+  const creditNumber = transactionNumber(creditNumberPrefix, creditNextNumber);
+
+  // Initial values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...(!isEmpty(creditNote)
+        ? { ...transformToEditForm(creditNote), currency_code: base_currency }
+        : {
+            ...defaultCreditNote,
+            ...(creditAutoIncrement && {
+              credit_note_number: creditNumber,
+            }),
+            entries: orderingLinesIndexes(defaultCreditNote.entries),
+            ...newCreditNote,
+          }),
+    }),
+    [],
+  );
+
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
+    const entries = filterNonZeroEntries(values.entries);
+    const totalQuantity = safeSumBy(entries, 'quantity');
+
+    if (totalQuantity === 0) {
+      AppToaster.show({
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
+    const form = {
+      ...transformFormValuesToRequest(values),
+      open: submitPayload.open,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'credit_note.success_message'
+            : 'credit_note.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/credit-notes');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createCreditNoteMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editCreditNoteMutate([creditNote.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_CREDIT_NOTE,
+      )}
+    >
+      <Formik
+        validationSchema={
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+        }
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <CreditNoteFormHeader />
+          <CreditNoteItemsEntriesEditorField />
+          <CreditNoteFormFooter />
+          <CreditNoteFloatingActions />
+          <CreditNoteFormDialogs />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+export default compose(
+  withSettings(({ creditNoteSettings }) => ({
+    creditAutoIncrement: creditNoteSettings?.autoIncrement,
+    creditNextNumber: creditNoteSettings?.nextNumber,
+    creditNumberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+  withCurrentOrganization(),
+)(CreditNoteForm);
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
new file mode 100644
index 000000000..3698610d3
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
@@ -0,0 +1,48 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
+
+const getSchema = () =>
+  Yup.object().shape({
+    customer_id: Yup.string().label(intl.get('customer_name_')).required(),
+    credit_note_date: Yup.date().required().label(intl.get('invoice_date_')),
+    credit_note_number: Yup.string()
+      .max(DATATYPES_LENGTH.STRING)
+      .label(intl.get('invoice_no_')),
+    reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
+    note: Yup.string()
+      .trim()
+      .min(1)
+      .max(DATATYPES_LENGTH.TEXT)
+      .label(intl.get('note')),
+    open: Yup.boolean(),
+    terms_conditions: Yup.string()
+      .trim()
+      .min(1)
+      .max(DATATYPES_LENGTH.TEXT)
+      .label(intl.get('note')),
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number()
+          .nullable()
+          .max(DATATYPES_LENGTH.INT_10)
+          .when(['rate'], {
+            is: (rate) => rate,
+            then: Yup.number().required(),
+          }),
+        rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
+            then: Yup.number().required(),
+          }),
+        discount: Yup.number().nullable().min(0).max(100),
+        description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+      }),
+    ),
+  });
+
+export const CreateCreditNoteFormSchema = getSchema;
+export const EditCreditNoteFormSchema = getSchema;
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.js
new file mode 100644
index 000000000..bfb2d99c7
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import CreditNoteNumberDialog from '../../../Dialogs/CreditNoteNumberDialog';
+import { useFormikContext } from 'formik';
+
+/**
+ * Credit note form dialogs.
+ */
+export default function CreditNoteFormDialogs() {
+  // Update the form once the credit number form submit confirm.
+  const handleCreditNumberFormConfirm = ({ incrementNumber, manually }) => {
+    setFieldValue('credit_note_number', incrementNumber || '');
+    setFieldValue('credit_note_no_manually', manually);
+  };
+
+  const { setFieldValue } = useFormikContext();
+  return (
+    <React.Fragment>
+      <CreditNoteNumberDialog
+        dialogName={'credit-number-form'}
+        onConfirm={handleCreditNumberFormConfirm}
+      />
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
new file mode 100644
index 000000000..1bf8cd89c
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { FastField } from 'formik';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { CLASSES } from 'common/classes';
+import { Row, Col, Postbox } from 'components';
+import { inputIntent } from 'utils';
+import classNames from 'classnames';
+
+/**
+ * Credit note form footer.
+ */
+export default function CreditNoteFormFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Postbox
+        title={<T id={'credit_note.label_credit_note_details'} />}
+        defaultOpen={false}
+      >
+        <Row>
+          <Col md={8}>
+            {/* --------- Customer notes --------- */}
+            <FastField name={'note'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'credit_note.label_customer_note'} />}
+                  className={'form-group--note'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+            {/* --------- Terms and conditions --------- */}
+            <FastField name={'terms_conditions'}>
+              {({ field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'terms_conditions'} />}
+                  className={'form-group--terms_conditions'}
+                  intent={inputIntent({ error, touched })}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
+        </Row>
+      </Postbox>
+    </div>
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js
new file mode 100644
index 000000000..6c6690662
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
+
+import { getEntriesTotal } from 'containers/Entries/utils';
+import { PageFormBigNumber } from 'components';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note header.
+ */
+function CreditNoteFormHeader({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { values } = useFormikContext();
+
+  // Calculate the total amount.
+  const totalAmount = React.useMemo(
+    () => getEntriesTotal(values.entries),
+    [values.entries],
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <CreditNoteFormHeaderFields />
+      <PageFormBigNumber
+        label={intl.get('credit_note.label_amount_to_credit')}
+        amount={totalAmount}
+        currencyCode={base_currency}
+      />
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(CreditNoteFormHeader);
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
new file mode 100644
index 000000000..602c5cd4e
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
@@ -0,0 +1,194 @@
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import {
+  CustomerSelectField,
+  FieldRequiredHint,
+  InputPrependButton,
+  Icon,
+  FormattedMessage as T,
+} from 'components';
+import {
+  customerNameFieldShouldUpdate,
+  useObserveCreditNoSettings,
+} from './utils';
+
+import { useCreditNoteFormContext } from './CreditNoteFormProvider';
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from 'utils';
+
+/**
+ * Credit note form header fields.
+ */
+function CreditNoteFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  creditAutoIncrement,
+  creditNumberPrefix,
+  creditNextNumber,
+}) {
+  // Credit note form context.
+  const { customers } = useCreditNoteFormContext();
+
+  // Handle credit number changing.
+  const handleCreditNumberChange = () => {
+    openDialog('credit-number-form');
+  };
+
+  // Handle credit no. field blur.
+  const handleCreditNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && creditAutoIncrement) {
+      openDialog('credit-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs credit number settings with form.
+  useObserveCreditNoSettings(creditNumberPrefix, creditNextNumber);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField
+        name={'customer_id'}
+        customers={customers}
+        shouldUpdate={customerNameFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames(
+              'form-group--customer-name',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <CustomerSelectField
+              contacts={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+              }}
+              popoverFill={true}
+              allowCreate={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Credit note date ----------- */}
+      <FastField name={'credit_note_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'credit_note.label_credit_note_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--credit_note_date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="credit_note_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('credit_note_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Credit note # ----------- */}
+      <Field name={'credit_note_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'credit_note.label_credit_note'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames(
+              'form-group--credit_note_number',
+              CLASSES.FILL,
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="credit_note_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleCreditNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleCreditNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T id={'setting_your_auto_generated_credit_note_number'} />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </Field>
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference_no'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+export default compose(
+  withDialogActions,
+  withSettings(({ creditNoteSettings }) => ({
+    creditAutoIncrement: creditNoteSettings?.autoIncrement,
+    creditNextNumber: creditNoteSettings?.nextNumber,
+    creditNumberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(CreditNoteFormHeaderFields);
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.js
new file mode 100644
index 000000000..7acfc56b3
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import '../../../../style/pages/CreditNote/PageForm.scss';
+
+import CreditNoteForm from './CreditNoteForm';
+import { CreditNoteFormProvider } from './CreditNoteFormProvider';
+
+/**
+ * Credit note form page.
+ */
+export default function CreditNoteFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
+
+  return (
+    <CreditNoteFormProvider creditNoteId={idAsInteger}>
+      <CreditNoteForm />
+    </CreditNoteFormProvider>
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
new file mode 100644
index 000000000..539747020
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { isEmpty, pick } from 'lodash';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { transformToEditForm } from './utils';
+
+import {
+  useCreditNote,
+  useCreateCreditNote,
+  useEditCreditNote,
+  useItems,
+  useCustomers,
+  useSettingsCreditNotes,
+  useInvoice,
+} from 'hooks/query';
+
+const CreditNoteFormContext = React.createContext();
+
+/**
+ * Credit note data provider.
+ */
+function CreditNoteFormProvider({ creditNoteId, ...props }) {
+  const { state } = useLocation();
+  const invoiceId = state?.invoiceId;
+
+  // Handle fetch customers data table or list
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers({ page_size: 10000 });
+
+  // Handle fetching the items table based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+  } = useItems({
+    page_size: 10000,
+  });
+
+  // Handle fetch  credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+  // Handle fetch invoice detail.
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
+  // Handle fetching settings.
+  useSettingsCreditNotes();
+
+  // Create and edit credit note mutations.
+  const { mutateAsync: createCreditNoteMutate } = useCreateCreditNote();
+  const { mutateAsync: editCreditNoteMutate } = useEditCreditNote();
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = React.useState();
+
+  // Determines whether the form in new mode.
+  const isNewMode = !creditNoteId;
+
+  const newCreditNote = !isEmpty(invoice)
+    ? transformToEditForm({
+        ...pick(invoice, ['customer_id', 'entries']),
+      })
+    : [];
+
+  // Provider payload.
+  const provider = {
+    items,
+    customers,
+    creditNote,
+    submitPayload,
+    isNewMode,
+    newCreditNote,
+
+    isItemsLoading,
+    isCustomersLoading,
+
+    createCreditNoteMutate,
+    editCreditNoteMutate,
+    setSubmitPayload,
+  };
+
+  const isLoading =
+    isItemsLoading ||
+    isCustomersLoading ||
+    isCreditNoteLoading ||
+    isInvoiceLoading;
+
+  return (
+    <DashboardInsider loading={isLoading} name={'credit-note-form'}>
+      <CreditNoteFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useCreditNoteFormContext = () => React.useContext(CreditNoteFormContext);
+
+export { CreditNoteFormProvider, useCreditNoteFormContext };
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.js
new file mode 100644
index 000000000..8ebcd5617
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteItemsEntriesEditorField.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
+import { useCreditNoteFormContext } from './CreditNoteFormProvider';
+import { entriesFieldShouldUpdate } from './utils';
+
+/**
+ * Credit note items entries editor field.
+ */
+export default function CreditNoteItemsEntriesEditorField() {
+  const { items } = useCreditNoteFormContext();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
new file mode 100644
index 000000000..c6ca1721f
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
@@ -0,0 +1,133 @@
+import React from 'react';
+import * as R from 'ramda';
+import moment from 'moment';
+
+import {
+  defaultFastFieldShouldUpdate,
+  transformToForm,
+  repeatValue,
+  transactionNumber,
+  orderingLinesIndexes,
+} from 'utils';
+import { useFormikContext } from 'formik';
+
+import {
+  updateItemsEntriesTotal,
+  ensureEntriesHaveEmptyLine,
+} from 'containers/Entries/utils';
+
+export const MIN_LINES_NUMBER = 4;
+
+// Default entry object.
+export const defaultCreditNoteEntry = {
+  index: 0,
+  item_id: '',
+  rate: '',
+  discount: '',
+  quantity: '',
+  description: '',
+  amount: '',
+};
+
+// Default credit note object.
+export const defaultCreditNote = {
+  customer_id: '',
+  credit_note_date: moment(new Date()).format('YYYY-MM-DD'),
+  credit_note_number: '',
+  credit_note_no_manually: false,
+  open: '',
+  reference_no: '',
+  note: '',
+  terms_conditions: '',
+  entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
+};
+
+/**
+ * Transform credit note to initial values in edit mode.
+ */
+export function transformToEditForm(creditNote) {
+  const initialEntries = [
+    ...creditNote.entries.map((creditNote) => ({
+      ...transformToForm(creditNote, defaultCreditNoteEntry),
+    })),
+    ...repeatValue(
+      defaultCreditNoteEntry,
+      Math.max(MIN_LINES_NUMBER - creditNote.entries.length, 0),
+    ),
+  ];
+  const entries = R.compose(
+    ensureEntriesHaveEmptyLine(defaultCreditNoteEntry),
+    updateItemsEntriesTotal,
+  )(initialEntries);
+
+  return {
+    ...transformToForm(creditNote, defaultCreditNote),
+    entries,
+  };
+}
+
+/**
+ * Transformes credit note entries to submit request.
+ */
+export const transformEntriesToSubmit = (entries) => {
+  const transformCreditNoteEntry = R.compose(
+    R.omit(['amount']),
+    R.curry(transformToForm)(R.__, defaultCreditNoteEntry),
+  );
+  return R.compose(
+    orderingLinesIndexes,
+    R.map(transformCreditNoteEntry),
+  )(entries);
+};
+
+/**
+ * Filters the givne non-zero entries.
+ */
+export const filterNonZeroEntries = (entries) => {
+  return entries.filter((item) => item.item_id && item.quantity);
+};
+
+/**
+ * Transformes form values to request body.
+ */
+export const transformFormValuesToRequest = (values) => {
+  const entries = filterNonZeroEntries(values.entries);
+
+  return {
+    ...values,
+    entries: transformEntriesToSubmit(entries),
+    open: false,
+  };
+};
+
+/**
+ * Determines customer name field when should update.
+ */
+export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.customers !== oldProps.customers ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Determines invoice entries field when should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.items !== oldProps.items ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Syncs invoice no. settings with form.
+ */
+export const useObserveCreditNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const creditNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('credit_note_number', creditNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
diff --git a/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.js b/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.js
new file mode 100644
index 000000000..c5e97e134
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Intent } from '@blueprintjs/core';
+
+import { Icon, Choose, T, TextStatus } from 'components';
+
+import { RESOURCES_TYPES } from '../../../common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+import {
+  AbilitySubject,
+  CreditNoteAction,
+} from '../../../common/abilityOption';
+import { DRAWERS } from 'common/drawers';
+
+/**
+ * Credit note universal search item select action.
+ */
+function CreditNoteUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+  onAction,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.CREDIT_NOTE) {
+    openDrawer(DRAWERS.CREDIT_NOTE_DETAIL_DRAWER, { creditNoteId: resourceId });
+    onAction && onAction();
+  }
+  return null;
+}
+
+export const CreditNoteUniversalSearchSelect = withDrawerActions(
+  CreditNoteUniversalSearchSelectComponent,
+);
+
+/**
+ * Status accessor.
+ */
+function CreditNoteUniversalSearchStatus({ receipt }) {
+  return (
+    <Choose>
+      <Choose.When condition={receipt.is_closed}>
+        <TextStatus intent={Intent.SUCCESS}>
+          <T id={'closed'} />
+        </TextStatus>
+      </Choose.When>
+
+      <Choose.When condition={receipt.is_open}>
+        <TextStatus intent={Intent.WARNING}>
+          <T id={'open'} />
+        </TextStatus>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <TextStatus intent={Intent.NONE}>
+          <T id={'draft'} />
+        </TextStatus>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Credit note universal search item.
+ */
+export function CreditNoteUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{item.text}</div>
+          <span class="bp3-text-muted">
+            {item.reference.credit_note_number}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_credit_note_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">${item.reference.amount}</div>
+          <CreditNoteUniversalSearchStatus receipt={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--receipt'}
+    />
+  );
+}
+
+/**
+ * Transformes receipt resource item to search item.
+ */
+const transformReceiptsToSearch = (creditNote) => ({
+  id: creditNote.id,
+  text: creditNote.customer.display_name,
+  label: creditNote.formatted_amount,
+  reference: creditNote,
+});
+
+/**
+ * Credit note universal search bind configuration.
+ */
+export const universalSearchCreditNoteBind = () => ({
+  resourceType: RESOURCES_TYPES.CREDIT_NOTE,
+  optionItemLabel: intl.get('credit_note.label'),
+  selectItemAction: CreditNoteUniversalSearchSelect,
+  itemRenderer: CreditNoteUniversalSearchItem,
+  itemSelect: transformReceiptsToSearch,
+  permission: {
+    ability: CreditNoteAction.View,
+    subject: AbilitySubject.CreditNote,
+  },
+});
diff --git a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
new file mode 100644
index 000000000..83b171df7
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const CreditNoteDeleteAlert = React.lazy(() =>
+  import('../../Alerts/CreditNotes/CreditNoteDeleteAlert'),
+);
+
+const RefundCreditNoteDeleteAlert = React.lazy(() =>
+  import('../../Alerts/CreditNotes/RefundCreditNoteDeleteAlert'),
+);
+
+const OpenCreditNoteAlert = React.lazy(() =>
+  import('../../Alerts/CreditNotes/CreditNoteOpenedAlert'),
+);
+
+const ReconcileCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert'),
+);
+
+/**
+ * Credit notes alerts.
+ */
+export default [
+  {
+    name: 'credit-note-delete',
+    component: CreditNoteDeleteAlert,
+  },
+  {
+    name: 'credit-note-open',
+    component: OpenCreditNoteAlert,
+  },
+  {
+    name: 'refund-credit-delete',
+    component: RefundCreditNoteDeleteAlert,
+  },
+  {
+    name: 'reconcile-credit-delete',
+    component: ReconcileCreditDeleteAlert,
+  },
+];
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
new file mode 100644
index 000000000..1504cb10f
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import {
+  Icon,
+  Can,
+  FormattedMessage as T,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+} from 'components';
+import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
+
+import { useCreditNoteListContext } from './CreditNotesListProvider';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+import withCreditNotes from './withCreditNotes';
+import withCreditNotesActions from './withCreditNotesActions';
+import withSettings from '../../../Settings/withSettings';
+import withSettingsActions from '../../../Settings/withSettingsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note table actions bar.
+ */
+function CreditNotesActionsBar({
+  // #withCreditNotes
+  creditNoteFilterRoles,
+
+  // #withCreditNotesActions
+  setCreditNotesTableState,
+
+  // #withSettings
+  creditNoteTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // credit note list context.
+  const { CreditNotesView, fields, refresh } = useCreditNoteListContext();
+
+  // Handle view tab change.
+  const handleTabChange = (view) => {
+    setCreditNotesTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle click a new Credit.
+  const handleClickNewCreateNote = () => {
+    history.push('/credit-notes/new');
+  };
+
+  // Handle click a refresh credit note.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('creditNote', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'credit_notes'}
+          views={CreditNotesView}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'credit_note.label.new_credit_note'} />}
+            onClick={handleClickNewCreateNote}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: creditNoteFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCreditNotesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={creditNoteFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={creditNoteTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withCreditNotesActions,
+  withSettingsActions,
+  withCreditNotes(({ creditNoteTableState }) => ({
+    creditNoteFilterRoles: creditNoteTableState.filterRoles,
+  })),
+  withSettings(({ creditNoteSettings }) => ({
+    creditNoteTableSize: creditNoteSettings?.tableSize,
+  })),
+)(CreditNotesActionsBar);
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
new file mode 100644
index 000000000..a2a666858
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import CreditNoteEmptyStatus from './CreditNotesEmptyStatus';
+import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withCreditNotesActions from './withCreditNotesActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../../Settings/withSettings';
+
+import { useCreditNoteTableColumns, ActionsMenu } from './components';
+import { useCreditNoteListContext } from './CreditNotesListProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note data table.
+ */
+function CreditNotesDataTable({
+  // #withCreditNotesActions
+  setCreditNotesTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  creditNoteTableSize,
+}) {
+  const history = useHistory();
+
+  // Credit note list context.
+  const {
+    creditNotes,
+    pagination,
+    isEmptyStatus,
+    isCreditNotesFetching,
+    isCreditNotesLoading,
+  } = useCreditNoteListContext();
+
+  // Credit note table columns.
+  const columns = useCreditNoteTableColumns();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CREDIT_NOTES);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setCreditNotesTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setCreditNotesTableState],
+  );
+
+  // Display create note empty status instead of the table.
+  if (isEmptyStatus) {
+    return <CreditNoteEmptyStatus />;
+  }
+
+  const handleViewDetailCreditNote = ({ id }) => {
+    openDrawer('credit-note-detail-drawer', { creditNoteId: id });
+  };
+
+  // Handle delete credit note.
+  const handleDeleteCreditNote = ({ id }) => {
+    openAlert('credit-note-delete', { creditNoteId: id });
+  };
+
+  // Handle edit credit note.
+  const hanldeEditCreditNote = (creditNote) => {
+    history.push(`/credit-notes/${creditNote.id}/edit`);
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('credit-note-detail-drawer', {
+      creditNoteId: cell.row.original.id,
+    });
+  };
+
+  const handleRefundCreditNote = ({ id }) => {
+    openDialog('refund-credit-note', { creditNoteId: id });
+  };
+
+  // Handle cancel/confirm crdit note open.
+  const handleOpenCreditNote = ({ id }) => {
+    openAlert('credit-note-open', { creditNoteId: id });
+  };
+
+  // Handle reconcile credit note.
+  const handleReconcileCreditNote = ({ id }) => {
+    openDialog('reconcile-credit-note', { creditNoteId: id });
+  };
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={creditNotes}
+        loading={isCreditNotesLoading}
+        headerLoading={isCreditNotesLoading}
+        progressBarLoading={isCreditNotesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={creditNoteTableSize}
+        payload={{
+          onViewDetails: handleViewDetailCreditNote,
+          onDelete: handleDeleteCreditNote,
+          onEdit: hanldeEditCreditNote,
+          onRefund: handleRefundCreditNote,
+          onOpen: handleOpenCreditNote,
+          onReconcile: handleReconcileCreditNote,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withCreditNotesActions,
+  withDrawerActions,
+  withAlertsActions,
+  withDialogActions,
+  withSettings(({ creditNoteSettings }) => ({
+    creditNoteTableSize: creditNoteSettings?.tableSize,
+  })),
+)(CreditNotesDataTable);
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
new file mode 100644
index 000000000..5a3c7cd43
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+export default function CreditNotesEmptyStatus() {
+  const history = useHistory();
+  return (
+    <EmptyStatus
+      title={<T id={'credit_note.empty_status.title'} />}
+      description={
+        <p>
+          <T id={'credit_note.empty_status.description'} />
+        </p>
+      }
+      action={
+        <>
+          <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/credit-notes/new')}
+            >
+              <T id={'credit_note.label.new_credit_note'} />
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
new file mode 100644
index 000000000..43b054e16
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import '../../../../style/pages/CreditNote/List.scss';
+
+import { DashboardPageContent } from 'components';
+import CreditNotesActionsBar from './CreditNotesActionsBar';
+import CreditNotesViewTabs from './CreditNotesViewTabs';
+import CreditNotesDataTable from './CreditNotesDataTable';
+
+import withCreditNotes from './withCreditNotes';
+import withCreditNotesActions from './withCreditNotesActions';
+
+import { CreditNotesListProvider } from './CreditNotesListProvider';
+import { transformTableStateToQuery, compose } from 'utils';
+
+function CreditNotesList({
+  // #withCreditNotes
+  creditNoteTableState,
+  creditNoteTableStateChanged,
+
+  // #withCreditNotesActions
+  resetCreditNotesTableState,
+}) {
+  // Resets the credit note table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetCreditNotesTableState();
+    },
+    [resetCreditNotesTableState],
+  );
+
+
+  return (
+    <CreditNotesListProvider
+      query={transformTableStateToQuery(creditNoteTableState)}
+      tableStateChanged={creditNoteTableStateChanged}
+    >
+      <CreditNotesActionsBar />
+      <DashboardPageContent>
+        <CreditNotesViewTabs />
+        <CreditNotesDataTable />
+      </DashboardPageContent>
+    </CreditNotesListProvider>
+  );
+}
+
+export default compose(
+  withCreditNotesActions,
+  withCreditNotes(({ creditNoteTableState, creditNoteTableStateChanged }) => ({
+    creditNoteTableState,
+    creditNoteTableStateChanged,
+  })),
+)(CreditNotesList);
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
new file mode 100644
index 000000000..07a778892
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useCreditNotes,
+  useRefreshCreditNotes,
+} from 'hooks/query';
+
+import { getFieldsFromResourceMeta } from 'utils';
+
+const CreditNoteListContext = React.createContext();
+
+/**
+ * Credit note data provider.
+ */
+function CreditNotesListProvider({ query, tableStateChanged, ...props }) {
+  // Credit notes refresh action.
+  const { refresh } = useRefreshCreditNotes();
+
+  // Fetch create notes resource views and fields.
+  const { data: CreditNotesView, isLoading: isViewsLoading } =
+    useResourceViews('credit_notes');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('credit_notes');
+
+  // Fetch credit note list.
+  const {
+    data: { creditNotes, pagination, filterMeta },
+    isFetching: isCreditNotesFetching,
+    isLoading: isCreditNotesLoading,
+  } = useCreditNotes(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.S
+  const isEmptyStatus = isEmpty(creditNotes) && !isCreditNotesLoading && !tableStateChanged;
+
+  // Provider payload.
+  const provider = {
+    creditNotes,
+    pagination,
+
+    CreditNotesView,
+    refresh,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isCreditNotesFetching,
+    isCreditNotesLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'credit-notes-list'}
+    >
+      <CreditNoteListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useCreditNoteListContext = () => React.useContext(CreditNoteListContext);
+
+export { CreditNotesListProvider, useCreditNoteListContext };
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
new file mode 100644
index 000000000..5ef16b4e9
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import withCreditNotes from './withCreditNotes';
+import withCreditNotesActions from './withCreditNotesActions';
+
+import { compose, transfromViewsToTabs } from 'utils';
+import { useCreditNoteListContext } from './CreditNotesListProvider';
+
+/**
+ * Credit Note views tabs.
+ */
+function CreditNotesViewTabs({
+  // #withCreditNotes
+  creditNoteCurrentView,
+
+  // #withCreditNotesActions
+  setCreditNotesTableState,
+}) {
+  // Credit note list context.
+  const { CreditNotesView } = useCreditNoteListContext();
+
+  const tabs = transfromViewsToTabs(CreditNotesView);
+
+  // Handle tab change.
+  const handleTabsChange = (viewSlug) => {
+    setCreditNotesTableState({ viewSlug });
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={creditNoteCurrentView}
+          resourceName={'credit_notes'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withCreditNotesActions,
+  withCreditNotes(({ creditNoteTableState }) => ({
+    creditNoteCurrentView: creditNoteTableState.viewSlug,
+  })),
+)(CreditNotesViewTabs);
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
new file mode 100644
index 000000000..eb171ae86
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -0,0 +1,183 @@
+import React from 'react';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Choose,
+  If,
+  Icon,
+  Can,
+} from 'components';
+import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onRefund, onOpen, onReconcile, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('credit_note.action.edit_credit_note')}
+          onClick={safeCallback(onEdit, original)}
+        />
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('credit_note.action.make_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+
+      <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('credit_note.action.refund_credit_note')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            text={intl.get('credit_note.action.reconcile_with_invoices')}
+            icon={<Icon icon="receipt-24" iconSize={16} />}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('credit_note.action.delete_credit_note')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(creditNote) {
+  return (
+    <div>
+      <Choose>
+        <Choose.When condition={creditNote.is_open}>
+          <Tag intent={Intent.WARNING} minimal={true} round={true}>
+            <T id={'open'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_closed}>
+          <Tag intent={Intent.SUCCESS} minimal={true} round={true}>
+            <T id={'closed'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag intent={Intent.NONE} minimal={true} round={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}
+
+/**
+ * Retrieve credit note table columns.
+ */
+export function useCreditNoteTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'credit_date',
+        Header: intl.get('credit_note.column.credit_date'),
+        accessor: 'formatted_credit_note_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'credit_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 180,
+        className: 'customer',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'credit_number',
+        Header: intl.get('credit_note.column.credit_note_no'),
+        accessor: 'credit_note_number',
+        width: 100,
+        className: 'credit_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'formatted_credits_remaining',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        disableSortBy: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 160, // 160
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no', // or note
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/utils.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/utils.js
new file mode 100644
index 000000000..9d94edad5
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/utils.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find((error) => error.type === 'CREDIT_NOTE_HAS_APPLIED_INVOICES')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_invoice',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'CREDIT_NOTE_HAS_REFUNDS_TRANSACTIONS',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_refund',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotes.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotes.js
new file mode 100644
index 000000000..f9c8b0b9a
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotes.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  getCreditNotesTableStateFactory,
+  isCreditNotesTableStateChangedFactory,
+} from '../../../../store/CreditNote/creditNote.selector';
+
+export default (mapState) => {
+  const getCreditNoteTableState = getCreditNotesTableStateFactory();
+  const isCreditNoteTableChanged = isCreditNotesTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      creditNoteTableState: getCreditNoteTableState(state, props),
+      creditNoteTableStateChanged: isCreditNoteTableChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
new file mode 100644
index 000000000..cedc9dbd4
--- /dev/null
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import {
+  setCreditNoteTableState,
+  resetCreditNoteTableState,
+} from '../../../../store/CreditNote/creditNote.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setCreditNotesTableState: (queries) =>
+    dispatch(setCreditNoteTableState(queries)),
+  resetCreditNotesTableState: () => dispatch(resetCreditNoteTableState()),
+});
+
+export default connect(null, mapDipatchToProps);
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
index 248938c74..440ba9be7 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
@@ -65,7 +65,6 @@ export default function EstimateFloatingActions() {
 
   const handleCancelBtnClick = (event) => {
     history.goBack();
-    
   };
 
   const handleClearBtnClick = (event) => {
@@ -149,6 +148,7 @@ export default function EstimateFloatingActions() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitDeliverBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
index e83642bf8..435f5f3f1 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
@@ -128,6 +128,7 @@ function EstimateFormHeader({
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'expiration_date'} />}
+            labelInfo={<FieldRequiredHint />}
             inline={true}
             className={classNames(
               CLASSES.FORM_GROUP_LIST_SELECT,
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
index ac6561444..b32f1b318 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
@@ -43,7 +43,6 @@ function EstimatesList({
         <EstimatesViewTabs />
         <EstimatesDataTable />
       </DashboardPageContent>
-
     </EstimatesListProvider>
   );
 }
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/components.js b/src/containers/Sales/Estimates/EstimatesLanding/components.js
index dd9d72131..65b941d71 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -24,25 +24,28 @@ import { safeCallback } from 'utils';
  */
 export const statusAccessor = (row) => (
   <Choose>
-    <Choose.When condition={row.is_delivered && row.is_approved}>
-      <Tag minimal={true} intent={Intent.SUCCESS}>
+    <Choose.When condition={row.is_approved}>
+      <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
         <T id={'approved'} />
       </Tag>
     </Choose.When>
-    <Choose.When condition={row.is_delivered && row.is_rejected}>
-      <Tag minimal={true} intent={Intent.DANGER}>
+    <Choose.When condition={row.is_rejected}>
+      <Tag minimal={true} intent={Intent.DANGER} round={true}>
         <T id={'rejected'} />
       </Tag>
     </Choose.When>
-    <Choose.When
-      condition={row.is_delivered && !row.is_rejected && !row.is_approved}
-    >
-      <Tag minimal={true} intent={Intent.SUCCESS}>
+    <Choose.When condition={row.is_expired}>
+      <Tag minimal={true} intent={Intent.WARNING} round={true}>
+        <T id={'estimate.status.expired'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When condition={row.is_delivered}>
+      <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
         <T id={'delivered'} />
       </Tag>
     </Choose.When>
     <Choose.Otherwise>
-      <Tag minimal={true}>
+      <Tag minimal={true} round={true}>
         <T id={'draft'} />
       </Tag>
     </Choose.Otherwise>
@@ -134,6 +137,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_estimate')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
index d1dd532ca..2f82fefcc 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
@@ -151,6 +151,7 @@ export default function InvoiceFloatingActions() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitDeliverBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
index 501618392..a143c6a10 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -74,6 +74,11 @@ function InvoicesDataTable({
     history.push(`/invoices/${invoice.id}/edit`);
   };
 
+  // Handle convert to credit note.
+  const handleConvertToCreitNote = ({ id }) => {
+    history.push(`/credit-notes/new?from_invoice_id=${id}`, { invoiceId: id });
+  };
+
   // handle quick payment receive.
   const handleQuickPaymentReceive = ({ id }) => {
     openDialog('quick-payment-receive', { invoiceId: id });
@@ -147,6 +152,7 @@ function InvoicesDataTable({
           onQuick: handleQuickPaymentReceive,
           onViewDetails: handleViewDetailInvoice,
           onPrint: handlePrintInvoice,
+          onConvert: handleConvertToCreitNote,
         }}
       />
     </DashboardContentTable>
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/components.js b/src/containers/Sales/Invoices/InvoicesLanding/components.js
index 68e68ae89..fea2b1dff 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -27,53 +27,59 @@ import {
   AbilitySubject,
 } from '../../../../common/abilityOption';
 
+export function InvoiceStatus({ invoice }) {
+  return (
+    <Choose>
+      <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
+        <span className={'fully-paid-icon'}>
+          <Icon icon="small-tick" iconSize={18} />
+        </span>
+        <span class="fully-paid-text">
+          <T id={'paid'} />
+        </span>
+      </Choose.When>
+
+      <Choose.When condition={invoice.is_delivered}>
+        <Choose>
+          <Choose.When condition={invoice.is_overdue}>
+            <span className={'overdue-status'}>
+              {intl.get('overdue_by', { overdue: invoice.overdue_days })}
+            </span>
+          </Choose.When>
+          <Choose.Otherwise>
+            <span className={'due-status'}>
+              {intl.get('due_in', { due: invoice.remaining_days })}
+            </span>
+          </Choose.Otherwise>
+        </Choose>
+
+        <If condition={invoice.is_partially_paid}>
+          <span class="partial-paid">
+            {intl.get('day_partially_paid', {
+              due: formattedAmount(invoice.due_amount, invoice.currency_code),
+            })}
+          </span>
+          <ProgressBar
+            animate={false}
+            stripes={false}
+            intent={Intent.PRIMARY}
+            value={calculateStatus(invoice.balance_amount, invoice.balance)}
+          />
+        </If>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag minimal={true} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
 export const statusAccessor = (row) => {
   return (
     <div className={'status-accessor'}>
-      <Choose>
-        <Choose.When condition={row.is_fully_paid && row.is_delivered}>
-          <span className={'fully-paid-icon'}>
-            <Icon icon="small-tick" iconSize={18} />
-          </span>
-          <span class="fully-paid-text">
-            <T id={'paid'} />
-          </span>
-        </Choose.When>
-
-        <Choose.When condition={row.is_delivered}>
-          <Choose>
-            <Choose.When condition={row.is_overdue}>
-              <span className={'overdue-status'}>
-                {intl.get('overdue_by', { overdue: row.overdue_days })}
-              </span>
-            </Choose.When>
-            <Choose.Otherwise>
-              <span className={'due-status'}>
-                {intl.get('due_in', { due: row.remaining_days })}
-              </span>
-            </Choose.Otherwise>
-          </Choose>
-
-          <If condition={row.is_partially_paid}>
-            <span class="partial-paid">
-              {intl.get('day_partially_paid', {
-                due: formattedAmount(row.due_amount, row.currency_code),
-              })}
-            </span>
-            <ProgressBar
-              animate={false}
-              stripes={false}
-              intent={Intent.PRIMARY}
-              value={calculateStatus(row.payment_amount, row.balance)}
-            />
-          </If>
-        </Choose.When>
-        <Choose.Otherwise>
-          <Tag minimal={true}>
-            <T id={'draft'} />
-          </Tag>
-        </Choose.Otherwise>
-      </Choose>
+      <InvoiceStatus invoice={row} />
     </div>
   );
 };
@@ -99,6 +105,18 @@ export const handleDeleteErrors = (errors) => {
       intent: Intent.DANGER,
     });
   }
+  if (
+    errors.find(
+      (error) => error.type === 'SALE_INVOICE_HAS_APPLIED_TO_CREDIT_NOTES',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
 };
 
 export function ActionsMenu({
@@ -106,7 +124,7 @@ export function ActionsMenu({
     onEdit,
     onDeliver,
     onDelete,
-    onDrawer,
+    onConvert,
     onQuick,
     onViewDetails,
     onPrint,
@@ -127,6 +145,11 @@ export function ActionsMenu({
           text={intl.get('edit_invoice')}
           onClick={safeCallback(onEdit, original)}
         />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('invoice.convert_to_credit_note')}
+          onClick={safeCallback(onConvert, original)}
+        />
 
         <If condition={!original.is_delivered}>
           <MenuItem
@@ -153,6 +176,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_invoice')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
index 1c87421bb..d35186c6f 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
@@ -69,6 +69,7 @@ export default function PaymentReceiveFormFloatingActions() {
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
+          style={{ minWidth: '85px' }}
           text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
         />
         <Popover
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
index 94196ecfb..18a7a6813 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
@@ -28,7 +28,11 @@ import { AppToaster } from 'components';
 import { transactionNumber, compose } from 'utils';
 
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-import { defaultPaymentReceive, transformToEditForm, transformFormToRequest } from './utils';
+import {
+  defaultPaymentReceive,
+  transformToEditForm,
+  transformFormToRequest,
+} from './utils';
 
 /**
  * Payment Receive form.
@@ -61,6 +65,7 @@ function PaymentReceiveForm({
     paymentReceiveNumberPrefix,
     paymentReceiveNextNumber,
   );
+
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -194,7 +199,7 @@ export default compose(
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
+    preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
   })),
   withCurrentOrganization(),
 )(PaymentReceiveForm);
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
index 743e97d32..b990c3438 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -224,6 +224,7 @@ function PaymentReceiveHeaderFields({
           <FormGroup
             label={<T id={'payment_receive_no'} />}
             inline={true}
+            labelInfo={<FieldRequiredHint />}
             className={('form-group--payment_receive_no', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="payment_receive_no" />}
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
index 8a8c0ecf1..c1f77977a 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
@@ -1,4 +1,6 @@
 import React, { createContext, useContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
@@ -12,12 +14,10 @@ const PaymentReceivesListContext = createContext();
 /**
  * Payment receives list data provider.
  */
-function PaymentReceivesListProvider({ query, ...props }) {
+function PaymentReceivesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch payment receives resource views and fields.
-  const {
-    data: paymentReceivesViews,
-    isFetching: isViewsLoading,
-  } = useResourceViews('payment_receives');
+  const { data: paymentReceivesViews, isFetching: isViewsLoading } =
+    useResourceViews('payment_receives');
 
   // Fetch the payment receives resource fields.
   const {
@@ -35,11 +35,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: paymentReceives,
-      pagination,
-      filterMeta,
-    }) && !isPaymentReceivesLoading;
+    isEmpty(paymentReceives) && !isPaymentReceivesLoading && !tableStateChanged;
 
   // Provider payload.
   const state = {
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index de95d270a..c679f95e6 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -41,6 +41,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_payment_receive')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
index 267bb13a1..49d9f8499 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
@@ -149,6 +149,7 @@ export default function ReceiptFormFloatingActions() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitCloseBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
index 803ac518d..6f7389c67 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
@@ -49,7 +49,10 @@ function ReceiptsListProvider({ query, tableStateChanged, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isViewsLoading} name={'sales_receipts'}>
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'sales_receipts'}
+    >
       <ReceiptsListContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 8a063e69d..5f7a09207 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -21,6 +21,10 @@ import {
   AbilitySubject,
 } from '../../../../common/abilityOption';
 
+/**
+ * Receipts table row actions menu.
+ * @returns {React.JSX}
+ */
 export function ActionsMenu({
   payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
   row: { original: receipt },
@@ -56,6 +60,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_receipt')}
           intent={Intent.DANGER}
@@ -88,13 +93,13 @@ export function StatusAccessor(receipt) {
   return (
     <Choose>
       <Choose.When condition={receipt.is_closed}>
-        <Tag minimal={true} intent={Intent.SUCCESS}>
+        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
           <T id={'closed'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
diff --git a/src/containers/Settings/withSettings.js b/src/containers/Settings/withSettings.js
index 77ec97cc8..867e56dc7 100644
--- a/src/containers/Settings/withSettings.js
+++ b/src/containers/Settings/withSettings.js
@@ -19,6 +19,8 @@ export default (mapState) => {
       cashflowSettings: state.settings.data.cashflowAccounts,
       cashflowTransactionsSettings: state.settings.data.cashflowTransactions,
       cashflowSetting: state.settings.data.cashflow,
+      creditNoteSettings: state.settings.data.creditNote,
+      vendorsCreditNoteSetting: state.settings.data.vendorCredit,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/src/containers/TransactionsLocking/TransactionsLockingAlerts.js b/src/containers/TransactionsLocking/TransactionsLockingAlerts.js
new file mode 100644
index 000000000..c4e9554aa
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingAlerts.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const cancelUnlockingPartialAlert = React.lazy(() =>
+  import('../Alerts/TransactionLocking/cancelUnlockingPartialAlert'),
+);
+
+/**
+ * Transactions alerts.
+ */
+export default [
+  {
+    name: 'cancel-unlocking-partail',
+    component: cancelUnlockingPartialAlert,
+  },
+];
diff --git a/src/containers/TransactionsLocking/TransactionsLockingBody.js b/src/containers/TransactionsLocking/TransactionsLockingBody.js
new file mode 100644
index 000000000..2190907fd
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingBody.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import {
+  TransactionsLockingList,
+  TransactionsLockingFull,
+  TransactionLockingSkeletonList,
+} from './components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+
+/**
+ * Transactions locking body.
+ * @returns {JSX}
+ */
+function TransactionsLockingBodyJsx({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { isTransactionLockingLoading, transactionLockingType } =
+    useTransactionsLockingContext();
+
+  // Handle locking transactions.
+  const handleLockingTransactions = (module, {}, isEnabled) => {
+    openDialog('locking-transactions', {
+      isEnabled: isEnabled,
+      module: module,
+    });
+  };
+  // Handle unlocking transactions
+  const handleUnlockTransactions = (module) => {
+    openDialog('unlocking-transactions', { module: module });
+  };
+  // Handle unlocking transactions
+  const handleUnlockingPartial = (module) => {
+    openDialog('unlocking-partial-transactions', { module: module });
+  };
+  // Handle cancel partial unlocking.
+  const handleCancelUnlockingPartail = (module) => {
+    openAlert('cancel-unlocking-partail', { module: module });
+  };
+
+  return !isTransactionLockingLoading ? (
+    transactionLockingType === 'partial' ? (
+      <TransactionsLockingList
+        onLock={handleLockingTransactions}
+        onEditLock={handleLockingTransactions}
+        onCancelLock={handleUnlockTransactions}
+        onUnlockPartial={handleUnlockingPartial}
+        onCancelUnlockPartial={handleCancelUnlockingPartail}
+      />
+    ) : (
+      <TransactionsLockingFull
+        onLock={handleLockingTransactions}
+        onCancelLock={handleUnlockTransactions}
+        onUnlockPartial={handleUnlockingPartial}
+        onCancelUnlockPartial={handleCancelUnlockingPartail}
+      />
+    )
+  ) : (
+    <TransactionLockingSkeletonList />
+  );
+}
+
+export const TransactionsLockingBody = R.compose(
+  withAlertsActions,
+  withDialogActions,
+)(TransactionsLockingBodyJsx);
diff --git a/src/containers/TransactionsLocking/TransactionsLockingHeader.js b/src/containers/TransactionsLocking/TransactionsLockingHeader.js
new file mode 100644
index 000000000..877d81072
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingHeader.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+import {
+  ButtonLink,
+  AppToaster,
+  Join,
+  FormattedMessage as T,
+  Alert,
+  AlertDesc,
+} from 'components';
+import {
+  validateMoveToFullLocking,
+  validateMoveToPartialLocking,
+} from './utils';
+
+/**
+ * Transactions locking header.
+ * @returns
+ */
+export function TransactionsLockingHeader() {
+  const {
+    transactionsLocking,
+    transactionLockingType,
+    setTransactionLockingType,
+  } = useTransactionsLockingContext();
+
+  // Handle all lock link click.
+  const handleAllLockClick = () => {
+    const activeModules = validateMoveToFullLocking(
+      transactionsLocking.modules,
+    );
+    const modulesStrong = activeModules.map((module) => (
+      <strong>{module.formatted_module}</strong>
+    ));
+    if (activeModules.length > 0) {
+      AppToaster.show({
+        message: (
+          <span>
+            You should unlock <Join items={modulesStrong} sep={', '} /> modules
+            first, than you can lock all transactions at once.
+          </span>
+        ),
+        intent: Intent.DANGER,
+      });
+    } else {
+      setTransactionLockingType('all');
+    }
+  };
+
+  const handleUndividualLockClick = () => {
+    const isAllLockingActive = validateMoveToPartialLocking(
+      transactionsLocking.all,
+    );
+
+    if (isAllLockingActive) {
+      AppToaster.show({
+        message: intl.get(
+          'transactions_locking.you_should_unlock_all_transactions_at_once_before',
+        ),
+        intent: Intent.DANGER,
+      });
+    } else {
+      setTransactionLockingType('partial');
+    }
+  };
+
+  return transactionLockingType !== 'all' ? (
+    <LockAllAlert
+      title={<T id={'transactions_locking_lock_all_transactions_at_once'} />}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        <T id={'transactions_locking.callout.lock_all_at_once.desc'} />
+      </p>
+      <ButtonLink onClick={handleAllLockClick}>
+        <T id={'transactions_locking.lock_all_transactions_at_once'} />
+      </ButtonLink>
+    </LockAllAlert>
+  ) : (
+    <LockAllAlert
+      title={<T id={'transactions_locking.lock_individual_modules'} />}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        <T id={'transactions_locking.callout.lock_individual.desc'} />
+      </p>
+      <ButtonLink onClick={handleUndividualLockClick}>
+        <T id={'transactions_locking.lock_modules_individually'} />
+      </ButtonLink>
+    </LockAllAlert>
+  );
+}
+
+const LockAllAlert = styled(Alert)`
+  margin-bottom: 0;
+  margin-top: 20px;
+  background: transparent;
+
+  ${AlertDesc} {
+    color: #1f3255;
+  }
+`;
diff --git a/src/containers/TransactionsLocking/TransactionsLockingList.js b/src/containers/TransactionsLocking/TransactionsLockingList.js
index 6163b8daf..045e50bf4 100644
--- a/src/containers/TransactionsLocking/TransactionsLockingList.js
+++ b/src/containers/TransactionsLocking/TransactionsLockingList.js
@@ -1,86 +1,42 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import clsx from 'classnames';
+
+import { Paragraph, FormattedMessage as T } from 'components';
 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>;
-}
+import { TransactionsLockingHeader } from './TransactionsLockingHeader';
+import { TransactionsLockingBody } from './TransactionsLockingBody';
 
 /**
  * Transactions locking list.
  */
-function TransactionsLockingList({
-  // #withDialogActions
-  openDialog,
-}) {
-  // Handle switch transactions locking.
-  const handleSwitchTransactionsLocking = () => {
-    openDialog('transactions-locking', {});
-  };
-
+export default function TransactionsLockingListPage() {
   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.
+            <T id={'transactions_locking.long_description'} />
           </TransLockingDesc>
-          Lock All Transactions At Once. {' '}
-          <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
+          <TransactionsLockingHeader />
         </TransactionsLockingParagraph>
 
-        {DataTest.map(({ name, description }) => (
-          <TransactionLockingContent
-            name={name}
-            description={description}
-            onSwitch={handleSwitchTransactionsLocking}
-          />
-        ))}
+        <TransactionsLockingBody />
       </TransactionsLocking>
     </TransactionsLockingProvider>
   );
 }
-export default compose(withDialogActions)(TransactionsLockingList);
 
 const TransactionsLocking = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 32px;
-  max-width: 700px;
+  padding: 32px 40px;
+  min-width: 800px;
+  max-width: 900px;
+  width: 75%;
 `;
 
 const TransactionsLockingParagraph = styled(Paragraph)`
-  margin-bottom: 30px;
-`;
-
-const TransLockingTitle = styled.h2`
-  margin-bottom: 12px;
+  margin-bottom: 25px;
 `;
 
 const TransLockingDesc = styled.p``;
diff --git a/src/containers/TransactionsLocking/TransactionsLockingPage.js b/src/containers/TransactionsLocking/TransactionsLockingPage.js
new file mode 100644
index 000000000..0ea88c231
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingPage.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { TransactionsLockingProvider } from './TransactionsLockingProvider';
+import TransactionsLockingList from './TransactionsLockingList';
+
+export default function TransactionsLockingPage() {
+  return (
+    <TransactionsLockingProvider>
+      <TransactionsLockingList />
+    </TransactionsLockingProvider>
+  );
+}
diff --git a/src/containers/TransactionsLocking/TransactionsLockingProvider.js b/src/containers/TransactionsLocking/TransactionsLockingProvider.js
index 33f1b855c..f7ec72f5c 100644
--- a/src/containers/TransactionsLocking/TransactionsLockingProvider.js
+++ b/src/containers/TransactionsLocking/TransactionsLockingProvider.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useTransactionsLocking } from 'hooks/query';
+import { useWatchImmediate } from '../../hooks/utils/useWatch';
 
 const TransactionsLockingContext = React.createContext();
 
@@ -7,13 +9,36 @@ const TransactionsLockingContext = React.createContext();
  * Transactions locking data provider.
  */
 function TransactionsLockingProvider({ ...props }) {
+  // Fetch transaction locking modules list.
+  const {
+    data: transactionsLocking,
+    isFetching: isTransactionLockingFetching,
+    isLoading: isTransactionLockingLoading,
+  } = useTransactionsLocking();
+
+  // Transactions locking type.
+  const [transactionLockingType, setTransactionLockingType] =
+    React.useState('partial');
+
+  // Locking type controlled from response.
+  useWatchImmediate(() => {
+    if (transactionsLocking.locking_type) {
+      setTransactionLockingType(transactionsLocking.locking_type);
+    }
+  }, transactionsLocking.locking_type);
+
   // Provider
-  const provider = {};
+  const provider = {
+    transactionsLocking,
+    isTransactionLockingFetching,
+    isTransactionLockingLoading,
+
+    transactionLockingType,
+    setTransactionLockingType,
+  };
 
   return (
-    <DashboardInsider
-    // loading={}
-    >
+    <DashboardInsider>
       <TransactionsLockingContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/src/containers/TransactionsLocking/components.js b/src/containers/TransactionsLocking/components.js
index bd6825f41..d0285ce48 100644
--- a/src/containers/TransactionsLocking/components.js
+++ b/src/containers/TransactionsLocking/components.js
@@ -1,57 +1,351 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Switch, FormGroup, Position } from '@blueprintjs/core';
-import { Hint, Icon, FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Position,
+  MenuItem,
+  Menu,
+  Intent,
+  Divider,
+  Classes,
+} from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
 
-export const TransactionLockingContent = ({ name, description, onSwitch }) => (
-  <TransactionLockingWrapp>
-    <TransactionsLockingcontent>
-      <TransLockingIcon>
-        <Icon icon="lock" iconSize={22} />
-      </TransLockingIcon>
+import { Hint, Icon, If, FormattedMessage as T } from 'components';
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+import { safeInvoke } from 'utils';
 
-      <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}
+/**
+ * Transaction locking module item.
+ * @returns {React.JSX}
+ */
+export function TransactionsLockingItemModule({ module, ...rest }) {
+  return (
+    <TransactionLockingContent
+      name={module.formatted_module}
+      module={module.module}
+      description={module.description}
+      isEnabled={module.is_enabled}
+      isPartialUnlock={module.is_partial_unlock}
+      lockToDate={module.formatted_lock_to_date}
+      lockReason={module.lock_reason}
+      unlockReason={module.unlock_reason}
+      unlockFromDate={module.formatted_unlock_from_date}
+      unlockToDate={module.formatted_unlock_to_date}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * Transactions locking items modules list.
+ * @returns {React.JSX}
+ */
+export function TransactionsLockingList({ ...rest }) {
+  const {
+    transactionsLocking: { modules },
+  } = useTransactionsLockingContext();
+
+  return modules.map((module) => (
+    <TransactionsLockingItemModule module={module} {...rest} />
+  ));
+}
+
+/**
+ * Transactions locking full module item.
+ * @returns {React.JSX}
+ */
+export function TransactionsLockingFull({ ...rest }) {
+  const {
+    transactionsLocking: { all },
+  } = useTransactionsLockingContext();
+
+  return <TransactionsLockingItemModule module={all} {...rest} />;
+}
+
+/**
+ * Transactions locking skeleton list.
+ * @returns {React.JSX}
+ */
+export function TransactionLockingSkeletonList() {
+  return (
+    <>
+      <TransactionLockingItemSkeleton />
+      <TransactionLockingItemSkeleton />
+      <TransactionLockingItemSkeleton />
+    </>
+  );
+}
+
+/**
+ * Transactions locking skeleton item.
+ * @returns {React.JSX}
+ */
+export const TransactionLockingItemSkeleton = ({}) => {
+  return (
+    <TransactionLockingWrapp>
+      <TransLockingInner>
+        <TransLockingIcon>
+          <Icon icon="lock" iconSize={24} />
+        </TransLockingIcon>
+
+        <TransLockingContent>
+          <TransLockingItemTitle className={Classes.SKELETON}>
+            XXXX
+          </TransLockingItemTitle>
+
+          <TransLockingItemDesc className={Classes.SKELETON}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </TransLockingItemDesc>
+        </TransLockingContent>
+      </TransLockingInner>
+    </TransactionLockingWrapp>
+  );
+};
+
+const TransactionsLockingItemContext = React.createContext();
+
+const useTransactionsLockingItemContext = () =>
+  React.useContext(TransactionsLockingItemContext);
+
+/**
+ * Transactions locking item.
+ * @returns {React.JSX}
+ */
+export const TransactionLockingContent = (props) => {
+  const {
+    name,
+    description,
+    module,
+
+    isEnabled,
+    lockToDate,
+    lockReason,
+
+    // Unlock props.
+    isPartialUnlock,
+    unlockToDate,
+    unlockFromDate,
+    unlockReason,
+
+    onLock,
+    onCancelLock,
+    onEditLock,
+    onUnlockPartial,
+    onCancelUnlockPartial,
+  } = props;
+
+  return (
+    <TransactionsLockingItemContext.Provider value={props}>
+      <TransactionLockingWrapp isEnabled={isEnabled}>
+        <TransLockingInner>
+          <TransLockingIcon>
+            <Icon icon="lock" iconSize={24} />
+          </TransLockingIcon>
+
+          <TransactionsLockingItemContent />
+          <TransactionsLockingItemActions />
+        </TransLockingInner>
+      </TransactionLockingWrapp>
+    </TransactionsLockingItemContext.Provider>
+  );
+};
+
+/**
+ * Transactions locking item content.
+ */
+function TransactionsLockingItemContent() {
+  const {
+    name,
+    description,
+
+    isEnabled,
+    lockToDate,
+    lockReason,
+
+    // Unlock props.
+    isPartialUnlock,
+    unlockToDate,
+    unlockFromDate,
+    unlockReason,
+  } = useTransactionsLockingItemContext();
+
+  return (
+    <TransLockingContent>
+      <TransLockingItemTitle>
+        {name}
+        <Hint content={description} position={Position.BOTTOM_LEFT} />
+      </TransLockingItemTitle>
+
+      <If condition={!isEnabled}>
+        <TransLockingItemDesc>
+          <T id={'transactions_locking.lock_item.no_lock'} />
+        </TransLockingItemDesc>
+      </If>
+
+      <If condition={isEnabled}>
+        <TransLockWrap>
+          <TransLockingItemDesc>
+            {intl.formatHTMLMessage(
+              { id: 'transactions_locking.of_the_module_locked_to' },
+              {
+                value: lockToDate,
+              },
+            )}
+          </TransLockingItemDesc>
+
+          <If condition={lockReason}>
+            <TransLockingReason>
+              {intl.formatHTMLMessage(
+                { id: 'transactions_locking.lock_reason' },
+                { value: lockReason },
+              )}
+            </TransLockingReason>
+          </If>
+        </TransLockWrap>
+      </If>
+
+      <If condition={isPartialUnlock}>
+        <TransUnlockWrap>
+          <TransLockingItemDesc>
+            {intl.formatHTMLMessage(
+              { id: 'transactions_locking.partial_unlocked_from' },
+              {
+                fromDate: unlockFromDate,
+                toDate: unlockToDate,
+              },
+            )}
+          </TransLockingItemDesc>
+
+          <If condition={unlockReason}>
+            <TransLockingReason>
+              {intl.formatHTMLMessage(
+                { id: 'transactions_locking.unlock_reason' },
+                { value: unlockReason },
+              )}
+            </TransLockingReason>
+          </If>
+        </TransUnlockWrap>
+      </If>
+    </TransLockingContent>
+  );
+}
+
+/**
+ * Transactions locking item actions.
+ */
+function TransactionsLockingItemActions() {
+  const {
+    module,
+    isEnabled,
+
+    // Unlock props.
+    isPartialUnlock,
+
+    onLock,
+    onCancelLock,
+    onEditLock,
+    onUnlockPartial,
+    onCancelUnlockPartial,
+  } = useTransactionsLockingItemContext();
+
+  const handleLockClick = (event) => {
+    safeInvoke(onLock, module, event);
+  };
+  const handleEditBtn = (event) => {
+    safeInvoke(onEditLock, module, isEnabled, event);
+  };
+  const handleUnlockPartial = (event) => {
+    safeInvoke(onUnlockPartial, module, event);
+  };
+
+  const handleUnlockFull = (event) => {
+    safeInvoke(onCancelLock, module, event);
+  };
+  const handleCancelPartialUnlock = (event) => {
+    safeInvoke(onCancelUnlockPartial, module, event);
+  };
+
+  return (
+    <TransLockingActions>
+      <If condition={!isEnabled}>
+        <Button
+          small={true}
           minimal={true}
-          className="ml2"
-          onChange={onSwitch}
-        />
-      </FormGroup>
-    </TransactionsLockingcontent>
-  </TransactionLockingWrapp>
-);
+          intent={Intent.PRIMARY}
+          onClick={handleLockClick}
+        >
+          <T id={'transactions_locking.lock'} />
+        </Button>
+      </If>
+
+      <If condition={isEnabled}>
+        <Button
+          small={true}
+          minimal={true}
+          intent={Intent.PRIMARY}
+          onClick={handleEditBtn}
+        >
+          <T id={'edit'} />
+        </Button>
+        <Divider />
+        <Popover2
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'transactions_locking.full_unlock'} />}
+                onClick={handleUnlockFull}
+              />
+
+              <If condition={!isPartialUnlock}>
+                <MenuItem
+                  text={<T id={'transactions_locking.paetial_unlock'} />}
+                  onClick={handleUnlockPartial}
+                />
+              </If>
+              <If condition={isPartialUnlock}>
+                <MenuItem
+                  text={<T id={'transactions_locking.cancel_partial_unlock'} />}
+                  onClick={handleCancelPartialUnlock}
+                />
+              </If>
+            </Menu>
+          }
+          placement={'bottom-start'}
+          minimal={true}
+        >
+          <Button small={true} minimal={true} intent={Intent.PRIMARY}>
+            <T id={'transactions_locking.unlock'} />
+          </Button>
+        </Popover2>
+      </If>
+    </TransLockingActions>
+  );
+}
 
 const TransactionLockingWrapp = styled.div`
   display: flex;
   align-items: center;
   border-radius: 6px;
-  border: 1px solid #d1dee2;
-  padding: 14px 18px;
+  border: 1px solid #c4d2d7;
+  padding: 16px 18px;
   margin-bottom: 25px;
   background: #fff;
+  box-shadow: 0 4px 20px -5px rgb(0 8 36 / 5%);
 
-  div.block {
-    flex: 1 1 0;
-    margin-left: 20px;
-    width: 100%;
-  }
+  ${(props) =>
+    props.isEnabled &&
+    `
+    border-color: #fc8483; 
+
+    ${TransLockingIcon} {
+      color: #ef6d6d;
+    }
+  `}
 `;
 
-const TransactionsLockingcontent = styled.div`
+const TransLockingInner = styled.div`
   display: flex;
   align-items: center;
   flex: 1 1 0;
@@ -65,15 +359,62 @@ const TransLockingItemTitle = styled.h1`
 `;
 const TransLockingItemDesc = styled.p`
   margin-bottom: 0;
-  opacity: 0.8;
+  opacity: 0.9;
 `;
 
 const TransLockingIcon = styled.div`
   border: 1px solid #d2dde2;
-  height: 50px;
-  width: 50px;
+  height: 45px;
+  width: 45px;
   text-align: center;
-  line-height: 50px;
-  border-radius: 5px;
-  color: #8190ac;
+  line-height: 45px;
+  border-radius: 8px;
+  color: #93a1ba;
+
+  .bp3-icon {
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export const TransLockingActions = styled.div`
+  display: flex;
+
+  .bp3-divider {
+    margin: 2px;
+  }
+`;
+
+export const TransLockingContent = styled.div`
+  flex: 1 1 0;
+  margin-left: 20px;
+  width: 100%;
+  padding-right: 10px;
+`;
+
+export const TransLockingReason = styled.div`
+  font-size: 13px;
+
+  strong {
+    color: #777;
+  }
+`;
+
+const TransUnlockWrap = styled.div`
+  padding-top: 10px;
+  border-top: 1px solid #ddd;
+  margin-top: 10px;
+
+  ${TransLockingReason} {
+    margin-top: 8px;
+  }
+  ${TransLockingItemDesc} {
+    font-size: 13px;
+  }
+`;
+
+const TransLockWrap = styled.div`
+  ${TransLockingReason} {
+    margin-top: 10px;
+  }
 `;
diff --git a/src/containers/TransactionsLocking/utils.js b/src/containers/TransactionsLocking/utils.js
new file mode 100644
index 000000000..f523d65c6
--- /dev/null
+++ b/src/containers/TransactionsLocking/utils.js
@@ -0,0 +1,30 @@
+export const validateMoveToPartialLocking = (all) => {
+  return all.is_enabled;
+};
+
+export const validateMoveToFullLocking = (modules) => {
+  return modules.filter((module) => module.is_enabled);
+};
+
+export const transformItem = (item) => {
+  return {
+    name: item.formatted_module,
+    module: item.module,
+    description: item.description,
+    isEnabled: item.is_enabled,
+    isPartialUnlock: item.is_partial_unlock,
+    lockToDate: item.formatted_lock_to_date,
+    lockReason: item.lock_reason,
+    unlockFromDate: item.formatted_unlock_from_date,
+    unlockToDate: item.formatted_unlock_to_date,
+    unlockReason: item.unlock_reason,
+    partialUnlockReason: item.partial_unlock_reason,
+  };
+};
+
+export const transformList = (res) => {
+  return {
+    all: transformItem(res.all),
+    modules: res.modules.map((module) => transformItem(module)),
+  };
+};
diff --git a/src/containers/UniversalSearch/DashboardUniversalSearchBinds.js b/src/containers/UniversalSearch/DashboardUniversalSearchBinds.js
index ef28e4dd1..2de45627f 100644
--- a/src/containers/UniversalSearch/DashboardUniversalSearchBinds.js
+++ b/src/containers/UniversalSearch/DashboardUniversalSearchBinds.js
@@ -9,6 +9,8 @@ import { universalSearchCustomerBind } from '../Customers/CustomersUniversalSear
 import { universalSearchJournalBind } from '../Accounting/ManualJournalUniversalSearch';
 import { universalSearchAccountBind } from '../Accounts/AccountUniversalSearch';
 import { universalSearchVendorBind } from '../Vendors/VendorsUniversalSearch';
+import { universalSearchCreditNoteBind } from '../Sales/CreditNotes/CreditNoteUniversalSearch';
+import { universalSearchVendorCreditBind } from '../Purchases/CreditNotes/VendorCreditIUniversalSearchBind';
 
 // Universal search binds.
 export const universalSearchBinds = [
@@ -23,4 +25,6 @@ export const universalSearchBinds = [
   universalSearchCustomerBind,
   universalSearchVendorBind,
   universalSearchJournalBind,
+  universalSearchCreditNoteBind,
+  universalSearchVendorCreditBind,
 ];
diff --git a/src/containers/Vendors/VendorsLanding/VendorsListProvider.js b/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
index 8b5be1896..5997120cb 100644
--- a/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
+++ b/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
@@ -53,7 +53,7 @@ function VendorsListProvider({ tableState, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isResourceMetaLoading || isVendorsLoading}
+      loading={isVendorsViewsLoading || isResourceMetaLoading}
       name={'vendors-list'}
     >
       <VendorsListContext.Provider value={provider} {...props} />
diff --git a/src/containers/Vendors/VendorsLanding/components.js b/src/containers/Vendors/VendorsLanding/components.js
index 76bd69217..19c0cf8b8 100644
--- a/src/containers/Vendors/VendorsLanding/components.js
+++ b/src/containers/Vendors/VendorsLanding/components.js
@@ -67,6 +67,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_vendor')}
diff --git a/src/hooks/query/GenericResource/index.js b/src/hooks/query/GenericResource/index.js
index 27580ce9f..353d9e436 100644
--- a/src/hooks/query/GenericResource/index.js
+++ b/src/hooks/query/GenericResource/index.js
@@ -26,7 +26,7 @@ export function useResourceData(type, query, props) {
 
 /**
  * Retrieve the resource url by the given resource type.
- * @param {string} type 
+ * @param {string} type
  * @returns {string}
  */
 function getResourceUrlFromType(type) {
@@ -42,6 +42,8 @@ function getResourceUrlFromType(type) {
     [RESOURCES_TYPES.VENDOR]: '/vendors',
     [RESOURCES_TYPES.MANUAL_JOURNAL]: '/manual-journals',
     [RESOURCES_TYPES.ACCOUNT]: '/accounts',
+    [RESOURCES_TYPES.CREDIT_NOTE]: '/sales/credit_notes',
+    [RESOURCES_TYPES.VENDOR_CREDIT]: '/purchases/vendor-credit',
   };
   return config[type] || '';
 }
@@ -81,7 +83,6 @@ const transformVendors = (response) => ({
   items: response.data.vendors,
 });
 
-
 const transformPaymentMades = (response) => ({
   items: response.data.bill_payments,
 });
@@ -104,7 +105,15 @@ const transformsEstimates = (response) => ({
 
 const transformAccounts = (response) => ({
   items: response.data.accounts,
-})
+});
+
+const transformCreditNotes = (response) => ({
+  items: response.data.credit_notes,
+});
+
+const transformVendorCredits = (response) => ({
+  items: response.data.vendor_credits,
+});
 
 /**
  * Detarmines the transformer based on the given resource type.
@@ -122,7 +131,9 @@ const transformResourceData = (type) => (response) => {
     [RESOURCES_TYPES.VENDOR]: transformVendors,
     [RESOURCES_TYPES.BILL]: transformBills,
     [RESOURCES_TYPES.MANUAL_JOURNAL]: transformManualJournals,
-    [RESOURCES_TYPES.ACCOUNT]: transformAccounts
+    [RESOURCES_TYPES.ACCOUNT]: transformAccounts,
+    [RESOURCES_TYPES.CREDIT_NOTE]: transformCreditNotes,
+    [RESOURCES_TYPES.VENDOR_CREDIT]: transformVendorCredits,
   };
   return {
     ...pairs[type](response),
diff --git a/src/hooks/query/bills.js b/src/hooks/query/bills.js
index 2ee4b366e..24806a3b6 100644
--- a/src/hooks/query/bills.js
+++ b/src/hooks/query/bills.js
@@ -20,12 +20,19 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.ACCOUNTS);
   queryClient.invalidateQueries(t.ACCOUNT);
 
-  // Invalidate financial reports.
-  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
-
   // Invalidate landed cost.
   queryClient.invalidateQueries(t.LANDED_COST);
   queryClient.invalidateQueries(t.LANDED_COST_TRANSACTION);
+
+  // Invalidate reconcile.
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDITS);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate items associated bills transactions.
+  queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
 };
 
 /**
@@ -182,3 +189,18 @@ export function useRefreshBills() {
     },
   };
 }
+
+export function useBillPaymentTransactions(id, props) {
+  return useRequestQuery(
+    [t.BILLS_PAYMENT_TRANSACTIONS, id],
+    {
+      method: 'get',
+      url: `purchases/bills/${id}/payment-transactions`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/creditNote.js b/src/hooks/query/creditNote.js
new file mode 100644
index 000000000..6e06ce622
--- /dev/null
+++ b/src/hooks/query/creditNote.js
@@ -0,0 +1,343 @@
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate credit note.
+  queryClient.invalidateQueries(t.CREDIT_NOTES);
+  queryClient.invalidateQueries(t.CREDIT_NOTE);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate customers.
+  queryClient.invalidateQueries([t.CUSTOMER]);
+  queryClient.invalidateQueries(t.CUSTOMERS);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate settings.
+  queryClient.invalidateQueries([t.SETTING, t.SETTING_CREDIT_NOTES]);
+
+  // Invalidate refund credit
+  queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE_TRANSACTION);
+
+  // Invalidate reconcile.
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate invoices.
+  queryClient.invalidateQueries(t.SALE_INVOICES);
+  queryClient.invalidateQueries(t.SALE_INVOICE);
+
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Create a new credit note.
+ */
+export function useCreateCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('sales/credit_notes', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edit the given credit note.
+ */
+export function useEditCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/credit_notes/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given credit note.
+ */
+export function useDeleteCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`sales/credit_notes/${id}`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate vendor credit query.
+      queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+    },
+    ...props,
+  });
+}
+
+const transformCreditNotes = (res) => ({
+  creditNotes: res.data.credit_notes,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * Retrieve credit notes list with pagination meta.
+ */
+export function useCreditNotes(query, props) {
+  return useRequestQuery(
+    [t.CREDIT_NOTES, query],
+    { method: 'get', url: 'sales/credit_notes', params: query },
+    {
+      select: transformCreditNotes,
+      defaultData: {
+        creditNotes: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.CREDIT_NOTE, id],
+    { method: 'get', url: `sales/credit_notes/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.credit_note,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useRefreshCreditNotes() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CREDIT_NOTES);
+    },
+  };
+}
+
+/**
+ * Create Round creidt note
+ */
+export function useCreateRefundCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/credit_notes/${id}/refund`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given refund credit note.
+ */
+export function useDeleteRefundCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`sales/credit_notes/refunds/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useRefundCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_CREDIT_NOTE, id],
+    { method: 'get', url: `sales/credit_notes/${id}/refund`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Mark the given credit note as opened.
+ */
+export function useOpenCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/credit_notes/${id}/open`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific
+      queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve reconcile credit note of the given id.
+ * @param {number} id
+ *
+ */
+export function useReconcileCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_CREDIT_NOTE, id],
+    {
+      method: 'get',
+      url: `sales/credit_notes/${id}/apply-to-invoices`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create Reconcile credit note.
+ */
+export function useCreateReconcileCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/credit_notes/${id}/apply-to-invoices`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve reconcile credit notes.
+ */
+export function useReconcileCreditNotes(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_CREDIT_NOTES, id],
+    {
+      method: 'get',
+      url: `sales/credit_notes/${id}/applied-invoices`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given reconcile credit note.
+ */
+export function useDeleteReconcileCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`sales/credit_notes/applied-to-invoices/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit transaction detail.
+ * @param {number} id
+ *
+ */
+export function useRefundCreditTransaction(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_CREDIT_NOTE_TRANSACTION, id],
+    { method: 'get', url: `sales/credit_notes/refunds/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.refund_credit,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index b73eae6ce..63ac3e53a 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -9,6 +9,9 @@ import t from './types';
 const commonInvalidateQueries = (queryClient) => {
   // Invalidate estimates.
   queryClient.invalidateQueries(t.SALE_ESTIMATES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES);
 };
 
 /**
@@ -191,7 +194,7 @@ export function useRefreshEstimates() {
 }
 
 /**
- *  
+ *
  */
 export function useCreateNotifyEstimateBySMS(props) {
   const queryClient = useQueryClient();
@@ -214,11 +217,11 @@ export function useCreateNotifyEstimateBySMS(props) {
 }
 
 /**
- * 
- * @param {*} estimateId 
- * @param {*} props 
- * @param {*} requestProps 
- * @returns 
+ *
+ * @param {*} estimateId
+ * @param {*} props
+ * @param {*} requestProps
+ * @returns
  */
 export function useEstimateSMSDetail(estimateId, props, requestProps) {
   return useRequestQuery(
diff --git a/src/hooks/query/index.js b/src/hooks/query/index.js
index e73c09307..629f4f1b4 100644
--- a/src/hooks/query/index.js
+++ b/src/hooks/query/index.js
@@ -28,5 +28,8 @@ export * from './UniversalSearch/UniversalSearch';
 export * from './GenericResource';
 export * from './jobs';
 export * from './misc';
-export * from './cashflowAccounts'
-export * from './roles'
+export * from './cashflowAccounts';
+export * from './roles';
+export * from './creditNote';
+export * from './vendorCredit';
+export * from './transactionsLocking';
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index aabe2fa07..1223210a9 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -27,6 +27,13 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate accounts.
   queryClient.invalidateQueries(t.ACCOUNTS);
   queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate reconcile.
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES);
 };
 
 /**
@@ -269,3 +276,18 @@ export function useInvoiceSMSDetail(invoiceId, query, props) {
     },
   );
 }
+
+export function useInvoicePaymentTransactions(invoiceId, props) {
+  return useRequestQuery(
+    [t.SALE_INVOICE_PAYMENT_TRANSACTIONS, invoiceId],
+    {
+      method: 'get',
+      url: `sales/invoices/${invoiceId}/payment-transactions`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/items.js b/src/hooks/query/items.js
index aa5c60559..78fc18533 100644
--- a/src/hooks/query/items.js
+++ b/src/hooks/query/items.js
@@ -172,3 +172,62 @@ export function useItem(id, props) {
     },
   );
 }
+
+export function useItemAssociatedInvoiceTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_INVOICES, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/invoices`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedEstimateTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_ESTIMATES, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/estimates`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedReceiptTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_RECEIPTS, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/receipts`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+export function useItemAssociatedBillTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEMS_ASSOCIATED_WITH_BILLS, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/bills`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/paymentMades.js b/src/hooks/query/paymentMades.js
index f4589b480..9cfad50d8 100644
--- a/src/hooks/query/paymentMades.js
+++ b/src/hooks/query/paymentMades.js
@@ -30,6 +30,9 @@ const commonInvalidateQueries = (client) => {
   // Invalidate the cashflow transactions.
   client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate bills payment transactions.
+  client.invalidateQueries(t.BILLS_PAYMENT_TRANSACTIONS);
 };
 
 /**
diff --git a/src/hooks/query/paymentReceives.js b/src/hooks/query/paymentReceives.js
index 06e7b39cb..e4bb74be9 100644
--- a/src/hooks/query/paymentReceives.js
+++ b/src/hooks/query/paymentReceives.js
@@ -28,6 +28,16 @@ const commonInvalidateQueries = (client) => {
   // Invalidate the cashflow transactions.
   client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  client.invalidateQueries(t.CREDIT_NOTE);
+  client.invalidateQueries(t.CREDIT_NOTES);
+  
+  // Invalidate reconcile.
+  client.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  client.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+  
+  // Invalidate invoices payment transactions.
+  client.invalidateQueries(t.SALE_INVOICE_PAYMENT_TRANSACTIONS);
 };
 
 // Transform payment receives.
diff --git a/src/hooks/query/receipts.js b/src/hooks/query/receipts.js
index a9b0c705b..c2cbeaa22 100644
--- a/src/hooks/query/receipts.js
+++ b/src/hooks/query/receipts.js
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS);
+
   // Invalidate the settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
 };
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index b7c70b335..bc28b9e57 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -95,7 +95,7 @@ export function useSettingsReceipts(props) {
 export function useSettingsManualJournals(props) {
   return useSettingsQuery(
     [t.SETTING, t.SETTING_MANUAL_JOURNALS],
-    { group: 'sale_receipts' },
+    { group: 'manual_journals' },
     props,
   );
 }
@@ -123,6 +123,27 @@ export function useSettingCashFlow(props) {
   );
 }
 
+/**
+ * Retrieve credit notes settings.
+ */
+export function useSettingsCreditNotes(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_CREDIT_NOTES],
+    { group: 'credit_note' },
+    props,
+  );
+}
+/**
+ * Retrieve vendor credit settings.
+ */
+export function useSettingsVendorCredits(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_VENDOR_CREDITS],
+    { group: 'vendor_credit' },
+    props,
+  );
+}
+
 /**
  * Retrieve SMS Notifications settings.
  */
diff --git a/src/hooks/query/transactionsLocking.js b/src/hooks/query/transactionsLocking.js
new file mode 100644
index 000000000..8de5016d0
--- /dev/null
+++ b/src/hooks/query/transactionsLocking.js
@@ -0,0 +1,115 @@
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';
+import { useRequestPdf } from '../utils';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate.
+  queryClient.invalidateQueries(t.TRANSACTION_LOCKING);
+  queryClient.invalidateQueries(t.TRANSACTIONS_LOCKING);
+};
+
+/**
+ * Create a locking transactions.
+ */
+export function useCreateLockingTransactoin(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.put('transactions-locking/lock', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create cancle locking transactions
+ */
+export function useCancelLockingTransaction(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.put('transactions-locking/cancel-lock', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create a unlocking partial transactions.
+ */
+export function useCreateUnlockingPartialTransactions(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+  return useMutation(
+    (values) => apiRequest.put('transactions-locking/unlock-partial', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create cancle unlocking partial transactions.
+ */
+export function useCancelUnlockingPartialTransactions(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+  return useMutation(
+    (values) =>
+      apiRequest.put('transactions-locking/cancel-unlock-partial', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrive the transactions locking.
+ */
+export function useTransactionsLocking(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTIONS_LOCKING, query],
+    { method: 'get', url: 'transactions-locking', params: query },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useEditTransactionsLocking(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTION_LOCKING, query],
+    { method: 'get', url: `transactions-locking/${query}` },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index edec96183..d98f99db8 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -30,6 +30,7 @@ const BILLS = {
   BILLS: 'BILLS',
   BILL: 'BILL',
   BILLS_DUE: 'BILLS_DUE',
+  BILLS_PAYMENT_TRANSACTIONS: 'BILLS_PAYMENT_TRANSACTIONS',
 };
 
 const VENDORS = {
@@ -46,6 +47,10 @@ const ITEMS = {
   ITEMS: 'ITEMS',
   ITEM: 'ITEM',
   ITEMS_CATEGORIES: 'ITEMS_CATEGORIES',
+  ITEM_ASSOCIATED_WITH_INVOICES: 'ITEM_ASSOCIATED_WITH_INVOICES',
+  ITEM_ASSOCIATED_WITH_ESTIMATES: 'ITEM_ASSOCIATED_WITH_ESTIMATES',
+  ITEM_ASSOCIATED_WITH_RECEIPTS: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
+  ITEMS_ASSOCIATED_WITH_BILLS: 'ITEMS_ASSOCIATED_WITH_BILLS',
 };
 
 const SALE_ESTIMATES = {
@@ -95,6 +100,7 @@ const SALE_INVOICES = {
   NOTIFY_SALE_INVOICE_BY_SMS: 'NOTIFY_SALE_INVOICE_BY_SMS',
   BAD_DEBT: 'BAD_DEBT',
   CANCEL_BAD_DEBT: 'CANCEL_BAD_DEBT',
+  SALE_INVOICE_PAYMENT_TRANSACTIONS: 'SALE_INVOICE_PAYMENT_TRANSACTIONS',
 };
 
 const USERS = {
@@ -108,6 +114,24 @@ const ROLES = {
   ROLES_PERMISSIONS_SCHEMA: 'ROLES_PERMISSIONS_SCHEMA',
 };
 
+const CREDIT_NOTES = {
+  CREDIT_NOTE: 'CREDIT_NOTE',
+  CREDIT_NOTES: 'CREDIT_NOTES',
+  REFUND_CREDIT_NOTE: 'REFUND_CREDIT_NOTE',
+  REFUND_CREDIT_NOTE_TRANSACTION: 'REFUND_CREDIT_NOTE_TRANSACTION',
+  RECONCILE_CREDIT_NOTE: 'RECONCILE_CREDIT_NOTE',
+  RECONCILE_CREDIT_NOTES: 'RECONCILE_CREDIT_NOTES',
+};
+
+const VENDOR_CREDIT_NOTES = {
+  VENDOR_CREDITS: 'VENDOR_CREDITS',
+  VENDOR_CREDIT: 'VENDOR_CREDIT',
+  REFUND_VENDOR_CREDIT: 'REFUND_VENDOR_CREDIT',
+  REFUND_VENDOR_CREDIT_TRANSACTION: 'REFUND_VENDOR_CREDIT_TRANSACTION',
+  RECONCILE_VENDOR_CREDIT: 'RECONCILE_VENDOR_CREDIT',
+  RECONCILE_VENDOR_CREDITS: 'RECONCILE_VENDOR_CREDITS',
+};
+
 const SETTING = {
   SETTING: 'SETTING',
   SETTING_INVOICES: 'SETTING_INVOICES',
@@ -120,6 +144,8 @@ const SETTING = {
   SETTING_SMS_NOTIFICATION: 'SETTING_SMS_NOTIFICATION',
   SETTING_SMS_NOTIFICATIONS: 'SETTING_SMS_NOTIFICATIONS',
   SETTING_EDIT_SMS_NOTIFICATION: 'SETTING_EDIT_SMS_NOTIFICATION',
+  SETTING_CREDIT_NOTES: 'SETTING_CREDIT_NOTES',
+  SETTING_VENDOR_CREDITS: 'SETTING_VENDOR_CREDITS',
 };
 
 const ORGANIZATIONS = {
@@ -160,6 +186,11 @@ const CASH_FLOW_ACCOUNTS = {
     'CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY',
 };
 
+const TARNSACTIONS_LOCKING = {
+  TRANSACTION_LOCKING: 'TRANSACTION_LOCKING',
+  TRANSACTIONS_LOCKING: 'TRANSACTIONS_LOCKING',
+};
+
 export default {
   ...ACCOUNTS,
   ...BILLS,
@@ -184,4 +215,7 @@ export default {
   ...CONTACTS,
   ...CASH_FLOW_ACCOUNTS,
   ...ROLES,
+  ...CREDIT_NOTES,
+  ...VENDOR_CREDIT_NOTES,
+  ...TARNSACTIONS_LOCKING,
 };
diff --git a/src/hooks/query/vendorCredit.js b/src/hooks/query/vendorCredit.js
new file mode 100644
index 000000000..927456d94
--- /dev/null
+++ b/src/hooks/query/vendorCredit.js
@@ -0,0 +1,360 @@
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate vendor credit.
+  queryClient.invalidateQueries(t.VENDOR_CREDITS);
+  queryClient.invalidateQueries(t.VENDOR_CREDIT);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate vendors.
+  queryClient.invalidateQueries([t.VENDORS]);
+  queryClient.invalidateQueries(t.VENDOR);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate settings.
+  queryClient.invalidateQueries([t.SETTING, t.SETTING_VENDOR_CREDITS]);
+
+  // Invalidate refund vendor credit
+  queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT_TRANSACTION);
+
+  // Invalidate reconcile vendor credit.
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDITS);
+
+  // Invalidate bills.
+  queryClient.invalidateQueries(t.BILL);
+  queryClient.invalidateQueries(t.BILLS);
+
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Create a new vendor credit.
+ */
+export function useCreateVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('purchases/vendor-credit', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edit the given vendor credit.
+ */
+export function useEditVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`purchases/vendor-credit/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given vendor credit.
+ */
+export function useDeleteVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+const transformVendorCreditsResponse = (response) => ({
+  vendorCredits: response.data.vendor_credits,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve vendor credit notes list with pagination meta.
+ */
+export function useVendorCredits(query, props) {
+  return useRequestQuery(
+    [t.VENDOR_CREDITS, query],
+    {
+      method: 'get',
+      url: 'purchases/vendor-credit',
+      params: query,
+    },
+    {
+      select: transformVendorCreditsResponse,
+      defaultData: {
+        vendorCredits: [],
+        pagination: {
+          page: 1,
+          page_size: 12,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve vendor credit detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.VENDOR_CREDIT, id],
+    { method: 'get', url: `purchases/vendor-credit/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useRefreshVendorCredits() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.VENDOR_CREDITS);
+    },
+  };
+}
+
+/**
+ * Create Round vendor creidt
+ */
+export function useCreateRefundVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`purchases/vendor-credit/${id}/refund`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given refund vendor credit.
+ */
+export function useDeleteRefundVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/refunds/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useRefundVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_VENDOR_CREDIT, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/refund`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Mark the given vendor credit  as opened.
+ */
+export function useOpenVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`purchases/vendor-credit/${id}/open`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate specific.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create Reconcile vendor credit.
+ */
+export function useCreateReconcileVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`purchases/vendor-credit/${id}/apply-to-bills`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve reconcile vendor credit of the given id.
+ * @param {number} id
+ *
+ */
+export function useReconcileVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_VENDOR_CREDIT, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/apply-to-bills`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve reconcile credit notes.
+ */
+export function useReconcileVendorCredits(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_VENDOR_CREDITS, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/applied-bills`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+/**
+ * Delete the given reconcile vendor credit.
+ */
+export function useDeleteReconcileVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/applied-to-bills/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund vendor transaction detail.
+ * @param {number} id
+ *
+ */
+export function useRefundVendorCreditTransaction(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_VENDOR_CREDIT_TRANSACTION, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/refunds/${id}`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.refund_credit,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/useRequest.js b/src/hooks/useRequest.js
index f27edbd4e..aae07bb13 100644
--- a/src/hooks/useRequest.js
+++ b/src/hooks/useRequest.js
@@ -12,7 +12,7 @@ export default function useApiRequest() {
   const setGlobalErrors = useSetGlobalErrors();
   const { setLogout } = useAuthActions();
   const currentLocale = getCookie('locale');
-  
+
   // Authentication token.
   const token = useAuthToken();
 
@@ -47,7 +47,7 @@ export default function useApiRequest() {
     instance.interceptors.response.use(
       (response) => response,
       (error) => {
-        const { status } = error.response;
+        const { status, data } = error.response;
 
         if (status >= 500) {
           setGlobalErrors({ something_wrong: true });
@@ -57,7 +57,19 @@ export default function useApiRequest() {
           setLogout();
         }
         if (status === 403) {
-          setGlobalErrors({ access_denied: true })
+          setGlobalErrors({ access_denied: true });
+        }
+        if (status === 400) {
+          const lockedError = data.errors.find(
+            (error) => error.type === 'TRANSACTIONS_DATE_LOCKED',
+          );
+          if (lockedError) {
+            setGlobalErrors({ transactionsLocked: { ...lockedError.data } });
+          }
+          if (data.errors.find(e => e.type === 'USER_INACTIVE')) {
+            setGlobalErrors({ userInactive: true });
+            setLogout();
+          }
         }
         return Promise.reject(error);
       },
@@ -65,27 +77,30 @@ export default function useApiRequest() {
     return instance;
   }, [token, organizationId, setGlobalErrors, setLogout]);
 
-  return React.useMemo(() => ({
-    http,
+  return React.useMemo(
+    () => ({
+      http,
 
-    get(resource, params) {
-      return http.get(`/api/${resource}`, params);
-    },
+      get(resource, params) {
+        return http.get(`/api/${resource}`, params);
+      },
 
-    post(resource, params, config) {
-      return http.post(`/api/${resource}`, params, config);
-    },
+      post(resource, params, config) {
+        return http.post(`/api/${resource}`, params, config);
+      },
 
-    update(resource, slug, params) {
-      return http.put(`/api/${resource}/${slug}`, params);
-    },
+      update(resource, slug, params) {
+        return http.put(`/api/${resource}/${slug}`, params);
+      },
 
-    put(resource, params) {
-      return http.put(`/api/${resource}`, params);
-    },
+      put(resource, params) {
+        return http.put(`/api/${resource}`, params);
+      },
 
-    delete(resource, params) {
-      return http.delete(`/api/${resource}`, params);
-    },
-  }), [http]);
+      delete(resource, params) {
+        return http.delete(`/api/${resource}`, params);
+      },
+    }),
+    [http],
+  );
 }
diff --git a/src/hooks/utils/index.js b/src/hooks/utils/index.js
index 5d189d42e..ba26d0fa2 100644
--- a/src/hooks/utils/index.js
+++ b/src/hooks/utils/index.js
@@ -6,4 +6,6 @@ export * from './useWhen';
 export * from './useRequestPdf';
 export * from './useAsync';
 export * from './useIntersectionObserver';
-export * from './useAbilityContext';
\ No newline at end of file
+export * from './useAbilityContext';
+export * from './useCustomCompareEffect';
+export * from './useDeepCompareEffect';
diff --git a/src/hooks/utils/useCustomCompareEffect.ts b/src/hooks/utils/useCustomCompareEffect.ts
new file mode 100644
index 000000000..c67e6488a
--- /dev/null
+++ b/src/hooks/utils/useCustomCompareEffect.ts
@@ -0,0 +1,44 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+type DepsEqualFnType<TDeps extends DependencyList> = (
+  prevDeps: TDeps,
+  nextDeps: TDeps,
+) => boolean;
+
+const useCustomCompareEffect = <TDeps extends DependencyList>(
+  effect: EffectCallback,
+  deps: TDeps,
+  depsEqual: DepsEqualFnType<TDeps>,
+) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
+      );
+    }
+
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        '`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
+      );
+    }
+
+    if (typeof depsEqual !== 'function') {
+      console.warn(
+        '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list',
+      );
+    }
+  }
+
+  const ref = useRef<TDeps | undefined>(undefined);
+
+  if (!ref.current || !depsEqual(deps, ref.current)) {
+    ref.current = deps;
+  }
+
+  useEffect(effect, ref.current);
+};
+
+export { useCustomCompareEffect };
diff --git a/src/hooks/utils/useDeepCompareEffect.ts b/src/hooks/utils/useDeepCompareEffect.ts
new file mode 100644
index 000000000..8504cc09f
--- /dev/null
+++ b/src/hooks/utils/useDeepCompareEffect.ts
@@ -0,0 +1,24 @@
+import { DependencyList, EffectCallback } from 'react';
+import isDeepEqualReact from 'fast-deep-equal/react';
+import { useCustomCompareEffect } from './useCustomCompareEffect';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
+      );
+    }
+
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        '`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
+      );
+    }
+  }
+  useCustomCompareEffect(effect, deps, isDeepEqualReact);
+};
+
+export { useDeepCompareEffect };
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index dde1374c1..97c82f290 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -11,7 +11,7 @@
   "field_name_must_be_number": "field_name_must_be_number",
   "name": "اسم",
   "quick_find": "البحث السريع",
-  "reference": "المرجعي #",
+  "reference": "رقم المرجعي ",
   "date": "تاريخ",
   "description": "الوصف",
   "from_date": "من التاريخ",
@@ -370,7 +370,7 @@
   "payment_account_": "حساب الدفع",
   "expense_category": "تصنيف المصاريف",
   "total_currency": "الإجمالي ({currency})",
-  "amount_currency": "العملة كمية})",
+  "amount_currency": "كمية ({currency})",
   "publish_expense": "نشر المصروف",
   "edit_expense": "تعديل المصروف",
   "delete_expense": "حذف المصروف",
@@ -512,7 +512,7 @@
   "invoice_date": "تاريخ الفاتورة",
   "due_date": "تاريخ الاستحقاق",
   "invoice_date_": "تاريخ الفاتورة",
-  "invoice_no": "فاتورة #",
+  "invoice_no": " رقم فاتورة",
   "invoice_no__": "رقم الفاتورة",
   "invoice_no_": "رقم الفاتورة",
   "due_date_": "تاريخ الاستحقاق",
@@ -532,7 +532,7 @@
   "once_delete_this_invoice_you_will_able_to_restore_it": "بمجرد حذف هذه الفاتورة ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذه الفاتورة؟",
   "receipts_list": "قائمة الإيصالات",
   "receipts": "الإيصالات",
-  "receipt": "إيصال #",
+  "receipt": "رقم إيصال ",
   "receipt_date_": "تاريخ استلام",
   "receipt_date": "تاريخ استلام",
   "deposit_account_": "حساب إيداع",
@@ -664,7 +664,7 @@
   "bill_number_exists": "رقم الفاتورة موجود",
   "ok": "نعم!",
   "quantity_cannot_be_zero_or_empty": "لا يمكن أن تكون الكمية صفراً أو فارغة.",
-  "customer_email": "البريد إلكتروني الزبون",
+  "customer_email": "البريد إلكتروني ",
   "customer_phone_number": "رقم هاتف الزبون",
   "opening_balance_at": "الرصيد الافتتاحي عند",
   "opening_balance": "الرصيد الافتتاحي",
@@ -689,7 +689,7 @@
   "customer_has_sales_invoices": "لا يمكن حذف الزبون لديه فواتير المبيعات مرتبطة.",
   "account_name_is_already_used": "اسم الحساب مستخدم بالفعل.",
   "vendors": "الموردين",
-  "vendor_email": "البريد إلكتروني المورد",
+  "vendor_email": "البريد إلكتروني",
   "new_vendor": "مورد جديد",
   "edit_vendor": "تعديل المورد",
   "delete_vendor": "حذف المورد",
@@ -714,32 +714,33 @@
   "email_is_already_used": "البريد الإلكتروني مستخدم بالفعل.",
   "the_item_categories_has_been_deleted_successfully": "تم حذف تصنيفات المنتجات بنجاح.",
   "receivable_accounts_should_assign_with_customers": "حسابات القبض مع العملاء.",
-  "delivered": "تم التوصيل",
+  "delivered": "تم التسليم",
   "save_and_deliver": "حفظ وتسليم",
   "deliver_and_new": "تسليم وجديد",
   "deliver_continue_editing": "تسليم (متابعة التعديل)",
   "due_in": "موعد التسليم {due} يوم.",
   "day_partially_paid": "مدفوعة جزئياً ، {due} مستحق.",
   "overdue_by": "تأخرت بحلول {overdue} يوم.",
-  "paid": "مدفوع",
+  "paid": "تم الدفع",
+  "due": "مستحقه",
   "your_account_has_been_locked": "تم قفل حسابك بسبب محاولات تسجيل الدخول الفاشلة المتكررة. يرجى الانتظار بضع دقائق قبل المحاولة مرة أخرى.",
   "the_invoice_has_been_delivered_successfully": "تم تسليم الفاتورة بنجاح.",
   "are_sure_to_deliver_this_invoice": "هل أنت متأكد أنك تريد تسليم هذه الفاتورة؟",
   "mark_as_delivered": "وضع علامة \"تم التسليم\"",
   "deliver": "ايصال",
   "mark_as_closed": "وضع علامة مغلق",
-  "mark_as_opened": "وضع علامة مفتوح",
+  "mark_as_open": "وضع علامة مفتوح",
   "save_close": "حفظ وإغلاق",
   "save_open": "حفظ وفتح",
   "close_and_new": "قريب وجديد",
   "close_continue_editing": "إغلاق (متابعة التعديل)",
   "the_receipt_has_been_closed_successfully": "تم إغلاق الإيصال بنجاح.",
   "are_sure_to_close_this_receipt": "هل أنت متأكد أنك تريد إغلاق هذا الإيصال؟",
-  "closed": "مغلق",
+  "closed": "مغلقة ",
   "open_and_new": "مفتوح وجديد",
   "open_continue_editing": "فتح (متابعة التعديل)",
   "the_bill_has_been_opened_successfully": "تم فتح الفاتورة بنجاح.",
-  "open": "فتح",
+  "open": "مفتوحة ",
   "are_sure_to_open_this_bill": "هل أنت متأكد أنك تريد فتح هذه الفاتورة؟",
   "opened": "مفتوح",
   "the_estimate_has_been_delivered_successfully": "تم تسليم العرض بنجاح.",
@@ -784,6 +785,8 @@
   "the_adjustment_transaction_has_been_created_successfully": "تم إضافة معاملة تسوية المخزون علي الصنف بنجاح.",
   "the_adjustment_transaction_has_been_deleted_successfully": "تم حذف معاملة تسوية المخزون بنجاح.",
   "once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it": "بمجرد حذف هذا المخزون تعديلًا ، لن تتمكن من استعادته لاحقًا. هل أنت متأكد أنك تريد حذف هذه الفاتورة؟",
+  "inventory_adjustment.publish.success_message": "تم نشر معاملة تسوية المخزون بنجاح. ",
+  "inventory_adjustment.publish.alert_message": "هل أنت متأكد أنك تريد نشر معاملة تسوية المخزون؟",
   "select_adjustment_account": "حدد حساب التسوية",
   "qty": "الكمية الحالية",
   "money_format": "شكل القيم المالية",
@@ -1142,7 +1145,6 @@
   "Getting started": "Getting started",
   "Congratulations": "Congratulations",
   "payment_has_been_done_successfully": "Payment has been done successfully.",
-  "manual_journal_number": "Manual journal {number}",
   "conditions_and_terms": "Conditions and terms",
   "allocate_landed_coast": "تحميل تكلفة اضافية",
   "transaction_date": "تاريخ المعاملة",
@@ -1221,6 +1223,7 @@
   "payment_receive.details.payment_number": "رقم العملية",
   "payment_receive.details.total": "إجمالي",
   "payment_receive.details.subtotal": "المجموع",
+  "payment_receive.details.statement": "بيان",
   "estimate.details.estimate_number": "رقم العرض",
   "estimate.details.subtotal": "المجموع",
   "estimate.details.total": "إجمالي",
@@ -1228,11 +1231,14 @@
   "estimate.details.due_amount": "مبلغ المستحق",
   "estimate.details.note": "ملاحظة",
   "estimate.details.created_at": "أنشئت في",
+  "estimate.details.terms_conditions": "الشروط والأحكام",
   "receipt.details.receipt_number": "رقم إيصال",
   "receipt.details.subtotal": "المجموع",
   "receipt.details.total": "إجمالي",
   "receipt.details.payment_amount": "مبلغ المدفوع",
   "receipt.details.due_amount": "مبلغ المستحق",
+  "receipt.details.receipt_message": "رسالة إيصال",
+  "receipt.details.statement": "بيان",
   "receipt.details.created_at": "أنشئت في",
   "bill.details.bill_number": "رقم الفاتورة",
   "bill.details.created_at": "أنشئت في",
@@ -1240,11 +1246,15 @@
   "bill.details.subtotal": "المجموع",
   "bill.details.payment_amount": "مبلغ المدفوع",
   "bill.details.due_amount": "مبلغ المستحق",
+  "bill.drawer.title": "تفاصيل فاتورة الشراء {number}",
   "invoice.details.created_at": "أنشئت في",
   "invoice.details.total": "إجمالي",
   "invoice.details.subtotal": "المجموع",
   "invoice.details.due_amount": "مبلغ المستحق",
   "invoice.details.payment_amount": "مبلغ المدفوع",
+  "invoice.details.invoice_no": "رقم الفاتورة",
+  "invoice.details.invoice_message": " رسالة الفاتورة ",
+  "invoice_details.drawer.title": "تفاصيل الفاتورة البيع ({invoiceNumber}) ",
   "expense.details.subtotal": "المجموع",
   "expense.details.total": "إجمالي",
   "manual_journal.details.subtotal": "المجموع",
@@ -1417,7 +1427,7 @@
   "cash_flow_transaction.money_out": "سحب  من حساب  {value}",
   "cash_flow_transaction.other_income_account": " حساب الإيرادات الأخرى ",
   "cash_flow_transaction.other_expense_account": "حساب مصاريف اخري",
-  "save_and_publish": "احفظ وانشر",
+  "save_and_publish": "حفظ ونشر",
   "cash_flow_transaction.label_transfer_from_account": "تحويل من الحساب ",
   "cash_flow_transaction.label_transfer_to_account": "تحويل إلى الحساب ",
   "cash_flow_transaction.label_current_account": "حساب الحالي",
@@ -1436,8 +1446,8 @@
   "cash_flow_transaction.switch_item": " {value} معاملة علي حساب",
   "cash_flow_transaction.balance_in_bigcapital": "الرصيد في Bigcapital",
   "bad_debt.dialog.written_off_amount": "المبلغ المشطوب",
-  "bad_debt.dialog.bad_debt": "الديون المعدومة",
-  "bad_debt.dialog.cancel_bad_debt": "إلغاء الديون المعدومة",
+  "bad_debt.dialog.bad_debt": "دين معدوم",
+  "bad_debt.dialog.cancel_bad_debt": "إلغاء الدين المعدوم",
   "bad_debt.dialog.header_note": "يمكن للبائع تحميل مبلغ الفاتورة على حساب مصروفات الديون المعدومة عندما يكون من المؤكد أن الفاتورة لن يتم دفعها.",
   "bad_debt.dialog.success_message": "تم شطب فاتورة البيع المقدمة بنجاح.",
   "bad_debt.cancel_alert.success_message": "تم إلغاء شطب فاتورة البيع المقدمة بنجاح.",
@@ -1482,21 +1492,266 @@
   "sms_notification.payment_details.type": "شكر علي عملية الدفع",
   "sms_notification.receipt_details.type": "تفاصيل إيصال البيع",
   "personal": "المحمول",
-  "list.create":"إضافة {value}",
-  "roles.label":"دور المستخدمين",
-  "roles.column.name":"اسم الدور",
-  "roles.column.description":"الوصف",
-  "roles.edit_roles":" تعديل دور المستخدم",
-  "roles.delete_roles":"حذف دور المستخدم",
-  "roles.label.role_name":"دور المستخدم",
-  "roles.error.role_is_predefined":"دور المستخدم معرَّف مسبقًا ، ولا يمكنك حذف دور المستخدمين المحددة مسبقًا ",
-  "roles.error.you_cannot_change_your_own_role":"لا يمكنك تغيير دور المستخدم الخاص بك.",
-  "roles.label.role_name_":"اسم دور المستخدم ",
-  "roles.permission_schema.success_message":"تم اضافة دور المستخدم بنجاح.",
-  "roles.permission_schema.upload_message":"تم تحديث دور المستخدم بنجاح.",
-  "roles.permission_schema.delete.alert_message":"تم حذف دور المستخدم بنجاح. ",
-  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":"بمجرد حذف دور المستخدم ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذا الدور؟",
-  "users.column.role_name":"دور المستخدم",
-  "roles.error.you_cannot_edit_predefined_roles":"لا يمكنك تعديل أدوار المستخدم المحددة مسبقا.",
-  "roles.error.you_cannot_delete_predefined_roles":"لا يمكنك حذف أدوار المستخدم المحددة مسبقا"
+  "list.create": "إضافة {value}",
+  "roles.label": "دور المستخدمين",
+  "roles.column.name": "اسم الدور",
+  "roles.column.description": "الوصف",
+  "roles.edit_roles": " تعديل دور المستخدم",
+  "roles.delete_roles": "حذف دور المستخدم",
+  "roles.label.role_name": "اسم الدور",
+  "roles.error.role_is_predefined": "دور المستخدم معرَّف مسبقًا ، ولا يمكنك حذف دور المستخدمين المحددة مسبقًا ",
+  "roles.error.you_cannot_change_your_own_role": "لا يمكنك تغيير دور المستخدم الخاص بك.",
+  "roles.label.role_name_": "اسم دور المستخدم ",
+  "roles.permission_schema.success_message": "تم اضافة دور المستخدم بنجاح.",
+  "roles.permission_schema.upload_message": "تم تحديث دور المستخدم بنجاح.",
+  "roles.permission_schema.delete.alert_message": "تم حذف دور المستخدم بنجاح. ",
+  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it": "بمجرد حذف دور المستخدم ، لن تتمكن من استعادته لاحقًا. هل أنت متأكد أنك تريد حذف هذا الدور؟",
+  "users.column.role_name": "دور المستخدم",
+  "roles.error.you_cannot_edit_predefined_roles": "لا يمكنك تعديل أدوار المستخدم المحددة مسبقا.",
+  "roles.error.you_cannot_delete_predefined_roles": "لا يمكنك حذف أدوار المستخدم المحددة مسبقا",
+  "roles.error.you_cannot_delete_role_that_associated_to_users": "لا يمكن حذف دور المستخدم لأنه لديه مستخدمين مرتبطة به.",
+  "payment_transactions": "معاملات الدفع",
+  "sidebar_credit_note": "إشعارات الدائن",
+  "credit_note.label_create_note_list": "قائمة إشعارات الدائن",
+  "credit_note.label.new_credit_note": "إشعار دائن جديد",
+  "credit_note.label.edit_credit_note": "تعديل إشعار دائن ",
+  "credit_note.label_credit_note": " رقم إشعار الدائن",
+  "credit_note.action.refund_credit_note": " استرجاع الأموال",
+  "credit_note.action.reconcile_with_invoices": "تسوية فواتير المبيعات ",
+  "credit_note.action.make_as_open": "وضع علامة مفتوح",
+  "credit_note.action.delete_credit_note": " حذف إشعار الدائن ",
+  "credit_note.action.edit_credit_note": "تعديل إشعار دائن",
+  "credit_note.column.credit_note_no": "إشعار الدائن #",
+  "credit_note.column.credit_date": "تاريخ دائن",
+  "credit_note.empty_status.title": "خفض أرصدة الزبائن عن طريقة إنشاء إشعار دائن",
+  "credit_note.empty_status.description": "إشعار دائن وهو مستند تجاري يعطى للزبون عند إرجاع البضائع ، مع امكانية اضافة عملية استرجاع اموال او إضافته إلي فواتير البيع التي لم تدفع.",
+  "credit_note.label_credit_note_date": "تاريخ إشعار الدائن",
+  "credit_note.label_amount_to_credit": "قيمة الدائنة",
+  "credit_note.label_credit_note_details": "تفاصيل إشعار الدائن",
+  "credit_note.label_customer_note": "ملاحظة الزبون",
+  "credit_note.once_delete_this_credit_note": " بمجرد حذف إشعار الدائن ، لن تتمكن من استعادته لاحقًا. هل أنت متأكد أنك تريد حذف هذا إشعار",
+  "credit_note.alert.delete_message": "تم حذف إشعار الدائن بنجاح",
+  "credit_note.label": "إشعارات الدائن",
+  "credit_note.success_message": "تم إنشاء إشعار الدائن بنجاح.",
+  "credit_note.edit_success_message": "تم تعديل إشعار الدائن  بنجاح.",
+  "credit_note_number_settings": "إعدادات رقم إشعار الدائن",
+  "credit_note.auto_increment.auto": "يتم تعيين أرقام إشعارات الدائن على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "credit_note.auto_increment.manually": "يتم تعيين أرقام إشعارات الدائن على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "setting_your_auto_generated_credit_note_number": "تعيين رقم إشعار الدائن الذي تم إنشاؤه تلقائيًا",
+  "credit_note.drawer.label_credit_note_no": "رقم الإشعار",
+  "credit_note.drawer.label_credit_note_date": "تاريخ الإشعار",
+  "credit_note.drawer.label_credits_remaining": "الرصيد المتبقي ",
+  "credit_note.drawer.label_created_at": "أنشئت في",
+  "credit_note.drawer.label_total": "إجمالي",
+  "credit_note.drawer.label_subtotal": "المجموع",
+  "credit_note.drawer.label_refund_transactions": "معاملات استرجاع الأموال ",
+  "credit_note.drawer.label_invoices_reconciled": "تسوية فواتير المبيعات",
+  "sidebar_vendor_credits": "إشعارات المدين",
+  "vendor_credits.lable_vendor_credit_list": "قائمة إشعارات المدين",
+  "vendor_credits.label.new_vendor_credit": "إشعار مدين جديد",
+  "vendor_credits.label.edit_vendor_credit": "تعديل إشعار مدين",
+  "vendor_credits.label.amount_to_credit": "قيمة الدائنة",
+  "vendor_credits_note.label_credit_note_details": "تفاصيل إشعار المدين",
+  "vendor_credits.column.vendor_credit_no": "رقم إشعار المدين ",
+  "vendor_credits.status_open": "مفتوحة ",
+  "vendor_credits.status_closed": "مغلقة",
+  "vendor_credits.action.edit_vendor_credit": "تعديل إشعار مدين",
+  "vendor_credits.action.refund_vendor_credit": "استرجاع الأموال",
+  "vendor_credits.action.delete_vendor_credit": "حذف إشعار المدين",
+  "vendor_credits.action.mark_as_open": "وضع علامة مفتوح",
+  "vendor_credits.action.reconcile_with_bills": "تسوية فواتير الشراء ",
+  "vendor_credits.success_message": "تم إنشاء إشعار المدين بنجاح.",
+  "vendor_credits.edit_success_message": "تم تعديل إشعار المدين  بنجاح.",
+  "vendor_credits.alert.delete_message": "تم حذف إشعار المدين بنجاح",
+  "vendor_credits.note.once_delete_this_vendor_credit_note": " بمجرد حذف إشعار المدين ، لن تتمكن من استعادته لاحقًا. هل أنت متأكد أنك تريد حذف هذا إشعار ",
+  "vendor_credits.empty_status.title": "خفض أرصدة الموردين عن طريق إنشاء إشعار مدين",
+  "vendor_credits.empty_status.description": "إشعار المدين هو المستند الذي يرسل إلى المورد و يجعله مديناً للمنشأة ، فهو إثبات من قبل المنشأة أن لها حق يجب أخذه من المورد.",
+  "vendor_credit_number_settings": "إعدادات رقم إشعار المدين",
+  "vendor_credit.auto_increment.auto": "يتم تعيين أرقام إشعارات المدين على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "vendor_credit.auto_increment.manually": "يتم تعيين أرقام إشعارات المدين على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "setting_your_auto_generated_vendor_credit_number": "تعيين رقم إشعار المدين الذي تم إنشاؤه تلقائيًا",
+  "vendor_credit.label": "إشعارات المدين",
+  "vendor_credit.drawer_vendor_credit_detail": "تفاصيل إشعار المدين  ({vendorNumber})",
+  "vendor_credit.drawer.label_vendor_credit_no": "رقم الإشعار",
+  "vendor_credit.drawer.label_vendor_credit_date": "تاريخ الإشعار",
+  "vendor_credit.drawer.label_credits_remaining": "الرصيد المتبقي",
+  "vendor_credit.drawer.label_created_at": "أنشئت في",
+  "vendor_credit.drawer.label_total": "إجمالي",
+  "vendor_credit.drawer.label_subtotal": "المجموع",
+  "vendor_credit.drawer.label_refund_transactions": "معاملات استرجاع الأموال ",
+  "vendor_credit.drawer.label_bills_reconciled": "تسوية فواتير الشراء",
+  "refund": "استرجاع",
+  "landed_cost.dialog.label_select_transaction": "حدد المعاملة ",
+  "landed_cost.dialog.label_select_transaction_entry": "حدد سطر المعاملة ",
+  "refund_credit_note.dialog.label": "استرجاع اموال",
+  "refund_credit_note.dialog.success_message": "تم انشاء معاملة استرجاع الاموال لإشعار الدائن بنجاح.",
+  "refund_credit_note.dialog.refund_date": "تاريخ الاسترجاع",
+  "refund_credit_note.dialog.amount": "القيمة",
+  "refund_credit_note.dialog.description": "الوصف",
+  "refund_credit_note.dialog.from_account": "حساب السحب",
+  "refund_vendor_credit.dialog.label": "استرجاع اموال",
+  "refund_vendor_credit.dialog.success_message": "تم انشاء معاملة استرجاع الاموال لإشعار المدين بنجاح.",
+  "refund_vendor_credit.dialog.refund_date": "تاريخ الاسترجاع",
+  "refund_vendor_credit.dialog.amount": "القيمة",
+  "refund_vendor_credit.dialog.description": "الوصف",
+  "refund_vendor_credit.dialog.deposit_to_account": "حساب الإيداع",
+  "refund_credit_transactions.column.amount_refunded": "قيمة",
+  "refund_credit_transactions.column.withdrawal_account": "حساب السحب",
+  "refund_credit_transactions.alert.delete_message": "تم حذف معاملة استرجاع الاموال لإشعار الدائن بنجاح.",
+  "refund_credit_transactions.once_your_delete_this_refund_credit_note": "بمجرد حذف معاملة استرجاع الاموال ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذه المعاملة؟",
+  "refund_vendor_credit.column.amount": "القيمة",
+  "refund_vendor_credit.column.withdrawal_account": "حساب السحب",
+  "refund_vendor_credit_transactions.alert.delete_message": "تم حذف معاملة استرجاع الاموال لإشعار المدين بنجاح.",
+  "refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit": "بمجرد حذف معاملة استرجاع الاموال ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذه المعاملة؟",
+  "credit_note_opened.alert.success_message": "تم فتح إشعار الدائن بنجاح.",
+  "credit_note_opened.are_sure_to_open_this_credit": "هل أنت متأكد أنك تريد فتح هذا إشعار الدائن؟",
+  "reconcile_credit_note.label": "تسوية إشعار الدائن بالفواتير الشراء",
+  "reconcile_credit_note.dialog.total_amount_to_credit": "المبلغ الإجمالي",
+  "reconcile_credit_note.dialog.credits_balance": "رصيد الإشعار:",
+  "reconcile_credit_note.dialog.remaining_credits": "قيمة المتبقية من الإشعار",
+  "reconcile_credit_note.column.remaining_amount": "المبلغ المتبقي",
+  "reconcile_credit_note.column.amount_to_credit": " قيمة التسوية",
+  "reconcile_credit_note.success_message": "تم تطبيق معاملة تسوية إشعار الدائن على الفواتير المقدمة بنجاح. ",
+  "reconcile_credit_note.alert.there_is_no_open_sale_invoices": "لا توجد فواتير بيع مفتوحة مع نفس الزبون إشعار الدائن.",
+  "reconcile_credit_note.alert.success_message": "تم حذف معاملة تسوية إشعار الدائن بنجاح.",
+  "reconcile_credit_note.once_you_delete_this_reconcile_credit_note": "بمجرد حذف معاملة تسوية إشعار الدائن ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذه المعاملة؟",
+  "reconcile_vendor_credit.dialog.label": " تسوية إشعار المدين بالفواتير البيع",
+  "reconcile_vendor_credit.dialog.success_message": "تم تطبيق معاملة تسوية إشعار المدين على الفواتير المقدمة بنجاح",
+  "reconcile_vendor_credit.alert.there_is_no_open_bills": "لا توجد فواتير شراء مفتوحة مع نفس المورد إشعار المدين.",
+  "reconcile_vendor_credit.dialog.total_amount_to_credit": "المبلغ الإجمالي",
+  "reconcile_vendor_note.dialog.credits_balance": "رصيد الإشعار:",
+  "reconcile_vendor_credit.dialog.remaining_credits": "قيمة المتبقية من الإشعار",
+  "reconcile_vendor_credit.column.bill_number": "رقم الفاتورة",
+  "reconcile_vendor_credit.column.remaining_amount": "المبلغ المتبقي",
+  "reconcile_vendor_credit.column.amount_to_credit": " قيمة التسوية",
+  "reconcile_vendor_credit.alert.success_message": "تم حذف معاملة تسوية إشعار المدين بنجاح.",
+  "reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit": "بمجرد حذف معاملة تسوية إشعار الدائن ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذه المعاملة؟",
+  "credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_refund": "لا يمكن حذف إشعار الدائن لديها معاملات استرجاع الأموال مرتبطة بيها",
+  "credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_invoice": "لا يمكن حذف إشعار الدائن لديها معاملات تسوية الفواتير مرتبطة بيها.",
+  "invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled": "لا يمكنك حذف فاتورة بيع تمت تسويتها مع معاملة إشعار الدائن.",
+  "vendor_credit.error.you_couldn_t_delete_vendor_credit_has_reconciled": "لا يمكن حذف إشعار المدين لديها معاملات تسوية الفواتير مرتبطة بيها.",
+  "vendor_credit.error.you_couldn_t_delete_vendor_credit_that_has_associated_refund": "لا يمكن حذف إشعار المدين لديها معاملات استرجاع الأموال مرتبطة بيها.",
+  "bills.error.you_couldn_t_delete_bill_has_reconciled_with_vendor_credit": "لا يمكنك حذف فاتورة شراء تمت تسويتها مع معاملة إشعار المدين.",
+  "vendor_credit_opened.alert.success_message": "تم فتح المدين بنجاح.",
+  "vendor_credit_opened.are_sure_to_open_this_credit": "هل أنت متأكد أنك تريد فتح هذا إشعار؟",
+  "sidebar.transactions_locaking": "قفل المعاملات",
+  "locking_transactions.dialog.label": "قفل المعاملات ",
+  "locking_transactions.dialog.locking_date": "تاريخ القفل ",
+  "locking_transactions.dialog.reason": "سبب القفل ",
+  "locking_transactions.dialog.success_message": "تم إرسال قفل جميع المعاملات بنجاح.",
+  "unlocking_transactions.dialog.label": "إلغاء قفل المعاملات",
+  "unlocking_transactions.dialog.reason": "سبب إلغاء القفل",
+  "unlocking_transactions.dialog.success_message": "تم إلغاء قفل المعاملات بنجاح.",
+  "unlocking_partial_transactions.dialog.label": "إلغاء قفل المعاملات الجزئية ",
+  "unlocking_partial_transactions.dialog.from_date": "إلغاء قفل من التاريخ",
+  "unlocking_partial_transactions.dialog.to_date": "حتى تاريخ",
+  "unlocking_partial_transactions.dialog.reason": "سبب إلغاء القفل",
+  "unlocking_partial_transactions.dialog.success_message": "تم إلغاء قفل المعاملات بشكل جزئي بنجاح. ",
+  "unlocking_full_transactions.dialog.label": "إلغاء قفل المعاملات بالكامل ",
+  "unlocking_full_transactions.dialog.reason": "سبب إلغاء القفل",
+  "unlocking_partial_transactions.alert.cancel_message": "تم إلغاء فتح المعاملات الجزئي بنجاح.",
+  "unlocking_partial_transactions.alert.message": "هل أنت متأكد تريد إلغاء قفل الجزئي لهذه الوحدة؟ ",
+  "yes": "نعم",
+  "transactions_locking.lock_all_transactions_at_once": "قفل جميع المعاملات دفعة واحدة ←",
+  "transactions_locking.lock_modules_individually": "قفل الوحدات بشكل فردي ←",
+  "transactions_locking_lock_all_transactions_at_once": "قفل جميع المعاملات دفعة واحدة.",
+  "transactions_locking.lock": "قفل",
+  "transactions_locking.unlock": "الغاء القفل",
+  "transactions_locking.full_unlock": "إلغاء القفل الكامل",
+  "transactions_locking.paetial_unlock": "إلغاء القفل الجزئي",
+  "transactions_locking.cancel_partial_unlock": "Cancel Partial Unlock",
+  "transactions_locking.of_the_module_locked_to": "تم قفل معاملات الوحدة حتى <strong>{value}</strong>.",
+  "transactions_locking.lock_reason": "<strong>سبب القفل </strong>: {value}.",
+  "transactions_locking.partial_unlocked_from": "غير مقفلة جزئيًا من <strong>{fromDate}</strong> إلى  <strong>{toDate}</strong>.",
+  "transactions_locking.unlock_reason": "<strong> سبب إلغاءالقفل:</strong> {value}.",
+  "transactions_locking.callout.lock_individual.desc": "يمكنك قفل أو إلغاء قفل المعاملات لكل وحدة على حدا بدلاً من قفل المعاملات لجميع المعاملات مرة واحدة.",
+  "transactions_locking.callout.lock_all_at_once.desc": "يمكن قفل او إلغاء قفل المعاملات لكل الوحدات مرة واحدة بدلاً من قفلها لكل وحدة بشكل جزئي.",
+  "transactions_locking.long_description": "يمكنك قفل المعاملات المالية حتى لا يتمكن المستخدمون من تعديل أو حذف أو إضافة معاملات جديدة خلال الفترة الماضية ، ولكن لا يزال لدي المستخدمين إمكانية إضافة عمليات مالية فواتير الشراء أو البيع كمسودة  لن يؤثر إضافتها على نتائج التقارير المالية. عادةً ما يحدد تاريخ القفل بعد ما يتم من تدقيق من المعاملات في نهاية الشهر أو السنة.",
+  "transactions_locking.you_should_unlock_all_transactions_at_once_before": ".يجب عليك إلغاء قفل جميع المعاملات مرة واحدة ، بدلاً من قفل المعاملات كل وحدة جزئيًا",
+  "transactions_locking.lock_individual_modules": "قفل الوحدات بشكل منفرد ",
+  "invoice_transactions.column.withdrawal_account": "حساب السحب",
+  "invoice_transactions.action.delete_transaction": "حذف المعاملة ",
+  "invoice_transactions.action.edit_transaction": " تعديل المعاملة",
+  "bill_transactions.column.deposit_account": "حساب إيداع",
+  "transactions_locking.lock_item.no_lock": "لا توجد معاملات مقفلة في هذه الوحدة.",
+  "overview": "نظرة عامة",
+  "transactions": "معاملات ",
+  "item.drawer_transactions_by": " عرض معاملات:",
+  "item.drawer_quantity_sold": "الكمية المباعة",
+  "journal_entries.amount_displayed_base_currency": "يتم عرض المبلغ بالعملة الأساسية الخاصة بك ",
+  "inventory_adjustment.column.product": "المنتج",
+  "invoice.convert_to_credit_note": "تحويل إلى إشعار دائن",
+  "bill.convert_to_credit_note": "تحويل إلى إشعار مدين",
+  "bill.allocate_landed_coast": "تحميل تكلفة اضافية",
+  "overdue": "متأخرّة",
+  "invite_user.label.role_name": "دور المستخدم",
+  "permissions.column.view": "عرض",
+  "permissions.column.full_access": "تحكم كامل",
+  "permissions.column.delete": "حذف",
+  "permissions.column.edit": "تعديل",
+  "permissions.column.create": "اضافة",
+  "permissions.column.written_off_invoice": "شطب  فاتورة",
+  "permissions.column.refund_credit_note": "استرجاع الأموال",
+  "permissions.column.refund_vendor_credit": "استرجاع الأموال",
+  "permissions.column.transactions_locking": "قفل المعاملات",
+  "permissions.items_inventory": "منتجات والمخزون",
+  "permissions.inventory_adjustment": "تسويات المخزون",
+  "permissions.items": "المنتجات",
+  "permissions.contacts": "جهات الاتصال",
+  "permissions.customers": "العملاء",
+  "permissions.vendors": "الموردين",
+  "permissions.sales": "المبيعات",
+  "permissions.sale_invoice": "الفواتير ",
+  "permissions.sale_estimate": "العروض",
+  "permissions.sale_receipt": "الإيصالات",
+  "permissions.credit_note": "إشعارات الدائن",
+  "permissions.payment_receive": "سندات الزبائن",
+  "permissions.purchases": "المشتريات",
+  "permissions.bills": "فواتير الشراء",
+  "permissions.vendor_credits": "إشعارات المدين",
+  "permissions.payment_made": "سندات الموردين",
+  "permissions.financial_accounting": "الأمور المالية",
+  "permissions.manual_journals": "القيود اليدوية",
+  "permissions.chart_of_accounts": "شجرة الحسابات",
+  "permissions.expenses": "المصاريف",
+  "permissions.reports": "التقارير",
+  "permissions.financial_reports": "تقارير مالية",
+  "permissions.balance_sheet": "الميزانية العمومية",
+  "permissions.profit_loss_sheet": "قائمة الدخل",
+  "permissions.trial_balance_sheet": "ميزان المراجعة",
+  "permissions.cash_flow_sheet": "قائمة التدفقات النقدية",
+  "permissions.journal_sheet": "دفتر اليومية العامة",
+  "permissions.general_ledger": "دفتر الأستاذ العام",
+  "permissions.a_r_aging_summary_report": "ملخص اعمار الديون للذمم المدينة",
+  "permissions.a_p_aging_summary_report": "ملخص اعمار الديون للذمم الدائنة",
+  "permissions.purchases_by_items": "المشتريات حسب المنتجات",
+  "permissions.sales_by_items": "المبيعات حسب المنتجات",
+  "permissions.customers_transactions": "معاملات الزبائن",
+  "permissions.vendors_transactions": "معاملات الموردين",
+  "permissions.customers_summary_balance": "ملخص رصيد الزبائن",
+  "permissions.vendors_summary_balance": "ملخص رصيد الموردين",
+  "permissions.inventory_valuation_summary": "ملخص تقييم المخزون ",
+  "permissions.inventory_items_details": "تفاصيل منتج المخزون",
+  "permissions.cashflow_account_transactions": "معاملات حسابات التدفقات النقدية",
+  "permissions.more_permissions": "عرض المزيد ",
+  "estimate.status.expired": "منتهية الصلاحية",
+  "refund_credit.drawer.title": " تفاصيل استرجاع الأموال لإشعار الدائن ",
+  "refund_credit.drawer.label.amount": "القيمة",
+  "refund_credit.drawer.label.credit_note_no": "رقم الإشعار",
+  "refund_credit.drawer.label.withdrawal_account": "حساب السحب",
+  "refund_credit.drawer.label.reference_no": "رقم المرجع",
+  "refund_credit.drawer.label.description": "الوصف",
+  "refund_vendor_credit.drawer.title": " تفاصيل استرجاع الأموال لإشعار المدين ",
+  "refund_vendor_credit.drawer.label.amount": "القيمة",
+  "refund_vendor_credit.drawer.label.vendor_credit_no": "رقم الإشعار",
+  "refund_vendor_credit.drawer.label.deposit_account": "حساب إيداع",
+  "refund_vendor_credit.drawer.label.reference_no": "رقم المرجع",
+  "refund_vendor_credit.drawer.label.description": "الوصف",
+  "estimate.drawer.title": "تفاصيل العرض ({number})",
+  "receipt.drawer.title": "تفاصيل الإيصال ({number})",
+  "credit_note.drawer.title": "تفاصيل إشعار الدائن ({number})",
+  "payment_receive.drawer.title": "تفاصيل سند الزبون ({number})",
+  "payment_made.drawer.title": "تفاصيل سند المورد {number}",
+  "manual_journal.drawer.title": "تفاصيل قيد يدوي ({number})",
+  "expense.drawer.title": " تفاصيل المصروف"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 8613f21bf..14a6cca5b 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -519,6 +519,7 @@
   "delete_invoice": "Delete Invoice",
   "new_invoice": "New Invoice",
   "invoice_list": "Invoice List",
+  "invoice_reference_no": "Reference #",
   "the_invoice_has_been_edited_successfully": "The invoice #{number} has been edited successfully.",
   "the_invoice_has_been_created_successfully": "The invoice #{number} has been created successfully.",
   "the_invoice_has_been_deleted_successfully": "The invoice has been deleted successfully.",
@@ -708,13 +709,13 @@
   "day_partially_paid": "Partially paid, {due} due.",
   "overdue_by": "Overdue by {overdue} day.",
   "paid": "Paid",
+  "due": "Due",
   "your_account_has_been_locked": "Your account has been locked due to repeated failed login attempts. Please wait a few minutes before trying again.",
   "the_invoice_has_been_delivered_successfully": "The invoice has been delivered successfully.",
   "are_sure_to_deliver_this_invoice": "Are you sure you want to deliver this invoice?",
   "mark_as_delivered": "Mark as delivered",
   "deliver": "Deliver",
   "mark_as_closed": "Mark as closed",
-  "mark_as_opened": "Mark as opened",
   "save_close": "Save & Close",
   "save_open": "Save & Open",
   "close_and_new": "Close and new",
@@ -758,6 +759,7 @@
   "inventory_adjustments": "Inventory adjustments",
   "make_adjustment": "Make an adjustment",
   "adjustment_type": "Adjustment type",
+  "mark_as_open": "Make as Open",
   "decrement": "Decrement",
   "new_quantity": "New quantity",
   "reason": "Reason",
@@ -910,7 +912,7 @@
   "drag_drop_files_here_or_click_here": "Drag/Drop files here or click here.",
   "enter_an_item": "Enter an item...",
   "due_amount": "Due Amount",
-  "invoice_details": "Invoice details",
+  "invoice_details.drawer.title": "Invoice details ({invoiceNumber})",
   "setting_your_auto_generated_estimate_number": "Setting your auto-generated estimate number",
   "setting_your_auto_generated_journal_number": "Setting your auto-generated journal number",
   "setting_your_auto_generated_invoice_number": "Setting your auto-generated invoice number",
@@ -1114,7 +1116,6 @@
   "Initializing": "Initializing",
   "Getting started": "Getting started",
   "Congratulations": "Congratulations",
-  "manual_journal_number": "Manual journal {number}",
   "conditions_and_terms": "Conditions and terms",
   "allocate_landed_coast": "Allocate landed cost",
   "transaction_date": "Transaction date",
@@ -1142,10 +1143,10 @@
   "Select transaction": "Select transaction",
   "Select transaction entry": "Select transaction entry",
   "From transaction": "From transaction",
-  "Landed": "Landed",
+  "landed": "Landed",
   "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
   "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
-  "journal_entries": "Journal entries",
+  "journal_entries": "Journal Entries",
   "contact": "Contact",
   "invoice_details": "Invoice details",
   "receipt_details": "Receipt details",
@@ -1195,6 +1196,7 @@
   "payment_receive.details.payment_number": "Payment #",
   "payment_receive.details.total": "TOTAL",
   "payment_receive.details.subtotal": "Subtotal",
+  "payment_receive.details.statement": "Statement",
   "estimate.details.estimate_number": "Estimate #",
   "estimate.details.subtotal": "Subtotal",
   "estimate.details.total": "TOTAL",
@@ -1202,23 +1204,31 @@
   "estimate.details.due_amount": "Due amount",
   "estimate.details.note": "Note",
   "estimate.details.created_at": "Created at",
+  "estimate.details.terms_conditions": "Terms & Conditions",
   "receipt.details.receipt_number": "Receipt #",
   "receipt.details.subtotal": "Subtotal",
   "receipt.details.total": "TOTAL",
   "receipt.details.payment_amount": "Payment amount",
   "receipt.details.due_amount": "Due amount",
   "receipt.details.created_at": "Created at",
+  "receipt.details.receipt_message": "Receipt Message",
+  "receipt.details.statement": "Statement",
   "invoice.details.created_at": "Created at",
   "invoice.details.total": "TOTAL",
   "invoice.details.subtotal": "Subtotal",
   "invoice.details.due_amount": "Due amount",
   "invoice.details.payment_amount": "Payment amount",
+  "invoice.details.invoice_message": "Invoice Message",
+  "invoice.details.invoice_no": "Invoice #",
+  "bill.drawer.title": "Bill details {number}",
+  "bill.details.reference": "Reference #",
   "bill.details.bill_number": "Bill #",
   "bill.details.created_at": "Created at",
   "bill.details.total": "TOTAL",
   "bill.details.subtotal": "Subtotal",
   "bill.details.payment_amount": "Payment amount",
   "bill.details.due_amount": "Due amount",
+  "bill.drawer.bill_details": "Bill details ({billNumber})",
   "expense.details.subtotal": "Subtotal",
   "expense.details.total": "Total",
   "manual_journal.details.subtotal": "Subtotal",
@@ -1469,23 +1479,259 @@
   "sms_notification.payment_details.type": "Payment receive thank you.",
   "sms_notification.receipt_details.type": "Sale receipt details",
   "personal": "Personal",
-  "list.create":"Create {value}",
-  "roles.label":"Roles",
-  "roles.column.name":"Name",
-  "roles.column.description":"Description",
-  "roles.edit_roles":"Edit Roles",
-  "roles.delete_roles":"Delete Roles",
-  "roles.label.role_name":"Role Name",
-  "roles.label.role_name_":"Role name",
-  "roles.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 has been updated successfully.",
-  "roles.permission_schema.delete.alert_message":"The given role has been deleted successfully.",
-  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":"Once you delete this role, you won't be able to restore it later. Are you sure you want to delete this role?",
-  "users.column.role_name":"Role Name",
-  "roles.error.you_cannot_edit_predefined_roles":"You cannot edit predefined roles.",
-  "roles.error.you_cannot_delete_predefined_roles":"You cannot delete predefined roles."
+  "list.create": "Create {value}",
+  "roles.label": "Roles",
+  "roles.column.name": "Name",
+  "roles.column.description": "Description",
+  "roles.edit_roles": "Edit Roles",
+  "roles.delete_roles": "Delete Roles",
+  "roles.label.role_name": "Role Name",
+  "roles.label.role_name_": "Role name",
+  "roles.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.",
+  "roles.permission_schema.success_message": "The role has been created successfully.",
+  "roles.permission_schema.upload_message": "The given role has been updated successfully.",
+  "roles.permission_schema.delete.alert_message": "The given role has been deleted successfully.",
+  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it": "Once you delete this role, you won't be able to restore it later. Are you sure you want to delete this role?",
+  "users.column.role_name": "Role Name",
+  "roles.error.you_cannot_edit_predefined_roles": "You cannot edit predefined roles.",
+  "roles.error.you_cannot_delete_predefined_roles": "You cannot delete predefined roles.",
+  "roles.error.the_submit_role_has_invalid_permissions": "The submit role has invalid permissions.",
+  "roles.error.you_cannot_delete_role_that_associated_to_users": "You cannot delete role that associated to users",
+  "sidebar_credit_note": "Credit Notes",
+  "credit_note.label_create_note_list": "Credit Notes List",
+  "credit_note.label.new_credit_note": "New Credit Note",
+  "credit_note.label.edit_credit_note": "Edit Credit Note",
+  "credit_note.action.edit_credit_note": "Edit Credit Note",
+  "credit_note.action.refund_credit_note": "Refund Credit note",
+  "credit_note.action.reconcile_with_invoices": "Reconcile with Invoices",
+  "credit_note.action.make_as_open": "Mark as Open",
+  "credit_note.action.delete_credit_note": "Delete Credit Note",
+  "credit_note.column.credit_note_no": "Credit Note #",
+  "credit_note.column.credit_date": "Credit Date",
+  "credit_note.empty_status.title": "Reduce customers balance by create credit note",
+  "credit_note.empty_status.description": "A credit note is a commercial document given to the customer when the goods are returned, with the possibility of adding a refund or applied to unpaid sales invoices.",
+  "credit_note.label_credit_note_date": "Credit Note date",
+  "credit_note.label_credit_note": "Credit Note #",
+  "credit_note.label_amount_to_credit": "Amount to credit",
+  "credit_note.label_credit_note_details": "Credit Note details",
+  "credit_note.label_customer_note": "Customer note",
+  "credit_note.once_delete_this_credit_note": "Once you delete this credit note, you won't be able to restore it later. Are you sure you want to delete this credit note?",
+  "credit_note.alert.delete_message": "The credit note has been deleted successfully",
+  "credit_note.success_message": "The credit note has been created successfully.",
+  "credit_note.edit_success_message": "The credit note has been edited successfully.",
+  "credit_note.label": "Credit notes",
+  "credit_note_number_settings": "Credit Note Number Settings",
+  "credit_note.auto_increment.auto": "Your credit note numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "credit_note.auto_increment.manually": "Your credit note numbers are set on manual mode. Are you sure chaning this settings?",
+  "setting_your_auto_generated_credit_note_number": "Setting your auto-generated credit note number",
+  "credit_note.drawer.label_credit_note_no": "Credit Note #",
+  "credit_note.drawer.label_credit_note_date": "Credit Date",
+  "credit_note.drawer.label_credits_remaining": "Credits Remaining",
+  "credit_note.drawer.label_created_at": "Created at",
+  "credit_note.drawer.label_total": "TOTAL",
+  "credit_note.drawer.label_subtotal": "Subtotal",
+  "credit_note.drawer.label_refund_transactions": "Refund Transactions",
+  "credit_note.drawer.label_invoices_reconciled": "Invoices Reconciled",
+  "sidebar_vendor_credits": "Vendor Credits",
+  "vendor_credits.lable_vendor_credit_list": "Vendor Credits List",
+  "vendor_credits.label.new_vendor_credit": "New Vendor Credit",
+  "vendor_credits.label.edit_vendor_credit": "Edit Vendor Credit",
+  "vendor_credits.label.amount_to_credit": "Amount to credit",
+  "vendor_credits.column.vendor_credit_no": "Vendor Credit #",
+  "vendor_credits.action.new_vendor_credit": "New Vendor Credit",
+  "vendor_credits.action.edit_vendor_credit": "Edit Vendor Credit",
+  "vendor_credits.action.refund_vendor_credit": "Refund Vendor Credit",
+  "vendor_credits.action.delete_vendor_credit": "Delete Vendor Credit",
+  "vendor_credits.empty_status.title": "Reduce vendors balance by create vendor credit",
+  "vendor_credits.empty_status.description": "Vendor credit is the commercial document that is sent to the vendor and makes him owe to our organization. It is proof by the facility that it has a right to be taken from the vendor.",
+  "vendor_credits.action.mark_as_open": "Make as Open",
+  "vendor_credits.action.reconcile_with_bills": "Reconcile with Bills",
+  "vendor_credits.success_message": "The vendor credit has been created successfully",
+  "vendor_credits.edit_success_message": "The vendor credit has been edited successfully.",
+  "vendor_credits.alert.delete_message": "The given vendor credit has been deleted successfully.",
+  "vendor_credits.note.once_delete_this_vendor_credit_note": "Once you delete this vendor credit , you won't be able to restore it later. Are you sure you want to delete this vendor credit ?",
+  "vendor_credit_number_settings": "Vendor Credit Number Settings",
+  "vendor_credit.auto_increment.auto": "Your vendor credit  numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "vendor_credit.auto_increment.manually": "Your vendor credit  numbers are set on manual mode. Are you sure chaning this settings?",
+  "setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number",
+  "vendor_credit.label": "Vendor credits",
+  "vendor_credit.drawer_vendor_credit_detail": "Vendor Credit details",
+  "vendor_credit.drawer.label_vendor_credit_no": "Vendor Credit #",
+  "vendor_credit.drawer.label_vendor_credit_date": "Vendor Credit Date",
+  "vendor_credit.drawer.label_credits_remaining": "Credits Remaining",
+  "vendor_credit.drawer.label_created_at": "Created at",
+  "vendor_credit.drawer.label_total": "TOTAL",
+  "vendor_credit.drawer.label_subtotal": "Subtotal",
+  "vendor_credit.drawer.label_refund_transactions": "Refund Transactions",
+  "vendor_credit.drawer.label_bills_reconciled": "Bills Reconciled",
+  "refund": "Refund",
+  "landed_cost.dialog.label_select_transaction": "Select transaction",
+  "landed_cost.dialog.label_select_transaction_entry": "Select transaction entry",
+  "refund_credit_note.dialog.label": "Refund Credit Note",
+  "refund_credit_note.dialog.success_message": "The customer credit note refund has been created successfully.",
+  "refund_credit_note.dialog.refund_date": "Refund date",
+  "refund_credit_note.dialog.amount": "Amount",
+  "refund_credit_note.dialog.description": "Description",
+  "refund_credit_note.dialog.from_account": "From account",
+  "refund_vendor_credit.dialog.label": "Refund Vendor Credit",
+  "refund_vendor_credit.dialog.success_message": "The vendor credit refund has been created successfully.",
+  "refund_vendor_credit.dialog.refund_date": "Refund date",
+  "refund_vendor_credit.dialog.amount": "Amount",
+  "refund_vendor_credit.dialog.description": "Description",
+  "refund_vendor_credit.dialog.deposit_to_account": "Deposit to account",
+  "refund_credit_transactions.column.amount_refunded": "Amount refunded",
+  "refund_credit_transactions.column.withdrawal_account": "Withdrawal account",
+  "refund_credit_transactions.alert.delete_message": "The credit note refund has been deleted successfully.",
+  "refund_credit_transactions.once_your_delete_this_refund_credit_note": "Once your delete this refund credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?",
+  "refund_vendor_credit.column.amount": "Amount refunded",
+  "refund_vendor_credit.column.withdrawal_account": "Withdrawal account",
+  "refund_vendor_credit_transactions.alert.delete_message": "The vendor credit refund has been deleted successfully.",
+  "refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit": "Once your delete this refund vendor credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?",
+  "credit_note_opened.alert.success_message": "The credit note has been opened successfully",
+  "credit_note_opened.are_sure_to_open_this_credit": "Are you sure you want to open this credit note?",
+  "vendor_credit_opened.alert.success_message": "The  vendor credit has been opened successfully",
+  "vendor_credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this vendor credit?",
+  "reconcile_credit_note.label": "Reconcile credit note with invoices",
+  "reconcile_credit_note.dialog.total_amount_to_credit": "Total amount to credit",
+  "reconcile_credit_note.dialog.credits_balance": "Credits balance:",
+  "reconcile_credit_note.dialog.remaining_credits": "Remaining credits",
+  "reconcile_credit_note.column.remaining_amount": "Remaining amount",
+  "reconcile_credit_note.column.amount_to_credit": "Amount to credit",
+  "reconcile_credit_note.success_message": "The credit note has been applied the given invoices successfully.",
+  "reconcile_credit_note.alert.there_is_no_open_sale_invoices": "There is no open sale invoices associated to credit note customer.",
+  "reconcile_credit_note.alert.success_message": "The applied credit to invoices has been deleted successfully.",
+  "reconcile_credit_note.once_you_delete_this_reconcile_credit_note": "Once you delete this reconcile credit note, you won't be able to restore it later. Are you sure you want to delete this reconcile credit note?",
+  "credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_refund": "You couldn't delete credit note that has associated refund transactions.",
+  "credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_invoice": "You couldn't delete credit note that has associated invoice reconcile transactions.",
+  "invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled": "You couldn't delete sale invoice that has reconciled with credit note transaction.",
+  "reconcile_vendor_credit.dialog.label": "Reconcile Credit Note with Bills",
+  "reconcile_vendor_credit.dialog.success_message": "The vendor credit has been applied to the given bills successfully",
+  "reconcile_vendor_credit.alert.there_is_no_open_bills": "There is no open bills associated to credit note vendor.",
+  "reconcile_vendor_credit.dialog.total_amount_to_credit": "Total amount to credit",
+  "reconcile_vendor_note.dialog.credits_balance": "Credits balance:",
+  "reconcile_vendor_credit.dialog.remaining_credits": "Remaining amount",
+  "reconcile_vendor_credit.column.bill_number": "Bill #",
+  "reconcile_vendor_credit.column.remaining_amount": "Remaining amount",
+  "reconcile_vendor_credit.column.amount_to_credit": "Amount to credit",
+  "vendor_credit.error.you_couldn_t_delete_vendor_credit_has_reconciled": "You couldn't delete vendor credit has reconciled with bills transactions.",
+  "vendor_credit.error.you_couldn_t_delete_vendor_credit_that_has_associated_refund": "You couldn't delete vendor credit that has associated refund transactions.",
+  "bills.error.you_couldn_t_delete_bill_has_reconciled_with_vendor_credit": "You couldn't delete bill has reconciled with vendor credit transaction.",
+  "reconcile_vendor_credit.alert.success_message": "The applied vendor credit to bill has been deleted successfully",
+  "reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit": "Once you delete this reconcile vendor credit note, you won't be able to restore it later. Are you sure you want to delete this reconcile vendor credit note?",
+  "sidebar.transactions_locaking": "Transactions Locking",
+  "locking_transactions.dialog.label": "Locking transactions",
+  "locking_transactions.dialog.locking_date": "Locking date",
+  "locking_transactions.dialog.reason": "Locking reason",
+  "locking_transactions.dialog.success_message": "All transactions locking has been submit successfully.",
+  "unlocking_transactions.dialog.label": "Transactions unlocking",
+  "unlocking_transactions.dialog.reason": "Unlocking reason",
+  "unlocking_transactions.dialog.success_message": "Transactions locking has been canceled successfully.",
+  "unlocking_partial_transactions.dialog.label": "Partial unlocking transactions",
+  "unlocking_partial_transactions.dialog.from_date": "Unlocking from date",
+  "unlocking_partial_transactions.dialog.to_date": "To date",
+  "unlocking_partial_transactions.dialog.reason": "Unlocking reason",
+  "unlocking_partial_transactions.dialog.success_message": "Transactions locking haas been unlocked partially successfully.",
+  "unlocking_full_transactions.dialog.label": "Full unlocking transactions",
+  "unlocking_full_transactions.dialog.reason": "Unlocking reason",
+  "unlocking_partial_transactions.alert.cancel_message": "Partial transaction unlocking has been canceled successfully.",
+  "unlocking_partial_transactions.alert.message": "Are you sure you want to cancel partial unlock of this module?",
+  "yes": "Yes",
+  "transactions_locking.lock_all_transactions_at_once": "Lock All Transactions At Once →",
+  "transactions_locking.lock_modules_individually": "Lock Modules Individually →",
+  "transactions_locking_lock_all_transactions_at_once": "Lock All Transactions At Once.",
+  "transactions_locking.lock": "Lock",
+  "transactions_locking.unlock": "Unlock",
+  "transactions_locking.full_unlock": "Full Unlock",
+  "transactions_locking.paetial_unlock": "Partial Unlock",
+  "transactions_locking.cancel_partial_unlock": "Cancel Partial Unlock",
+  "transactions_locking.of_the_module_locked_to": "Transactions of the module locked to <strong>{value}</strong>.",
+  "transactions_locking.lock_reason": "<strong>Lock Reason</strong>: {value}.",
+  "transactions_locking.partial_unlocked_from": "Partial unlocked from <strong>{fromDate}</strong> to <strong>{toDate}</strong>.",
+  "transactions_locking.unlock_reason": "<strong>Unlock Reason:</strong> {value}.",
+  "transactions_locking.callout.lock_individual.desc": "You have the ability to lock transactions of all modules at once instead of locking transactions each module​​ partially.",
+  "transactions_locking.callout.lock_all_at_once.desc": "You have the ability to lock or unlock transactions of each module individually instead of locking all transactions at once.",
+  "transactions_locking.long_description": "Transactions locking has the ability to lock all organization transactions so users can’t edit, delete or create new transactions during the past period, but still have the ability to create draft invoices or bills and that won’t affect financial reports. typically set a lock date when your financial records are being prepared for the year.",
+  "transactions_locking.you_should_unlock_all_transactions_at_once_before": "You should unlock all transactions at once before, than lock transactions partially on each module.",
+  "transactions_locking.lock_individual_modules": "Lock Individual Modules",
+  "payment_transactions": "Payment transactions",
+  "invoice_transactions.column.withdrawal_account": "Deposit account",
+  "invoice_transactions.action.delete_transaction": "Delete Transaction",
+  "invoice_transactions.action.edit_transaction": "Edit Transaction",
+  "bill_transactions.column.deposit_account": "Withdrawal account",
+  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module.",
+  "overview": "Overview",
+  "transactions": "Transactions",
+  "item.drawer_transactions_by": "Transactions by:",
+  "item.drawer_quantity_sold": "Quantity Sold",
+  "role_name": "Role name",
+  "journal_entries.amount_displayed_base_currency": "Amount is displayed in your base currency",
+  "inventory_adjustment.column.product": "Product",
+  "invoice.convert_to_credit_note": "Convert to Credit Note",
+  "bill.convert_to_credit_note": "Convert to Vendor Credit",
+  "bill.allocate_landed_coast": "Allocate Landed Cost",
+  "overdue": "Overdue",
+  "permissions.column.view": "View",
+  "permissions.column.full_access": "Full Access",
+  "permissions.column.delete": "Delete",
+  "permissions.column.edit": "Edit",
+  "permissions.column.create": "Create",
+  "permissions.column.written_off_invoice": "Written-off invoice",
+  "permissions.column.refund_credit_note": "Refund credit note",
+  "permissions.column.refund_vendor_credit": "Refund vendor credit",
+  "permissions.column.transactions_locking": "Transactions locking",
+  "permissions.items_inventory": "Items & Inventory",
+  "permissions.inventory_adjustment": "Inventory Adjustment",
+  "permissions.items": "Items",
+  "permissions.caontacts": "Contacts",
+  "permissions.customers": "Customers",
+  "permissions.vendors": "Vendors",
+  "permissions.sales": "Sales",
+  "permissions.sale_invoice": "Sale Invoice",
+  "permissions.sale_estimate": "Sale Estimate",
+  "permissions.sale_receipt": "Sale Receipt",
+  "permissions.credit_note": "Credit note",
+  "permissions.payment_receive": "Payment Receive",
+  "permissions.purchases": "Purchases",
+  "permissions.bills": "Bills",
+  "permissions.vendor_credit": "Vendor Credits",
+  "permissions.payment_made": "Payment Made",
+  "permissions.financial_accounting": "Financial Accounting",
+  "permissions.manual_journals": "Manual Journals",
+  "permissions.chart_of_accounts": "Chart of Accounts",
+  "permissions.expenses": "Expenses",
+  "permissions.reports": "Financial Reports",
+  "permissions.financial_reports": "Financial reprots",
+  "permissions.balance_sheet": "Balance sheet",
+  "permissions.profit_loss_sheet": "Profit & Loss sheet",
+  "permissions.trial_balance_sheet": "Trial Balance sheet",
+  "permissions.cash_flow_sheet": "Cash flow sheet",
+  "permissions.journal_sheet": "Journal sheet",
+  "permissions.general_ledger": "General ledger",
+  "permissions.a_r_aging_summary_report": "A/R Aging Summary report",
+  "permissions.a_p_aging_summary_report": "A/P Aging Summary report",
+  "permissions.purchases_by_items": "Purchases by items",
+  "permissions.sales_by_items": "Sales by items",
+  "permissions.customers_transactions": "Customers transactions",
+  "permissions.vendors_transactions": "Vendors transactions",
+  "permissions.customers_summary_balance": "Customers summary balance",
+  "permissions.vendors_summary_balance": "Vendors summary balance",
+  "permissions.inventory_valuation_summary": "Inventory valuation summary",
+  "permissions.inventory_items_details": "Inventory valuation summary",
+  "permissions.cashflow_account_transactions": "Cashflow account transactions",
+  "permissions.more_permissions": "More Permissions",
+  "estimate.status.expired": "Expired",
+  "refund_credit.drawer.title": "Refund credit note",
+  "refund_credit.drawer.label.amount": "Amount",
+  "refund_credit.drawer.label.credit_note_no": "Credit note number",
+  "refund_credit.drawer.label.withdrawal_account": "Withdrawal account",
+  "refund_credit.drawer.label.reference_no": "Reference number",
+  "refund_credit.drawer.label.description": "Description",
+  "estimate.drawer.title": "Estimate details ({number})",
+  "receipt.drawer.title": "Receipt details ({number})",
+  "credit_note.drawer.title": "Credit Note details ({number})",
+  "payment_receive.drawer.title": "Payment receive details ({number})",
+  "payment_made.drawer.title": "Payment made details {number}",
+  "manual_journal.drawer.title": "Manual journal details ({number})",
+  "expense.drawer.title": "Expense details"
 }
\ No newline at end of file
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index dd9764664..491b32238 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -369,7 +369,6 @@ export const getDashboardRoutes = () => [
     pageTitle: intl.get('new_expense'),
     sidebarExpand: false,
     backLink: true,
-    defaultSearchResource: RESOURCES_TYPES.EXPENSE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
@@ -381,7 +380,6 @@ export const getDashboardRoutes = () => [
     pageTitle: intl.get('edit_expense'),
     sidebarExpand: false,
     backLink: true,
-    defaultSearchResource: RESOURCES_TYPES.EXPENSE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
@@ -392,7 +390,6 @@ export const getDashboardRoutes = () => [
     breadcrumb: intl.get('expenses_list'),
     pageTitle: intl.get('expenses_list'),
     hotkey: 'shift+x',
-    defaultSearchResource: RESOURCES_TYPES.EXPENSE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
 
@@ -630,6 +627,65 @@ export const getDashboardRoutes = () => [
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
 
+  // Sales Credit notes.
+  {
+    path: `/credit-notes/:id/edit`,
+    component: lazy(() =>
+      import(
+        '../containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage'
+      ),
+    ),
+    name: 'credit-note-edit',
+    breadcrumb: intl.get('edit'),
+    pageTitle: intl.get('credit_note.label.edit_credit_note'),
+    backLink: true,
+    sidebarExpand: false,
+    defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: `/credit-notes/new/?from_invoice_id=/:id`,
+    component: lazy(() =>
+      import(
+        '../containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage'
+      ),
+    ),
+    name: 'credit-note-new',
+    breadcrumb: intl.get('credit_note.label.new_credit_note'),
+    backLink: true,
+    sidebarExpand: false,
+    pageTitle: intl.get('credit_note.label.new_credit_note'),
+    defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: '/credit-notes/new',
+    component: lazy(() =>
+      import(
+        '../containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage'
+      ),
+    ),
+    name: 'credit-note-new',
+    breadcrumb: intl.get('credit_note.label.new_credit_note'),
+    backLink: true,
+    sidebarExpand: false,
+    pageTitle: intl.get('credit_note.label.new_credit_note'),
+    defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: '/credit-notes',
+    component: lazy(() =>
+      import(
+        '../containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList'
+      ),
+    ),
+    breadcrumb: intl.get('credit_note.label_create_note_list'),
+    pageTitle: intl.get('credit_note.label_create_note_list'),
+    defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+
   // Payment receives
   {
     path: `/payment-receives/:id/edit`,
@@ -713,6 +769,64 @@ export const getDashboardRoutes = () => [
     defaultSearchResource: RESOURCES_TYPES.BILL,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
+  //  Purchases Credit note.
+  {
+    path: `/vendor-credits/:id/edit`,
+    component: lazy(() =>
+      import(
+        'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
+      ),
+    ),
+    name: 'vendor-credits-edit',
+    breadcrumb: intl.get('edit'),
+    pageTitle: intl.get('vendor_credits.label.edit_vendor_credit'),
+    backLink: true,
+    sidebarExpand: false,
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: '/vendor-credits/new/?from_bill_id=/:id',
+    component: lazy(() =>
+      import(
+        'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
+      ),
+    ),
+    name: 'vendor-credits-new',
+    backLink: true,
+    sidebarExpand: false,
+    breadcrumb: intl.get('vendor_credits.label.new_vendor_credit'),
+    pageTitle: intl.get('vendor_credits.label.new_vendor_credit'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: '/vendor-credits/new',
+    component: lazy(() =>
+      import(
+        'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
+      ),
+    ),
+    name: 'vendor-credits-new',
+    backLink: true,
+    sidebarExpand: false,
+    breadcrumb: intl.get('vendor_credits.label.new_vendor_credit'),
+    pageTitle: intl.get('vendor_credits.label.new_vendor_credit'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: '/vendor-credits',
+    component: lazy(() =>
+      import(
+        '../containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList'
+      ),
+    ),
+    breadcrumb: intl.get('vendor_credits.lable_vendor_credit_list'),
+    pageTitle: intl.get('vendor_credits.lable_vendor_credit_list'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
 
   // Subscription billing.
   {
@@ -788,7 +902,7 @@ export const getDashboardRoutes = () => [
   {
     path: `/transactions-locking`,
     component: lazy(() =>
-      import('../containers/TransactionsLocking/TransactionsLockingList'),
+      import('../containers/TransactionsLocking/TransactionsLockingPage'),
     ),
     pageTitle: intl.get('sidebar.transactions_locaking'),
   },
diff --git a/src/store/CreditNote/creditNote.actions.js b/src/store/CreditNote/creditNote.actions.js
new file mode 100644
index 000000000..2592bfe54
--- /dev/null
+++ b/src/store/CreditNote/creditNote.actions.js
@@ -0,0 +1,16 @@
+import t from 'store/types';
+
+export const setCreditNoteTableState = (queries) => {
+  return {
+    type: t.CREDIT_NOTES_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+export const resetCreditNoteTableState = () => {
+  return {
+    type: t.CREDIT_NOTES_TABLE_STATE_RESET,
+  };
+};
+
+export const setSelectedRowsItems = () => {};
diff --git a/src/store/CreditNote/creditNote.reducer.js b/src/store/CreditNote/creditNote.reducer.js
new file mode 100644
index 000000000..8a543fabc
--- /dev/null
+++ b/src/store/CreditNote/creditNote.reducer.js
@@ -0,0 +1,34 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { persistReducer, purgeStoredState } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { createTableStateReducers } from 'store/tableState.reducer';
+import t from 'store/types';
+
+export const defaultTableQuery = {
+  pageSize: 20,
+  pageIndex: 0,
+  filterRoles: [],
+  viewSlug: null,
+};
+
+const initialState = {
+  tableState: defaultTableQuery,
+};
+
+const STORAGE_KEY = 'bigcapital:credit_notes';
+
+const CONFIG = {
+  key: STORAGE_KEY,
+  whitelist: [],
+  storage,
+};
+
+const reducerInstance = createReducer(initialState, {
+  ...createTableStateReducers('CREDIT_NOTES', defaultTableQuery),
+
+  [t.RESET]: () => {
+    purgeStoredState(CONFIG);
+  },
+});
+
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/CreditNote/creditNote.selector.js b/src/store/CreditNote/creditNote.selector.js
new file mode 100644
index 000000000..77f761260
--- /dev/null
+++ b/src/store/CreditNote/creditNote.selector.js
@@ -0,0 +1,29 @@
+import { isEqual } from 'lodash';
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './creditNote.reducer';
+
+const creditsTableStateSelector = (state) => state.creditNotes.tableState;
+
+/**
+ * Retrieve credit notes table state.
+ */
+export const getCreditNotesTableStateFactory = () =>
+  createDeepEqualSelector(
+    paginationLocationQuery,
+    creditsTableStateSelector,
+    (locationQuery, tableState) => {
+      return {
+        ...locationQuery,
+        ...tableState,
+      };
+    },
+  );
+
+/**
+ * Retrieve credit notes table state.
+ */
+export const isCreditNotesTableStateChangedFactory = () =>
+  createDeepEqualSelector(creditsTableStateSelector, (tableState) => {
+    return !isEqual(tableState, defaultTableQuery);
+  });
diff --git a/src/store/CreditNote/creditNote.type.js b/src/store/CreditNote/creditNote.type.js
new file mode 100644
index 000000000..85585381a
--- /dev/null
+++ b/src/store/CreditNote/creditNote.type.js
@@ -0,0 +1,4 @@
+export default {
+  CREDIT_NOTES_TABLE_STATE_SET: 'CREDIT_NOTES/TABLE_STATE_SET',
+  CREDIT_NOTES_TABLE_STATE_RESET: 'CREDIT_NOTE/TABLE_STATE_RESET',
+};
diff --git a/src/store/VendorCredit/VendorCredit.reducer.js b/src/store/VendorCredit/VendorCredit.reducer.js
new file mode 100644
index 000000000..ac35b0e2b
--- /dev/null
+++ b/src/store/VendorCredit/VendorCredit.reducer.js
@@ -0,0 +1,34 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { persistReducer, purgeStoredState } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { createTableStateReducers } from 'store/tableState.reducer';
+import t from 'store/types';
+
+export const defaultTableQuery = {
+  pageSize: 20,
+  pageIndex: 0,
+  filterRoles: [],
+  viewSlug: null,
+};
+
+const initialState = {
+  tableState: defaultTableQuery,
+};
+
+const STORAGE_KEY = 'bigcapital:vendor_credits';
+
+const CONFIG = {
+  key: STORAGE_KEY,
+  whitelist: [],
+  storage,
+};
+
+const reducerInstance = createReducer(initialState, {
+  ...createTableStateReducers('VENDOR_CREDITS', defaultTableQuery),
+
+  [t.RESET]: () => {
+    purgeStoredState(CONFIG);
+  },
+});
+
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/VendorCredit/vendorCredit.actions.js b/src/store/VendorCredit/vendorCredit.actions.js
new file mode 100644
index 000000000..423d9df76
--- /dev/null
+++ b/src/store/VendorCredit/vendorCredit.actions.js
@@ -0,0 +1,16 @@
+import t from 'store/types';
+
+export const setVendorCreditTableState = (queries) => {
+  return {
+    type: t.VENDOR_CREDITS_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+export const resetVendorCreditTableState = () => {
+  return {
+    type: t.VENDOR_CREDITS_NOTES_TABLE_STATE_RESET,
+  };
+};
+
+export const setSelectedRowsItems = () => {};
diff --git a/src/store/VendorCredit/vendorCredit.selector.js b/src/store/VendorCredit/vendorCredit.selector.js
new file mode 100644
index 000000000..e66ffdd77
--- /dev/null
+++ b/src/store/VendorCredit/vendorCredit.selector.js
@@ -0,0 +1,31 @@
+import { isEqual } from 'lodash';
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './VendorCredit.reducer';
+
+const vendorCreditsTableStateSelector = (state) => {
+  return state.vendorCredit.tableState;
+};
+
+/**
+ * Retrieve vendor credit table state.
+ */
+export const getVendorCreditTableStateFactory = () =>
+  createDeepEqualSelector(
+    paginationLocationQuery,
+    vendorCreditsTableStateSelector,
+    (locationQuery, tableState) => {
+      return {
+        ...locationQuery,
+        ...tableState,
+      };
+    },
+  );
+
+/**
+ * Retrieve vendor credit table state.
+ */
+export const isVendorCreditTableStateChangedFactory = () =>
+  createDeepEqualSelector(vendorCreditsTableStateSelector, (tableState) => {
+    return !isEqual(tableState, defaultTableQuery);
+  });
diff --git a/src/store/VendorCredit/vendorCredit.type.js b/src/store/VendorCredit/vendorCredit.type.js
new file mode 100644
index 000000000..b68fcad28
--- /dev/null
+++ b/src/store/VendorCredit/vendorCredit.type.js
@@ -0,0 +1,4 @@
+export default {
+  VENDOR_CREDITS_TABLE_STATE_SET: 'VENDOR_CREDITS/TABLE_STATE_SET',
+  VENDOR_CREDITS_NOTES_TABLE_STATE_RESET: 'VENDOR_CREDITS/TABLE_STATE_RESET',
+};
diff --git a/src/store/reducers.js b/src/store/reducers.js
index db31ab4db..ad28a32e6 100644
--- a/src/store/reducers.js
+++ b/src/store/reducers.js
@@ -32,6 +32,8 @@ import organizations from './organizations/organizations.reducers';
 import subscriptions from './subscription/subscription.reducer';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.reducer';
 import plans from './plans/plans.reducer';
+import creditNotes from './CreditNote/creditNote.reducer';
+import vendorCredit from './VendorCredit/VendorCredit.reducer';
 
 const appReducer = combineReducers({
   authentication,
@@ -63,7 +65,9 @@ const appReducer = combineReducers({
   paymentReceives,
   paymentMades,
   inventoryAdjustments,
-  plans
+  plans,
+  creditNotes,
+  vendorCredit,
 });
 
 // Reset the state of a redux store
@@ -71,7 +75,7 @@ const rootReducer = (state, action) => {
   if (action.type === types.RESET) {
     state = undefined;
   }
-  return appReducer(state, action)
-}
+  return appReducer(state, action);
+};
 
-export default rootReducer;
\ No newline at end of file
+export default rootReducer;
diff --git a/src/store/settings/settings.reducer.js b/src/store/settings/settings.reducer.js
index 28ceaa9e8..853ab0589 100644
--- a/src/store/settings/settings.reducer.js
+++ b/src/store/settings/settings.reducer.js
@@ -52,6 +52,12 @@ const initialState = {
     cashflowTransactions: {
       tableSize: 'medium',
     },
+    creditNote: {
+      tableSize: 'medium',
+    },
+    vendorCredit: {
+      tableSize: 'medium',
+    },
   },
 };
 
diff --git a/src/store/types.js b/src/store/types.js
index b79f0d1ba..3e509142f 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -28,6 +28,8 @@ import paymentMades from './PaymentMades/paymentMades.type';
 import organizations from './organizations/organizations.types';
 import subscription from './subscription/subscription.types';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.type';
+import creditNote from './CreditNote/creditNote.type';
+import vendorCredit from './VendorCredit/vendorCredit.type';
 import plans from './plans/plans.types';
 
 export default {
@@ -61,5 +63,7 @@ export default {
   ...organizations,
   ...subscription,
   ...inventoryAdjustments,
-  ...plans
+  ...plans,
+  ...creditNote,
+  ...vendorCredit
 };
diff --git a/src/style/App.scss b/src/style/App.scss
index cc5d3e2e1..55b604c00 100644
--- a/src/style/App.scss
+++ b/src/style/App.scss
@@ -11,6 +11,7 @@
 
 // Objects
 @import 'objects/form';
+@import 'objects/switch';
 @import 'objects/typography';
 @import 'objects/buttons';
 @import 'objects/Bigcapital';
@@ -21,7 +22,6 @@
 @import 'components/resizer';
 @import 'components/CloudSpinner';
 @import 'components/Alert';
-@import 'components/Card';
 @import 'components/Toast';
 @import 'components/PageForm';
 @import 'components/Tooltip';
diff --git a/src/style/components/Card.scss b/src/style/components/Card.scss
deleted file mode 100644
index 5662ab350..000000000
--- a/src/style/components/Card.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.card{
-  background: #fff;
-  border: 1px solid #d2dce2;
-}
\ No newline at end of file
diff --git a/src/style/components/DataTable/DataTable.scss b/src/style/components/DataTable/DataTable.scss
index 1eb7c15f9..1258e6160 100644
--- a/src/style/components/DataTable/DataTable.scss
+++ b/src/style/components/DataTable/DataTable.scss
@@ -120,7 +120,6 @@
       }
 
       .bp3-control.bp3-checkbox .bp3-control-indicator {
-        border: 1px solid #c2c2c2;
         cursor: auto;
 
         &,
@@ -359,12 +358,10 @@
   .ReactVirtualized__Grid {
     will-change: auto !important;
   }
-
-
-
 }
 
-.table-constrant {
+.table-constrant,
+.table--constrant {
   .table {
     .thead .th {
       background: transparent;
@@ -379,9 +376,5 @@
       padding: 0.5rem 0.5rem;
       border-bottom: 0;
     }
-
-    .tbody .tr:last-child .td {
-      border-bottom: 1px solid #d2dce2;
-    }
   }
 }
\ No newline at end of file
diff --git a/src/style/components/Details.scss b/src/style/components/Details.scss
index 6b62d9fd7..fd28128cb 100644
--- a/src/style/components/Details.scss
+++ b/src/style/components/Details.scss
@@ -10,7 +10,7 @@
       flex-grow: 1;
 
       &__content{
-        margin: 5px 0;
+        margin: 2px 0;
       }
     }
   }
@@ -23,12 +23,16 @@
       flex-direction: row;
 
       &:not(:first-of-type){
-        margin-top: 16px;
+        margin-top: 12px;
       }
 
       &__label{
         padding-right: 10px;
       }
+
+      &__content{
+        width: 100%;
+      }
     }
   }
 
diff --git a/src/style/components/Drawers/AccountDrawer.scss b/src/style/components/Drawers/AccountDrawer.scss
index 7b120cff0..aaaff51ed 100644
--- a/src/style/components/Drawers/AccountDrawer.scss
+++ b/src/style/components/Drawers/AccountDrawer.scss
@@ -1,8 +1,7 @@
 
 
 .account-drawer {
-  background-color: #fbfbfb;
-
+  
   .card-header{
     margin: 15px;
     padding: 22px 15px;
@@ -35,34 +34,4 @@
       }
     }
   }
-
-  &__table {
-    margin: 18px;
-    background: #fff;
-    border: 1px solid #d2dce2;
-
-    .table {
-      .thead {
-        .tr .th {
-          padding: 0.7rem 0.8rem;
-          font-weight: 500;
-        }
-      }
-
-      .tbody .tr .td {
-        padding: 0.6rem 0.8rem;
-      }
-    }
-
-    &-footer{
-      padding: 10px 14px;
-      display: inline-block;
-      
-      a{
-        text-decoration: underline;
-        font-size: 12px;
-        color: #37639c;
-      }
-    }
-  }
 }
\ No newline at end of file
diff --git a/src/style/components/Drawers/EstimateDetails.module.scss b/src/style/components/Drawers/EstimateDetails.module.scss
index 862a42e72..86ef8d448 100644
--- a/src/style/components/Drawers/EstimateDetails.module.scss
+++ b/src/style/components/Drawers/EstimateDetails.module.scss
@@ -49,15 +49,14 @@
 
   .total_line{
     &_subtotal {
-      border-bottom: 1px solid #000;
+      
     }
 
     &_total {
-      border-bottom: 3px double #000;
-      font-weight: 600;
+      
     }
     &_dueAmount {
-      font-weight: 600;
+      
     }
   }
 
diff --git a/src/style/components/Drawers/InvoiceDrawer.module.scss b/src/style/components/Drawers/InvoiceDrawer.module.scss
deleted file mode 100644
index 770744e1c..000000000
--- a/src/style/components/Drawers/InvoiceDrawer.module.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-
-.detail_panel {
-  :global .card {
-    padding: 22px 15px;
-  }
-
-  &_header {
-    margin-bottom: 30px;
-  }
-
-  &_table {
-    :global .bigcapital-datatable {
-
-      .thead,
-      .tbody {
-
-        .quantity,
-        .rate,
-        .amount {
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  &_footer {
-    display: flex;
-
-    :global .total_lines {
-      margin-left: auto;
-    }
-
-    :global .total_lines_line {
-
-      .amount,
-      .title {
-        width: 180px;
-      }
-
-      .amount {
-        text-align: right;
-      }
-    }
-    .total_line {
-      &_subtotal {
-        border-bottom: 1px solid #000;
-      }
-
-      &_total {
-        border-bottom: 3px double #000;
-        font-weight: 600;
-      }
-
-      &_dueAmount {
-        font-weight: 600;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/style/components/Drawers/ItemDrawer.scss b/src/style/components/Drawers/ItemDrawer.scss
index b97b84eaa..e39dda44c 100644
--- a/src/style/components/Drawers/ItemDrawer.scss
+++ b/src/style/components/Drawers/ItemDrawer.scss
@@ -1,12 +1,10 @@
 .item-drawer {
-
   .card {
     margin: 15px;
     padding: 22px 15px;
   }
 
   &__content {
-
     .detail-item--name {
       width: 30%;
 
@@ -16,7 +14,6 @@
     }
 
     .detail-item--quantity {
-
       .detail-item__content {
         font-weight: 600;
 
@@ -32,7 +29,6 @@
     }
 
     .details-menu--horizantal {
-
       .detail-item:not(:first-of-type) {
         margin-top: 16px;
       }
@@ -42,4 +38,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/components/Drawers/VendorCreditDetail.module.scss b/src/style/components/Drawers/VendorCreditDetail.module.scss
new file mode 100644
index 000000000..5f0de943f
--- /dev/null
+++ b/src/style/components/Drawers/VendorCreditDetail.module.scss
@@ -0,0 +1,68 @@
+.root {
+}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .title {
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+
+    &_total {
+      border-bottom: 3px double #000;
+      font-weight: 600;
+    }
+    &_dueAmount {
+      font-weight: 600;
+    }
+  }
+
+  &_note {
+    b {
+      color: #727983;
+    }
+  }
+}
diff --git a/src/style/objects/form.scss b/src/style/objects/form.scss
index b426192c2..80ca55605 100644
--- a/src/style/objects/form.scss
+++ b/src/style/objects/form.scss
@@ -504,4 +504,8 @@ label.bp3-label {
       }
     }
   }
+}
+
+.bp3-control.bp3-checkbox .bp3-control-indicator{
+  border-color: #666;
 }
\ No newline at end of file
diff --git a/src/style/objects/switch.scss b/src/style/objects/switch.scss
new file mode 100644
index 000000000..16bd2d8c3
--- /dev/null
+++ b/src/style/objects/switch.scss
@@ -0,0 +1,8 @@
+.bp3-control.bp3-switch {
+  .bp3-control-indicator {
+
+    &:before {
+      box-shadow: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss b/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
index 1040746e2..d0b23d633 100644
--- a/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
+++ b/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
@@ -8,7 +8,7 @@
     }
     .bp3-form-group.bp3-inline {
       .bp3-label {
-        min-width: 150px;
+        min-width: 165px;
       }
       .bp3-form-content {
         width: 300px;
diff --git a/src/style/pages/AllocateLandedCost/List.scss b/src/style/pages/AllocateLandedCost/List.scss
new file mode 100644
index 000000000..a09b2fddf
--- /dev/null
+++ b/src/style/pages/AllocateLandedCost/List.scss
@@ -0,0 +1,22 @@
+.datatable--landed-cost-transactions {
+  padding: 12px;
+  .table {
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+      }
+    }
+  }
+}
diff --git a/src/style/pages/Bills/List.scss b/src/style/pages/Bills/List.scss
index 2fcb700cb..55b52b0af 100644
--- a/src/style/pages/Bills/List.scss
+++ b/src/style/pages/Bills/List.scss
@@ -45,7 +45,7 @@
           font-size: 13.5px;
         }
         .bp3-progress-bar {
-          height: 4px;
+          height: 3px;
           max-width: 180px;
 
           &,
diff --git a/src/style/pages/CreditNote/List.scss b/src/style/pages/CreditNote/List.scss
new file mode 100644
index 000000000..087b2f910
--- /dev/null
+++ b/src/style/pages/CreditNote/List.scss
@@ -0,0 +1,20 @@
+.dashboard__insider--credit-note-list {
+  .bigcapital-datatable {
+    .tbody {
+      .amount.td {
+        .cell-inner {
+          > span {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+    .table-size--small {
+      .status.td {
+        .bp3-progress-bar {
+          height: 3px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/style/pages/CreditNote/PageForm.scss b/src/style/pages/CreditNote/PageForm.scss
new file mode 100644
index 000000000..8da43b9aa
--- /dev/null
+++ b/src/style/pages/CreditNote/PageForm.scss
@@ -0,0 +1,50 @@
+body.page-credit-note-new,
+body.page-credit-note-edit {
+  .dashboard__footer {
+    display: none;
+  }
+}
+
+.dashboard__insider--credit-note-form {
+  padding-bottom: 64px;
+}
+
+.page-form--credit-note {
+  $self: '.page-form';
+
+  #{$self}__header {
+    display: flex;
+
+    &-fields {
+      flex: 1 0 0;
+    }
+
+    .bp3-label {
+      min-width: 150px;
+    }
+    .bp3-form-content {
+      width: 100%;
+    }
+
+    .bp3-form-group {
+      &.bp3-inline {
+        max-width: 450px;
+      }
+    }
+    .col--credit-note-date {
+      max-width: 435px;
+    }
+  }
+  #{$self}__footer {
+    .form-group--note,
+    .form-group--terms_conditions {
+      max-width: 450px;
+      width: 100%;
+
+      textarea {
+        width: 100%;
+        min-height: 60px;
+      }
+    }
+  }
+}
diff --git a/src/style/pages/Expense/PageForm.scss b/src/style/pages/Expense/PageForm.scss
index 102a3819e..6aaf1fade 100644
--- a/src/style/pages/Expense/PageForm.scss
+++ b/src/style/pages/Expense/PageForm.scss
@@ -1,5 +1,5 @@
-.dashboard__insider--expenses {
-
+.dashboard__insider--expense-form {
+  padding-bottom: 64px;
   .bigcapital-datatable {
 
     .tbody {
diff --git a/src/style/pages/FinancialStatements/APAgingSummary.scss b/src/style/pages/FinancialStatements/APAgingSummary.scss
index f61ee093e..1018a293e 100644
--- a/src/style/pages/FinancialStatements/APAgingSummary.scss
+++ b/src/style/pages/FinancialStatements/APAgingSummary.scss
@@ -7,8 +7,8 @@
       .bigcapital-datatable{
         .tbody,
         .thead{
-          .tr .td.customer_name ~ .td,
-          .tr .th.customer_name ~ .th{
+          .tr .td.vendor_name ~ .td,
+          .tr .th.vendor_name ~ .th{
             text-align: right;
           }
         }
diff --git a/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss b/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
index def379b49..df41bc845 100644
--- a/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
+++ b/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
@@ -1,25 +1,26 @@
 .financial-sheet {
+
   &--customers-balance-summary,
   &--vendors-balance-summary {
     .financial-sheet__table {
+
       .thead,
       .tbody {
-        .tr .td.customer_name ~ .td,
-        .tr .th.customer_name ~ .th {
+
+        .tr .td.customer_name~.td,
+        .tr .th.customer_name~.th {
           text-align: right;
         }
       }
+
       .tbody {
         .tr:not(.no-results) {
-          &.row-type--CUSTOMER,
-          &.row-type--VENDOR {
-            border-top: 1px solid #BBB
-          }
           .td {
             border-bottom: 0;
             padding-top: 0.4rem;
             padding-bottom: 0.4rem;
           }
+
           &.row-type--TOTAL {
             font-weight: 500;
 
@@ -33,6 +34,7 @@
     }
   }
 }
+
 .financial-statement--balance-summary {
   .financial-header-drawer {
     .bp3-drawer {
@@ -40,4 +42,4 @@
       max-height: 415px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/style/pages/FinancialStatements/ContactsTransactions.scss b/src/style/pages/FinancialStatements/ContactsTransactions.scss
index 7fb3ff80a..7b9bd32e0 100644
--- a/src/style/pages/FinancialStatements/ContactsTransactions.scss
+++ b/src/style/pages/FinancialStatements/ContactsTransactions.scss
@@ -1,13 +1,17 @@
 .financial-sheet {
+
   &--customer-transactions,
   &--vendor-transactions {
     width: 100%;
 
     .financial-sheet__table {
+
       .tbody,
       .thead {
+
         .tr .td,
         .tr .th {
+
           &.credit,
           &.debit,
           &.running_balance {
@@ -15,6 +19,7 @@
           }
         }
       }
+
       .tbody {
         .tr .td {
           padding-top: 0.2rem;
@@ -24,39 +29,51 @@
 
           &.customer_name,
           &.vendor_name {
-            > div {
+            >div {
               display: flex;
             }
+
             span.force-width {
               position: relative;
             }
           }
         }
+
         .tr:not(.no-results) .td {
           border-left: 1px solid #ececec;
         }
 
+        .tr:last-child .td {
+          border-bottom: 1px solid #e0e0e0;
+        }
+
         .tr.row-type {
+
           &--CUSTOMER,
           &--VENDOR {
             .td {
+
               &.customer_name,
               &.vendor_name {
                 font-weight: 500;
               }
+
               &.name {
                 // border-left-color: transparent;
               }
             }
+
             &:not(:first-child).is-expanded .td {
               border-top: 1px solid #ddd;
             }
           }
+
           &--OPENING_BALANCE,
           // &--TRANSACTION,
           &--CLOSING_BALANCE {
             font-weight: 500;
           }
+
           &--CUSTOMER,
           &--VENDOR {
             &.is-expanded {
@@ -64,10 +81,12 @@
                 display: none;
               }
             }
+
             &:not(:first-child).is-expanded .td {
               border-top: 1px solid #ddd;
             }
           }
+
           &--CUSTOMER:last-child,
           &--VENDOR:last-child {
             .td {
@@ -86,4 +105,4 @@
       max-height: 450px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/style/pages/FinancialStatements/GeneralLedger.scss b/src/style/pages/FinancialStatements/GeneralLedger.scss
index a50936220..c5f499aa0 100644
--- a/src/style/pages/FinancialStatements/GeneralLedger.scss
+++ b/src/style/pages/FinancialStatements/GeneralLedger.scss
@@ -1,75 +1,88 @@
+.financial-sheet {
+  &--general-ledger {
+    .financial-sheet__table {
 
-.financial-sheet{
-  &--general-ledger{
-    .financial-sheet__table{
       .tbody,
-      .thead{
+      .thead {
+
         .tr .td,
-        .tr .th{
+        .tr .th {
+
           &.credit,
           &.debit,
           &.running_balance,
-          &.amount{
+          &.amount {
             text-align: right;
           }
         }
       }
-      .tbody{
-       
-        .tr .td{
+
+      .tbody {
+        .tr .td {
           padding-top: 0.2rem;
           padding-bottom: 0.2rem;
           border-top-color: transparent;
           border-bottom-color: transparent;
-  
-          &.date{
-            > div{
+
+          &.date {
+            >div {
               display: flex;
             }
-            span.force-width{
+
+            span.force-width {
               position: relative;
             }
           }
         }
-        .tr:not(.no-results) .td{
+
+        .tr:not(.no-results) .td {
           border-left: 1px solid #ececec;
         }
 
-        .tr{
-          &.is-expanded{
+        .tr:last-child .td {
+          border-bottom: 1px solid #ececec;
+        }
 
-            .td.amount{
+        .tr {
+          &.is-expanded {
 
-              .cell-inner{
+            .td.amount {
+
+              .cell-inner {
                 display: none
               }
             }
           }
         }
-        .tr.row-type{
+
+        .tr.row-type {
 
 
-          &--ACCOUNT_ROW{
-            .td{
-              &.date{
+          &--ACCOUNT_ROW {
+            .td {
+              &.date {
                 font-weight: 500;
               }
-              &.name{
+
+              &.name {
                 border-left-color: transparent;
               }
             }
-            &:not(:first-child).is-expanded .td{
+
+            &:not(:first-child).is-expanded .td {
               border-top: 1px solid #DDD;
             }
           }
+
           &--OPENING_BALANCE,
-          &--CLOSING_BALANCE{
-            .amount{
+          &--CLOSING_BALANCE {
+            .amount {
               font-weight: 500;
             }
           }
-          &--CLOSING_BALANCE{
-            .name{
+
+          &--CLOSING_BALANCE {
+            .name {
               font-weight: 500;
             }
           }
diff --git a/src/style/pages/FinancialStatements/InventoryItemDetails.scss b/src/style/pages/FinancialStatements/InventoryItemDetails.scss
index d2458d1c3..b795ad410 100644
--- a/src/style/pages/FinancialStatements/InventoryItemDetails.scss
+++ b/src/style/pages/FinancialStatements/InventoryItemDetails.scss
@@ -3,21 +3,25 @@
     width: 100%;
 
     .financial-sheet__table {
+
       .tbody,
       .thead {
-        .tr .td.transaction_id ~ .td,
-        .tr .th.transaction_id ~ .th {
+
+        .tr .td.transaction_id~.td,
+        .tr .th.transaction_id~.th {
           text-align: right;
         }
       }
+
       .tbody {
         .tr .td {
           padding-top: 0.2rem;
           padding-bottom: 0.2rem;
           border-top-color: transparent;
           border-bottom-color: transparent;
+
           &.date {
-            > div {
+            >div {
               display: flex;
             }
 
@@ -26,10 +30,15 @@
             }
           }
         }
+
         .tr:not(.no-results) .td {
           border-left: 1px solid #ececec;
         }
 
+        .tr:last-child .td {
+          border-bottom: 1px solid #ddd;
+        }
+
         .tr.row-type {
           &--ITEM {
             .td {
@@ -37,15 +46,18 @@
                 border-left-color: transparent;
               }
             }
+
             &:not(:first-child).is-expanded .td {
               border-top: 1px solid #ddd;
             }
           }
+
           &--ITEM,
           &--OPENING_ENTRY,
           &--CLOSING_ENTRY {
             font-weight: 500;
           }
+
           &--ITEM {
             &.is-expanded {
               .td.value .cell-inner {
@@ -58,20 +70,23 @@
     }
   }
 }
+
 .number-format-dropdown {
   .toggles-fields {
     .bp3-form-group:first-child {
       display: none;
     }
   }
+
   .form-group--money-format {
     display: none;
   }
 }
+
 .financial-statement--inventory-details {
   .financial-header-drawer {
     .bp3-drawer {
       max-height: 350px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/style/pages/JournalEntries/List.scss b/src/style/pages/JournalEntries/List.scss
index eb032d1c7..1c9c5a9b7 100644
--- a/src/style/pages/JournalEntries/List.scss
+++ b/src/style/pages/JournalEntries/List.scss
@@ -1,14 +1,29 @@
-.datatable--journal-entries {
-  .table {
-    .tbody {
-      .tr .td {
-        min-height: 42px;
+// .datatable--journal-entries {
+//   // margin: 12px;
+//   padding: 12px;
 
-        &.credit,
-        &.debit {
-          font-weight: 600;
-        }
-      }
-    }
-  }
-}
+//   .table {
+//     .tbody,
+//     .thead {
+//       .tr .th {
+//         padding: 8px 8px;
+//         background-color: #fff;
+//         font-size: 14px;
+//         border-bottom: 1px solid #000;
+//         border-top: 1px solid #000;
+//       }
+//     }
+//     .tbody {
+//       .tr .td {
+//         border-bottom: 0;
+//         padding-top: 0.4rem;
+//         padding-bottom: 0.4rem;
+
+//         &.credit,
+//         &.debit {
+//           font-weight: 600;
+//         }
+//       }
+//     }
+//   }
+// }
diff --git a/src/style/pages/ManualJournal/MakeJournal.scss b/src/style/pages/ManualJournal/MakeJournal.scss
index d10c11380..1490e7642 100644
--- a/src/style/pages/ManualJournal/MakeJournal.scss
+++ b/src/style/pages/ManualJournal/MakeJournal.scss
@@ -1,3 +1,6 @@
+.dashboard__insider--make-journal-page {
+  padding-bottom: 64px;
+}
 
 .page-form--make-journal-entries{
   $self: '.page-form';  
diff --git a/src/style/pages/PaymentTransactions/List.scss b/src/style/pages/PaymentTransactions/List.scss
new file mode 100644
index 000000000..baaff57df
--- /dev/null
+++ b/src/style/pages/PaymentTransactions/List.scss
@@ -0,0 +1,23 @@
+.payment-transactions {
+  padding: 12px;
+
+  .table {
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+      }
+    }
+  }
+}
diff --git a/src/style/pages/Preferences/GeneralForm.scss b/src/style/pages/Preferences/GeneralForm.scss
index 2a5bec102..283ea9fae 100644
--- a/src/style/pages/Preferences/GeneralForm.scss
+++ b/src/style/pages/Preferences/GeneralForm.scss
@@ -3,23 +3,6 @@
 //  General page
 //---------------------------------
 .preferences-page__inside-content--general {
-  .card {
-    padding: 25px;
-
-    .card__footer {
-      padding-top: 16px;
-      border-top: 1px solid #e0e7ea;
-      margin-top: 30px;
-
-      .bp3-button {
-        min-width: 70px;
-
-        + .bp3-button{
-          margin-left: 10px;
-        }
-      }
-    }
-  }
 
   .bp3-form-group {
     max-width: 650px;
diff --git a/src/style/pages/Preferences/Page.scss b/src/style/pages/Preferences/Page.scss
index d156b96c4..7c621b52f 100644
--- a/src/style/pages/Preferences/Page.scss
+++ b/src/style/pages/Preferences/Page.scss
@@ -33,6 +33,8 @@
     }
   }
   &__inside-content {
+    overflow: auto;
+
     .#{$ns}-tab-list {
       border-bottom: 1px solid #e5e5e5;
       padding-left: 15px;
diff --git a/src/style/pages/Preferences/Roles/Form.scss b/src/style/pages/Preferences/Roles/Form.scss
index 916d611c2..1b375407e 100644
--- a/src/style/pages/Preferences/Roles/Form.scss
+++ b/src/style/pages/Preferences/Roles/Form.scss
@@ -1,6 +1,8 @@
 //  Roles Form page
 //---------------------------------
 .preferences-page__inside-content--roles-form {
+  padding-bottom: 60px;
+
   .card {
     padding: 25px;
 
@@ -20,17 +22,21 @@
   }
 
   .bp3-form-group {
-    max-width: 500px;
+    max-width: 600px;
     margin-bottom: 14px;
 
     &.bp3-inline {
       .bp3-label {
-        min-width: 100px;
+        min-width: 150px;
       }
     }
     .bp3-form-content {
       width: 100%;
     }
+
+    &:last-of-type{
+      margin-bottom: 0;
+    }
   }
   .form-group--description {
     textarea {
@@ -39,20 +45,4 @@
       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/Sidebar.scss b/src/style/pages/Preferences/Sidebar.scss
index 12b3dd8ae..164d88034 100644
--- a/src/style/pages/Preferences/Sidebar.scss
+++ b/src/style/pages/Preferences/Sidebar.scss
@@ -3,7 +3,7 @@
 // Preferences sidebar.
 // -----------------------------
 .preferences-sidebar {
-  background: #e5eaee;
+  background: #eaeef6;
   border-right: 1px solid #c6d0d9;
   min-width: 220px;
   max-width: 220px;
@@ -13,13 +13,17 @@
   &__wrapper {
     height: 100%;
   }
+
   .ScrollbarsCustom-Track {
+
     &.ScrollbarsCustom-TrackY,
     &.ScrollbarsCustom-TrackX {
       background: rgba(0, 0, 0, 0);
     }
   }
+
   .ScrollbarsCustom-Thumb {
+
     &.ScrollbarsCustom-ThumbX,
     &.ScrollbarsCustom-ThumbY {
       background: rgba(0, 0, 0, 0);
@@ -28,6 +32,7 @@
 
   &:hover {
     .ScrollbarsCustom-Thumb {
+
       &.ScrollbarsCustom-ThumbX,
       &.ScrollbarsCustom-ThumbY {
         background: rgba(0, 0, 0, 0.15);
@@ -68,4 +73,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
new file mode 100644
index 000000000..0d793aaca
--- /dev/null
+++ b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
@@ -0,0 +1,13 @@
+.dialog--reconcile-credit-form {
+  width: 850px;
+
+  .bp3-callout {
+    font-size: 14px;
+  }
+
+  .bp3-dialog-footer {
+    display: flex;
+    justify-content: flex-start;
+    padding-top: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss b/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
new file mode 100644
index 000000000..8d8e7239f
--- /dev/null
+++ b/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
@@ -0,0 +1,45 @@
+.dialog--reconcile-vendor-credit-form {
+  width: 850px;
+
+  .bigcapital-datatable {
+    .table {
+      border: 1px solid #d1dee2;
+      min-width: auto;
+
+      .tbody,
+      .tbody-inner {
+        height: auto;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      .tbody {
+        .bp3-form-group {
+          margin-bottom: 0;
+
+          &:not(.bp3-intent-danger) .bp3-input {
+            border: 1px solid #d0dfe2;
+
+            &:focus {
+              box-shadow: 0 0 0 1px #116cd0;
+              border-color: #116cd0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .bp3-callout {
+    font-size: 14px;
+  }
+
+  .bp3-dialog-footer {
+    display: flex;
+    justify-content: flex-start;
+    padding-top: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/style/pages/RefundCreditNote/List.scss b/src/style/pages/RefundCreditNote/List.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/style/pages/RefundCreditNote/RefundCreditNote.scss b/src/style/pages/RefundCreditNote/RefundCreditNote.scss
new file mode 100644
index 000000000..a8c216880
--- /dev/null
+++ b/src/style/pages/RefundCreditNote/RefundCreditNote.scss
@@ -0,0 +1,23 @@
+.dialog--refund-credit-note {
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 16px;
+    }
+
+    .form-group {
+      &--description {
+        .bp3-form-content {
+          textarea {
+            width: 100%;
+            min-width: 100%;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/style/pages/RefundVendorCredit/List.scss b/src/style/pages/RefundVendorCredit/List.scss
new file mode 100644
index 000000000..05ebf36d1
--- /dev/null
+++ b/src/style/pages/RefundVendorCredit/List.scss
@@ -0,0 +1,27 @@
+.datatable--refund-transactions {
+  padding: 12px;
+  .table {
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+
+        &.credit,
+        &.debit {
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}
diff --git a/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss b/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
new file mode 100644
index 000000000..033acd0c2
--- /dev/null
+++ b/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
@@ -0,0 +1,24 @@
+.dialog--refund-vendor-credit {
+  max-width: 450px;
+
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 16px;
+    }
+
+    .form-group {
+      &--description {
+        .bp3-form-content {
+          textarea {
+            width: 100%;
+            min-width: 100%;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}
diff --git a/src/style/pages/SaleInvoice/List.scss b/src/style/pages/SaleInvoice/List.scss
index adb06f1e7..03e62e64a 100644
--- a/src/style/pages/SaleInvoice/List.scss
+++ b/src/style/pages/SaleInvoice/List.scss
@@ -45,7 +45,7 @@
           font-size: 13.5px;
         }
         .bp3-progress-bar {
-          height: 4px;
+          height: 3px;
           max-width: 180px;
 
           &,
@@ -55,12 +55,5 @@
         }
       }
     }
-    .table-size--small {
-      .status.td {
-        .bp3-progress-bar {
-          height: 3px;
-        }
-      }
-    }
   }
 }
diff --git a/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss b/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
index b1aed0430..a8d8bc7e6 100644
--- a/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
+++ b/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
@@ -1,8 +1,9 @@
 .dialog--transaction--locking {
-  max-width: 400px;
+  max-width: 450px;
+
   .bp3-form-group {
-    margin-bottom: 15px;
-    margin-top: 15px;
+    margin-bottom: 10px;
+    margin-top: 10px;
 
     label.bp3-label {
       font-size: 13px;
@@ -15,6 +16,7 @@
       .bp3-form-content {
         textarea {
           width: 100%;
+          min-height: 85px;
           min-width: 100%;
           font-size: 14px;
         }
@@ -22,6 +24,9 @@
     }
   }
   .bp3-dialog-footer {
-    padding-top: 10px;
+    display: flex;
+    justify-content: flex-start;
+    // padding-top: 10px;
+    margin-left: 10px;
   }
 }
diff --git a/src/style/pages/VendorsCreditNote/List.scss b/src/style/pages/VendorsCreditNote/List.scss
new file mode 100644
index 000000000..5119f3081
--- /dev/null
+++ b/src/style/pages/VendorsCreditNote/List.scss
@@ -0,0 +1,20 @@
+.dashboard__insider--vendors-credit-note-list {
+  .bigcapital-datatable {
+    .tbody {
+      .amount.td {
+        .cell-inner {
+          > span {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+    .table-size--small {
+      .status.td {
+        .bp3-progress-bar {
+          height: 3px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/style/pages/VendorsCreditNote/PageForm.scss b/src/style/pages/VendorsCreditNote/PageForm.scss
new file mode 100644
index 000000000..79be9954b
--- /dev/null
+++ b/src/style/pages/VendorsCreditNote/PageForm.scss
@@ -0,0 +1,49 @@
+body.page-vendor-credit-note-new,
+body.page-vendor-credit-note-edit {
+  .dashboard__footer {
+    display: none;
+  }
+}
+
+.dashboard__insider--vendor-credit-form {
+  padding-bottom: 64px;
+}
+
+.page-form--vendor-credit-note {
+  $self: '.page-form';
+
+  #{$self}__header {
+    display: flex;
+
+    &-fields {
+      flex: 1 0 0;
+    }
+
+    .bp3-label {
+      min-width: 150px;
+    }
+    .bp3-form-content {
+      width: 100%;
+    }
+
+    .bp3-form-group {
+      &.bp3-inline {
+        max-width: 450px;
+      }
+    }
+    .col--invoice-date {
+      max-width: 435px;
+    }
+  }
+  #{$self}__footer {
+    .form-group--note {
+      max-width: 450px;
+      width: 100%;
+
+      textarea {
+        width: 100%;
+        min-height: 60px;
+      }
+    }
+  }
+}
diff --git a/src/utils/styled-components.js b/src/utils/styled-components.js
deleted file mode 100644
index f03c8c2ad..000000000
--- a/src/utils/styled-components.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { css } from 'styled-components';
-
-export const whenRtl = (restCss) => css`
-  ${({ theme }) => theme.dir === 'rtl' && restCss}
-`;
-
-export const whenLtr = (restCss) => css`
-  ${({ theme }) => theme.dir === 'ltr' && restCss}
-`;