diff --git a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
index 2fb11a057..9f76aaaaf 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
@@ -25,7 +25,6 @@ import {
   FTextArea,
   FMoneyInputGroup,
 } from '@/components';
-import { DateInput } from '@blueprintjs/datetime';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
 
 import {
@@ -73,29 +72,22 @@ export default function OtherIncomeFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                fill: true,
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={5}>
@@ -134,10 +126,7 @@ export default function OtherIncomeFormFields() {
             <FAccountsSuggestField
               name={'credit_account_id'}
               items={accounts}
-              filterByTypes={[
-                ACCOUNT_TYPE.INCOME,
-                ACCOUNT_TYPE.OTHER_INCOME,
-              ]}
+              filterByTypes={[ACCOUNT_TYPE.INCOME, ACCOUNT_TYPE.OTHER_INCOME]}
             />
           </FFormGroup>
         </Col>
diff --git a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
index 6514039f3..8c6d29358 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
 import { Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { DateInput } from '@blueprintjs/datetime';
 import {
   FormattedMessage as T,
   FAccountsSuggestField,
@@ -14,11 +13,11 @@ import {
   BranchSelect,
   BranchSelectButton,
   FeatureCan,
-
   FFormGroup,
   FMoneyInputGroup,
   FTextArea,
   FInputGroup,
+  FDateInput,
 } from '@/components';
 import { ACCOUNT_TYPE, CLASSES, Features } from '@/constants';
 import {
@@ -69,29 +68,25 @@ export default function OwnerContributionFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+              inputProps={{
+                fill: true,
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FFormGroup>
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
diff --git a/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
index ed49d476d..2a659a19a 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
@@ -1,7 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -17,16 +15,13 @@ import {
   FMoneyInputGroup,
   FFormGroup,
   FTextArea,
+  FDateInput,
+  FInputGroup,
 } from '@/components';
 import { MoneyInOutTransactionNoField } from '../../_components';
 import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from '@/utils';
+import { momentFormatter } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
 import {
@@ -66,29 +61,21 @@ export default function TransferFromAccountFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+            />
+          </FFormGroup>
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
diff --git a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx
index e526ab221..56d8d719b 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx
@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
 import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -17,15 +16,10 @@ import {
   FFormGroup,
   FInputGroup,
   FMoneyInputGroup,
+  FDateInput,
 } from '@/components';
-import { DateInput } from '@blueprintjs/datetime';
 import { Features, ACCOUNT_TYPE } from '@/constants';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from '@/utils';
+import { momentFormatter } from '@/utils';
 import { CLASSES } from '@/constants/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
@@ -65,29 +59,23 @@ export default function OtherExpnseFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+              fastField
+            />
+          </FFormGroup>
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
diff --git a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx
index 99b6e870c..5c7a73c4d 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx
@@ -1,7 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -18,14 +16,10 @@ import {
   FTextArea,
   FInputGroup,
   FMoneyInputGroup,
+  FDateInput,
 } from '@/components';
 import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from '@/utils';
+import { momentFormatter } from '@/utils';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
   useSetPrimaryBranchToForm,
@@ -67,29 +61,21 @@ export default function OwnerDrawingsFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+            />
+          </FFormGroup>
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
diff --git a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx
index c3a9e332f..2856341f7 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { ErrorMessage } from 'formik';
 import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -17,14 +17,12 @@ import {
   FTextArea,
   FMoneyInputGroup,
   FInputGroup,
+  FDateInput,
 } from '@/components';
-import { DateInput } from '@blueprintjs/datetime';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import {
   inputIntent,
   momentFormatter,
-  tansformDateValue,
-  handleDateChange,
 } from '@/utils';
 import { Features } from '@/constants';
 import { CLASSES } from '@/constants/classes';
@@ -66,31 +64,23 @@ export default function TransferToAccountFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="date" />}
-                minimal={true}
-                className={classNames(CLASSES.FILL, 'form-group--date')}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+              fastField
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={5}>
diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
index 09d432762..0d054efee 100644
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
@@ -4,15 +4,14 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import { FastField, ErrorMessage, Field } from 'formik';
+import { Classes, FormGroup, Position } from '@blueprintjs/core';
 import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-} from '@blueprintjs/core';
-import { FFormGroup, FormattedMessage as T } from '@/components';
-import { DateInput } from '@blueprintjs/datetime';
+  FFormGroup,
+  FormattedMessage as T,
+  FDateInput,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
 import { useAutofocus } from '@/hooks';
 import {
   ListSelect,
@@ -25,13 +24,7 @@ import {
   BranchSelectButton,
   FAccountsSuggestField,
 } from '@/components';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  toSafeNumber,
-} from '@/utils';
+import { inputIntent, momentFormatter, toSafeNumber } from '@/utils';
 import { Features, CLASSES } from '@/constants';
 
 import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
@@ -107,30 +100,24 @@ export default function InventoryAdjustmentFormDialogFields() {
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  value={tansformDateValue(value)}
-                  popoverProps={{
-                    position: Position.BOTTOM,
-                    minimal: true,
-                  }}
-                  intent={inputIntent({ error, touched })}
-                  inputRef={(ref) => (dateFieldRef.current = ref)}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+              inputRef={(ref) => (dateFieldRef.current = ref)}
+              fastField
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={5}>
@@ -190,38 +177,23 @@ export default function InventoryAdjustmentFormDialogFields() {
       </FFormGroup>
 
       {/*------------ Reference -----------*/}
-      <FastField name={'reference_no'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-            className={'form-group--reference-no'}
-          >
-            <InputGroup intent={inputIntent({ error, touched })} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference_no'}
+        label={<T id={'reference_no'} />}
+        fastField
+      >
+        <FInputGroup name={'reference_no'} fastField />
+      </FFormGroup>
 
       {/*------------ Adjustment reasons -----------*/}
-      <FastField name={'reason'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'adjustment_reasons'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--adjustment-reasons'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'reason'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reason'}
+        label={<T id={'adjustment_reasons'} />}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+      >
+        <FTextArea name={'reason'} growVertically large fastField />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.tsx b/packages/webapp/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.tsx
index 245b8118a..a69b3a958 100644
--- a/packages/webapp/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.tsx
@@ -1,11 +1,16 @@
 // @ts-nocheck
 import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
-import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
+import { Classes, FormGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
-import { FieldRequiredHint, FormattedMessage as T } from '@/components';
+import {
+  FieldRequiredHint,
+  FormattedMessage as T,
+  FFormGroup,
+  FTextArea,
+} from '@/components';
 import { useAutofocus } from '@/hooks';
 import {
   inputIntent,
@@ -50,25 +55,20 @@ export default function LockingTransactionsFormFields() {
       </FastField>
 
       {/*------------ Locking  Reason -----------*/}
-      <FastField name={'reason'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'locking_transactions.dialog.reason'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--reason'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'reason'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              inputRef={(ref) => (reasonFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reason'}
+        label={<T id={'locking_transactions.dialog.reason'} />}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+      >
+        <FTextArea
+          name={'reason'}
+          growVertically={true}
+          large={true}
+          inputRef={(ref) => (reasonFieldRef.current = ref)}
+          fastField
+        />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx
index c079f39df..caef762c4 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx
@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField } from 'formik';
-import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
+import { Position } from '@blueprintjs/core';
 import {
   FormattedMessage as T,
   Row,
@@ -10,16 +8,13 @@ import {
   FieldHint,
   FFormGroup,
   VendorsMultiSelect,
+  FDateInput,
+  FInputGroup,
 } from '@/components';
 import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import { filterVendorsOptions } from './constants';
-import {
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-  handleDateChange,
-} from '@/utils';
+import { momentFormatter } from '@/utils';
 
 /**
  * AP Aging Summary - Drawer Header - General panel - Content.
@@ -31,59 +26,46 @@ export default function APAgingSummaryHeaderGeneralContent() {
     <div>
       <Row>
         <Col xs={5}>
-          <FastField name={'asDate'}>
-            {({ form, field: { value }, meta: { error } }) => (
-              <FormGroup
-                label={<T id={'as_date'} />}
-                labelInfo={<FieldHint />}
-                fill={true}
-                intent={inputIntent({ error })}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((selectedDate) => {
-                    form.setFieldValue('asDate', selectedDate);
-                  })}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  minimal={true}
-                  fill={true}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'asDate'}
+            label={<T id={'as_date'} />}
+            labelInfo={<FieldHint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'asDate'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              minimal
+              fill
+              fastField
+            />
+          </FFormGroup>
         </Col>
       </Row>
 
       <Row>
         <Col xs={5}>
-          <FastField name={'agingDaysBefore'}>
-            {({ field, meta: { error } }) => (
-              <FormGroup
-                label={<T id={'aging_before_days'} />}
-                labelInfo={<FieldHint />}
-                intent={inputIntent({ error })}
-              >
-                <InputGroup intent={error && Intent.DANGER} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'agingDaysBefore'}
+            label={<T id={'aging_before_days'} />}
+            labelInfo={<FieldHint />}
+          >
+            <FInputGroup name={'agingDaysBefore'} />
+          </FFormGroup>
         </Col>
       </Row>
 
       <Row>
         <Col xs={5}>
-          <FastField name={'agingPeriods'}>
-            {({ field, meta: { error } }) => (
-              <FormGroup
-                label={<T id={'aging_periods'} />}
-                labelInfo={<FieldHint />}
-                intent={inputIntent({ error })}
-              >
-                <InputGroup intent={error && Intent.DANGER} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'agingPeriods'}
+            label={<T id={'aging_periods'} />}
+            labelInfo={<FieldHint />}
+          >
+            <FInputGroup name={'agingPeriods'} />
+          </FFormGroup>
         </Col>
       </Row>
 
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx
index 9d7ded2dc..c17ce69a4 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx
@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
-import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import { Position } from '@blueprintjs/core';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
   FormattedMessage as T,
@@ -12,6 +10,7 @@ import {
   FInputGroup,
   FFormGroup,
   CustomersMultiSelect,
+  FDateInput,
 } from '@/components';
 import { momentFormatter } from '@/utils';
 import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
@@ -28,48 +27,35 @@ export default function ARAgingSummaryHeaderGeneralContent() {
     <div>
       <Row>
         <Col xs={5}>
-          <FastField name={'asDate'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'as_date'} />}
-                labelInfo={<FieldHint />}
-                fill={true}
-                intent={error && Intent.DANGER}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={value}
-                  onChange={(selectedDate) => {
-                    form.setFieldValue('asDate', selectedDate);
-                  }}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  minimal={true}
-                  fill={true}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'asDate'}
+            label={<T id={'as_date'} />}
+            labelInfo={<FieldHint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'asDate'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              minimal
+              fill
+              fastField
+            />
+          </FFormGroup>
         </Col>
       </Row>
 
       <Row>
         <Col xs={5}>
-          <FastField name={'agingDaysBefore'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'aging_before_days'} />}
-                labelInfo={<FieldHint />}
-                className={'form-group--aging-before-days'}
-                intent={error && Intent.DANGER}
-              >
-                <InputGroup
-                  medium={true}
-                  intent={error && Intent.DANGER}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'agingDaysBefore'}
+            label={<T id={'aging_before_days'} />}
+            labelInfo={<FieldHint />}
+            fastField
+          >
+            <FInputGroup name={'agingDaysBefore'} medium={true} fastField />
+          </FFormGroup>
         </Col>
       </Row>
 
diff --git a/packages/webapp/src/containers/FinancialStatements/FinancialStatementDateRange.tsx b/packages/webapp/src/containers/FinancialStatements/FinancialStatementDateRange.tsx
index fdb09cf35..6d8a1b1dc 100644
--- a/packages/webapp/src/containers/FinancialStatements/FinancialStatementDateRange.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialStatementDateRange.tsx
@@ -3,10 +3,9 @@ import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { FastField, ErrorMessage } from 'formik';
-import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
+import { HTMLSelect, FormGroup, Position } from '@blueprintjs/core';
 
-import { Row, Col, Hint } from '@/components';
+import { Row, Col, Hint, FDateInput, FFormGroup } from '@/components';
 import { momentFormatter, parseDateRangeQuery } from '@/utils';
 import { dateRangeOptions } from './constants';
 
@@ -60,66 +59,43 @@ export default function FinancialStatementDateRange() {
 
       <Row>
         <Col xs={4}>
-          <FastField name={'fromDate'}>
-            {({
-              form: { setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={intl.get('from_date')}
-                labelInfo={<Hint />}
-                fill={true}
-                intent={error && Intent.DANGER}
-                helperText={<ErrorMessage name={'fromDate'} />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY-MM-DD')}
-                  value={value}
-                  onChange={(selectedDate) => {
-                    setFieldValue('fromDate', selectedDate);
-                  }}
-                  popoverProps={{ minimal: true, position: Position.BOTTOM }}
-                  canClearSelection={false}
-                  minimal={true}
-                  fill={true}
-                  maxDate={FINANCIAL_REPORT_MAX_DATE}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'fromDate'}
+            label={intl.get('from_date')}
+            labelInfo={<Hint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'fromDate'}
+              {...momentFormatter('YYYY-MM-DD')}
+              popoverProps={{ minimal: true, position: Position.BOTTOM_LEFT }}
+              maxDate={FINANCIAL_REPORT_MAX_DATE}
+              canClearSelection={false}
+              minimal
+              fill
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={4}>
-          <FastField name={'toDate'}>
-            {({
-              form: { setFieldValue },
-              field: { value },
-              meta: { error },
-            }) => (
-              <FormGroup
-                label={intl.get('to_date')}
-                labelInfo={<Hint />}
-                fill={true}
-                intent={error && Intent.DANGER}
-                helperText={<ErrorMessage name={'toDate'} />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY-MM-DD')}
-                  value={value}
-                  onChange={(selectedDate) => {
-                    setFieldValue('toDate', selectedDate);
-                  }}
-                  popoverProps={{ minimal: true, position: Position.BOTTOM }}
-                  canClearSelection={false}
-                  fill={true}
-                  minimal={true}
-                  intent={error && Intent.DANGER}
-                  maxDate={FINANCIAL_REPORT_MAX_DATE}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'toDate'}
+            label={intl.get('to_date')}
+            labelInfo={<Hint />}
+            fill
+            fastField
+          >
+            <FDateInput
+              name={'toDate'}
+              {...momentFormatter('YYYY-MM-DD')}
+              popoverProps={{ minimal: true, position: Position.BOTTOM }}
+              canClearSelection={false}
+              fill
+              minimal
+              maxDate={FINANCIAL_REPORT_MAX_DATE}
+            />
+          </FFormGroup>
         </Col>
       </Row>
     </>
diff --git a/packages/webapp/src/containers/Items/ItemFormBody.tsx b/packages/webapp/src/containers/Items/ItemFormBody.tsx
index 7e5782599..aa12c7c80 100644
--- a/packages/webapp/src/containers/Items/ItemFormBody.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormBody.tsx
@@ -1,13 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useFormikContext, FastField, ErrorMessage } from 'formik';
-import {
-  FormGroup,
-  Classes,
-  TextArea,
-  Checkbox,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
 import {
   AccountsSelect,
   MoneyInputGroup,
@@ -16,6 +10,7 @@ import {
   Hint,
   InputPrependText,
   FFormGroup,
+  FTextArea,
 } from '@/components';
 import { FormattedMessage as T } from '@/components';
 
@@ -130,28 +125,22 @@ function ItemFormBody({ organization: { base_currency } }) {
             />
           </FFormGroup>
 
-          <FastField
+          <FFormGroup
             name={'sell_description'}
+            label={<T id={'description'} />}
+            inline={true}
             sellable={values.sellable}
             shouldUpdate={sellDescriptionFieldShouldUpdate}
+            fastField
           >
-            {({ form: { values }, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'description'} />}
-                className={'form-group--sell-description'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'description'} />}
-                inline={true}
-              >
-                <TextArea
-                  growVertically={true}
-                  height={280}
-                  {...field}
-                  disabled={!values.sellable}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+            <FTextArea
+              name={'sell_description'}
+              growVertically={true}
+              height={280}
+              disabled={!values.sellable}
+              fastField
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={6}>
@@ -246,28 +235,22 @@ function ItemFormBody({ organization: { base_currency } }) {
             />
           </FFormGroup>
 
-          <FastField
+          <FFormGroup
             name={'purchase_description'}
+            label={<T id={'description'} />}
+            className={'form-group--purchase-description'}
+            helperText={<ErrorMessage name={'description'} />}
+            inline={true}
             purchasable={values.purchasable}
             shouldUpdate={purchaseDescFieldShouldUpdate}
           >
-            {({ form: { values }, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'description'} />}
-                className={'form-group--purchase-description'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'description'} />}
-                inline={true}
-              >
-                <TextArea
-                  growVertically={true}
-                  height={280}
-                  {...field}
-                  disabled={!values.purchasable}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+            <FTextArea
+              name={'purchase_description'}
+              growVertically={true}
+              height={280}
+              disabled={!values.purchasable}
+            />
+          </FFormGroup>
         </Col>
       </Row>
     </div>
diff --git a/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx b/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
index 2f50a5f60..58e241a87 100644
--- a/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
@@ -2,7 +2,6 @@
 import React, { useEffect, useRef } from 'react';
 import {
   FormGroup,
-  InputGroup,
   RadioGroup,
   Classes,
   Radio,
@@ -20,6 +19,7 @@ import {
   FormattedHTMLMessage,
   FFormGroup,
   FSelect,
+  FInputGroup,
 } from '@/components';
 import classNames from 'classnames';
 
@@ -94,44 +94,30 @@ export default function ItemFormPrimarySection() {
       <Row>
         <Col xs={7}>
           {/*----------- Item name ----------*/}
-          <FastField name={'name'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'item_name'} />}
-                labelInfo={<FieldRequiredHint />}
-                className={'form-group--item-name'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'name'} />}
-                inline={true}
-              >
-                <InputGroup
-                  medium={true}
-                  {...field}
-                  intent={inputIntent({ error, touched })}
-                  inputRef={(ref) => (nameFieldRef.current = ref)}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'name'}
+            label={<T id={'item_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            fastField
+          >
+            <FInputGroup
+              name={'name'}
+              medium={true}
+              inputRef={(ref) => (nameFieldRef.current = ref)}
+              fastField
+            />
+          </FFormGroup>
 
           {/*----------- SKU ----------*/}
-          <FastField name={'code'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'item_code'} />}
-                className={'form-group--item_code'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'code'} />}
-                inline={true}
-              >
-                <InputGroup
-                  medium={true}
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'code'}
+            label={<T id={'item_code'} />}
+            inline={true}
+            fastField
+          >
+            <FInputGroup name={'code'} medium={true} fastField />
+          </FFormGroup>
 
           {/*----------- Item category ----------*/}
           <FFormGroup
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
index a7b091ba8..04f0c95a5 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
@@ -127,34 +127,26 @@ function BillFormHeader() {
       </FastField>
 
       {/* ------- Bill number ------- */}
-      <FastField name={'bill_number'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'bill_number'} />}
-            inline={true}
-            className={('form-group--bill_number', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="bill_number" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'bill_number'}
+        label={<T id={'bill_number'} />}
+        inline
+        fill
+        fastField
+      >
+        <FInputGroup name={'bill_number'} minimal={true} fastField />
+      </FFormGroup>
 
       {/* ------- Reference ------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference_no'}
+        label={<T id={'reference'} />}
+        inline={true}
+        fill
+        fastField
+      >
+        <FInputGroup name={'reference_no'} minimal={true} fastField />
+      </FFormGroup>
 
       {/*------------ Project name -----------*/}
       <FeatureCan feature={Features.Projects}>
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
index dcbb17134..038ec6299 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
@@ -23,6 +23,7 @@ import {
   VendorDrawerLink,
   VendorsSelect,
   Stack,
+  FDateInput,
 } from '@/components';
 import {
   vendorsFieldShouldUpdate,
@@ -108,86 +109,63 @@ function VendorCreditNoteFormHeaderFields({
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
+
       {/* ------- Vendor Credit date ------- */}
-      <FastField name={'vendor_credit_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'credit_note.label_credit_note_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames(
-              'form-group--vendor_credit_date',
-              CLASSES.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="vendor_credit_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('vendor_credit_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'vendor_credit_date'}
+        label={<T id={'credit_note.label_credit_note_date'} />}
+        inline
+        labelInfo={<FieldRequiredHint />}
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'vendor_credit_date'}
+          {...momentFormatter('YYYY/MM/DD')}
+          popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+          inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
+          fill
+          fastField
+        />
+      </FFormGroup>
 
       {/* ----------- Vendor Credit No # ----------- */}
-      <FastField name={'vendor_credit_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'credit_note.label_credit_note'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={('form-group--vendor_credit_number', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="vendor_credit_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleVendorCreditNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleVendorCreditNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T
-                      id={'setting_your_auto_generated_vendor_credit_number'}
-                    />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+
+      <FFormGroup
+        name={'vendor_credit_number'}
+        label={<T id={'credit_note.label_credit_note'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'vendor_credit_number'}
+            minimal={true}
+            asyncControl={true}
+            onBlur={handleVendorCreditNoBlur}
+            fastField
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleVendorCreditNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_vendor_credit_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup label={<T id={'reference_no'} />} inline={true} fastField>
+        <FInputGroup name={'reference_no'} minimal={true} fastField />
+      </FFormGroup>
     </Stack>
   );
 }
diff --git a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
index 4b0fc105f..628aa56b5 100644
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
@@ -17,6 +17,7 @@ import { css } from '@emotion/css';
 import { Theme, useTheme } from '@emotion/react';
 
 import {
+  FDateInput,
   FInputGroup,
   FMoneyInputGroup,
   Stack,
@@ -117,30 +118,22 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       />
 
       {/* ------------ Payment date ------------ */}
-      <FastField name={'payment_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('payment_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'payment_date'}
+        label={<T id={'payment_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'payment_date'}
+          {...momentFormatter('YYYY/MM/DD')}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
+          fastField
+        />
+      </FFormGroup>
 
       {/* ------------ Full amount ------------ */}
       <FFormGroup
@@ -173,23 +166,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       </FFormGroup>
 
       {/* ------------ Payment number ------------ */}
-      <FastField name={'payment_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_no'} />}
-            inline={true}
-            className={('form-group--payment_number', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_number" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'payment_number'}
+        label={<T id={'payment_no'} />}
+        inline={true}
+        fastField
+      >
+        <FInputGroup name={'payment_number'} minimal={true} fastField />
+      </FFormGroup>
 
       {/* ------------ Payment account ------------ */}
       <FFormGroup