diff --git a/packages/server/src/modules/CreditNoteRefunds/dto/CreditNoteRefund.dto.ts b/packages/server/src/modules/CreditNoteRefunds/dto/CreditNoteRefund.dto.ts
index b20191244..d3dab1ffb 100644
--- a/packages/server/src/modules/CreditNoteRefunds/dto/CreditNoteRefund.dto.ts
+++ b/packages/server/src/modules/CreditNoteRefunds/dto/CreditNoteRefund.dto.ts
@@ -1,5 +1,6 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsNotEmpty, IsOptional, IsPositive, IsString } from 'class-validator';
+import { ToNumber, IsOptional } from '@/common/decorators/Validators';
+import { IsDateString, IsNotEmpty, IsPositive, IsString } from 'class-validator';
 import { IsDate } from 'class-validator';
 import { IsNumber } from 'class-validator';
 
@@ -10,8 +11,13 @@ export class CreditNoteRefundDto {
     description: 'The id of the from account',
     example: 1,
   })
+  @ApiProperty({
+    description: 'The id of the from account',
+    example: 1,
+  })
   fromAccountId: number;
 
+  @ToNumber()
   @IsNumber()
   @IsPositive()
   @IsNotEmpty()
@@ -21,6 +27,7 @@ export class CreditNoteRefundDto {
   })
   amount: number;
 
+  @ToNumber()
   @IsNumber()
   @IsOptional()
   @IsPositive()
@@ -30,23 +37,23 @@ export class CreditNoteRefundDto {
   })
   exchangeRate?: number;
 
+  @IsOptional()
   @IsString()
-  @IsNotEmpty()
   @ApiProperty({
     description: 'The reference number of the credit note refund',
     example: '123456',
   })
   referenceNo: string;
 
+  @IsOptional()
   @IsString()
-  @IsNotEmpty()
   @ApiProperty({
     description: 'The description of the credit note refund',
     example: 'Credit note refund',
   })
   description: string;
 
-  @IsDate()
+  @IsDateString()
   @IsNotEmpty()
   @ApiProperty({
     description: 'The date of the credit note refund',
@@ -54,6 +61,7 @@ export class CreditNoteRefundDto {
   })
   date: Date;
 
+  @ToNumber()
   @IsNumber()
   @IsOptional()
   @ApiProperty({
diff --git a/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.application.ts b/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.application.ts
index 1053765e7..bf488a768 100644
--- a/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.application.ts
+++ b/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.application.ts
@@ -2,19 +2,35 @@ import { Injectable } from '@nestjs/common';
 import { DeleteRefundVendorCreditService } from './commands/DeleteRefundVendorCredit.service';
 import { RefundVendorCredit } from './models/RefundVendorCredit';
 import { CreateRefundVendorCredit } from './commands/CreateRefundVendorCredit.service';
-import { IRefundVendorCreditDTO } from './types/VendorCreditRefund.types';
 import { RefundVendorCreditDto } from './dtos/RefundVendorCredit.dto';
+import { GetRefundVendorCreditsService } from './queries/GetRefundVendorCredits.service';
+import { IRefundVendorCreditPOJO } from './types/VendorCreditRefund.types';
 
 @Injectable()
 export class VendorCreditsRefundApplication {
   /**
    * @param {CreateRefundVendorCredit} createRefundVendorCreditService
    * @param {DeleteRefundVendorCreditService} deleteRefundVendorCreditService
+   * @param {GetRefundVendorCreditsService} getRefundVendorCreditsService
    */
   constructor(
     private readonly createRefundVendorCreditService: CreateRefundVendorCredit,
     private readonly deleteRefundVendorCreditService: DeleteRefundVendorCreditService,
-  ) {}
+    private readonly getRefundVendorCreditsService: GetRefundVendorCreditsService,
+  ) { }
+
+  /**
+   * Retrieve the vendor credit refunds graph.
+   * @param {number} vendorCreditId - Vendor credit id.
+   * @returns {Promise<IRefundVendorCreditPOJO[]>}
+   */
+  public getVendorCreditRefunds(
+    vendorCreditId: number,
+  ): Promise<IRefundVendorCreditPOJO[]> {
+    return this.getRefundVendorCreditsService.getVendorCreditRefunds(
+      vendorCreditId,
+    );
+  }
 
   /**
    * Creates a refund vendor credit.
diff --git a/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.controller.ts b/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.controller.ts
index 5ee79421e..9951cb6bc 100644
--- a/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.controller.ts
+++ b/packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.controller.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Param, Post } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, Post } from '@nestjs/common';
 import { VendorCreditsRefundApplication } from './VendorCreditsRefund.application';
 import { RefundVendorCredit } from './models/RefundVendorCredit';
 import { ApiOperation, ApiTags } from '@nestjs/swagger';
@@ -9,7 +9,22 @@ import { RefundVendorCreditDto } from './dtos/RefundVendorCredit.dto';
 export class VendorCreditsRefundController {
   constructor(
     private readonly vendorCreditsRefundApplication: VendorCreditsRefundApplication,
-  ) {}
+  ) { }
+
+  /**
+   * Retrieve the vendor credit refunds graph.
+   * @param {number} vendorCreditId - Vendor credit id.
+   * @returns {Promise<IRefundVendorCreditPOJO[]>}
+   */
+  @Get(':vendorCreditId/refund')
+  @ApiOperation({ summary: 'Retrieve the vendor credit refunds graph.' })
+  public getVendorCreditRefunds(
+    @Param('vendorCreditId') vendorCreditId: string,
+  ) {
+    return this.vendorCreditsRefundApplication.getVendorCreditRefunds(
+      Number(vendorCreditId),
+    );
+  }
 
   /**
    * Creates a refund vendor credit.
@@ -17,7 +32,7 @@ export class VendorCreditsRefundController {
    * @param {IRefundVendorCreditDTO} refundVendorCreditDTO
    * @returns {Promise<RefundVendorCredit>}
    */
-  @Post(':vendorCreditId/refunds')
+  @Post(':vendorCreditId/refund')
   @ApiOperation({ summary: 'Create a refund for the given vendor credit.' })
   public async createRefundVendorCredit(
     @Param('vendorCreditId') vendorCreditId: string,
diff --git a/packages/server/src/modules/VendorCreditsRefund/dtos/RefundVendorCredit.dto.ts b/packages/server/src/modules/VendorCreditsRefund/dtos/RefundVendorCredit.dto.ts
index 975fb6ff8..84dae9922 100644
--- a/packages/server/src/modules/VendorCreditsRefund/dtos/RefundVendorCredit.dto.ts
+++ b/packages/server/src/modules/VendorCreditsRefund/dtos/RefundVendorCredit.dto.ts
@@ -1,10 +1,12 @@
+import { IsOptional, ToNumber } from '@/common/decorators/Validators';
 import { ApiProperty } from '@nestjs/swagger';
-import { Min } from 'class-validator';
+import { IsDateString, Min } from 'class-validator';
 import { IsString } from 'class-validator';
 import { IsDate } from 'class-validator';
-import { IsNotEmpty, IsNumber, IsOptional, IsPositive } from 'class-validator';
+import { IsNotEmpty, IsNumber, IsPositive } from 'class-validator';
 
 export class RefundVendorCreditDto {
+  @ToNumber()
   @IsNumber()
   @IsNotEmpty()
   @Min(0)
@@ -32,6 +34,7 @@ export class RefundVendorCreditDto {
   })
   depositAccountId: number;
 
+  @IsOptional()
   @IsString()
   @IsNotEmpty()
   @ApiProperty({
@@ -40,7 +43,7 @@ export class RefundVendorCreditDto {
   })
   description: string;
 
-  @IsDate()
+  @IsDateString()
   @IsNotEmpty()
   @ApiProperty({
     description: 'The date of the refund',
diff --git a/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx b/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx
index f0f0fdd42..4479844be 100644
--- a/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx
@@ -31,6 +31,9 @@ import {
   FeatureCan,
   FInputGroup,
   FMoneyInputGroup,
+  FDateInput,
+  FFormGroup,
+  FTextArea,
 } from '@/components';
 import {
   inputIntent,
@@ -66,16 +69,13 @@ function RefundCreditNoteFormFields({
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
@@ -84,29 +84,23 @@ function RefundCreditNoteFormFields({
       <Row>
         <Col xs={5}>
           {/* ------------- Refund date ------------- */}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'refund_credit_note.dialog.refund_date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  inputProps={{
-                    leftIcon: <Icon icon={'date-range'} />,
-                  }}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'refund_credit_note.dialog.refund_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FFormGroup>
         </Col>
+
         <Col xs={5}>
           {/* ------------ Form account ------------ */}
           <FFormGroup
@@ -114,6 +108,7 @@ function RefundCreditNoteFormFields({
             label={<T id={'refund_credit_note.dialog.from_account'} />}
             labelInfo={<FieldRequiredHint />}
             fill
+            fastField
           >
             <FAccountsSuggestField
               name={'from_account_id'}
@@ -126,6 +121,7 @@ function RefundCreditNoteFormFields({
                 ACCOUNT_TYPE.CASH,
                 ACCOUNT_TYPE.FIXED_ASSET,
               ]}
+              fastField
             />
           </FFormGroup>
         </Col>
@@ -137,6 +133,7 @@ function RefundCreditNoteFormFields({
         label={<T id={'refund_credit_note.dialog.amount'} />}
         labelInfo={<FieldRequiredHint />}
         fill
+        fastField
       >
         <ControlGroup>
           <InputPrependText text={values.currency_code} />
@@ -144,6 +141,7 @@ function RefundCreditNoteFormFields({
             name={'amount'}
             minimal={true}
             inputRef={(ref) => (amountFieldRef.current = ref)}
+
           />
         </ControlGroup>
       </FFormGroup>
@@ -161,21 +159,19 @@ function RefundCreditNoteFormFields({
       </If>
 
       {/* ------------ Reference No. ------------ */}
-      <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />} fill>
+      <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />} fill fastField>
         <FInputGroup name={'reference_no'} minimal fill />
       </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FastField name={'description'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_credit_note.dialog.description'} />}
-            className={'form-group--description'}
-          >
-            <TextArea growVertically={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'description'}
+        label={<T id={'refund_credit_note.dialog.description'} />}
+        fill
+        fastField
+      >
+        <FTextArea name={'description'} growVertically fill fastField />
+      </FFormGroup>
     </div>
   );
 }
@@ -183,7 +179,12 @@ function RefundCreditNoteFormFields({
 export default compose(withCurrentOrganization())(RefundCreditNoteFormFields);
 
 export const BranchRowDivider = styled.div`
+  --x-divider-color: #ebf1f6;
+
+  .bp4-dark & {
+    --x-divider-color: rgba(255, 255, 255, 0.1);
+  }
   height: 1px;
-  background: #ebf1f6;
+  background: var(--x-divider-color);
   margin-bottom: 13px;
 `;
diff --git a/packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx b/packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx
index 59a032d2d..6170bf56e 100644
--- a/packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx
@@ -19,7 +19,6 @@ import {
   FormattedMessage as T,
   ExchangeRateMutedField,
   BranchSelect,
-  BranchSelectButton,
   FeatureCan,
   FFormGroup,
   FDateInput,
@@ -57,7 +56,6 @@ function RefundVendorCreditFormFields({
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>
@@ -154,8 +152,8 @@ function RefundVendorCreditFormFields({
       </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FFormGroup name={'description'} fill fastField>
-        <FTextArea name={'description'} growVertically={true} fastField />
+      <FFormGroup name={'description'} label={<T id={'refund_vendor_credit.dialog.description'} />} fill fastField>
+        <FTextArea name={'description'} growVertically fill fastField />
       </FFormGroup>
     </div>
   );
@@ -164,7 +162,12 @@ function RefundVendorCreditFormFields({
 export default compose(withCurrentOrganization())(RefundVendorCreditFormFields);
 
 export const BranchRowDivider = styled.div`
+  --x-divider-color: #ebf1f6;
+
+  .bp4-dark & {
+    --x-divider-color: rgba(255, 255, 255, 0.1);
+  }
   height: 1px;
-  background: #ebf1f6;
+  background: var(--x-divider-color);
   margin-bottom: 13px;
 `;