diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
index eb3da1edc..c1b992f28 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
@@ -32,6 +32,9 @@
     .accrual {
       color: $msg-default;
     }
+    .down-payment {
+      color: $status-downpayment;
+    }
     .chargeoff {
       color: $status-chargeoff;
     }
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
index 745213a1c..19573b9d9 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
@@ -109,9 +109,10 @@ export class TransactionsTabComponent implements OnInit {
    * PAYOUT_REFUND:22
    * GOODWILL_CREDIT:23
    * CHARGE_ADJUSTMENT:26
+   * DOWN_PAYMENT:28
    */
   showTransactions(transactionsData: any) {
-    if ([1, 2, 4, 9, 20, 21, 22, 23, 26].includes(transactionsData.type.id)) {
+    if ([1, 2, 4, 9, 20, 21, 22, 23, 26, 28].includes(transactionsData.type.id)) {
       this.router.navigate([transactionsData.id], { relativeTo: this.route });
     }
   }
@@ -136,6 +137,9 @@ export class TransactionsTabComponent implements OnInit {
     if (this.isChargeOff(transaction.type)) {
       return 'chargeoff';
     }
+    if (this.isDownPayment(transaction.type)) {
+      return 'down-payment';
+    }
     return '';
   }
 
@@ -197,6 +201,10 @@ export class TransactionsTabComponent implements OnInit {
     return (transactionType.chargeoff || transactionType.code === 'loanTransactionType.chargeOff');
   }
 
+  private isDownPayment(transactionType: any): boolean  {
+    return (transactionType.downPayment || transactionType.code === 'loanTransactionType.downPayment');
+  }
+
   private reload() {
     const clientId = this.route.parent.parent.snapshot.params['clientId'];
     const loanId = this.route.parent.parent.snapshot.params['loanId'];
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
index 00285a45f..7b480e6f1 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
@@ -68,7 +68,9 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Principal:</span>
-    <span fxFlex="60%">{{ loanProduct.principal + ' (Min: ' + (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) + ', Max: ' + (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) + ')' }}</span>
+    <span fxFlex="60%">{{ loanProduct.principal + ' (Min: ' + (loanProduct.minPrincipal ? loanProduct.minPrincipal :
+      loanProduct.principal) + ', Max: ' + (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal)
+      + ')' }}</span>
   </div>
 
   <div fxFlexFill>
@@ -78,13 +80,23 @@
 
   <div fxFlexFill *ngIf="loanProduct.allowApprovedDisbursedAmountsOverApplied">
     <span fxFlex="40%">Over Applied:</span>
-    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber }} %</span>
-    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber }} {{ loanProduct.currencyCode }}</span>
-</div>
+    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber
+      }} %</span>
+    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber }} {{
+      loanProduct.currencyCode }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Installment day calculation from:</span>
+    <span fxFlex="60%">{{ loanProduct.repaymentStartDateType }}</span>
+  </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Number of Repayments:</span>
-    <span fxFlex="60%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ? loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) + ', Max: ' + (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) + ')' }}</span>
+    <span fxFlex="60%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ?
+      loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) + ', Max: ' +
+      (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) + ')'
+      }}</span>
   </div>
 
   <div fxFlexFill>
@@ -94,18 +106,26 @@
 
   <div fxFlexFill *ngIf="!loanProduct.isLinkedToFloatingInterestRates">
     <span fxFlex="40%">Nominal interest rate:</span>
-    <span fxFlex="60%">{{ loanProduct.interestRatePerPeriod + ' (Min: ' + (loanProduct.minInterestRatePerPeriod ? loanProduct.minInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ', Max: ' + (loanProduct.maxInterestRatePerPeriod ? loanProduct.maxInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ')' + ' ' + (loanProduct.interestRateFrequencyType | find:loanProductsTemplate.interestRateFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="60%">{{ loanProduct.interestRatePerPeriod + ' (Min: ' + (loanProduct.minInterestRatePerPeriod ?
+      loanProduct.minInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ', Max: ' +
+      (loanProduct.maxInterestRatePerPeriod ? loanProduct.maxInterestRatePerPeriod : loanProduct.interestRatePerPeriod)
+      + ')' + ' ' + (loanProduct.interestRateFrequencyType |
+      find:loanProductsTemplate.interestRateFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.isLinkedToFloatingInterestRates" fxLayout="row wrap" fxLayout.lt-md="column">
     <span fxFlex="40%">Floating Lending Interest Rate:</span>
-    <span fxFlex="60%">{{ loanProduct.floatingRatesId | find:loanProductsTemplate.floatingRateOptions:'id':'name' }}</span>
+    <span fxFlex="60%">{{ loanProduct.floatingRatesId | find:loanProductsTemplate.floatingRateOptions:'id':'name'
+      }}</span>
     <span fxFlex="40%">Interest Rate Differential:</span>
     <span fxFlex="60%">{{ loanProduct.interestRateDifferential }}</span>
     <span fxFlex="40%">Floating Interest Rate Calculation Allowed:</span>
     <span fxFlex="60%">{{ loanProduct.isFloatingInterestRateCalculationAllowed ? 'Yes' : 'No' }}</span>
     <span fxFlex="40%">Floating Interest Rate:</span>
-    <span fxFlex="60%">{{ loanProduct.defaultDifferentialLendingRate + ' (Min: ' + (loanProduct.minDifferentialLendingRate ? loanProduct.minDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ', Max: ' + (loanProduct.maxDifferentialLendingRate ? loanProduct.maxDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ')' }}</span>
+    <span fxFlex="60%">{{ loanProduct.defaultDifferentialLendingRate + ' (Min: ' +
+      (loanProduct.minDifferentialLendingRate ? loanProduct.minDifferentialLendingRate :
+      loanProduct.defaultDifferentialLendingRate) + ', Max: ' + (loanProduct.maxDifferentialLendingRate ?
+      loanProduct.maxDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ')' }}</span>
   </div>
 
   <div fxFlexFill>
@@ -136,7 +156,7 @@
       <ng-container matColumnDef="minValue">
         <th mat-header-cell *matHeaderCellDef> Minimum </th>
         <td mat-cell *matCellDef="let variation">
-          {{ variation.minValue  }}
+          {{ variation.minValue }}
         </td>
       </ng-container>
 
@@ -165,7 +185,8 @@
 
     <h4 class="mat-h4" fxFlexFill>Number of Repayments by loan cycle</h4>
 
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle">
+    <table fxFlexFill class="mat-elevation-z1" mat-table
+      [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle">
 
       <ng-container matColumnDef="valueConditionType">
         <th mat-header-cell *matHeaderCellDef> Condition </th>
@@ -184,7 +205,7 @@
       <ng-container matColumnDef="minValue">
         <th mat-header-cell *matHeaderCellDef> Minimum </th>
         <td mat-cell *matCellDef="let variation">
-          {{ variation.minValue  }}
+          {{ variation.minValue }}
         </td>
       </ng-container>
 
@@ -213,7 +234,8 @@
 
     <h4 class="mat-h4" fxFlexFill>Nominal Interest Rate by loan cycle</h4>
 
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle">
+    <table fxFlexFill class="mat-elevation-z1" mat-table
+      [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle">
 
       <ng-container matColumnDef="valueConditionType">
         <th mat-header-cell *matHeaderCellDef> Condition </th>
@@ -232,7 +254,7 @@
       <ng-container matColumnDef="minValue">
         <th mat-header-cell *matHeaderCellDef> Minimum </th>
         <td mat-cell *matCellDef="let variation">
-          {{ variation.minValue  }}
+          {{ variation.minValue }}
         </td>
       </ng-container>
 
@@ -259,7 +281,8 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Repay Every:</span>
-    <span fxFlex="60%">{{ loanProduct.repaymentEvery + ' ' + (loanProduct.repaymentFrequencyType | find:loanProductsTemplate.repaymentFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="60%">{{ loanProduct.repaymentEvery + ' ' + (loanProduct.repaymentFrequencyType |
+      find:loanProductsTemplate.repaymentFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment">
@@ -273,7 +296,8 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Amortization:</span>
-    <span fxFlex="60%">{{ loanProduct.amortizationType | find:loanProductsTemplate.amortizationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.amortizationType | find:loanProductsTemplate.amortizationTypeOptions:'id':'value'
+      }}</span>
   </div>
 
   <div fxFlexFill>
@@ -283,12 +307,14 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Interest Method:</span>
-    <span fxFlex="60%">{{ loanProduct.interestType | find:loanProductsTemplate.interestTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.interestType | find:loanProductsTemplate.interestTypeOptions:'id':'value'
+      }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Interest Calculation Period:</span>
-    <span fxFlex="60%">{{ loanProduct.interestCalculationPeriodType | find:loanProductsTemplate.interestCalculationPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.interestCalculationPeriodType |
+      find:loanProductsTemplate.interestCalculationPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
@@ -298,7 +324,8 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Repayment Strategy:</span>
-    <span fxFlex="60%">{{ loanProduct.transactionProcessingStrategyCode | find:loanProductsTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
+    <span fxFlex="60%">{{ loanProduct.transactionProcessingStrategyCode |
+      find:loanProductsTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.graceOnPrincipalPayment">
@@ -323,12 +350,14 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Days in year:</span>
-    <span fxFlex="60%">{{ loanProduct.daysInYearType | find:loanProductsTemplate.daysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.daysInYearType | find:loanProductsTemplate.daysInYearTypeOptions:'id':'value'
+      }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Days in month:</span>
-    <span fxFlex="60%">{{ loanProduct.daysInMonthType | find:loanProductsTemplate.daysInMonthTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.daysInMonthType | find:loanProductsTemplate.daysInMonthTypeOptions:'id':'value'
+      }}</span>
   </div>
 
   <div fxFlexFill>
@@ -368,7 +397,8 @@
 
   <div fxFlexFill *ngIf="loanProduct.allowVariableInstallments">
     <span fxFlex="40%">Variable Installments:</span>
-    <span fxFlex="60%">{{ '(Min: ' + loanProduct.minimumGap + ', Max: ' + (loanProduct.maximumGap ? loanProduct.maximumGap : loanProduct.minimumGap) + ')' }}</span>
+    <span fxFlex="60%">{{ '(Min: ' + loanProduct.minimumGap + ', Max: ' + (loanProduct.maximumGap ?
+      loanProduct.maximumGap : loanProduct.minimumGap) + ')' }}</span>
   </div>
 
   <div fxFlexFill>
@@ -387,20 +417,33 @@
 
   <div fxFlexFill *ngIf="loanProduct.isInterestRecalculationEnabled" fxLayout="row wrap" fxLayout.lt-md="column">
     <span fxFlex="40%">Pre-closure interest calculation rule:</span>
-    <span fxFlex="60%">{{ loanProduct.preClosureInterestCalculationStrategy | find:loanProductsTemplate.preClosureInterestCalculationStrategyOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.preClosureInterestCalculationStrategy |
+      find:loanProductsTemplate.preClosureInterestCalculationStrategyOptions:'id':'value' }}</span>
     <span fxFlex="40%">Advance payments adjustment type:</span>
-    <span fxFlex="60%">{{ loanProduct.rescheduleStrategyMethod | find:loanProductsTemplate.rescheduleStrategyTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ loanProduct.rescheduleStrategyMethod |
+      find:loanProductsTemplate.rescheduleStrategyTypeOptions:'id':'value' }}</span>
     <span fxFlex="40%">Interest recalculation compounding on:</span>
-    <span fxFlex="60%">{{ loanProduct.interestRecalculationCompoundingMethod | find:loanProductsTemplate.interestRecalculationCompoundingTypeOptions:'id':'value' }}</span>
-    <div fxFlexFill *ngIf="loanProduct.interestRecalculationCompoundingMethod !== 0" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="60%">{{ loanProduct.interestRecalculationCompoundingMethod |
+      find:loanProductsTemplate.interestRecalculationCompoundingTypeOptions:'id':'value' }}</span>
+    <div fxFlexFill *ngIf="loanProduct.interestRecalculationCompoundingMethod !== 0" fxLayout="row wrap"
+      fxLayout.lt-md="column">
       <span fxFlex="40%">Frequency for compounding:</span>
       <span fxFlex="60%">
-        {{ loanProduct.recalculationCompoundingFrequencyType | find:loanProductsTemplate.interestRecalculationFrequencyTypeOptions:'id':'value' }}
-        <span *ngIf="loanProduct.recalculationCompoundingFrequencyType === 4">&nbsp;&nbsp;{{ loanProduct.recalculationCompoundingFrequencyNthDayType | find:loanProductsTemplate.interestRecalculationNthDayTypeOptions:'id':'value' }}</span>
-        <span *ngIf="(loanProduct.recalculationCompoundingFrequencyType === 4 && loanProduct.recalculationCompoundingFrequencyNthDayType !== -2) || loanProduct.recalculationCompoundingFrequencyType === 3">&nbsp;&nbsp;{{ loanProduct.recalculationCompoundingFrequencyDayOfWeekType | find:loanProductsTemplate.interestRecalculationDayOfWeekTypeOptions:'id':'value' }}</span>
-        <span *ngIf="loanProduct.recalculationCompoundingFrequencyType === 4 && loanProduct.recalculationCompoundingFrequencyNthDayType === -2">&nbsp;&nbsp;{{ loanProduct.recalculationCompoundingFrequencyOnDayType }}</span>
+        {{ loanProduct.recalculationCompoundingFrequencyType |
+        find:loanProductsTemplate.interestRecalculationFrequencyTypeOptions:'id':'value' }}
+        <span *ngIf="loanProduct.recalculationCompoundingFrequencyType === 4">&nbsp;&nbsp;{{
+          loanProduct.recalculationCompoundingFrequencyNthDayType |
+          find:loanProductsTemplate.interestRecalculationNthDayTypeOptions:'id':'value' }}</span>
+        <span
+          *ngIf="(loanProduct.recalculationCompoundingFrequencyType === 4 && loanProduct.recalculationCompoundingFrequencyNthDayType !== -2) || loanProduct.recalculationCompoundingFrequencyType === 3">&nbsp;&nbsp;{{
+          loanProduct.recalculationCompoundingFrequencyDayOfWeekType |
+          find:loanProductsTemplate.interestRecalculationDayOfWeekTypeOptions:'id':'value' }}</span>
+        <span
+          *ngIf="loanProduct.recalculationCompoundingFrequencyType === 4 && loanProduct.recalculationCompoundingFrequencyNthDayType === -2">&nbsp;&nbsp;{{
+          loanProduct.recalculationCompoundingFrequencyOnDayType }}</span>
       </span>
-      <div fxFlexFill *ngIf="loanProduct.recalculationCompoundingFrequencyType !== 1" fxLayout="row wrap" fxLayout.lt-md="column">
+      <div fxFlexFill *ngIf="loanProduct.recalculationCompoundingFrequencyType !== 1" fxLayout="row wrap"
+        fxLayout.lt-md="column">
         <span fxFlex="40%">Frequency Interval for compounding:</span>
         <span fxFlex="60%">{{ loanProduct.recalculationCompoundingFrequencyInterval }}</span>
       </div>
@@ -408,13 +451,22 @@
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Frequency for recalculate Outstanding Principal:</span>
       <span fxFlex="60%">
-        {{ loanProduct.recalculationRestFrequencyType | find:loanProductsTemplate.interestRecalculationFrequencyTypeOptions:'id':'value' }}
-        <span *ngIf="loanProduct.recalculationRestFrequencyType === 4">&nbsp;&nbsp;{{ loanProduct.recalculationRestFrequencyNthDayType | find:loanProductsTemplate.interestRecalculationNthDayTypeOptions:'id':'value' }}</span>
-        <span *ngIf="(loanProduct.recalculationRestFrequencyType === 4 && loanProduct.recalculationRestFrequencyNthDayType !== -2) || loanProduct.recalculationRestFrequencyType === 3">&nbsp;&nbsp;{{ loanProduct.recalculationRestFrequencyDayOfWeekType | find:loanProductsTemplate.interestRecalculationDayOfWeekTypeOptions:'id':'value' }}</span>
-        <span *ngIf="loanProduct.recalculationRestFrequencyType === 4 && loanProduct.recalculationRestFrequencyNthDayType === -2">&nbsp;&nbsp;{{ loanProduct.recalculationRestFrequencyOnDayType }}</span>
+        {{ loanProduct.recalculationRestFrequencyType |
+        find:loanProductsTemplate.interestRecalculationFrequencyTypeOptions:'id':'value' }}
+        <span *ngIf="loanProduct.recalculationRestFrequencyType === 4">&nbsp;&nbsp;{{
+          loanProduct.recalculationRestFrequencyNthDayType |
+          find:loanProductsTemplate.interestRecalculationNthDayTypeOptions:'id':'value' }}</span>
+        <span
+          *ngIf="(loanProduct.recalculationRestFrequencyType === 4 && loanProduct.recalculationRestFrequencyNthDayType !== -2) || loanProduct.recalculationRestFrequencyType === 3">&nbsp;&nbsp;{{
+          loanProduct.recalculationRestFrequencyDayOfWeekType |
+          find:loanProductsTemplate.interestRecalculationDayOfWeekTypeOptions:'id':'value' }}</span>
+        <span
+          *ngIf="loanProduct.recalculationRestFrequencyType === 4 && loanProduct.recalculationRestFrequencyNthDayType === -2">&nbsp;&nbsp;{{
+          loanProduct.recalculationRestFrequencyOnDayType }}</span>
       </span>
     </div>
-    <div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyType !== 1" fxLayout="row wrap" fxLayout.lt-md="column">
+    <div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyType !== 1" fxLayout="row wrap"
+      fxLayout.lt-md="column">
       <span fxFlex="40%">Frequency Interval for recalculation:</span>
       <span fxFlex="60%">{{ loanProduct.recalculationRestFrequencyInterval }}</span>
       <div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyDate">
@@ -522,7 +574,8 @@
     <span fxFlex="40%">Repaid every:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.repaymentEvery ? 'Yes' : 'No' }}</span>
     <span fxFlex="40%">Moratorium:</span>
-    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No'
+      }}</span>
     <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing ? 'Yes' : 'No' }}</span>
   </div>
@@ -533,7 +586,8 @@
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:false">
+    <table fxFlexFill class="mat-elevation-z1" mat-table
+      [dataSource]="loanProduct.charges | chargesPenaltyFilter:false">
 
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Name </th>
@@ -552,7 +606,7 @@
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> Amount </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount  }}
+          {{ charge.amount }}
         </td>
       </ng-container>
 
@@ -591,7 +645,7 @@
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> Amount </th>
         <td mat-cell *matCellDef="let overdueCharge">
-          {{ overdueCharge.amount  }}
+          {{ overdueCharge.amount }}
         </td>
       </ng-container>
 
@@ -618,88 +672,115 @@
     <span fxFlex="60%">{{ accountingRuleData[loanProduct.accountingRule-1] }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loanProduct.accountingRule >= 2 && loanProduct.accountingRule <= 4" fxLayout="row wrap" fxLayout.lt-md="column">
+  <div fxFlexFill *ngIf="loanProduct.accountingRule >= 2 && loanProduct.accountingRule <= 4" fxLayout="row wrap"
+    fxLayout.lt-md="column">
 
     <h4 fxFlexFill class="mat-h4">Assets / Liabilities</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Fund source:</span>
-      <span fxFlex="60%">{{ loanProduct.fundSourceAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAndLiabilityAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.fundSourceAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.assetAndLiabilityAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Assets</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Loan portfolio:</span>
-      <span fxFlex="60%">{{ loanProduct.loanPortfolioAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
-      <div fxFlexFill *ngIf="loanProduct.accountingRule === 3 || loanProduct.accountingRule === 4" fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="60%">{{ loanProduct.loanPortfolioAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+      <div fxFlexFill *ngIf="loanProduct.accountingRule === 3 || loanProduct.accountingRule === 4" fxLayout="row wrap"
+        fxLayout.lt-md="column">
         <span fxFlex="40%">Interest Receivable:</span>
-        <span fxFlex="60%">{{ loanProduct.receivableInterestAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+        <span fxFlex="60%">{{ loanProduct.receivableInterestAccountId |
+          find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
         <span fxFlex="40%">Fees Receivable:</span>
-        <span fxFlex="60%">{{ loanProduct.receivableFeeAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+        <span fxFlex="60%">{{ loanProduct.receivableFeeAccountId |
+          find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
         <span fxFlex="40%">Penalties Receivable:</span>
-        <span fxFlex="60%">{{ loanProduct.receivablePenaltyAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+        <span fxFlex="60%">{{ loanProduct.receivablePenaltyAccountId |
+          find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
       </div>
       <span fxFlex="40%">Transfer in suspense:</span>
-      <span fxFlex="60%">{{ loanProduct.transfersInSuspenseAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.transfersInSuspenseAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Income</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Income from Interest:</span>
-      <span fxFlex="60%">{{ loanProduct.interestOnLoanAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.interestOnLoanAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from fees:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromFeeAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromFeeAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from penalties:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromPenaltyAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromPenaltyAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from Recovery Repayments:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromRecoveryAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromRecoveryAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from ChargeOff Interest:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromChargeOffInterestAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromChargeOffInterestAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from ChargeOff Fees:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromChargeOffFeesAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromChargeOffFeesAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from ChargeOff Penalty:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromChargeOffPenaltyAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromChargeOffPenaltyAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from Goodwill Credit Interest:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromGoodwillCreditInterestAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromGoodwillCreditInterestAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from Goodwill Credit Fees:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromGoodwillCreditFeesAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromGoodwillCreditFeesAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from Goodwill Credit Penalty:</span>
-      <span fxFlex="60%">{{ loanProduct.incomeFromGoodwillCreditPenaltyAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.incomeFromGoodwillCreditPenaltyAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Expenses</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Losses written off:</span>
-      <span fxFlex="60%">{{ loanProduct.writeOffAccountId | find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.writeOffAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Expenses from Goodwill Credit:</span>
-      <span fxFlex="60%">{{ loanProduct.goodwillCreditAccountId | find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.goodwillCreditAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">ChargeOff Expense:</span>
-      <span fxFlex="60%">{{ loanProduct.chargeOffExpenseAccountId | find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.chargeOffExpenseAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">ChargeOff Fraud Expense:</span>
-      <span fxFlex="60%">{{ loanProduct.chargeOffFraudExpenseAccountId | find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.chargeOffFraudExpenseAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Liabilities</h4>
 
     <div fxFlexFill>
       <span fxFlex="40%">Over payment liability:</span>
-      <span fxFlex="60%">{{ loanProduct.overpaymentLiabilityAccountId | find:loanProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ loanProduct.overpaymentLiabilityAccountId |
+        find:loanProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
     </div>
 
-    <div *ngIf="loanProduct.advancedAccountingRules && (loanProduct.paymentChannelToFundSourceMappings?.length || loanProduct.feeToIncomeAccountMappings?.length || loanProduct.penaltyToIncomeAccountMappings?.length)" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+    <div
+      *ngIf="loanProduct.advancedAccountingRules && (loanProduct.paymentChannelToFundSourceMappings?.length || loanProduct.feeToIncomeAccountMappings?.length || loanProduct.penaltyToIncomeAccountMappings?.length)"
+      fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
       <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
 
       <mat-divider fxFlexFill></mat-divider>
 
-      <div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
 
         <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
 
-        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.paymentChannelToFundSourceMappings">
+        <table fxFlexFill class="mat-elevation-z1" mat-table
+          [dataSource]="loanProduct.paymentChannelToFundSourceMappings">
 
           <ng-container matColumnDef="paymentTypeId">
             <th mat-header-cell *matHeaderCellDef> Payment Type </th>
@@ -711,7 +792,8 @@
           <ng-container matColumnDef="fundSourceAccountId">
             <th mat-header-cell *matHeaderCellDef> Fund Source </th>
             <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.fundSourceAccountId | find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
+              {{ paymentFundSource.fundSourceAccountId |
+              find:loanProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
             </td>
           </ng-container>
 
@@ -722,7 +804,8 @@
 
       </div>
 
-      <div *ngIf="loanProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <div *ngIf="loanProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
 
         <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
 
@@ -738,7 +821,9 @@
           <ng-container matColumnDef="incomeAccountId">
             <th mat-header-cell *matHeaderCellDef> Income Account </th>
             <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.incomeAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions.concat(loanProductsTemplate.accountingMappingOptions.liabilityAccountOptions):'id':'name' }}
+              {{ feesIncome.incomeAccountId |
+              find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions.concat(loanProductsTemplate.accountingMappingOptions.liabilityAccountOptions):'id':'name'
+              }}
             </td>
           </ng-container>
 
@@ -749,7 +834,8 @@
 
       </div>
 
-      <div *ngIf="loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <div *ngIf="loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
 
         <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 
@@ -758,14 +844,15 @@
           <ng-container matColumnDef="chargeId">
             <th mat-header-cell *matHeaderCellDef> Penalty </th>
             <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.chargeId  | find:loanProductsTemplate.penaltyOptions:'id':'name' }}
+              {{ penaltyIncome.chargeId | find:loanProductsTemplate.penaltyOptions:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
             <th mat-header-cell *matHeaderCellDef> Income Account </th>
             <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.incomeAccountId | find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+              {{ penaltyIncome.incomeAccountId |
+              find:loanProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
             </td>
           </ng-container>
 
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
index 72b64d9ee..926e1dccb 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
@@ -28,24 +28,35 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="31%" labelPosition="before" formControlName="allowApprovedDisbursedAmountsOverApplied">
-      Allow approval / disbursal above loan applied amount?
-    </mat-checkbox>
+    <div fxFlex="98%">
+      <mat-checkbox fxFlex="31%" labelPosition="before" formControlName="allowApprovedDisbursedAmountsOverApplied">
+        Allow approval / disbursal above loan applied amount?
+      </mat-checkbox>
 
-    <mat-form-field fxFlex="31%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
-      <mat-label>Over Amount Calculation Type</mat-label>
-      <mat-select formControlName="overAppliedCalculationType" required>
-        <mat-option *ngFor="let overAppliedCalculationType of overAppliedCalculationTypeData" [value]="overAppliedCalculationType.id">
-          {{ overAppliedCalculationType.value }}
+      <mat-form-field fxFlex="31%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
+        <mat-label>Over Amount Calculation Type</mat-label>
+        <mat-select formControlName="overAppliedCalculationType" required>
+          <mat-option *ngFor="let overAppliedCalculationType of overAppliedCalculationTypeData" [value]="overAppliedCalculationType.id">
+            {{ overAppliedCalculationType.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
+        <mat-label>Over Amount</mat-label>
+        <input type="number" matInput formControlName="overAppliedNumber" required>
+      </mat-form-field>
+    </div>
+
+    <mat-form-field fxFlex="31%">
+      <mat-label>Installment day calculation from <i class="fas fa-question" matTooltip="Repayment schedule will start the installment dates from the submitted date or the disbursement date"></i></mat-label>
+      <mat-select formControlName="repaymentStartDateType" required>
+        <mat-option *ngFor="let repaymentStartDateType of repaymentStartDateTypeOptions" [value]="repaymentStartDateType.id">
+          {{ repaymentStartDateType.value | translate }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="31%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
-      <mat-label>Over Amount</mat-label>
-      <input type="number" matInput formControlName="overAppliedNumber" required>
-    </mat-form-field>
-
     <h4 fxFlex="98%" class="mat-h4">Number of repayments <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum number of repayments allowed for the loan product."></i></h4>
 
     <mat-form-field fxFlex="31%">
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.ts
index dc1f64ec5..92af97af0 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.ts
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.ts
@@ -26,6 +26,7 @@ export class LoanProductTermsStepComponent implements OnInit {
   interestRateFrequencyTypeData: any;
   overAppliedCalculationTypeData: any;
   repaymentFrequencyTypeData: any;
+  repaymentStartDateTypeOptions: any;
 
   displayedColumns: string[] = ['valueConditionType', 'borrowerCycleNumber', 'minValue', 'defaultValue', 'maxValue', 'actions'];
 
@@ -40,6 +41,7 @@ export class LoanProductTermsStepComponent implements OnInit {
     this.floatingRateData = this.loanProductsTemplate.floatingRateOptions;
     this.interestRateFrequencyTypeData = this.loanProductsTemplate.interestRateFrequencyTypeOptions;
     this.repaymentFrequencyTypeData = this.loanProductsTemplate.repaymentFrequencyTypeOptions;
+    this.repaymentStartDateTypeOptions = this.loanProductsTemplate.repaymentStartDateTypeOptions;
     this.overAppliedCalculationTypeData = [{id: 'percentage', value: 'Percentage'}, {id: 'flat', value: 'Fixed Amount'}];
 
     this.loanProductTermsForm.patchValue({
@@ -64,7 +66,8 @@ export class LoanProductTermsStepComponent implements OnInit {
       'useBorrowerCycle': this.loanProductsTemplate.useBorrowerCycle,
       'repaymentEvery': this.loanProductsTemplate.repaymentEvery,
       'repaymentFrequencyType': this.loanProductsTemplate.repaymentFrequencyType.id,
-      'minimumDaysBetweenDisbursalAndFirstRepayment': this.loanProductsTemplate.minimumDaysBetweenDisbursalAndFirstRepayment
+      'minimumDaysBetweenDisbursalAndFirstRepayment': this.loanProductsTemplate.minimumDaysBetweenDisbursalAndFirstRepayment,
+      'repaymentStartDateType': this.loanProductsTemplate.repaymentStartDateType.id || 1
     });
 
     if (this.loanProductsTemplate.allowApprovedDisbursedAmountsOverApplied) {
@@ -99,7 +102,8 @@ export class LoanProductTermsStepComponent implements OnInit {
       'interestRateFrequencyType': ['', Validators.required],
       'repaymentEvery': ['', Validators.required],
       'repaymentFrequencyType': ['', Validators.required],
-      'minimumDaysBetweenDisbursalAndFirstRepayment': ['']
+      'minimumDaysBetweenDisbursalAndFirstRepayment': [''],
+      'repaymentStartDateType': [1]
     });
   }
 
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
index b02b09ddb..69c1a94ce 100644
--- a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
@@ -94,6 +94,11 @@
       loanProduct.currencyCode }}</span>
   </div>
 
+  <div fxFlexFill>
+    <span fxFlex="40%">Installment day calculation from:</span>
+    <span fxFlex="60%">{{ loanProduct.repaymentStartDateType.value }}</span>
+  </div>
+
   <div fxFlexFill>
     <span fxFlex="40%">Number of Repayments:</span>
     <span fxFlex="60%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ?
diff --git a/src/app/savings/common-resolvers/transaction-datatable.resolver.ts b/src/app/savings/common-resolvers/transaction-datatable.resolver.ts
index a4b30a777..deb0aae3a 100644
--- a/src/app/savings/common-resolvers/transaction-datatable.resolver.ts
+++ b/src/app/savings/common-resolvers/transaction-datatable.resolver.ts
@@ -2,8 +2,8 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 
-// rxjs Imports 
-import { Observable, of } from 'rxjs';
+// rxjs Imports
+import { Observable } from 'rxjs';
 
 // Custom Service
 import { SavingsService } from '../savings.service';
@@ -11,8 +11,8 @@ import { SavingsService } from '../savings.service';
 @Injectable()
 export class TransactionDatatableResolver implements Resolve<Object> {
   /**
-   * 
-   * @param {SavingsService} savingsService 
+   *
+   * @param {SavingsService} savingsService
    */
   constructor(private savingsService: SavingsService) { }
   /**
@@ -25,4 +25,4 @@ export class TransactionDatatableResolver implements Resolve<Object> {
     const datatableName = route.paramMap.get('datatableName');
     return this.savingsService.getSavingsTransactionDatatable(accountId, datatableName);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/savings/common-resolvers/transaction-datatables.resolver.ts b/src/app/savings/common-resolvers/transaction-datatables.resolver.ts
index 6d818696b..0a6183ec5 100644
--- a/src/app/savings/common-resolvers/transaction-datatables.resolver.ts
+++ b/src/app/savings/common-resolvers/transaction-datatables.resolver.ts
@@ -2,8 +2,8 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 
-// rxjs Imports 
-import { Observable, of } from 'rxjs';
+// rxjs Imports
+import { Observable } from 'rxjs';
 
 // Custom Service
 import { SavingsService } from '../savings.service';
@@ -12,16 +12,16 @@ import { SavingsService } from '../savings.service';
 export class TransactionDatatablesResolver implements Resolve<Object> {
 
   /**
-   * 
+   *
    * @param savingsService Savings Service
    */
   constructor(private savingsService: SavingsService) { }
   /**
-   * 
-   * @param route 
+   *
+   * @param route
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
     return this.savingsService.getSavingsTransactionDatatables();
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts
index c2043227b..78c9a421f 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts
@@ -21,5 +21,4 @@ export class DatatableTransactionTabComponent {
       this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts
index 5e15e46cc..d4414b057 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts
@@ -31,7 +31,7 @@ export class ViewTransactionComponent {
   entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
-  isActive:false;
+  isActive: false;
 
   /**
    * Retrieves the Transaction data from `resolve`.
@@ -48,7 +48,7 @@ export class ViewTransactionComponent {
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
-            this.route.data.subscribe((data: { savingsAccountTransaction: any,transactionDatatables:any}) => {
+            this.route.data.subscribe((data: { savingsAccountTransaction: any, transactionDatatables: any}) => {
                   this.accountId = this.route.snapshot.params['savingAccountId'];
                   this.transactionData = data.savingsAccountTransaction;
                   this.entityDatatable = data.transactionDatatables;
diff --git a/src/app/savings/savings.service.ts b/src/app/savings/savings.service.ts
index eec8bc4fe..6411f8884 100644
--- a/src/app/savings/savings.service.ts
+++ b/src/app/savings/savings.service.ts
@@ -124,7 +124,7 @@ export class SavingsService {
     const httpParams = new HttpParams().set('genericResultSet', 'true');
     return this.http.get(`/datatables/${datatableName}/${transactionId}`, { params: httpParams });
   }
-  
+
   /**
    * @param accountId account Id of savings account to get add datatable entry for.
    * @param datatableName Data Table name.
diff --git a/src/assets/styles/_colours.scss b/src/assets/styles/_colours.scss
index a839a5984..6ed6d7f9c 100644
--- a/src/assets/styles/_colours.scss
+++ b/src/assets/styles/_colours.scss
@@ -70,6 +70,7 @@ $status-pending: #ffa500;
 $status-approved: #0f36e4;
 $status-chargeoff: #f39c12;
 $status-overpaid: #800080;
+$status-downpayment: #16a085;
 $status-active-overdue: #ff0000;
 $status-matured: #ff4000;
 $state-done: #00ce00;