diff --git a/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx b/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx
index 8ba14f41c..14953348a 100644
--- a/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx
@@ -17,7 +17,7 @@ import {
   FeatureCan,
   InputPrependText,
 } from '@/components';
-import { FMoneyInputGroup, FFormGroup } from '@/components/Forms';
+import { FMoneyInputGroup, FFormGroup, FDateInput } from '@/components/Forms';
 
 import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
 import { useSetPrimaryBranchToForm } from './utils';
@@ -59,28 +59,24 @@ function CustomerOpeningBalanceFields({
       </FFormGroup>
 
       {/*------------ Opening balance at -----------*/}
-      <FastField name={'opening_balance_at'}>
-        {({ form, field: { value } }) => (
-          <FormGroup
-            label={
-              <T id={'customer_opening_balance.label.opening_balance_at'} />
-            }
-            className={Classes.FILL}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('opening_balance_at', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'opening_balance_at'}
+        label={<T id={'customer_opening_balance.label.opening_balance_at'} />}
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'opening_balance_at'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>
 
       <If condition={!isEqual(base_currency, customer.currency_code)}>
         {/*------------ Opening balance exchange rate -----------*/}
@@ -99,12 +95,15 @@ function CustomerOpeningBalanceFields({
         <FFormGroup
           label={<T id={'branch'} />}
           name={'opening_balance_branch_id'}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          fill
+          fastField
         >
           <BranchSelect
             name={'opening_balance_branch_id'}
             branches={branches}
             popoverProps={{ minimal: true }}
+            fastField
+            fill
           />
         </FFormGroup>
       </FeatureCan>
diff --git a/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.tsx b/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.tsx
index eaf71c372..f36f0b991 100644
--- a/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.tsx
@@ -44,6 +44,7 @@ function CustomerOpeningBalanceForm({
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     const formValues = {
       ...values,
+      opening_balance_at: moment(values.opening_balance_at).format('YYYY-MM-DD'),
     };
 
     // Handle request response success.
diff --git a/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.tsx b/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.tsx
index 387028de5..7bb9158ae 100644
--- a/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.tsx
@@ -45,6 +45,7 @@ function VendorOpeningBalanceForm({
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     const formValues = {
       ...values,
+      opening_balance_at: moment(values.opening_balance_at).format('YYYY-MM-DD'),
     };
 
     // Handle request response success.
diff --git a/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.tsx b/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.tsx
index 87f9a02c9..12597eedf 100644
--- a/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.tsx
@@ -17,7 +17,7 @@ import {
   FeatureCan,
   InputPrependText,
 } from '@/components';
-import { FMoneyInputGroup, FFormGroup } from '@/components/Forms';
+import { FMoneyInputGroup, FFormGroup, FDateInput } from '@/components/Forms';
 
 import { useVendorOpeningBalanceContext } from './VendorOpeningBalanceFormProvider';
 import { useSetPrimaryBranchToForm } from './utils';
@@ -59,26 +59,24 @@ function VendorOpeningBalanceFormFields({
       </FFormGroup>
 
       {/*------------ Opening balance at -----------*/}
-      <FastField name={'opening_balance_at'}>
-        {({ form, field: { value } }) => (
-          <FormGroup
-            label={<T id={'vendor_opening_balance.label.opening_balance_at'} />}
-            className={Classes.FILL}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('opening_balance_at', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'opening_balance_at'}
+        label={<T id={'vendor_opening_balance.label.opening_balance_at'} />}
+        fill
+        fastField
+      >
+        <FDateInput
+          name={'opening_balance_at'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>
 
       <If condition={!isEqual(base_currency, vendor.currency_code)}>
         {/*------------ Opening balance exchange rate -----------*/}
@@ -97,7 +95,8 @@ function VendorOpeningBalanceFormFields({
         <FFormGroup
           label={<T id={'branch'} />}
           name={'opening_balance_branch_id'}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          fill
+          fastField
         >
           <BranchSelect
             name={'opening_balance_branch_id'}
diff --git a/packages/webapp/src/hooks/query/customers.tsx b/packages/webapp/src/hooks/query/customers.tsx
index d14afe1b9..a15ec4b50 100644
--- a/packages/webapp/src/hooks/query/customers.tsx
+++ b/packages/webapp/src/hooks/query/customers.tsx
@@ -180,7 +180,7 @@ export function useEditCustomerOpeningBalance(props) {
 
   return useMutation(
     ([id, values]) =>
-      apiRequest.post(`customers/${id}/opening_balance`, values),
+      apiRequest.put(`customers/${id}/opening-balance`, values),
     {
       onSuccess: (res, [id, values]) => {
         // Invalidate specific customer.
diff --git a/packages/webapp/src/hooks/query/vendors.tsx b/packages/webapp/src/hooks/query/vendors.tsx
index 21d8d552d..a9c55b8d5 100644
--- a/packages/webapp/src/hooks/query/vendors.tsx
+++ b/packages/webapp/src/hooks/query/vendors.tsx
@@ -167,7 +167,7 @@ export function useEditVendorOpeningBalance(props) {
   const apiRequest = useApiRequest();
 
   return useMutation(
-    ([id, values]) => apiRequest.post(`vendors/${id}/opening_balance`, values),
+    ([id, values]) => apiRequest.put(`vendors/${id}/opening-balance`, values),
     {
       onSuccess: (res, [id, values]) => {
         // Invalidate specific vendor.