diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
index 97fab4701..691e0f0b6 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
@@ -52,6 +52,16 @@
       >
       </mifosx-gl-account-selector>
 
+      <mifosx-gl-account-selector
+        class="flex-48"
+        *ngIf="isAccrualAccounting()"
+        [inputFormControl]="savingProductAccountingForm.controls.interestReceivableAccountId"
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Interest Receivable'"
+      >
+      </mifosx-gl-account-selector>
+
       <mat-divider class="flex-98"></mat-divider>
 
       <h4 class="mat-h4 flex-98">{{ 'labels.heading.Liabilities' | translate }}</h4>
@@ -153,7 +163,7 @@
 
       <div
         *ngIf="savingProductAccountingForm.value.advancedAccountingRules"
-        class="flex-fill layout-row-wrap gap-2percent responsive-column"
+        class="flex-fill layout-row-wrap gap-1percent responsive-column"
       >
         <div class="layout-row flex-100">
           <h4 class="mat-h4 flex-63">
@@ -215,7 +225,7 @@
           </table>
         </div>
 
-        <div class="flex-100" *ngIf="existCharges()">
+        <div class="flex-100 layout-row-wrap gap-0percent responsive-column" *ngIf="existCharges()">
           <h4 class="mat-h4 flex-63">{{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}</h4>
 
           <div class="flex-33" *ngIf="existCharges()">
@@ -267,7 +277,7 @@
           </table>
         </div>
 
-        <div class="flex-100" *ngIf="existCharges()">
+        <div class="flex-100 layout-row-wrap gap-0percent responsive-column" *ngIf="existCharges()">
           <h4 class="mat-h4 flex-63">
             {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
           </h4>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.ts b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.ts
index 400b8ce2b..2fb2b268a 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.ts
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.ts
@@ -157,6 +157,10 @@ export class SavingProductAccountingStepComponent implements OnInit {
         this.savingProductAccountingForm.patchValue({
           feesReceivableAccountId: this.savingProductsTemplate.accountingMappings.feeReceivableAccount.id,
           penaltiesReceivableAccountId: this.savingProductsTemplate.accountingMappings.penaltyReceivableAccount.id,
+          interestReceivableAccountId:
+            this.savingProductsTemplate.accountingMappings.interestReceivableAccount == null || undefined
+              ? ''
+              : this.savingProductsTemplate.accountingMappings.interestReceivableAccount.id,
           interestPayableAccountId: this.savingProductsTemplate.accountingMappings.interestPayableAccount.id
         });
       }
@@ -252,6 +256,10 @@ export class SavingProductAccountingStepComponent implements OnInit {
             'penaltiesReceivableAccountId',
             new UntypedFormControl('', Validators.required)
           );
+          this.savingProductAccountingForm.addControl(
+            'interestReceivableAccountId',
+            new UntypedFormControl('', Validators.required)
+          );
           this.savingProductAccountingForm.addControl(
             'interestPayableAccountId',
             new UntypedFormControl('', Validators.required)
@@ -311,6 +319,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
         this.savingProductAccountingForm.removeControl('escheatLiabilityId');
         this.savingProductAccountingForm.removeControl('feesReceivableAccountId');
         this.savingProductAccountingForm.removeControl('penaltiesReceivableAccountId');
+        this.savingProductAccountingForm.removeControl('interestReceivableAccountId');
         this.savingProductAccountingForm.removeControl('interestPayableAccountId');
       }
     });
diff --git a/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html b/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
index 2ff910bf4..7756a9a62 100644
--- a/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
+++ b/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
@@ -45,97 +45,105 @@
           [withTitle]="'40%'"
         >
         </mifosx-gl-account-display>
-      </div>
-
-      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
-      <div class="flex-100 layout-row-wrap responsive-column">
         <mifosx-gl-account-display
           class="flex-100"
-          [accountTitle]="'Saving control'"
-          [glAccount]="accountingMappings.savingsControlAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Savings transfers in suspense'"
-          [glAccount]="accountingMappings.transfersInSuspenseAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Interest Payable'"
+          [accountTitle]="'Interest Receivable'"
           *ngIf="isAccrualAccounting()"
-          [glAccount]="accountingMappings.interestPayableAccount"
+          [glAccount]="accountingMappings.interestReceivableAccount"
           [withTitle]="'40%'"
         >
         </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Escheat liability'"
-          *ngIf="accountingMappings.escheatLiabilityAccount"
-          [glAccount]="accountingMappings.escheatLiabilityAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
 
-      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Income from fees'"
-          [glAccount]="accountingMappings.incomeFromFeeAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Income from penalties'"
-          [glAccount]="accountingMappings.incomeFromPenaltyAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Income from Interest'"
-          *ngIf="accountingMappings.incomeFromInterest"
-          [glAccount]="accountingMappings.incomeFromInterest"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
+        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Saving control'"
+            [glAccount]="accountingMappings.savingsControlAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Savings transfers in suspense'"
+            [glAccount]="accountingMappings.transfersInSuspenseAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Interest Payable'"
+            *ngIf="isAccrualAccounting()"
+            [glAccount]="accountingMappings.interestPayableAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Escheat liability'"
+            *ngIf="accountingMappings.escheatLiabilityAccount"
+            [glAccount]="accountingMappings.escheatLiabilityAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
 
-      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Interest on savings'"
-          [glAccount]="accountingMappings.interestOnSavingsAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-      </div>
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <mifosx-gl-account-display
-          class="flex-100"
-          [accountTitle]="'Write-off'"
-          *ngIf="accountingMappings.writeOffAccount"
-          [glAccount]="accountingMappings.writeOffAccount"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
+        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Income from fees'"
+            [glAccount]="accountingMappings.incomeFromFeeAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Income from penalties'"
+            [glAccount]="accountingMappings.incomeFromPenaltyAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Income from Interest'"
+            *ngIf="accountingMappings.incomeFromInterest"
+            [glAccount]="accountingMappings.incomeFromInterest"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+
+        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Interest on savings'"
+            [glAccount]="accountingMappings.interestOnSavingsAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <div class="flex-100 layout-row-wrap responsive-column">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Write-off'"
+            *ngIf="accountingMappings.writeOffAccount"
+            [glAccount]="accountingMappings.writeOffAccount"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
       </div>
     </div>
   </div>