diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx
index 8cb6d3294..503544f04 100644
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx
@@ -10,7 +10,7 @@ import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultPaymentMade, transformErrors } from './utils';
+import { defaultPaymentMade, transformBillToForm, transformErrors } from './utils';
 import { compose } from '@/utils';
 
 /**
@@ -20,29 +20,24 @@ function QuickPaymentMadeForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const {
-    bill,
-    dialogName,
-    createPaymentMadeMutate,
-  } = useQuickPaymentMadeContext();
+  const { bill, dialogName, createPaymentMadeMutate } =
+    useQuickPaymentMadeContext();
 
   // Initial form values.
   const initialValues = {
     ...defaultPaymentMade,
-    ...bill,
+    ...transformBillToForm(bill),
   };
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
     const entries = [
       {
         payment_amount: values.amount,
-        bill_id: values.id,
+        bill_id: values.bill_id,
       },
     ];
     const form = {
-      ...omit(values, ['payment_amount']),
-      vendor_id: values?.vendor?.id,
-      amount: values?.payment_amount,
+      ...omit(values, ['bill_id']),
       entries,
     };
 
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx
index cc444ab6b..b79a31e89 100644
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DialogContent } from '@/components';
 import {
   useBill,
@@ -11,7 +11,6 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { pick } from 'lodash';
 
-
 const QuickPaymentMadeContext = React.createContext();
 
 /**
@@ -40,13 +39,14 @@ function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) {
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const paymentBill = useMemo(
+    () => pick(bill, ['id', 'due_amount', 'vendor_id', 'currency_code']),
+    [bill],
+  );
+
   // State provider.
   const provider = {
-    bill: {
-      ...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']),
-      vendor_id: bill?.vendor?.display_name,
-      payment_amount: bill?.due_amount,
-    },
+    bill: paymentBill,
     accounts,
     branches,
     dialogName,
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx
index 4c3e105e5..03470ff50 100644
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx
@@ -2,15 +2,16 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
+import { useFormikContext } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
-import { useFormikContext } from 'formik';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {
+  bill_id: '',
   vendor_id: '',
   payment_account_id: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
@@ -20,7 +21,6 @@ export const defaultPaymentMade = {
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ bill_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -59,3 +59,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformBillToForm = (bill) => {
+  return {
+    ...pick(bill, ['vendor_id', 'currency_code']),
+    amount: bill.due_amount,
+    bill_id: bill.id,
+  };
+}
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx
index 664ab64bb..b2326c525 100644
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx
@@ -12,7 +12,11 @@ import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultInitialValues, transformErrors } from './utils';
+import {
+  defaultInitialValues,
+  transformErrors,
+  transformInvoiceToForm,
+} from './utils';
 import { compose, transactionNumber } from '@/utils';
 
 /**
@@ -44,24 +48,22 @@ function QuickPaymentReceiveForm({
       payment_receive_no: nextPaymentNumber,
     }),
     deposit_account_id: defaultTo(preferredDepositAccount, ''),
-    ...invoice,
+    ...transformInvoiceToForm(invoice),
   };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
     const entries = [
       {
-        invoice_id: values.id,
+        invoice_id: values.invoice_id,
         payment_amount: values.amount,
       },
     ];
     const form = {
-      ...omit(values, ['payment_receive_no', 'payment_amount']),
+      ...omit(values, ['payment_receive_no', 'invoice_id']),
       ...(!paymentReceiveAutoIncrement && {
         payment_receive_no: values.payment_receive_no,
       }),
-      customer_id: values.customer.id,
-      amount: values.payment_amount,
       entries,
     };
 
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx
index 0c17e7ee1..64438f4ed 100644
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useContext, createContext } from 'react';
+import React, { useContext, createContext, useMemo } from 'react';
 import { pick } from 'lodash';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
@@ -47,15 +47,16 @@ function QuickPaymentReceiveFormProvider({
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const invoicePayment = useMemo(
+    () => pick(invoice, ['id', 'due_amount', 'customer_id', 'currency_code']),
+    [invoice],
+  );
+
   // State provider.
   const provider = {
     accounts,
     branches,
-    invoice: {
-      ...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']),
-      customer_id: invoice?.customer?.display_name,
-      payment_amount: invoice.due_amount,
-    },
+    invoice: invoicePayment,
     isAccountsLoading,
     isSettingsLoading,
     isBranchesSuccess,
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx
index 5b74b8268..c6e7a8bb9 100644
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
 
@@ -10,6 +10,7 @@ import { useFormikContext } from 'formik';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 
 export const defaultInitialValues = {
+  invoice_id: '',
   customer_id: '',
   deposit_account_id: '',
   payment_receive_no: '',
@@ -19,7 +20,6 @@ export const defaultInitialValues = {
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ invoice_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -45,7 +45,9 @@ export const transformErrors = (errors, { setFieldError }) => {
   }
   if (getError('PAYMENT_ACCOUNT_CURRENCY_INVALID')) {
     AppToaster.show({
-      message: intl.get('payment_Receive.error.payment_account_currency_invalid'),
+      message: intl.get(
+        'payment_Receive.error.payment_account_currency_invalid',
+      ),
       intent: Intent.DANGER,
     });
   }
@@ -65,3 +67,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformInvoiceToForm = (invoice) => {
+  return {
+    ...pick(invoice, ['customer_id', 'currency_code']),
+    amount: invoice.due_amount,
+    invoice_id: invoice.id,
+  };
+};