diff --git a/src/app/loans/edit-loans-account/edit-loans-account.component.ts b/src/app/loans/edit-loans-account/edit-loans-account.component.ts
index f682c1a786..5d105b932b 100644
--- a/src/app/loans/edit-loans-account/edit-loans-account.component.ts
+++ b/src/app/loans/edit-loans-account/edit-loans-account.component.ts
@@ -129,14 +129,29 @@ export class EditLoansAccountComponent {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const loanType = 'individual';
+    const uniqueCharges = new Map<number | string, any>();
+    (this.loansAccount.charges ?? []).forEach((charge: any) => {
+      const chargeId = charge.chargeId;
+      if (chargeId == null) {
+        return;
+      } // Skip malformed entries
+      uniqueCharges.set(chargeId, charge);
+    });
+
     const loansAccountData = {
       ...this.loansAccount,
       clientId: this.loansAccountAndTemplate.clientId,
-      charges: this.loansAccount.charges.map((charge: any) => ({
-        chargeId: charge.id,
-        amount: charge.amount,
-        dueDate: charge.dueDate && this.dateUtils.formatDate(charge.dueDate, dateFormat)
-      })),
+      charges: Array.from(uniqueCharges.values()).map((charge: any) => {
+        const result: any = {
+          chargeId: charge.chargeId,
+          amount: charge.amount,
+          dueDate: charge.dueDate && this.dateUtils.formatDate(charge.dueDate, dateFormat)
+        };
+        if (charge.id && charge.id !== charge.chargeId) {
+          result.id = charge.id;
+        }
+        return result;
+      }),
       collateral: this.loansAccount.collateral.map((collateralEle: any) => ({
         type: collateralEle.type,
         value: collateralEle.value,
diff --git a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts
index d1fb856e26..1dc89530ea 100644
--- a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts
@@ -140,7 +140,13 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   ngOnInit() {
     if (this.loansAccountTemplate && this.loansAccountTemplate.charges) {
       this.chargesDataSource =
-        this.loansAccountTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
+        this.loansAccountTemplate.charges.map((charge: any) => {
+          return {
+            ...charge,
+            id: charge.id,
+            chargeId: charge.chargeId
+          };
+        }) || [];
     }
     this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
   }
@@ -162,13 +168,26 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
       if (this.loansAccountProductTemplate.overdueCharges) {
         this.overDueChargesDataSource = this.loansAccountProductTemplate.overdueCharges;
       }
+      const isModification = this.loanId != null;
       if (
         this.loansAccountProductTemplate.charges &&
         this.loansAccountProductTemplate.charges.length > 0 &&
         this.chargesDataSource.length === 0
       ) {
         this.chargesDataSource =
-          this.loansAccountProductTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
+          this.loansAccountProductTemplate.charges.map((charge: any) => ({
+            ...charge,
+            chargeId: charge.chargeId || charge.id
+          })) || [];
+      } else if (isModification && this.loansAccountTemplate && this.loansAccountTemplate.charges) {
+        this.chargesDataSource =
+          this.loansAccountTemplate.charges.map((charge: any) => {
+            return {
+              ...charge,
+              id: charge.id,
+              chargeId: charge.chargeId
+            };
+          }) || [];
       }
     }
   }
@@ -177,7 +196,11 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
    * Add a charge
    */
   addCharge(charge: any) {
-    this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
+    const newCharge = {
+      ...charge.value,
+      chargeId: charge.value.id || charge.value.chargeId
+    };
+    this.chargesDataSource = this.chargesDataSource.concat([newCharge]);
     charge.value = '';
     this.pristine = false;
   }
@@ -313,10 +336,38 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
    * Returns Loans Account Charges and Collateral Form
    */
   get loansAccountCharges() {
+    const uniqueCharges = this.getUniqueCharges(this.chargesDataSource);
     return {
-      charges: this.chargesDataSource
+      charges: uniqueCharges.map((charge: any) => {
+        const result: any = {};
+        result.chargeId = charge.chargeId;
+
+        if (charge.id && charge.id !== charge.chargeId) {
+          result.id = charge.id;
+        }
+
+        if (charge.amount !== undefined) result.amount = charge.amount;
+        if (charge.dueDate !== undefined) result.dueDate = charge.dueDate;
+        if (charge.feeInterval !== undefined) result.feeInterval = charge.feeInterval;
+        if (charge.feeOnMonthDay !== undefined) result.feeOnMonthDay = charge.feeOnMonthDay;
+
+        return result;
+      })
     };
   }
+  private getUniqueCharges<T extends { id?: number | string; chargeId?: number | string }>(charges: T[]): T[] {
+    const uniqueChargesMap = new Map<number | string, T>();
+
+    for (const charge of charges ?? []) {
+      const chargeId = charge.chargeId;
+      if (chargeId == null) {
+        continue;
+      }
+      uniqueChargesMap.set(chargeId, charge);
+    }
+
+    return Array.from(uniqueChargesMap.values());
+  }
 
   get selectedClientMembers() {
     return { selectedMembers: this.activeClientMembers.filter((item: any) => item.selected) };