diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
index 25a636aa0..c27023426 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
@@ -56,6 +56,7 @@ function CreditNoteForm({
     isNewMode,
     submitPayload,
     creditNote,
+    newCreditNote,
     createCreditNoteMutate,
     editCreditNoteMutate,
   } = useCreditNoteFormContext();
@@ -74,6 +75,7 @@ function CreditNoteForm({
               credit_note_number: creditNumber,
             }),
             entries: orderingLinesIndexes(defaultCreditNote.entries),
+            ...newCreditNote,
           }),
     }),
     [],
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
index 569bd27cc..539747020 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
@@ -11,6 +11,7 @@ import {
   useItems,
   useCustomers,
   useSettingsCreditNotes,
+  useInvoice,
 } from 'hooks/query';
 
 const CreditNoteFormContext = React.createContext();
@@ -19,6 +20,9 @@ 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 },
@@ -33,13 +37,17 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     page_size: 10000,
   });
 
-  // Handle fetch vendor credit details.
+  // 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();
@@ -54,6 +62,12 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
   // 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,
@@ -61,6 +75,7 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     creditNote,
     submitPayload,
     isNewMode,
+    newCreditNote,
 
     isItemsLoading,
     isCustomersLoading,
@@ -70,11 +85,14 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     setSubmitPayload,
   };
 
+  const isLoading =
+    isItemsLoading ||
+    isCustomersLoading ||
+    isCreditNoteLoading ||
+    isInvoiceLoading;
+
   return (
-    <DashboardInsider
-      loading={isItemsLoading || isCustomersLoading || isCreditNoteLoading}
-      name={'credit-note-form'}
-    >
+    <DashboardInsider loading={isLoading} name={'credit-note-form'}>
       <CreditNoteFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
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 89dc752cc..9fb628a99 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -124,7 +124,7 @@ export function ActionsMenu({
     onEdit,
     onDeliver,
     onDelete,
-    onDrawer,
+    onConvert,
     onQuick,
     onViewDetails,
     onPrint,
@@ -145,6 +145,11 @@ export function ActionsMenu({
           text={intl.get('edit_invoice')}
           onClick={safeCallback(onEdit, original)}
         />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('convert_to_credit_note')}
+          onClick={safeCallback(onConvert, original)}
+        />
 
         <If condition={!original.is_delivered}>
           <MenuItem
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index 6a7040764..0b8abb20f 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -646,6 +646,21 @@ export const getDashboardRoutes = () => [
     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(() =>
@@ -773,6 +788,21 @@ export const getDashboardRoutes = () => [
     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(() =>