diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
index 06943211f..768267760 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
@@ -10,6 +10,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -21,8 +22,11 @@ import { Icon } from 'components';
  * Payment made floating actions bar.
  */
 export default function PaymentMadeFloatingActions() {
+  // History context.
+  const history = useHistory();
+
   // Formik context.
-  const { isSubmitting } = useFormikContext();
+  const { isSubmitting, resetForm } = useFormikContext();
 
   // Payment made form context.
   const { setSubmitPayload, paymentMadeId } = usePaymentMadeFormContext();
@@ -33,10 +37,14 @@ export default function PaymentMadeFloatingActions() {
   };
 
   // Handle clear button click.
-  const handleClearBtnClick = (event) => {};
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
 
   // Handle cancel button click.
-  const handleCancelBtnClick = (event) => {};
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
 
   // Handle submit & new button click.
   const handleSubmitAndNewClick = (event) => {
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
index 886912dae..adb12da66 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
@@ -5,7 +5,7 @@ import {
   Position,
   Classes,
   ControlGroup,
-  Button
+  Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
@@ -21,13 +21,14 @@ import {
   Money,
   Hint,
   Icon,
-  MoneyInputGroup
+  MoneyInputGroup,
 } from 'components';
 import withSettings from 'containers/Settings/withSettings';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import {
   momentFormatter,
   tansformDateValue,
+  handleDateChange,
   inputIntent,
   compose,
   safeSumBy,
@@ -40,7 +41,10 @@ import {
  */
 function PaymentMadeFormHeaderFields({ baseCurrency }) {
   // Formik form context.
-  const { values: { entries }, setFieldValue } = useFormikContext();
+  const {
+    values: { entries },
+    setFieldValue,
+  } = useFormikContext();
 
   // Payment made form context.
   const {
@@ -49,10 +53,12 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
     isNewMode,
     setPaymentVendorId,
   } = usePaymentMadeFormContext();
-  
+
   // Sumation of payable full-amount.
-  const payableFullAmount = useMemo(() => safeSumBy(entries, 'due_amount'), [entries]);
-  
+  const payableFullAmount = useMemo(() => safeSumBy(entries, 'due_amount'), [
+    entries,
+  ]);
+
   // Handle receive full-amount click.
   const handleReceiveFullAmountClick = () => {
     const newEntries = fullAmountPaymentEntries(entries);
@@ -97,7 +103,7 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
       </FastField>
 
       {/* ------------ Payment date ------------ */}
-      <FastField name={'customer_id'}>
+      <FastField name={'payment_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'payment_date'} />}
@@ -110,7 +116,9 @@ function PaymentMadeFormHeaderFields({ baseCurrency }) {
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
               value={tansformDateValue(value)}
-              //   onChange={handleDateChange('payment_date')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('payment_date', formattedDate);
+              })}
               popoverProps={{ position: Position.BOTTOM, minimal: true }}
               inputProps={{
                 leftIcon: <Icon icon={'date-range'} />,