diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx
index 88fc83397..344c4712d 100644
--- a/packages/webapp/src/components/DrawersContainer.tsx
+++ b/packages/webapp/src/components/DrawersContainer.tsx
@@ -26,6 +26,7 @@ import ChangeSubscriptionPlanDrawer from '@/containers/Subscriptions/drawers/Cha
 import { InvoiceCustomizeDrawer } from '@/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer';
 import { EstimateCustomizeDrawer } from '@/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer';
 import { ReceiptCustomizeDrawer } from '@/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer';
+import { CreditNoteCustomizeDrawer } from '@/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer';
 
 import { DRAWERS } from '@/constants/drawers';
 /**
@@ -70,6 +71,7 @@ export default function DrawersContainer() {
       <InvoiceCustomizeDrawer name={DRAWERS.INVOICE_CUSTOMIZE} />
       <EstimateCustomizeDrawer name={DRAWERS.ESTIMATE_CUSTOMIZE} />
       <ReceiptCustomizeDrawer name={DRAWERS.RECEIPT_CUSTOMIZE} />
+      <CreditNoteCustomizeDrawer name={DRAWERS.CREDIT_NOTE_CUSTOMIZE} />
     </div>
   );
 }
diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts
index 82a4c7967..43bca2f59 100644
--- a/packages/webapp/src/constants/drawers.ts
+++ b/packages/webapp/src/constants/drawers.ts
@@ -29,4 +29,5 @@ export enum DRAWERS {
   ESTIMATE_CUSTOMIZE = 'ESTIMATE_CUSTOMIZE',
   PAYMENT_RECEIPT_CUSTOMIZE = 'PAYMENT_RECEIPT_CUSTOMIZE',
   RECEIPT_CUSTOMIZE = 'RECEIPT_CUSTOMIZE',
+  CREDIT_NOTE_CUSTOMIZE = 'CREDIT_NOTE_CUSTOMIZE'
 }
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx
index 5ad2f4edf..75bbcacd6 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx
@@ -8,6 +8,11 @@ import {
   NavbarGroup,
   Intent,
   Alignment,
+  Menu,
+  MenuItem,
+  Popover,
+  PopoverInteractionKind,
+  Position,
 } from '@blueprintjs/core';
 import {
   Icon,
@@ -30,9 +35,11 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withVendorsCreditNotes from './withVendorsCreditNotes';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withVendorActions from './withVendorActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Vendors Credit note  table actions bar.
@@ -54,6 +61,9 @@ function VendorsCreditNoteActionsBar({
 
   // #withDialogActions
   openDialog,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   const history = useHistory();
 
@@ -92,6 +102,10 @@ function VendorsCreditNoteActionsBar({
   const handlePrintBtnClick = () => {
     downloadExportPdf({ resource: 'VendorCredit' });
   };
+  // Handle the customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.CREDIT_NOTE_DETAILS);
+  };
 
   return (
     <DashboardActionsBar>
@@ -152,6 +166,25 @@ function VendorsCreditNoteActionsBar({
         <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                onClick={handleCustomizeBtnClick}
+                text={'Customize Credit Note'}
+              />
+            </Menu>
+          }
+        >
+          <Button icon={<Icon icon="cog-16" iconSize={16} />} minimal={true} />
+        </Popover>
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}
@@ -173,4 +206,5 @@ export default compose(
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
   })),
   withDialogActions,
+  withDrawerActions,
 )(VendorsCreditNoteActionsBar);
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
new file mode 100644
index 000000000..8065e7479
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
@@ -0,0 +1,3 @@
+export default function CreditNoteCustomizeContent() {
+  return <h1>asdasd</h1>;
+}
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx
new file mode 100644
index 000000000..dc6ad6a19
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx
@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+const CreditNoteCustomizeContent = React.lazy(
+  () => import('./CreditNoteCustomizeContent'),
+);
+
+/**
+ * Invoice customize drawer.
+ * @returns {React.ReactNode}
+ */
+function CreditNoteCustomizeDrawerRoot({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: {},
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'100%'}>
+      <DrawerSuspense>
+        <CreditNoteCustomizeContent />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export const CreditNoteCustomizeDrawer = R.compose(withDrawers())(
+  CreditNoteCustomizeDrawerRoot,
+);
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx
index 332ad9352..963ae005d 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx
@@ -6,6 +6,11 @@ import {
   NavbarDivider,
   NavbarGroup,
   Alignment,
+  Menu,
+  MenuItem,
+  Popover,
+  PopoverInteractionKind,
+  Position,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import {
@@ -28,9 +33,11 @@ import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { DialogsName } from '@/constants/dialogs';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Credit note table actions bar.
@@ -50,6 +57,9 @@ function CreditNotesActionsBar({
 
   // #withDialogActions
   openDialog,
+
+  // #withDrawerActions
+  openDrawer
 }) {
   const history = useHistory();
 
@@ -89,6 +99,10 @@ function CreditNotesActionsBar({
   const handlePrintBtnClick = () => {
     downloadExportPdf({ resource: 'CreditNote' });
   };
+  // Handle the customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.CREDIT_NOTE_CUSTOMIZE);
+  }
 
   return (
     <DashboardActionsBar>
@@ -149,6 +163,25 @@ function CreditNotesActionsBar({
         <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                onClick={handleCustomizeBtnClick}
+                text={'Customize Invoice'}
+              />
+            </Menu>
+          }
+        >
+          <Button icon={<Icon icon="cog-16" iconSize={16} />} minimal={true} />
+        </Popover>
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}
@@ -169,4 +202,5 @@ export default compose(
     creditNoteTableSize: creditNoteSettings?.tableSize,
   })),
   withDialogActions,
+  withDrawerActions
 )(CreditNotesActionsBar);