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/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 feb3f934c..04a2b4138 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -92,6 +92,8 @@ export * from './TextStatus';
 export * from './Tags';
 export * from './CommercialDoc';
 export * from './Card';
+export * from './Customers'
+export * from './Vendors'
 
 const Hint = FieldHint;
 
diff --git a/src/containers/Drawers/BillDrawer/BillDetailHeader.js b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
index f002ac457..0ce3dc3b0 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailHeader.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
@@ -12,6 +12,7 @@ import {
   Col,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  VendorDrawerLink,
 } from 'components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
@@ -45,7 +46,9 @@ export default function BillDetailHeader() {
               <FormatDate value={bill.due_date} />
             </DetailItem>
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{bill.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={bill.vendor_id}>
+                {bill.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
             <DetailItem label={intl.get('bill.details.bill_number')}>
               {defaultTo(bill.bill_number, '-')}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
index 1b630d40b..ead8b8243 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -13,6 +13,7 @@ import {
   ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  CustomerDrawerLink,
 } from 'components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
@@ -48,7 +49,9 @@ export default function CreditNoteDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{creditNote.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={creditNote.customer_id}>
+                {creditNote.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
index b23e8b5ab..bf0572278 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
@@ -13,6 +13,7 @@ import {
   Row,
   Col,
   ButtonLink,
+  CustomerDrawerLink,
 } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import { EstimateDetailsStatus } from './components';
@@ -46,7 +47,9 @@ export default function EstimateDetailHeader() {
             />
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{estimate.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={estimate.customer_id}>
+                {estimate.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
index 95578c9b2..144dab077 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
@@ -12,6 +12,7 @@ import {
   FormatDate,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  CustomerDrawerLink,
 } from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 import { InvoiceDetailsStatus } from './utils';
@@ -50,9 +51,9 @@ export default function InvoiceDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink onClick={handleCustomerLinkClick}>
+              <CustomerDrawerLink customerId={invoice.customer_id}>
                 {invoice.customer?.display_name}
-              </ButtonLink>
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem label={intl.get('invoice.details.invoice_no')}>
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
index 20af0d818..6e36411f5 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -11,6 +11,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
   ButtonLink,
+  VendorDrawerLink,
 } from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
@@ -38,7 +39,9 @@ export default function PaymentMadeDetailHeader() {
               children={defaultTo(paymentMade.payment_number, '-')}
             />
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={paymentMade.vendor_id}>
+                {paymentMade.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
             <DetailItem
               label={intl.get('payment_account')}
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
index c8affc18a..182f9d7dd 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -11,6 +11,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
   ButtonLink,
+  CustomerDrawerLink,
 } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -38,7 +39,9 @@ export default function PaymentReceiveDetailHeader() {
               children={defaultTo(paymentReceive.payment_receive_no, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{paymentReceive.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={paymentReceive.customer_id}>
+                {paymentReceive.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
index fe56fea4d..ae25c7a73 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import {
   ButtonLink,
+  CustomerDrawerLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
 } from 'components';
@@ -41,7 +42,9 @@ export default function ReceiptDetailHeader() {
               children={defaultTo(receipt.receipt_number, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{receipt.customer?.display_name} </ButtonLink>
+              <CustomerDrawerLink customerId={receipt.customer_id}>
+                {receipt.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
             <DetailItem
               label={intl.get('receipt_date')}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
index b4b5ba2c5..c24d95041 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -13,6 +13,7 @@ import {
   ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  VendorDrawerLink,
 } from 'components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { VendorCreditDetailsStatus } from './utils';
@@ -44,7 +45,9 @@ export default function VendorCreditDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{vendorCredit.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>
+                {vendorCredit.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
 
             <DetailItem