From 9ba1b72c17fdf6afb5a38dc1016a5e2ef280b0f8 Mon Sep 17 00:00:00 2001
From: Felix van Hove <fvanhove@gmx.de>
Date: Sun, 29 Jun 2025 16:36:48 +0200
Subject: [PATCH] fix: Fixes many smaller layout issues in the read-only
 product views

Fixes many smaller layout issues in the read-only product views:
loan, saving and share product

FIXES: WEB-219
---
 .../fund-mapping/fund-mapping.component.html  | 342 ++++++------
 .../investors/investors.component.html        | 424 +++++++--------
 .../organization-routing.module.ts            |   2 +-
 .../organization/organization.component.html  |   2 +-
 .../loan-product-summary.component.html       | 489 ++++++++++--------
 .../loan-product-summary.component.scss       |   1 +
 .../loan-product-summary.component.ts         |   4 +-
 ...oan-product-accounting-step.component.html |   2 +-
 .../saving-product-general-tab.component.html |   4 +-
 .../share-product-preview-step.component.scss |   8 +
 .../share-product-general-tab.component.html  | 369 +++++++------
 src/assets/translations/cs-CS.json            |   1 +
 src/assets/translations/de-DE.json            |   1 +
 src/assets/translations/en-US.json            |   1 +
 src/assets/translations/es-CL.json            |   1 +
 src/assets/translations/es-MX.json            |   1 +
 src/assets/translations/fr-FR.json            |   1 +
 src/assets/translations/it-IT.json            |   1 +
 src/assets/translations/ko-KO.json            |   1 +
 src/assets/translations/lt-LT.json            |   1 +
 src/assets/translations/lv-LV.json            |   1 +
 src/assets/translations/ne-NE.json            |   1 +
 src/assets/translations/pt-PT.json            |   1 +
 src/assets/translations/sw-SW.json            |   1 +
 24 files changed, 857 insertions(+), 803 deletions(-)

diff --git a/src/app/organization/fund-mapping/fund-mapping.component.html b/src/app/organization/fund-mapping/fund-mapping.component.html
index a0ab91d87..5a0fb0214 100644
--- a/src/app/organization/fund-mapping/fund-mapping.component.html
+++ b/src/app/organization/fund-mapping/fund-mapping.component.html
@@ -1,190 +1,192 @@
 <mat-card class="container" *ngIf="!isCollapsed">
   <form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
-    <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
-        <mat-select formControlName="loanStatus" multiple>
-          <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
-          <mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
-          <mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
-          <mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
-          <mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <span class="flex-48 hide-lt-md"></span>
-
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
-        <mat-select formControlName="loanProducts" multiple>
-          <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
-            {{ product.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-        <mat-select formControlName="offices" multiple>
-          <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
-            {{ office.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field class="flex-31">
-        <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
-        <mat-select required formControlName="loanDateOption">
-          <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
-          <mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
-          <mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field class="flex-fill flex-31" (click)="fromDatePicker.open()">
-        <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="fromDatePicker"
-          formControlName="loanFromDate"
-          required
-        />
-        <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #fromDatePicker></mat-datepicker>
-        <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
-          {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field class="flex-fill flex-31" (click)="toDatePicker.open()">
-        <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="toDatePicker"
-          formControlName="loanToDate"
-          required
-        />
-        <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #toDatePicker></mat-datepicker>
-        <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
-          {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-checkbox
-        labelPosition="before"
-        formControlName="includeOutStandingAmountPercentage"
-        class="margin-b flex-73"
-      >
-        {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
-      </mat-checkbox>
-
-      <div
-        *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
-        class="flex-fill layout-row-wrap gap-2percent layout-xs-column"
-      >
-        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
-          <mat-select required formControlName="outStandingAmountPercentageCondition">
-            <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
-            <mat-option value="<=">&lt;=</mat-option>
-            <mat-option value=">=">&gt;=</mat-option>
-            <mat-option value="<">&lt;</mat-option>
-            <mat-option value=">">&gt;</mat-option>
-            <mat-option value="=">=</mat-option>
+    <mat-card-content>
+      <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
+          <mat-select formControlName="loanStatus" multiple>
+            <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
+            <mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
+            <mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
+            <mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
+            <mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
           </mat-select>
-          <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
-            {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="minOutStandingAmountPercentage" />
-          <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
-            {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+        <span class="flex-48 hide-lt-md"></span>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="outStandingAmountPercentage" />
-          <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
-            {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="maxOutStandingAmountPercentage" />
-          <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
-            {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
-      </div>
-
-      <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
-        {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
-      </mat-checkbox>
-
-      <div
-        *ngIf="fundMappingForm.value.includeOutstandingAmount"
-        class="flex-fill layout-row-wrap gap-2percent responsive-column"
-      >
-        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
-          <mat-select required formControlName="outstandingAmountCondition">
-            <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
-            <mat-option value="<=">&lt;=</mat-option>
-            <mat-option value=">=">&gt;=</mat-option>
-            <mat-option value="<">&lt;</mat-option>
-            <mat-option value=">">&gt;</mat-option>
-            <mat-option value="=">=</mat-option>
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
+          <mat-select formControlName="loanProducts" multiple>
+            <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
+              {{ product.name }}
+            </mat-option>
           </mat-select>
-          <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
-            {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+        </mat-form-field>
+
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+          <mat-select formControlName="offices" multiple>
+            <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
+              {{ office.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field class="flex-31">
+          <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
+          <mat-select required formControlName="loanDateOption">
+            <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
+            <mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
+            <mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field class="flex-31" (click)="fromDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="fromDatePicker"
+            formControlName="loanFromDate"
+            required
+          />
+          <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #fromDatePicker></mat-datepicker>
+          <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
+            {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
             <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="minOutstandingAmount" />
-          <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
-            {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+        <mat-form-field class="flex-31" (click)="toDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="toDatePicker"
+            formControlName="loanToDate"
+            required
+          />
+          <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #toDatePicker></mat-datepicker>
+          <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
+            {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
             <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="outstandingAmount" />
-          <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
-            {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+        <mat-checkbox
+          labelPosition="before"
+          formControlName="includeOutStandingAmountPercentage"
+          class="margin-b flex-73"
+        >
+          {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
+        </mat-checkbox>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" class="flex-31">
-          <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="maxOutstandingAmount" />
-          <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
-            {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+        <div
+          *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
+          class="flex-fill layout-row-wrap gap-2percent layout-xs-column"
+        >
+          <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
+            <mat-select required formControlName="outStandingAmountPercentageCondition">
+              <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
+              <mat-option value="<=">&lt;=</mat-option>
+              <mat-option value=">=">&gt;=</mat-option>
+              <mat-option value="<">&lt;</mat-option>
+              <mat-option value=">">&gt;</mat-option>
+              <mat-option value="=">=</mat-option>
+            </mat-select>
+            <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
+              {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="minOutStandingAmountPercentage" />
+            <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
+              {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="outStandingAmountPercentage" />
+            <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
+              {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="maxOutStandingAmountPercentage" />
+            <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
+              {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
+          {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
+        </mat-checkbox>
+
+        <div
+          *ngIf="fundMappingForm.value.includeOutstandingAmount"
+          class="flex-fill layout-row-wrap gap-2percent responsive-column"
+        >
+          <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
+            <mat-select required formControlName="outstandingAmountCondition">
+              <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
+              <mat-option value="<=">&lt;=</mat-option>
+              <mat-option value=">=">&gt;=</mat-option>
+              <mat-option value="<">&lt;</mat-option>
+              <mat-option value=">">&gt;</mat-option>
+              <mat-option value="=">=</mat-option>
+            </mat-select>
+            <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
+              {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="minOutstandingAmount" />
+            <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
+              {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="outstandingAmount" />
+            <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
+              {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" class="flex-31">
+            <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="maxOutstandingAmount" />
+            <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
+              {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
       </div>
-    </div>
+    </mat-card-content>
 
     <mat-card-actions class="layout-row align-center gap-5px responsive-column">
       <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
diff --git a/src/app/organization/investors/investors.component.html b/src/app/organization/investors/investors.component.html
index cea3de7c7..91165da6f 100644
--- a/src/app/organization/investors/investors.component.html
+++ b/src/app/organization/investors/investors.component.html
@@ -1,225 +1,229 @@
 <mat-card class="container">
-  <div class="layout-row-wrap gap-2px responsive-column">
-    <mat-form-field class="flex-fill flex-18">
-      <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
-      <input matInput [formControl]="searchText" />
-    </mat-form-field>
+  <mat-card-content>
+    <div class="layout-row-wrap gap-2px responsive-column">
+      <mat-form-field class="flex-18">
+        <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
+        <input matInput [formControl]="searchText" />
+      </mat-form-field>
 
-    <mat-form-field class="flex-fill flex-18" (click)="effectiveFromDatePicker.open()">
-      <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="effectiveFromDatePicker"
-        [formControl]="effectiveFromDate"
-      />
-      <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
-    </mat-form-field>
+      <mat-form-field class="flex-18" (click)="effectiveFromDatePicker.open()">
+        <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="effectiveFromDatePicker"
+          [formControl]="effectiveFromDate"
+        />
+        <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
+      </mat-form-field>
 
-    <mat-form-field class="flex-fill flex-18" (click)="effectiveToDatePicker.open()">
-      <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="effectiveToDatePicker"
-        [formControl]="effectiveToDate"
-      />
-      <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #effectiveToDatePicker></mat-datepicker>
-    </mat-form-field>
+      <mat-form-field class="flex-18" (click)="effectiveToDatePicker.open()">
+        <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="effectiveToDatePicker"
+          [formControl]="effectiveToDate"
+        />
+        <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #effectiveToDatePicker></mat-datepicker>
+      </mat-form-field>
 
-    <mat-form-field class="flex-fill flex-18" (click)="settlementFromDatePicker.open()">
-      <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="settlementFromDatePicker"
-        [formControl]="settlementFromDate"
-      />
-      <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #settlementFromDatePicker></mat-datepicker>
-    </mat-form-field>
+      <mat-form-field class="flex-18" (click)="settlementFromDatePicker.open()">
+        <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="settlementFromDatePicker"
+          [formControl]="settlementFromDate"
+        />
+        <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #settlementFromDatePicker></mat-datepicker>
+      </mat-form-field>
 
-    <mat-form-field class="flex-fill flex-18" (click)="settlementToDatePicker.open()">
-      <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="settlementToDatePicker"
-        [formControl]="settlementToDate"
-      />
-      <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #settlementToDatePicker></mat-datepicker>
-    </mat-form-field>
+      <mat-form-field class="flex-18" (click)="settlementToDatePicker.open()">
+        <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="settlementToDatePicker"
+          [formControl]="settlementToDate"
+        />
+        <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #settlementToDatePicker></mat-datepicker>
+      </mat-form-field>
 
-    <div class="center m-t-15 flex-98">
-      <button mat-raised-button color="primary" (click)="searchEAO()">
-        <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
-      </button>
+      <div class="center m-t-15 flex-98">
+        <button mat-raised-button color="primary" (click)="searchEAO()">
+          <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
+        </button>
+      </div>
     </div>
-  </div>
 
-  <div class="mat-elevation-z8 container m-t-20">
-    <div *ngIf="isLoading" class="loader">
-      <div class="loading"></div>
-    </div>
-    <mat-accordion *ngIf="existsDataToFilter">
-      <mat-expansion-panel *ngFor="let record of searchResults; index as i" class="record">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
+    <div class="mat-elevation-z8 container m-t-20">
+      <div *ngIf="isLoading" class="loader">
+        <div class="loading"></div>
+      </div>
+      <mat-accordion *ngIf="existsDataToFilter">
+        <mat-expansion-panel *ngFor="let record of searchResults; index as i" class="record">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <table>
+                <tr>
+                  <td>
+                    <div [ngClass]="itemStatus(record.status)" class="m-r-20">
+                      <fa-icon icon="stop"></fa-icon>
+                      <span class="m-l-10 status">{{ record.status }}</span>
+                    </div>
+                  </td>
+                  <td class="field-name">{{ 'labels.inputs.Owner External Id' | translate }}</td>
+                  <td>
+                    <mifosx-external-identifier externalId="{{ record.owner.externalId }}"></mifosx-external-identifier>
+                  </td>
+                  <td class="field-name">{{ 'labels.inputs.Transfer External Id' | translate }}</td>
+                  <td>
+                    <mifosx-external-identifier
+                      externalId="{{ record.transferExternalId }}"
+                    ></mifosx-external-identifier>
+                  </td>
+                  <td class="field-name">{{ 'labels.inputs.Effective From' | translate }}</td>
+                  <td>{{ record.effectiveFrom | dateFormat }}</td>
+                </tr>
+              </table>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <div class="external-asset-transfer">
             <table>
-              <tr>
-                <td>
-                  <div [ngClass]="itemStatus(record.status)" class="m-r-20">
-                    <fa-icon icon="stop"></fa-icon>
-                    <span class="m-l-10 status">{{ record.status }}</span>
-                  </div>
-                </td>
-                <td class="field-name">{{ 'labels.inputs.Owner External Id' | translate }}</td>
-                <td>
-                  <mifosx-external-identifier externalId="{{ record.owner.externalId }}"></mifosx-external-identifier>
-                </td>
-                <td class="field-name">{{ 'labels.inputs.Transfer External Id' | translate }}</td>
-                <td>
-                  <mifosx-external-identifier externalId="{{ record.transferExternalId }}"></mifosx-external-identifier>
-                </td>
-                <td class="field-name">{{ 'labels.inputs.Effective From' | translate }}</td>
-                <td>{{ record.effectiveFrom | dateFormat }}</td>
-              </tr>
+              <tbody>
+                <tr>
+                  <td class="m-l-5 flex-25">
+                    <b>{{ 'labels.inputs.Status' | translate }} :</b>
+                  </td>
+                  <td class="flex-25 m-l-5 left">
+                    <div [ngClass]="itemStatus(record.status)">
+                      <fa-icon icon="stop"></fa-icon>
+                      <span class="m-l-5 status">{{ record.status }}</span>
+                    </div>
+                  </td>
+                  <td class="m-l-5 flex-25">
+                    <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
+                  </td>
+                  <td class="flex-25 m-l-5 left">
+                    <mifosx-external-identifier
+                      externalId="{{ record.owner.externalId }}"
+                      completed="true"
+                    ></mifosx-external-identifier>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="m-l-5 flex-25">
+                    <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
+                  </td>
+                  <td class="m-l-5 flex-25">
+                    {{ record.settlementDate | dateFormat }}
+                  </td>
+                  <td class="m-l-5 flex-25">
+                    <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
+                  </td>
+                  <td class="m-l-5 flex-25">
+                    {{ record.effectiveFrom | dateFormat }}
+                  </td>
+                </tr>
+                <tr *ngIf="record.details">
+                  <td class="m-l-5 flex-25">
+                    <b>{{ 'labels.inputs.Details' | translate }} :</b>
+                  </td>
+                  <td class="flex-75 left">
+                    <table>
+                      <tbody>
+                        <tr>
+                          <td class="flex-50 m-l-5">
+                            <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
+                          </td>
+                          <td class="flex-50 r-amount">
+                            {{ record.details.totalPrincipalOutstanding | formatNumber }}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="flex-50 m-l-5">
+                            <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
+                          </td>
+                          <td class="flex-50 r-amount">
+                            {{ record.details.totalInterestOutstanding | formatNumber }}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="flex-50 m-l-5">
+                            <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
+                          </td>
+                          <td class="flex-50 r-amount">
+                            {{ record.details.totalFeeChargesOutstanding | formatNumber }}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="flex-50 m-l-5">
+                            <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
+                          </td>
+                          <td class="flex-50 r-amount">
+                            {{ record.details.totalPenaltyChargesOutstanding | formatNumber }}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="flex-50 m-l-5">
+                            <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
+                          </td>
+                          <td class="flex-50 r-amount">{{ record.details.totalOutstanding | formatNumber }}</td>
+                        </tr>
+                        <tr>
+                          <td class="flex-50 m-l-5">
+                            <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
+                          </td>
+                          <td class="flex-50 r-amount">{{ record.details.totalOverpaid | formatNumber }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
             </table>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
+          </div>
 
-        <div class="external-asset-transfer">
-          <table>
-            <tbody>
-              <tr>
-                <td class="m-l-5 flex-25">
-                  <b>{{ 'labels.inputs.Status' | translate }} :</b>
-                </td>
-                <td class="flex-25 m-l-5 left">
-                  <div [ngClass]="itemStatus(record.status)">
-                    <fa-icon icon="stop"></fa-icon>
-                    <span class="m-l-5 status">{{ record.status }}</span>
-                  </div>
-                </td>
-                <td class="m-l-5 flex-25">
-                  <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
-                </td>
-                <td class="flex-25 m-l-5 left">
-                  <mifosx-external-identifier
-                    externalId="{{ record.owner.externalId }}"
-                    completed="true"
-                  ></mifosx-external-identifier>
-                </td>
-              </tr>
-              <tr>
-                <td class="m-l-5 flex-25">
-                  <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
-                </td>
-                <td class="m-l-5 flex-25">
-                  {{ record.settlementDate | dateFormat }}
-                </td>
-                <td class="m-l-5 flex-25">
-                  <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
-                </td>
-                <td class="m-l-5 flex-25">
-                  {{ record.effectiveFrom | dateFormat }}
-                </td>
-              </tr>
-              <tr *ngIf="record.details">
-                <td class="m-l-5 flex-25">
-                  <b>{{ 'labels.inputs.Details' | translate }} :</b>
-                </td>
-                <td class="flex-75 left">
-                  <table>
-                    <tbody>
-                      <tr>
-                        <td class="flex-50 m-l-5">
-                          <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
-                        </td>
-                        <td class="flex-50 r-amount">
-                          {{ record.details.totalPrincipalOutstanding | formatNumber }}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="flex-50 m-l-5">
-                          <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
-                        </td>
-                        <td class="flex-50 r-amount">
-                          {{ record.details.totalInterestOutstanding | formatNumber }}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="flex-50 m-l-5">
-                          <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
-                        </td>
-                        <td class="flex-50 r-amount">
-                          {{ record.details.totalFeeChargesOutstanding | formatNumber }}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="flex-50 m-l-5">
-                          <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
-                        </td>
-                        <td class="flex-50 r-amount">
-                          {{ record.details.totalPenaltyChargesOutstanding | formatNumber }}
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="flex-50 m-l-5">
-                          <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
-                        </td>
-                        <td class="flex-50 r-amount">{{ record.details.totalOutstanding | formatNumber }}</td>
-                      </tr>
-                      <tr>
-                        <td class="flex-50 m-l-5">
-                          <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
-                        </td>
-                        <td class="flex-50 r-amount">{{ record.details.totalOverpaid | formatNumber }}</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+          <mat-divider [inset]="true"></mat-divider>
 
-        <mat-divider [inset]="true"></mat-divider>
+          <div class="record-actions layout-row align-flex-end" *ngIf="canBeCancelled(record)">
+            <button
+              mat-button
+              color="warn"
+              (click)="cancelPendingSale(record)"
+              matTooltip="{{ 'labels.text.Cancel Pending Sale' | translate }}"
+            >
+              <fa-icon icon="trash"></fa-icon>
+            </button>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
 
-        <div class="record-actions layout-row align-flex-end" *ngIf="canBeCancelled(record)">
-          <button
-            mat-button
-            color="warn"
-            (click)="cancelPendingSale(record)"
-            matTooltip="{{ 'labels.text.Cancel Pending Sale' | translate }}"
-          >
-            <fa-icon icon="trash"></fa-icon>
-          </button>
-        </div>
-      </mat-expansion-panel>
-    </mat-accordion>
-
-    <mat-paginator
-      [pageSize]="pageSize"
-      [pageSizeOptions]="[50, 100, 200]"
-      [length]="totalRows"
-      (page)="pageChanged($event)"
-      showFirstLastButtons
-      *ngIf="existsDataToFilter"
-    ></mat-paginator>
-  </div>
-
-  <div class="alert" *ngIf="!existsDataToFilter">
-    <div class="message">
-      <i class="fa fa-exclamation-circle alert-check"></i>
-      {{ 'labels.text.No data found' | translate }}
+      <mat-paginator
+        [pageSize]="pageSize"
+        [pageSizeOptions]="[50, 100, 200]"
+        [length]="totalRows"
+        (page)="pageChanged($event)"
+        showFirstLastButtons
+        *ngIf="existsDataToFilter"
+      ></mat-paginator>
     </div>
-  </div>
+
+    <div class="alert" *ngIf="!existsDataToFilter">
+      <div class="message">
+        <i class="fa fa-exclamation-circle alert-check"></i>
+        {{ 'labels.text.No data found' | translate }}
+      </div>
+    </div>
+  </mat-card-content>
 </mat-card>
diff --git a/src/app/organization/organization-routing.module.ts b/src/app/organization/organization-routing.module.ts
index bc7b3bb27..ffe64ba1b 100644
--- a/src/app/organization/organization-routing.module.ts
+++ b/src/app/organization/organization-routing.module.ts
@@ -339,7 +339,7 @@ const routes: Routes = [
         {
           path: 'fund-mapping',
           component: FundMappingComponent,
-          data: { title: 'Advance Search', breadcrumb: 'Advance Search' },
+          data: { title: 'Fund Mapping', breadcrumb: 'Fund Mapping' },
           resolve: {
             advanceSearchTemplate: AdvanceSearchTemplateResolver
           }
diff --git a/src/app/organization/organization.component.html b/src/app/organization/organization.component.html
index 83b64a1dc..cc3889f51 100644
--- a/src/app/organization/organization.component.html
+++ b/src/app/organization/organization.component.html
@@ -102,7 +102,7 @@
           <div #standinginstructions>
             <mat-list-item *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
               <div class="menu-list-item-content">
-                <div class="menu-left-section" [routerLink]="['standing-instructions']">
+                <div class="menu-left-section" [routerLink]="['standing-instructions-history']">
                   <mat-icon matListIcon>
                     <fa-icon icon="book" size="sm"></fa-icon>
                   </mat-icon>
diff --git a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
index f2bc4a2d7..6eb18f022 100644
--- a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
+++ b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
@@ -1,48 +1,43 @@
-<div class="tab-container mat-typography" *ngIf="loanProduct">
+<div class="tab-container" *ngIf="loanProduct">
+  <h2 class="mat-h2 flex-100">{{ loanProduct.name }}</h2>
+
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Name' | translate }}:</span>
-    <span class="flex-53">
-      <mifosx-long-text textValue="{{ loanProduct.name }}" chars="70"></mifosx-long-text>
-    </span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Short Name' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.shortName }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.shortName }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.externalId">
-    <span class="flex-47">{{ 'labels.inputs.External Id' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.externalId }}</span>
+    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.externalId }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.fundId">
-    <span class="flex-47">{{ 'labels.inputs.Fund' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.fundName }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Fund' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.fundName }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Include in Customer Loan Counter' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.includeInBorrowerCycle | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Include in Customer Loan Counter' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.includeInBorrowerCycle | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.startDate">
-    <span class="flex-47">{{ 'labels.inputs.Start Date' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.startDate | dateFormat }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Start Date' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.startDate | dateFormat }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.closeDate">
-    <span class="flex-47">{{ 'labels.inputs.Close Date' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.closeDate | dateFormat }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Close Date' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.closeDate | dateFormat }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.description">
-    <span class="flex-47">{{ 'labels.inputs.Description' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.description }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.description }}</span>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
@@ -50,28 +45,28 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Currency' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.currency.code }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.currency.code }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Currency' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.currency.displayLabel }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.currency.displayLabel }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.currency.decimalPlaces }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.currency.decimalPlaces }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.currency.inMultiplesOf }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.currency.inMultiplesOf }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Installment in multiples of' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Installment in multiples of' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
@@ -79,8 +74,8 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Principal' | translate }}:</span>
-    <span class="flex-53"
+    <span class="flex-40">{{ 'labels.inputs.Principal' | translate }}:</span>
+    <span class="flex-60"
       >{{ loanProduct.principal | formatNumber }} (Min
       {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | formatNumber }} : Max
       {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | formatNumber }})
@@ -88,28 +83,28 @@
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Allow Approved / Disbursed Amounts Over Applied' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Allow Approved / Disbursed Amounts Over Applied' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.allowApprovedDisbursedAmountsOverApplied">
-    <span class="flex-47">{{ 'labels.inputs.Over Amount' | translate }}:</span>
-    <span class="flex-53" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'"
+    <span class="flex-40">{{ 'labels.inputs.Over Amount' | translate }}:</span>
+    <span class="flex-60" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'"
       >{{ loanProduct.overAppliedNumber | formatNumber: 0 }} %</span
     >
-    <span class="flex-53" *ngIf="loanProduct.overAppliedCalculationType === 'flat'"
+    <span class="flex-60" *ngIf="loanProduct.overAppliedCalculationType === 'flat'"
       >{{ loanProduct.overAppliedNumber | formatNumber }} {{ loanProduct.currencyCode }}</span
     >
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Installment day calculation from' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.repaymentStartDateType?.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Installment day calculation from' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.repaymentStartDateType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Number of Repayments' | translate }}:</span>
-    <span class="flex-53">{{
+    <span class="flex-40">{{ 'labels.inputs.Number of Repayments' | translate }}:</span>
+    <span class="flex-60">{{
       loanProduct.numberOfRepayments +
         ' (Min: ' +
         (loanProduct.minNumberOfRepayments ? loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) +
@@ -120,13 +115,13 @@
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Linked to floating interest rates' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.isLinkedToFloatingInterestRates | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Linked to floating interest rates' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.isLinkedToFloatingInterestRates | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="!loanProduct.isLinkedToFloatingInterestRates">
-    <span class="flex-47">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
-    <span class="flex-53"
+    <span class="flex-40">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
+    <span class="flex-60"
       >{{
         loanProduct.interestRatePerPeriod +
           ' (Min: ' +
@@ -143,31 +138,39 @@
     >
   </div>
 
-  <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.isLinkedToFloatingInterestRates">
-    <span class="flex-47">{{ 'labels.inputs.Floating Lending Interest Rate' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.floatingRateName }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Interest Rate Differential' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestRateDifferential }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Floating Interest Rate Calculation Allowed' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.isFloatingInterestRateCalculationAllowed | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Floating Interest Rate' | translate }}:</span>
-    <span class="flex-53">{{
-      loanProduct.defaultDifferentialLendingRate +
-        ' (Min: ' +
-        (loanProduct.minDifferentialLendingRate
-          ? loanProduct.minDifferentialLendingRate
-          : loanProduct.defaultDifferentialLendingRate) +
-        ', Max: ' +
-        (loanProduct.maxDifferentialLendingRate
-          ? loanProduct.maxDifferentialLendingRate
-          : loanProduct.defaultDifferentialLendingRate) +
-        ')'
-    }}</span>
+  <div *ngIf="loanProduct.isLinkedToFloatingInterestRates">
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Floating Lending Interest Rate' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.floatingRateName }}</span>
+    </div>
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Interest Rate Differential' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.interestRateDifferential }}</span>
+    </div>
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Floating Interest Rate Calculation Allowed' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.isFloatingInterestRateCalculationAllowed | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Floating Interest Rate' | translate }}:</span>
+      <span class="flex-60">{{
+        loanProduct.defaultDifferentialLendingRate +
+          ' (Min: ' +
+          (loanProduct.minDifferentialLendingRate
+            ? loanProduct.minDifferentialLendingRate
+            : loanProduct.defaultDifferentialLendingRate) +
+          ', Max: ' +
+          (loanProduct.maxDifferentialLendingRate
+            ? loanProduct.maxDifferentialLendingRate
+            : loanProduct.defaultDifferentialLendingRate) +
+          ')'
+      }}</span>
+    </div>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Terms vary based on loan cycle' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.useBorrowerCycle | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Terms vary based on loan cycle' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.useBorrowerCycle | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.principalVariationsForBorrowerCycle?.length">
@@ -311,24 +314,24 @@
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Repay Every' | translate }}:</span>
-    <span class="flex-53"
+    <span class="flex-40">{{ 'labels.inputs.Repay Every' | translate }}:</span>
+    <span class="flex-60"
       >{{ loanProduct.repaymentEvery }} {{ loanProduct.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
     >
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.fixedLength">
-    <span class="flex-47">{{ 'labels.inputs.Fixed Length' | translate }}:</span>
-    <span class="flex-53"
+    <span class="flex-40">{{ 'labels.inputs.Fixed Length' | translate }}:</span>
+    <span class="flex-60"
       >{{ loanProduct.fixedLength }} {{ loanProduct.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
     >
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{ 'labels.inputs.Minimum days between disbursal and first repayment date' | translate }}:</span
     >
-    <span class="flex-53">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment | formatNumber }}</span>
+    <span class="flex-60">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment | formatNumber }}</span>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
@@ -336,35 +339,35 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.amortizationType?.value">
-    <span class="flex-47">{{ 'labels.inputs.Amortization' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.amortizationType.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Amortization' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.amortizationType.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.isEqualAmortization | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.isEqualAmortization | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Interest Method' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestType?.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Interest Method' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.interestType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Interest Calculation Period' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestCalculationPeriodType?.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Interest Calculation Period' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.interestCalculationPeriodType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{ 'labels.inputs.Allow Partial Interest Calculation with same as repayment' | translate }}:</span
     >
-    <span class="flex-53">{{ loanProduct.allowPartialPeriodInterestCalculation | yesNo }}</span>
+    <span class="flex-60">{{ loanProduct.allowPartialPeriodInterestCalculation | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Is interest recognition on disbursement date?' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestRecognitionOnDisbursementDate | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Is interest recognition on disbursement date?' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.interestRecognitionOnDisbursementDate | yesNo }}</span>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Loan Schedule' | translate }}</h3>
@@ -372,25 +375,25 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Loan Schedule Type' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.loanScheduleType.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Loan Schedule Type' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.loanScheduleType.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Repayment Strategy' | translate }}:</span>
-    <span class="flex-53 repayment-strategy">{{
+    <span class="flex-40">{{ 'labels.inputs.Repayment Strategy' | translate }}:</span>
+    <span class="flex-60 repayment-strategy">{{
       loanProduct.transactionProcessingStrategyName | translateKey: 'catalogs'
     }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="isAdvancedPaymentAllocation">
-    <span class="flex-47">{{ 'labels.inputs.Loan Schedule Processing Type' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.loanScheduleProcessingType.value }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Loan Schedule Processing Type' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.loanScheduleProcessingType.value }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="isAdvancedPaymentAllocation">
-    <span class="flex-47">{{ 'labels.inputs.Advanced Payment Allocation Transactions' | translate }}:</span>
-    <span class="flex-53">
+    <span class="flex-40">{{ 'labels.inputs.Advanced Payment Allocation Transactions' | translate }}:</span>
+    <span class="flex-60">
       <mat-accordion>
         <mifosx-view-advance-paymeny-allocation
           *ngFor="let paymentAllocation of paymentAllocations"
@@ -403,8 +406,8 @@
   </div>
 
   <div class="flex-fill layout-row" *ngIf="isAdvancedPaymentAllocation && creditAllocations.length > 0">
-    <span class="flex-47">{{ 'labels.inputs.Advanced Credit Allocation Transactions' | translate }}:</span>
-    <span class="flex-53">
+    <span class="flex-40">{{ 'labels.inputs.Advanced Credit Allocation Transactions' | translate }}:</span>
+    <span class="flex-60">
       <mat-accordion>
         <mifosx-view-advance-paymeny-allocation
           *ngFor="let creditAllocation of creditAllocations"
@@ -417,8 +420,8 @@
   </div>
 
   <div class="flex-fill layout-row" *ngIf="isAdvancedPaymentAllocation && supportedInterestRefundTypes?.length > 0">
-    <span class="flex-47">{{ 'labels.inputs.Supported Interest Refund Types' | translate }}:</span>
-    <span class="flex-53">
+    <span class="flex-40">{{ 'labels.inputs.Supported Interest Refund Types' | translate }}:</span>
+    <span class="flex-60">
       {{ mapHumanReadableValueStringEnumOptionDataList(supportedInterestRefundTypes) }}
     </span>
   </div>
@@ -428,18 +431,18 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.enableDownPayment | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.enableDownPayment | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.enableDownPayment">
-    <span class="flex-47">{{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }} (%):</span>
-    <span class="flex-53">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
+    <span class="flex-40">{{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }} (%):</span>
+    <span class="flex-60">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
   </div>
 
   <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.enableDownPayment">
-    <span class="flex-47">{{ 'labels.inputs.Enable Auto Repayment for Down Payment' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.enableAutoRepaymentForDownPayment | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Enable Auto Repayment for Down Payment' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.enableAutoRepaymentForDownPayment | yesNo }}</span>
   </div>
 
   <div class="flex-100 layout-row-wrap responsive-column" *ngIf="isAdvancedPaymentAllocation">
@@ -448,108 +451,108 @@
     <mat-divider [inset]="true"></mat-divider>
 
     <div class="flex-100 layout-row">
-      <span class="flex-47">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
     </div>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Moratorium' | translate }}</h3>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.delinquencyBucket">
-    <span class="flex-47">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
-    <span class="flex-53" *ngIf="loanProduct.delinquencyBucket.name">{{ loanProduct.delinquencyBucket.name }}</span>
-    <span class="flex-53" *ngIf="!loanProduct.delinquencyBucket.name">{{
+    <span class="flex-40">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
+    <span class="flex-60" *ngIf="loanProduct.delinquencyBucket.name">{{ loanProduct.delinquencyBucket.name }}</span>
+    <span class="flex-60" *ngIf="!loanProduct.delinquencyBucket.name">{{
       'labels.inputs.Unassigned' | translate
     }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="!loanProduct.delinquencyBucket">
-    <span class="flex-47">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
-    <span class="flex-53">{{ 'labels.inputs.Unassigned' | translate }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
+    <span class="flex-60">{{ 'labels.inputs.Unassigned' | translate }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.delinquencyBucket">
-    <span class="flex-47">{{ 'labels.inputs.Enable installment level Delinquency' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Enable installment level Delinquency' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.graceOnPrincipalPayment">
-    <span class="flex-47">{{ 'labels.inputs.Grace on principal payment' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.graceOnPrincipalPayment }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Grace on principal payment' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.graceOnPrincipalPayment }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.graceOnInterestPayment">
-    <span class="flex-47">{{ 'labels.inputs.Grace on interest payment' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.graceOnInterestPayment }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Grace on interest payment' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.graceOnInterestPayment }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.graceOnInterestCharged">
-    <span class="flex-47">{{ 'labels.inputs.Interest free period' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.graceOnInterestCharged }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Interest free period' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.graceOnInterestCharged }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.inArrearsTolerance">
-    <span class="flex-47">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.inArrearsTolerance }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.inArrearsTolerance }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Days in year' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.daysInYearType?.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Days in year' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.daysInYearType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="isAdvancedPaymentAllocation && loanProduct.daysInYearCustomStrategy">
-    <span class="flex-47">{{ 'labels.inputs.Days in year custom strategy' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.daysInYearCustomStrategy.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Days in year custom strategy' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.daysInYearCustomStrategy.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Days in month' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.daysInMonthType?.value | translateKey: 'catalogs' }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Days in month' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.daysInMonthType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Allow fixing of the installment amount' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.canDefineInstallmentAmount | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Allow fixing of the installment amount' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.canDefineInstallmentAmount | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.graceOnArrearsAgeing">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
     >
-    <span class="flex-53">{{ loanProduct.graceOnArrearsAgeing }}</span>
+    <span class="flex-60">{{ loanProduct.graceOnArrearsAgeing }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.overdueDaysForNPA">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{
         'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)'
           | translate
       }}:</span
     >
-    <span class="flex-53">{{ loanProduct.overdueDaysForNPA }}</span>
+    <span class="flex-60">{{ loanProduct.overdueDaysForNPA }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{ 'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate }}:</span
     >
-    <span class="flex-53">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion | yesNo }}</span>
+    <span class="flex-60">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.principalThresholdForLastInstallment">
-    <span class="flex-47">{{ 'labels.inputs.Principal Threshold (%) for Last Instalment' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.principalThresholdForLastInstallment }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Principal Threshold (%) for Last Instalment' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.principalThresholdForLastInstallment }}</span>
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Variable Installments allowed' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowVariableInstallments | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Variable Installments allowed' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.allowVariableInstallments | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.allowVariableInstallments">
-    <span class="flex-47">{{ 'labels.inputs.Variable Installments' | translate }}:</span>
-    <span class="flex-53">{{
+    <span class="flex-40">{{ 'labels.inputs.Variable Installments' | translate }}:</span>
+    <span class="flex-60">{{
       '(Min: ' +
         loanProduct.minimumGap +
         ', Max: ' +
@@ -559,8 +562,8 @@
   </div>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Allowed to be used for providing Topup Loans' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.canUseForTopup | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Allowed to be used for providing Topup Loans' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.canUseForTopup | yesNo }}</span>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Recalculation' | translate }}</h3>
@@ -568,23 +571,33 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Recalculate Interest' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.isInterestRecalculationEnabled | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Recalculate Interest' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.isInterestRecalculationEnabled | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.isInterestRecalculationEnabled">
-    <span class="flex-47">{{ 'labels.inputs.Pre-closure interest calculation rule' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Advance payments adjustment type' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
+  <div *ngIf="loanProduct.isInterestRecalculationEnabled">
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Pre-closure interest calculation rule' | translate }}:</span>
+      <span class="flex-60">{{
+        loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value
+      }}</span>
+    </div>
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Advance payments adjustment type' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
+    </div>
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <span class="flex-40">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}:</span>
+      <span class="flex-60">{{
+        loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value
+      }}</span>
+    </div>
     <div
       class="flex-fill layout-row-wrap responsive-column"
       *ngIf="loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0"
     >
-      <span class="flex-47">{{ 'labels.inputs.Frequency for compounding' | translate }}:</span>
-      <span class="flex-53">
+      <span class="flex-40">{{ 'labels.inputs.Frequency for compounding' | translate }}:</span>
+      <span class="flex-60">
         {{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
         <span
           *ngIf="
@@ -617,15 +630,15 @@
         class="flex-fill layout-row-wrap responsive-column"
         *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1"
       >
-        <span class="flex-47">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}:</span>
-        <span class="flex-53">{{
+        <span class="flex-40">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}:</span>
+        <span class="flex-60">{{
           loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval
         }}</span>
       </div>
     </div>
     <div class="flex-fill layout-row responsive-column">
-      <span class="flex-47">{{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}:</span>
-      <span class="flex-53">
+      <span class="flex-40">{{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}:</span>
+      <span class="flex-60">
         {{ loanProduct.interestRecalculationData.recalculationRestFrequencyType.value }}
         <span
           *ngIf="
@@ -655,24 +668,24 @@
       class="flex-100 layout-row-wrap responsive-column"
       *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1"
     >
-      <span class="flex-47">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
       <div class="flex-fill" *ngIf="loanProduct.recalculationRestFrequencyDate">
-        <span class="flex-47">{{ 'labels.inputs.Rest Frequency Date' | translate }}:</span>
-        <span class="flex-53">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
+        <span class="flex-40">{{ 'labels.inputs.Rest Frequency Date' | translate }}:</span>
+        <span class="flex-60">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
       </div>
     </div>
     <div class="flex-100 layout-row">
-      <span class="flex-47"
+      <span class="flex-40"
         >{{ 'labels.inputs.Is Arrears recognization based on original schedule' | translate }}:</span
       >
-      <span class="flex-53">{{ loanProduct.interestRecalculationData.isArrearsBasedOnOriginalSchedule | yesNo }}</span>
+      <span class="flex-60">{{ loanProduct.interestRecalculationData.isArrearsBasedOnOriginalSchedule | yesNo }}</span>
     </div>
     <div class="flex-fill layout-row" *ngIf="loanProduct.loanScheduleType.code === 'PROGRESSIVE'">
-      <span class="flex-47"
+      <span class="flex-40"
         >{{ 'labels.inputs.Do not calculate interest on past due principal balances' | translate }}:</span
       >
-      <span class="flex-53">{{
+      <span class="flex-60">{{
         loanProduct.interestRecalculationData.disallowInterestCalculationOnPastDue | yesNo
       }}</span>
     </div>
@@ -683,20 +696,20 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Place Guarantee Funds On-Hold' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.holdGuaranteeFunds | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Place Guarantee Funds On-Hold' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.holdGuaranteeFunds | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.holdGuaranteeFunds">
-    <span class="flex-47">{{ 'labels.inputs.Mandatory Guarantee' | translate }} (%):</span>
-    <span class="flex-53">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Mandatory Guarantee' | translate }} (%):</span>
+    <span class="flex-60">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
     <div class="flex-fill layout-row" *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds">
-      <span class="flex-47">{{ 'labels.inputs.Minimum Guarantee from Own Funds' | translate }} (%):</span>
-      <span class="flex-53">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Minimum Guarantee from Own Funds' | translate }} (%):</span>
+      <span class="flex-60">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
     </div>
     <div class="flex-fill layout-row" *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor">
-      <span class="flex-47">{{ 'labels.inputs.Minimum Guarantee from Guarantor Funds' | translate }} (%):</span>
-      <span class="flex-53">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Minimum Guarantee from Guarantor Funds' | translate }} (%):</span>
+      <span class="flex-60">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
     </div>
   </div>
 
@@ -705,42 +718,42 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Enable Multiple Disbursals' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.multiDisburseLoan | yesNo }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Enable Multiple Disbursals' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.multiDisburseLoan | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.multiDisburseLoan">
-    <span class="flex-47">{{ 'labels.inputs.Maximum Tranche count' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.maxTrancheCount }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Maximum Tranche count' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.maxTrancheCount }}</span>
     <div class="flex-fill layout-row" *ngIf="loanProduct.outstandingLoanBalance">
-      <span class="flex-47">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.outstandingLoanBalance }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.outstandingLoanBalance }}</span>
     </div>
     <div class="flex-fill layout-row">
-      <span class="flex-47">{{ 'labels.inputs.Disallow Expected Disbursements' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.disallowExpectedDisbursements | yesNo }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Disallow Expected Disbursements' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.disallowExpectedDisbursements | yesNo }}</span>
     </div>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Event Settings' | translate }}</h3>
 
   <div class="flex-fill">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{
         'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate
       }}:</span
     >
-    <span class="flex-53">{{ useDueForRepaymentsConfigurations | yesNo }}</span>
+    <span class="flex-60">{{ useDueForRepaymentsConfigurations | yesNo }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.dueDaysForRepaymentEvent">
-    <span class="flex-47">{{ 'labels.inputs.Due days for repayment event' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.dueDaysForRepaymentEvent | number }}</span>
+    <span class="flex-40">{{ 'labels.inputs.Due days for repayment event' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.dueDaysForRepaymentEvent | number }}</span>
   </div>
 
   <div class="flex-fill layout-row" *ngIf="loanProduct.overDueDaysForRepaymentEvent">
-    <span class="flex-47">{{ 'labels.inputs.OverDue days for repayment event' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.overDueDaysForRepaymentEvent | number }}</span>
+    <span class="flex-40">{{ 'labels.inputs.OverDue days for repayment event' | translate }}:</span>
+    <span class="flex-60">{{ loanProduct.overDueDaysForRepaymentEvent | number }}</span>
   </div>
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Configurable Terms and Settings' | translate }}</h3>
@@ -748,31 +761,47 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-fill layout-row">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{ 'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate }}:</span
     >
-    <span class="flex-53">{{ loanProduct.allowAttributeConfiguration | yesNo }}</span>
+    <span class="flex-60">{{ loanProduct.allowAttributeConfiguration | yesNo }}</span>
   </div>
 
-  <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.allowAttributeConfiguration">
-    <span class="flex-47">{{ 'labels.inputs.Amortization' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.amortizationType | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Interest method' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.interestType | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Repayment strategy' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Interest calculation period' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Repaid every' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
-    <span class="flex-47">{{ 'labels.inputs.Moratorium' | translate }}:</span>
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo }}</span>
-    <span class="flex-47"
-      >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
-    >
-    <span class="flex-53">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
+  <div *ngIf="loanProduct.allowAttributeConfiguration">
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Amortization' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.amortizationType | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Interest method' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.interestType | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Repayment strategy' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Interest calculation period' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Repaid every' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Moratorium' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo }}</span>
+    </div>
+    <div class="flex-fill layout-row">
+      <span class="flex-40"
+        >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
+      >
+      <span class="flex-60">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
+    </div>
   </div>
 
   <div class="flex-fill layout-row-wrap responsive-column" *ngIf="loanProduct.charges.length">
@@ -857,23 +886,23 @@
     <mat-divider [inset]="true"></mat-divider>
 
     <div class="flex-100 layout-row">
-      <span class="flex-47">{{ 'labels.inputs.Enable income capitalization' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.enableIncomeCapitalization | yesNo }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Enable income capitalization' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.enableIncomeCapitalization | yesNo }}</span>
     </div>
 
     <div class="flex-100 layout-row" *ngIf="loanProduct.enableIncomeCapitalization">
-      <span class="flex-47">{{ 'labels.inputs.Income capitalization calculation type' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.capitalizedIncomeCalculationType?.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Income capitalization calculation type' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.capitalizedIncomeCalculationType?.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div class="flex-100 layout-row" *ngIf="loanProduct.enableIncomeCapitalization">
-      <span class="flex-47">{{ 'labels.inputs.Income capitalization strategy' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.capitalizedIncomeStrategy?.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Income capitalization strategy' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.capitalizedIncomeStrategy?.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div class="flex-100 layout-row" *ngIf="loanProduct.enableIncomeCapitalization">
-      <span class="flex-47">{{ 'labels.inputs.Income type' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.capitalizedIncomeType?.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Income type' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.capitalizedIncomeType?.value | translateKey: 'catalogs' }}</span>
     </div>
   </div>
 
@@ -883,23 +912,23 @@
     <mat-divider [inset]="true"></mat-divider>
 
     <div class="flex-100 layout-row">
-      <span class="flex-47">{{ 'labels.inputs.Enable Buy down fee' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.enableBuyDownFee | yesNo }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Enable Buy down fee' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.enableBuyDownFee | yesNo }}</span>
     </div>
 
     <div class="flex-100 layout-row" *ngIf="loanProduct.enableBuyDownFee">
-      <span class="flex-47">{{ 'labels.inputs.Buy down fee calculation type' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.buyDownFeeCalculationType?.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Buy down fee calculation type' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.buyDownFeeCalculationType?.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div class="flex-100 layout-row" *ngIf="loanProduct.enableBuyDownFee">
-      <span class="flex-47">{{ 'labels.inputs.Buy down fee strategy' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.buyDownFeeStrategy?.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Buy down fee strategy' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.buyDownFeeStrategy?.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div class="flex-100 layout-row" *ngIf="loanProduct.enableBuyDownFee">
-      <span class="flex-47">{{ 'labels.inputs.Buy down fee income type' | translate }}:</span>
-      <span class="flex-53">{{ loanProduct.buyDownFeeIncomeType?.value | translateKey: 'catalogs' }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Buy down fee income type' | translate }}:</span>
+      <span class="flex-60">{{ loanProduct.buyDownFeeIncomeType?.value | translateKey: 'catalogs' }}</span>
     </div>
   </div>
 
@@ -908,17 +937,17 @@
   <mat-divider [inset]="true"></mat-divider>
 
   <div class="flex-100 layout-row">
-    <span class="flex-47">{{ 'labels.inputs.Type' | translate }}:</span>
-    <span class="flex-53">{{
+    <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span class="flex-60">{{
       'labels.accounting.' + getAccountingRuleName(accountingRuleData[accountingRule() - 1]) | translate
     }}</span>
   </div>
 
   <div class="flex-100 layout-row" *ngIf="isAccountingAccrualBased">
-    <span class="flex-47"
+    <span class="flex-40"
       >{{ 'labels.inputs.Enable Accrual Activity Posting on Installment Due Date' | translate }}:</span
     >
-    <span class="flex-53">{{ loanProduct.enableAccrualActivityPosting | yesNo }}</span>
+    <span class="flex-60">{{ loanProduct.enableAccrualActivityPosting | yesNo }}</span>
   </div>
 
   <div class="flex-100 layout-row-wrap responsive-column" *ngIf="isAccountingEnabled()">
diff --git a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.scss b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.scss
index e3729f6f3..2221a42fd 100644
--- a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.scss
+++ b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.scss
@@ -1,3 +1,4 @@
+@use 'assets/styles/helper';
 @use 'assets/styles/colours' as *;
 
 .tab-container {
diff --git a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.ts b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.ts
index d3f2bbbb1..b575ff6c1 100644
--- a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.ts
+++ b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.ts
@@ -19,9 +19,8 @@ import {
 import { LoanProducts } from '../../loan-products';
 import { CodeName, OptionData, StringEnumOptionData } from '../../../../shared/models/option-data.model';
 import { Accounting } from 'app/core/utils/accounting';
-import { NgIf, NgFor, DecimalPipe } from '@angular/common';
+import { DecimalPipe } from '@angular/common';
 import { MatDivider } from '@angular/material/divider';
-import { LongTextComponent } from '../../../../shared/long-text/long-text.component';
 import {
   MatTable,
   MatColumnDef,
@@ -50,7 +49,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatDivider,
-    LongTextComponent,
     MatTable,
     MatColumnDef,
     MatHeaderCellDef,
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
index 01f0cb49a..809cb7538 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
@@ -512,7 +512,7 @@
     </div>
   </div>
 
-  <div class="layout-row align-center margin-t responsive-column">
+  <div class="layout-row align-center margin-t responsive-column gap-2percent">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
index 944718df9..846bf7f36 100644
--- a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
@@ -10,9 +10,9 @@
   </button>
 </div>
 
-<div class="tab-container mat-typography">
+<div class="tab-container">
   <div class="responsive-column">
-    <h2 class="mat-h2 flex-fill">{{ savingProduct.name }}</h2>
+    <h2 class="mat-h2 flex-100">{{ savingProduct.name }}</h2>
 
     <mat-divider [inset]="true"></mat-divider>
 
diff --git a/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.scss b/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.scss
index 1af94d419..7a9e7406e 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.scss
+++ b/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.scss
@@ -1,3 +1,5 @@
+@use 'assets/styles/colours' as *;
+
 table {
   width: 100%;
 }
@@ -24,3 +26,9 @@ mat-divider {
 .margin-t {
   margin-top: 1em;
 }
+
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}
diff --git a/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html b/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html
index e5b5b65eb..7c4576c53 100644
--- a/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html
+++ b/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html
@@ -1,4 +1,4 @@
-<div class="layout-row align-end gap-2px responsive-column container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20 m-t-10">
   <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -14,233 +14,232 @@
   </button>
 </div>
 
-<div class="container">
-  <mat-card>
-    <mat-card-content>
-      <div class="responsive-column">
-        <h2 class="mat-h2 flex-fill">{{ shareProduct.name }}</h2>
+<div class="tab-container">
+  <!-- <mat-card>
+    <mat-card-content> -->
+  <!-- <div class="responsive-column"> -->
+  <h2 class="mat-h2 flex-100">{{ shareProduct.name }}</h2>
 
-        <mat-divider [inset]="true"></mat-divider>
+  <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
 
-        <mat-divider [inset]="true"></mat-divider>
+  <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.shortName }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.shortName }}</span>
+  </div>
 
-        <div class="flex-fill layout-row" *ngIf="shareProduct.description">
-          <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.description }}</span>
-        </div>
+  <div class="flex-fill layout-row" *ngIf="shareProduct.description">
+    <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.description }}</span>
+  </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
 
-        <mat-divider [inset]="true"></mat-divider>
+  <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.currency.name }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.currency.name }}</span>
+  </div>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.currency.decimalPlaces }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.currency.decimalPlaces }}</span>
+  </div>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.currency.inMultiplesOf }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.currency.inMultiplesOf }}</span>
+  </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
 
-        <mat-divider [inset]="true"></mat-divider>
+  <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Total Number of Shares' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.totalShares | formatNumber }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Total Number of Shares' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.totalShares | formatNumber }}</span>
+  </div>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Shares to be Issued' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Shares to be Issued' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
+  </div>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Nominal/Unit Price' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.unitPrice | formatNumber }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Nominal/Unit Price' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.unitPrice | formatNumber }}</span>
+  </div>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Capital Value' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.shareCapital | formatNumber }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Capital Value' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.shareCapital | formatNumber }}</span>
+  </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
 
-        <mat-divider [inset]="true"></mat-divider>
+  <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Shares per Client' | translate }}:</span>
-          <span class="flex-60">{{
-            shareProduct.nominalShares +
-              ' (Min: ' +
-              (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
-              ', Max: ' +
-              (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
-              ')'
-          }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Shares per Client' | translate }}:</span>
+    <span class="flex-60">{{
+      shareProduct.nominalShares +
+        ' (Min: ' +
+        (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
+        ', Max: ' +
+        (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
+        ')'
+    }}</span>
+  </div>
 
-        <div class="flex-fill layout-row" *ngIf="shareProduct.minimumActivePeriod">
-          <span class="flex-40">{{ 'labels.inputs.Minimum Active Period' | translate }}:</span>
-          <span class="flex-60"
-            >{{ shareProduct.minimumActivePeriod }}
-            {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
-          >
-        </div>
+  <div class="flex-fill layout-row" *ngIf="shareProduct.minimumActivePeriod">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Active Period' | translate }}:</span>
+    <span class="flex-60"
+      >{{ shareProduct.minimumActivePeriod }}
+      {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
+    >
+  </div>
 
-        <div class="flex-fill layout-row" *ngIf="shareProduct.lockinPeriod">
-          <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-          <span class="flex-60"
-            >{{ shareProduct.lockinPeriod }}
-            {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
-          >
-        </div>
+  <div class="flex-fill layout-row" *ngIf="shareProduct.lockinPeriod">
+    <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span class="flex-60"
+      >{{ shareProduct.lockinPeriod }} {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
+    >
+  </div>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}:</span>
-          <span class="flex-60">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}:</span>
+    <span class="flex-60">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
+  </div>
 
-        <div *ngIf="shareProduct.marketPrice?.length" class="layout-row-wrap responsive-column flex-fill">
-          <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Market Price Period' | translate }}</h3>
+  <div *ngIf="shareProduct.marketPrice?.length" class="layout-row-wrap responsive-column flex-fill">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Market Price Period' | translate }}</h3>
 
-          <mat-divider [inset]="true"></mat-divider>
+    <mat-divider [inset]="true"></mat-divider>
 
-          <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.marketPrice">
-            <ng-container matColumnDef="fromDate">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
-              <td mat-cell *matCellDef="let marketPrice">
-                {{ marketPrice.fromDate | dateFormat }}
-              </td>
-            </ng-container>
+    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.marketPrice">
+      <ng-container matColumnDef="fromDate">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
+        <td mat-cell *matCellDef="let marketPrice">
+          {{ marketPrice.fromDate | dateFormat }}
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="shareValue">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Nominal/Unit Price' | translate }}</th>
-              <td mat-cell *matCellDef="let marketPrice">
-                {{ marketPrice.shareValue | formatNumber }}
-              </td>
-            </ng-container>
+      <ng-container matColumnDef="shareValue">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Nominal/Unit Price' | translate }}</th>
+        <td mat-cell *matCellDef="let marketPrice">
+          {{ marketPrice.shareValue | formatNumber }}
+        </td>
+      </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="marketPriceDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns"></tr>
-          </table>
-        </div>
+      <tr mat-header-row *matHeaderRowDef="marketPriceDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns"></tr>
+    </table>
+  </div>
 
-        <div *ngIf="shareProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
-          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+  <div *ngIf="shareProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
 
-          <mat-divider [inset]="true"></mat-divider>
+    <mat-divider [inset]="true"></mat-divider>
 
-          <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.charges">
-            <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.name + ', ' + charge.currency.displaySymbol }}
-              </td>
-            </ng-container>
+    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.charges">
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="chargeCalculationType">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
-              </td>
-            </ng-container>
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="amount">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.amount | numberFormat }}
-              </td>
-            </ng-container>
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount | numberFormat }}
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="chargeTimeType">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
-              </td>
-            </ng-container>
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
+        </td>
+      </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
-          </table>
-        </div>
+      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
+    </table>
+  </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
 
-        <mat-divider [inset]="true"></mat-divider>
+  <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
-          <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
-          <span class="flex-60">{{
-            'labels.accounting.' + getAccountingRuleName(shareProduct.accountingRule.value) | translate
-          }}</span>
-        </div>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span class="flex-60">{{
+      'labels.accounting.' + getAccountingRuleName(shareProduct.accountingRule.value) | translate
+    }}</span>
+  </div>
 
-        <div *ngIf="shareProduct.accountingRule.id === 2" class="layout-row-wrap responsive-column flex-fill">
-          <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
+  <div *ngIf="shareProduct.accountingRule.id === 2" class="layout-row-wrap responsive-column flex-fill">
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
 
-          <div class="flex-fill">
-            <mifosx-gl-account-display
-              class="flex-100"
-              [accountTitle]="'Share reference'"
-              [glAccount]="shareProduct.accountingMappings.shareReferenceId"
-              [withTitle]="'40%'"
-            >
-            </mifosx-gl-account-display>
-          </div>
+    <div class="flex-fill">
+      <mifosx-gl-account-display
+        class="flex-100"
+        [accountTitle]="'Share reference'"
+        [glAccount]="shareProduct.accountingMappings.shareReferenceId"
+        [withTitle]="'40%'"
+      >
+      </mifosx-gl-account-display>
+    </div>
 
-          <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
-          <div class="flex-fill">
-            <mifosx-gl-account-display
-              class="flex-100"
-              [accountTitle]="'Share suspense control'"
-              [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
-              [withTitle]="'40%'"
-            >
-            </mifosx-gl-account-display>
-          </div>
+    <div class="flex-fill">
+      <mifosx-gl-account-display
+        class="flex-100"
+        [accountTitle]="'Share suspense control'"
+        [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
+        [withTitle]="'40%'"
+      >
+      </mifosx-gl-account-display>
+    </div>
 
-          <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Share Equity' | translate }}</h4>
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Share Equity' | translate }}</h4>
 
-          <div class="flex-fill">
-            <mifosx-gl-account-display
-              class="flex-100"
-              [accountTitle]="'Equity'"
-              [glAccount]="shareProduct.accountingMappings.shareEquityId"
-              [withTitle]="'40%'"
-            >
-            </mifosx-gl-account-display>
-          </div>
+    <div class="flex-fill">
+      <mifosx-gl-account-display
+        class="flex-100"
+        [accountTitle]="'Equity'"
+        [glAccount]="shareProduct.accountingMappings.shareEquityId"
+        [withTitle]="'40%'"
+      >
+      </mifosx-gl-account-display>
+    </div>
 
-          <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
+    <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
 
-          <div class="flex-fill">
-            <mifosx-gl-account-display
-              class="flex-100"
-              [accountTitle]="'Income from fees'"
-              [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
-              [withTitle]="'40%'"
-            >
-            </mifosx-gl-account-display>
-          </div>
-        </div>
-      </div>
-    </mat-card-content>
-  </mat-card>
+    <div class="flex-fill">
+      <mifosx-gl-account-display
+        class="flex-100"
+        [accountTitle]="'Income from fees'"
+        [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
+        [withTitle]="'40%'"
+      >
+      </mifosx-gl-account-display>
+    </div>
+  </div>
+  <!-- </div> -->
+  <!-- </mat-card-content>
+  </mat-card> -->
 </div>
diff --git a/src/assets/translations/cs-CS.json b/src/assets/translations/cs-CS.json
index ae194fd8b..54357b900 100644
--- a/src/assets/translations/cs-CS.json
+++ b/src/assets/translations/cs-CS.json
@@ -1425,6 +1425,7 @@
       "Created At": "Vytvořeno v",
       "Created By": "Vytvořil",
       "Created On": "Vytvořeno dne",
+      "Creation Date": "Datum vytvoření",
       "Credit": "Kredit",
       "Credit Account": "Úvěrový účet",
       "Credit Account Name": "Název kreditního účtu",
diff --git a/src/assets/translations/de-DE.json b/src/assets/translations/de-DE.json
index 8c78abdce..7b2b90ef2 100644
--- a/src/assets/translations/de-DE.json
+++ b/src/assets/translations/de-DE.json
@@ -1425,6 +1425,7 @@
       "Created At": "Hergestellt in",
       "Created By": "Erstellt von",
       "Created On": "Erstellt am",
+      "Creation Date": "Erstellungsdatum",
       "Credit": "Kredit",
       "Credit Account": "Kreditkonto",
       "Credit Account Name": "Name des Kreditkontos",
diff --git a/src/assets/translations/en-US.json b/src/assets/translations/en-US.json
index 4e0f62d82..2cd767426 100644
--- a/src/assets/translations/en-US.json
+++ b/src/assets/translations/en-US.json
@@ -1429,6 +1429,7 @@
       "Created At": "Created At",
       "Created By": "Created By",
       "Created On": "Created On",
+      "Creation Date": "Creation Date",
       "Credit": "Credit",
       "Credit Account": "Credit Account",
       "Credit Account Name": "Credit Account Name",
diff --git a/src/assets/translations/es-CL.json b/src/assets/translations/es-CL.json
index e18c308e3..3cbd768ae 100644
--- a/src/assets/translations/es-CL.json
+++ b/src/assets/translations/es-CL.json
@@ -1424,6 +1424,7 @@
       "Created At": "Creado en",
       "Created By": "Creado por",
       "Created On": "Creado en",
+      "Creation Date": "Fecha de creación",
       "Credit": "Crédito",
       "Credit Account": "Cuenta de crédito",
       "Credit Account Name": "Nombre de la cuenta de crédito",
diff --git a/src/assets/translations/es-MX.json b/src/assets/translations/es-MX.json
index 7e9132143..8ee7046f7 100644
--- a/src/assets/translations/es-MX.json
+++ b/src/assets/translations/es-MX.json
@@ -1424,6 +1424,7 @@
       "Created At": "Creado en",
       "Created By": "Creado por",
       "Created On": "Creado en",
+      "Creation Date": "Fecha de creación",
       "Credit": "Crédito",
       "Credit Account": "Cuenta de crédito",
       "Credit Account Name": "Nombre de la cuenta de crédito",
diff --git a/src/assets/translations/fr-FR.json b/src/assets/translations/fr-FR.json
index 896ca0bf4..3ced36f92 100644
--- a/src/assets/translations/fr-FR.json
+++ b/src/assets/translations/fr-FR.json
@@ -1425,6 +1425,7 @@
       "Created At": "Créé à",
       "Created By": "Créé par",
       "Created On": "Créé sur",
+      "Creation Date": "Date de création",
       "Credit": "Crédit",
       "Credit Account": "Compte créditeur",
       "Credit Account Name": "Nom du compte de crédit",
diff --git a/src/assets/translations/it-IT.json b/src/assets/translations/it-IT.json
index d034232c6..b36e4c902 100644
--- a/src/assets/translations/it-IT.json
+++ b/src/assets/translations/it-IT.json
@@ -1425,6 +1425,7 @@
       "Created At": "Creato a",
       "Created By": "Creato da",
       "Created On": "Creato",
+      "Creation Date": "Data di creazione",
       "Credit": "Credito",
       "Credit Account": "Conto di credito",
       "Credit Account Name": "Nome del conto di credito",
diff --git a/src/assets/translations/ko-KO.json b/src/assets/translations/ko-KO.json
index 71f02a4c8..da6e53cd6 100644
--- a/src/assets/translations/ko-KO.json
+++ b/src/assets/translations/ko-KO.json
@@ -1426,6 +1426,7 @@
       "Created At": "생성 날짜",
       "Created By": "작성자",
       "Created On": "에 만든",
+      "Creation Date": "생성 날짜",
       "Credit": "신용 거래",
       "Credit Account": "신용 계좌",
       "Credit Account Name": "신용 계좌 이름",
diff --git a/src/assets/translations/lt-LT.json b/src/assets/translations/lt-LT.json
index 1f7abe192..b0c133f7a 100644
--- a/src/assets/translations/lt-LT.json
+++ b/src/assets/translations/lt-LT.json
@@ -1425,6 +1425,7 @@
       "Created At": "Sukurta",
       "Created By": "Sukurta",
       "Created On": "Sukurtas",
+      "Creation Date": "Sukūrimo data",
       "Credit": "Kreditas",
       "Credit Account": "Kredito sąskaita",
       "Credit Account Name": "Kredito sąskaitos pavadinimas",
diff --git a/src/assets/translations/lv-LV.json b/src/assets/translations/lv-LV.json
index e6257b2d5..92860d2f3 100644
--- a/src/assets/translations/lv-LV.json
+++ b/src/assets/translations/lv-LV.json
@@ -1425,6 +1425,7 @@
       "Created At": "Izveidots plkst",
       "Created By": "Radīts",
       "Created On": "Izveidots",
+      "Creation Date": "Izveidošanas datums",
       "Credit": "Kredīts",
       "Credit Account": "Kredīta konts",
       "Credit Account Name": "Kredīta konta nosaukums",
diff --git a/src/assets/translations/ne-NE.json b/src/assets/translations/ne-NE.json
index 383bde32b..586d15ad8 100644
--- a/src/assets/translations/ne-NE.json
+++ b/src/assets/translations/ne-NE.json
@@ -1425,6 +1425,7 @@
       "Created At": "मा सिर्जना गरियो",
       "Created By": "द्वारा सिर्जना गरिएको",
       "Created On": "मा सिर्जना गरियो",
+      "Creation Date": "सिर्जना मिति",
       "Credit": "क्रेडिट",
       "Credit Account": "क्रेडिट खाता",
       "Credit Account Name": "क्रेडिट खाता नाम",
diff --git a/src/assets/translations/pt-PT.json b/src/assets/translations/pt-PT.json
index 857f7618b..61ac3e4d4 100644
--- a/src/assets/translations/pt-PT.json
+++ b/src/assets/translations/pt-PT.json
@@ -1425,6 +1425,7 @@
       "Created At": "Criado em",
       "Created By": "Criado por",
       "Created On": "Criado em",
+      "Creation Date": "Data de Criação",
       "Credit": "Crédito",
       "Credit Account": "Conta de crédito",
       "Credit Account Name": "Nome da conta de crédito",
diff --git a/src/assets/translations/sw-SW.json b/src/assets/translations/sw-SW.json
index a4ccaca67..704ee74d4 100644
--- a/src/assets/translations/sw-SW.json
+++ b/src/assets/translations/sw-SW.json
@@ -1425,6 +1425,7 @@
       "Created At": "Imeundwa Katika",
       "Created By": "Imetengenezwa na",
       "Created On": "Imeundwa Juu",
+      "Creation Date": "Tarehe ya Uumbaji",
       "Credit": "Mikopo",
       "Credit Account": "Akaunti ya Mkopo",
       "Credit Account Name": "Jina la Akaunti ya Mkopo",