diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
index 6ad87e4a78..97431dbeaf 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
@@ -4,8 +4,11 @@
 
     <mat-form-field fxFlex="72%">
       <mat-label>{{"labels.inputs.Product Name" | translate}}</mat-label>
-      <mat-select formControlName="productId" matTooltip="{{ 'tooltips.Name of the loan product' | translate}}" required>
-        <mat-option *ngFor="let product of productData" [value]="product.id">
+      <mat-select required matTooltip="{{ 'tooltips.Name of the loan product' | translate}}" formControlName="productId">
+        <mat-option>
+          <ngx-mat-select-search [formControl]="filterFormCtrl"></ngx-mat-select-search>
+        </mat-option>
+        <mat-option *ngFor="let product of productData | async" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
index 7b9f1712a2..18db045173 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
@@ -1,13 +1,14 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { SettingsService } from 'app/settings/settings.service';
-import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Custom Services */
 import { LoansService } from '../../loans.service';
 import { Commons } from 'app/core/utils/commons';
+import { takeUntil } from 'rxjs/operators';
+import { ReplaySubject, Subject } from 'rxjs';
 
 /**
  * Loans Account Details Step
@@ -17,7 +18,7 @@ import { Commons } from 'app/core/utils/commons';
   templateUrl: './loans-account-details-step.component.html',
   styleUrls: ['./loans-account-details-step.component.scss']
 })
-export class LoansAccountDetailsStepComponent implements OnInit {
+export class LoansAccountDetailsStepComponent implements OnInit, OnDestroy {
 
   /** Loans Account Template */
   @Input() loansAccountTemplate: any;
@@ -27,7 +28,7 @@ export class LoansAccountDetailsStepComponent implements OnInit {
   /** Maximum date allowed. */
   maxDate = new Date(2100, 0, 1);
   /** Product Data */
-  productData: any;
+  productList: any;
   /** Loan Officer Data */
   loanOfficerOptions: any;
   /** Loan Purpose Options */
@@ -44,6 +45,12 @@ export class LoansAccountDetailsStepComponent implements OnInit {
   loanId: any = null;
 
   loanProductSelected = false;
+  /** Currency data. */
+  protected productData: ReplaySubject<string[]> = new ReplaySubject<string[]>(1);
+  /** control for the filter select */
+  protected filterFormCtrl: UntypedFormControl = new UntypedFormControl('');
+  /** Subject that emits when the component has been destroyed. */
+  protected _onDestroy = new Subject<void>();
 
   /** Loans Account Template with product data  */
   @Output() loansAccountProductTemplate = new EventEmitter();
@@ -66,7 +73,7 @@ export class LoansAccountDetailsStepComponent implements OnInit {
     this.maxDate = this.settingsService.maxFutureDate;
     this.buildDependencies();
     if (this.loansAccountTemplate) {
-      this.productData = this.loansAccountTemplate.productOptions.sort(this.commons.dynamicSort('name'));
+      this.productList = this.loansAccountTemplate.productOptions.sort(this.commons.dynamicSort('name'));
       if (this.loansAccountTemplate.loanProductId) {
         this.loansAccountDetailsForm.patchValue({
           'productId': this.loansAccountTemplate.loanProductId,
@@ -79,6 +86,31 @@ export class LoansAccountDetailsStepComponent implements OnInit {
         });
       }
     }
+    this.filterFormCtrl.valueChanges
+    .pipe(takeUntil(this._onDestroy))
+    .subscribe(() => {
+      this.searchItem();
+    });
+    this.productData.next(this.productList.slice());
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
+
+  searchItem(): void {
+    if (this.productList) {
+      const search: string = this.filterFormCtrl.value.toLowerCase();
+
+      if (!search) {
+          this.productData.next(this.productList.slice());
+      } else {
+        this.productData.next(this.productList.filter((option: any) => {
+          return option['name'].toLowerCase().indexOf(search) >= 0;
+        }));
+      }
+    }
   }
 
   /**
diff --git a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
index b2cd5e5c2b..76a122c01b 100644
--- a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
@@ -72,6 +72,11 @@ <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate}}</h3>
       {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
   </div>
 
+  <div fxFlexFill *ngIf="productEnableDownPayment">
+    <span fxFlex="40%">{{ 'labels.inputs.Enable Down Payments' | translate}}:</span>
+    <span  fxFlex="60%">{{ loansAccount.enableDownPayment | yesNo }}</span>
+  </div>
+
   <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
     <span fxFlex="40%">{{"labels.inputs.First repayment on" | translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
diff --git a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.ts
index bc3d36f7ba..318df8e342 100644
--- a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.ts
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 
 /**
  * Create Loans Account Preview Step
@@ -9,7 +9,7 @@ import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angu
   templateUrl: './loans-account-preview-step.component.html',
   styleUrls: ['./loans-account-preview-step.component.scss']
 })
-export class LoansAccountPreviewStepComponent implements OnInit {
+export class LoansAccountPreviewStepComponent implements OnInit, OnChanges {
 
   /** Loans Account Template */
   @Input() loansAccountTemplate: any = [];
@@ -25,8 +25,14 @@ export class LoansAccountPreviewStepComponent implements OnInit {
   /** Overdue Charges Displayed Columns */
   overdueChargesDisplayedColumns: string[] = ['name', 'type', 'amount', 'collectedon'];
 
+  productEnableDownPayment = false;
+
   constructor() { }
 
   ngOnInit() { }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    this.productEnableDownPayment = this.loansAccountProductTemplate.product.enableDownPayment;
+  }
+
 }
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
index a877d52817..615376654e 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
@@ -2,13 +2,10 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Principal" | translate}} {{currencyDisplaySymbol}}</mat-label>
-      <input type="number" matInput formControlName="principalAmount">
-      <mat-error *ngIf="loansAccountTermsForm.controls.principalAmount.hasError('required')">
-        {{"labels.inputs.Principal" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mifosx-input-amount fxFlex="48%"  *ngIf="currency" [currency]="currency" [isRequired]="true"
+      [inputFormControl]="loansAccountTermsForm.controls.principalAmount"
+      [inputLabel]="'Principal'">
+    </mifosx-input-amount>
 
     <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate}} <i class="fas fa-question" matTooltip="The loan term parameter in loan accounts
       is the default-calculated field based on the number of repayments and repaid every value entered by the user"></i></h4>
@@ -106,6 +103,11 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       </mat-select>
     </mat-form-field>
 
+    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="Leave this checkbox checked if the loan has Down Payment, A Down Payment is
+    a sum a buyer pays upfront when purchasing a good. It represents a percentage of the total purchase price, and the balance is usually financed" class="margin-b" *ngIf="productEnableDownPayment">
+      {{'labels.inputs.Enable Down Payment' | translate}}
+    </mat-checkbox>
+
     <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | translate}}</h4>
 
     <ng-container *ngIf="!loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
index f7ce4594b2..7ddbaf2572 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
@@ -12,6 +12,7 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { Currency } from 'app/shared/models/general.model';
 import { CodeName, OptionData } from 'app/shared/models/option-data.model';
 
 /**
@@ -63,7 +64,6 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   clientActiveLoanData: any;
   /** Multi Disbursement Data */
   disbursementDataSource: {}[] = [];
-  currencyDisplaySymbol = '$';
   /** Loan repayment strategies */
   transactionProcessingStrategyOptions: any = [];
   repaymentStrategyDisabled = false;
@@ -85,11 +85,12 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   pristine = true;
 
   loanId: any = null;
-
   loanScheduleType: OptionData | null = null;
   loanProduct: LoanProduct | null = null;
-
   interestRateFrequencyTypeData: any[] = [];
+  currency: Currency;
+
+  productEnableDownPayment = false;
 
   /**
    * Create Loans Account Terms Form
@@ -108,19 +109,19 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
    */
   ngOnChanges() {
     if (this.loansAccountProductTemplate) {
+      this.currency = this.loansAccountProductTemplate.currency;
+
       this.loansAccountTermsData = this.loansAccountProductTemplate;
-      this.currencyDisplaySymbol = this.loansAccountTermsData.currency.displaySymbol;
       if (this.loanId != null && this.loansAccountTemplate.accountNo) {
         this.loansAccountTermsData = this.loansAccountTemplate;
       }
+      this.productEnableDownPayment = this.loansAccountTermsData.product.enableDownPayment;
 
       if (this.loansAccountTermsData.product) {
         this.loanProduct = this.loansAccountTermsData.product;
       }
 
       this.interestRateFrequencyTypeData = this.loansAccountTermsData.interestRateFrequencyTypeOptions;
-      console.log(this.loansAccountTermsData);
-      console.log(this.loanProduct);
 
       this.loansAccountTermsForm.patchValue({
         'principalAmount': this.loansAccountTermsData.principal,
@@ -167,6 +168,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         this.loansAccountTermsForm.addControl('enableInstallmentLevelDelinquency', new UntypedFormControl(this.loansAccountTermsData.enableInstallmentLevelDelinquency || this.loanProduct.enableInstallmentLevelDelinquency));
       }
       this.collateralDataSource = this.loansAccountTermsData.collateral || [];
+      if (this.productEnableDownPayment) {
+        const enableDownPayment = (this.loansAccountTermsData['enableDownPayment'] === false) ? false : true;
+        this.loansAccountTermsForm.addControl('enableDownPayment', new UntypedFormControl(enableDownPayment));
+      }
 
       const allowAttributeOverrides = this.loansAccountTermsData.product.allowAttributeOverrides;
       if (!allowAttributeOverrides.repaymentEvery) {
@@ -318,7 +323,7 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
 
   hasFixedLength(): boolean {
     if (this.loansAccountTermsData) {
-      return this.loansAccountTermsData.product.fixedLength ? true : false;
+      return this.loansAccountTermsData.product?.fixedLength ? true : false;
     }
     return false;
   }
@@ -529,6 +534,14 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
     return true;
   }
 
+  isDownPaymentEnabled(): boolean {
+    console.log(this.loanProduct);
+    if (!this.loanProduct || !this.loanProduct.delinquencyBucket) {
+      return false;
+    }
+    return true;
+  }
+
   /**
    * Returns loans account terms form value.
    */
diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index 9ca80447d5..d21e3dd94d 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -302,8 +302,7 @@ const routes: Routes = [
         component: LoanAccountActionsComponent,
         data: { title: 'Loan Account Actions', breadcrumb: 'action', routeParamBreadcrumb: 'action' },
         resolve: {
-          actionButtonData: LoanActionButtonResolver,
-          loanDetailsData: LoanDetailsResolver
+          actionButtonData: LoanActionButtonResolver
         }
       },
       {
diff --git a/src/app/loans/loans-view/account-details/account-details.component.html b/src/app/loans/loans-view/account-details/account-details.component.html
index 8e8a4e385f..6f0931bbb5 100644
--- a/src/app/loans/loans-view/account-details/account-details.component.html
+++ b/src/app/loans/loans-view/account-details/account-details.component.html
@@ -47,6 +47,11 @@ <h3> {{"labels.heading.Loan Details" | translate}} </h3>
             <span fxFlex="50%"> {{"labels.text." + loanDetails.interestType.value | translate}} </span>
         </div>
 
+        <div fxFlexFill>
+            <span fxFlex="50%">{{ 'labels.inputs.Enable Down Payments' | translate}}:</span>
+            <span fxFlex="50%">{{ loanDetails.enableDownPayment | yesNo }}</span>
+        </div>
+
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Grace: On Principal Payment" | translate}}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnPrincipalPayment}} </span>
diff --git a/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html b/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html
index 0fd24608d1..c013905202 100644
--- a/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html
@@ -27,10 +27,10 @@
             <mat-datepicker #disbursementDatePicker></mat-datepicker>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Approved Amount" | translate}}</mat-label>
-            <input matInput type="number" formControlName="approvedLoanAmount">
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="approveLoanForm.controls.approvedLoanAmount"
+            [inputLabel]="'Approved Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
diff --git a/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.ts b/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.ts
index 8ace1b381e..6c0bd9495e 100644
--- a/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.ts
@@ -7,6 +7,7 @@ import { Dates } from 'app/core/utils/dates';
 /** Custom Services. */
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Approve Loan component.
@@ -28,6 +29,7 @@ export class ApproveLoanComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Loan Id */
   loanId: any;
+  currency: Currency;
 
   /**
    * Retrieve data from `Resolver`.
@@ -46,6 +48,7 @@ export class ApproveLoanComponent implements OnInit {
     private settingsService: SettingsService) {
     this.route.data.subscribe((data: { actionButtonData: any }) => {
       this.loanData = data.actionButtonData;
+      this.currency = data.actionButtonData.currency;
     });
     this.loanId = this.route.snapshot.params['loanId'];
   }
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
index cd1e3ab487..7a0100d6b9 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
@@ -89,9 +89,8 @@ export class LoanAccountActionsComponent {
    * @param route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-      this.route.data.subscribe(( data: { actionButtonData: any, loanDetailsData: any }) => {
+      this.route.data.subscribe(( data: { actionButtonData: any }) => {
         this.actionButtonData = data.actionButtonData;
-        this.actionButtonData.currency = data.loanDetailsData.currency;
       });
 
     this.route.params.subscribe(params => {
diff --git a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss
index 27fa4bbe7e..0dc256e144 100644
--- a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss
+++ b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss
@@ -20,3 +20,7 @@ table {
 .additional {
   color: $status-approved;
 }
+
+.downpayment {
+  color: $status-downpayment;
+}
\ No newline at end of file
diff --git a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts
index 98b7adc732..12fab2aed7 100644
--- a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts
+++ b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts
@@ -49,6 +49,8 @@ export class RepaymentScheduleTabComponent implements OnInit {
   installmentStyle(installment: any): string {
     if (installment.isAdditional) {
       return 'additional';
+    } else if (installment.downPaymentPeriod) {
+      return 'downpayment';
     }
     return '';
   }