diff --git a/src/app/loans/create-loans-account/create-loans-account.component.html b/src/app/loans/create-loans-account/create-loans-account.component.html
index 1ac7fadd5..41a2112aa 100644
--- a/src/app/loans/create-loans-account/create-loans-account.component.html
+++ b/src/app/loans/create-loans-account/create-loans-account.component.html
@@ -36,7 +36,8 @@
       <ng-template matStepLabel>TERMS</ng-template>
 
       <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-      [loansAccountTemplate] = "loansAccountTemplate" [multiDisburseLoan] = "multiDisburseLoan">
+      [loansAccountTemplate] = "loansAccountTemplate" [multiDisburseLoan] = "multiDisburseLoan" [collateralOptions]="collateralOptions"
+      [loansAccountFormValid]="loansAccountFormValid" [loanPrincipal]="loanPrincipal">
       </mifosx-loans-account-terms-step>
 
     </mat-step>
@@ -46,8 +47,8 @@
       <ng-template matStepLabel>CHARGES</ng-template>
 
       <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-        [loansAccountTemplate]="loansAccountTemplate" [collateralOptions]="collateralOptions"
-        [loansAccountFormValid]="loansAccountFormValid" [loanPrincipal]="loanPrincipal">
+        [loansAccountTemplate]="loansAccountTemplate"
+        [loansAccountFormValid]="loansAccountFormValid">
       </mifosx-loans-account-charges-step>
 
     </mat-step>
diff --git a/src/app/loans/create-loans-account/create-loans-account.component.ts b/src/app/loans/create-loans-account/create-loans-account.component.ts
index e8ce57038..f67418998 100644
--- a/src/app/loans/create-loans-account/create-loans-account.component.ts
+++ b/src/app/loans/create-loans-account/create-loans-account.component.ts
@@ -110,6 +110,7 @@ export class CreateLoansAccountComponent implements OnInit {
       ...this.loansAccountDetailsStep.loansAccountDetails,
       ...this.loansAccountTermsStep.loansAccountTerms,
       ...this.loansAccountChargesStep.loansAccountCharges,
+      ...this.loansAccountTermsStep.loanCollateral
     };
   }
 
diff --git a/src/app/loans/edit-loans-account/edit-loans-account.component.html b/src/app/loans/edit-loans-account/edit-loans-account.component.html
index 22e28307f..a9e48d15f 100644
--- a/src/app/loans/edit-loans-account/edit-loans-account.component.html
+++ b/src/app/loans/edit-loans-account/edit-loans-account.component.html
@@ -36,7 +36,7 @@
       <ng-template matStepLabel>TERMS</ng-template>
 
       <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-      [loansAccountTemplate]="loansAccountAndTemplate">
+      [loansAccountTemplate]="loansAccountAndTemplate" [collateralOptions]="collateralOptions">
       </mifosx-loans-account-terms-step>
 
     </mat-step>
@@ -46,7 +46,7 @@
       <ng-template matStepLabel>CHARGES</ng-template>
 
       <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-        [loansAccountTemplate]="loansAccountAndTemplate" [collateralOptions]="collateralOptions"
+        [loansAccountTemplate]="loansAccountAndTemplate"
         [loansAccountFormValid]="loansAccountFormValidAndNotPristine">
       </mifosx-loans-account-charges-step>
 
diff --git a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
index ed18669b2..025b4dbeb 100644
--- a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
@@ -116,57 +116,6 @@
     <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
   </table>
 
-  <mat-divider fxFlex="98%"></mat-divider>
-
-  <div fxFlex="50%">
-    <div fxLayout="column" fxFlex="50%" class="tableName">
-      <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
-    </div>
-
-    <div fxLayout="column" fxFlex="50%">
-      <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button color="primary" (click)="addCollateral()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
-
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef> Quantity </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="totalValue">
-      <th mat-header-cell *matHeaderCellDef> Total Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
-    </ng-container>
-    
-    <ng-container matColumnDef="totalCollateralValue">
-      <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let ele; let collateralIndex = index">
-        <button mat-icon-button color="warn" (click)="deleteCollateral(collateralIndex)">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></tr>
-  </table>
-
 </div>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
diff --git a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts
index c0553a86c..3e8524e8e 100644
--- a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts
@@ -31,10 +31,6 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   @Input() loansAccountTemplate: any;
   // @Input() loansAccountFormValid: LoansAccountFormValid
   @Input() loansAccountFormValid: boolean;
-  // @Input collateralOptions: Collateral Options
-  @Input() collateralOptions: any;
-  // @Input loanPrincipal: Loan Principle
-  @Input() loanPrincipal: any;
 
   /** Charges Data */
   chargeData: any;
@@ -48,8 +44,6 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'action'];
   /** Columns to be displayed in overdue charges table. */
   overdueChargesDisplayedColumns: string[] = ['name', 'type', 'amount', 'collectedon'];
-  /** Columns to be displayed in collateral table. */
-  loanCollateralDisplayedColumns: string[] = ['type', 'value', 'totalValue', 'totalCollateralValue', 'action'];
   /** Component is pristine if there has been no changes by user interaction */
   pristine = true;
   /** Check if value of collateral added  is more than principal amount */
@@ -213,56 +207,6 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
     });
   }
 
-  /**
-   * Add a Collateral to the loan
-   */
-  addCollateral() {
-    const addCollateralDialogRef = this.dialog.open(LoansAccountAddCollateralDialogComponent, {
-      data: { collateralOptions: this.collateralOptions }
-    });
-    console.log(this.collateralOptions);
-    addCollateralDialogRef.afterClosed().subscribe((response: any) => {
-      console.log(this.loanPrincipal);
-      if (response.data) {
-        const collateralData = {
-          type: response.data.value.collateral,
-          value: response.data.value.quantity,
-        };
-
-        this.totalCollateralValue += collateralData.type.pctToBase * collateralData.type.basePrice * collateralData.value / 100;
-        this.collateralDataSource = this.collateralDataSource.concat(collateralData);
-        this.collateralOptions = this.collateralOptions.filter((user: any) => user.collateralId !== response.data.value.collateral.collateralId);
-        if (this.loanPrincipal < this.totalCollateralValue) {
-          this.isCollateralSufficient = true;
-        } else {
-          this.isCollateralSufficient = false;
-        }
-      }
-    });
-  }
-  /**
-   * Delete a added collateral from loan
-   * @param id ID od the collateral to be deleted
-   */
-  deleteCollateral(id: any) {
-    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `collateral` }
-    });
-    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        const removed: any = this.collateralDataSource.splice(id, 1);
-        this.collateralOptions = this.collateralOptions.concat(removed[0].type);
-        this.totalCollateralValue -= removed[0].type.pctToBase * removed[0].type.basePrice * removed[0].value / 100;
-        this.collateralDataSource = this.collateralDataSource.concat([]);
-        this.pristine = false;
-        if (this.loanPrincipal < this.totalCollateralValue) {
-          this.isCollateralSufficient = true;
-        } else {
-          this.isCollateralSufficient = false;
-        }
-      }
-    });
-  }
 
   /**
    * Returns Loans Account Charges and Collateral Form
@@ -270,7 +214,6 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   get loansAccountCharges() {
     return {
       charges: this.chargesDataSource,
-      collateral: this.collateralDataSource
     };
   }
 
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 d0b07a085..2d201d198 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
@@ -393,6 +393,56 @@
       <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
     </div>
 
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <div fxFlex="50%">
+      <div fxLayout="column" fxFlex="50%" class="tableName">
+        <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
+      </div>
+  
+      <div fxLayout="column" fxFlex="50%">
+        <div fxLayout="row" fxLayoutAlign="flex-end">
+          <button mat-raised-button color="primary" (click)="addCollateral()">
+            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+          </button>
+        </div>
+      </div>
+    </div>
+    <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
+
+      <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="value">
+        <th mat-header-cell *matHeaderCellDef> Quantity </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="totalValue">
+        <th mat-header-cell *matHeaderCellDef> Total Value </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
+      </ng-container>
+      
+      <ng-container matColumnDef="totalCollateralValue">
+        <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
+        <td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="action">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let ele; let collateralIndex = index">
+          <button mat-icon-button color="warn" (click)="deleteCollateral(collateralIndex)">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></tr>
+    </table>
+
     </div>
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious>
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 50d06c981..73eb85201 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
@@ -1,7 +1,10 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { LoansAccountAddCollateralDialogComponent } from 'app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 
 /**
  * Create Loans Account Terms Step
@@ -19,6 +22,12 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   @Input() loansAccountTemplate: any;
   /** Is Multi Disburse Loan  */
   @Input() multiDisburseLoan: any;
+  // @Input() loansAccountFormValid: LoansAccountFormValid
+  @Input() loansAccountFormValid: boolean;
+  // @Input collateralOptions: Collateral Options
+  @Input() collateralOptions: any;
+  // @Input loanPrincipal: Loan Principle
+  @Input() loanPrincipal: any;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -43,13 +52,25 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   /** Client Active Loan Data */
   clientActiveLoanData: any;
 
+  /** Check if value of collateral added  is more than principal amount */
+  isCollateralSufficient = false;
+  /** Total value of all collateral added to a loan */
+  totalCollateralValue: any = 0;
+  /** Collateral Data Source */
+  collateralDataSource: {}[] = [];
+  /** Columns to be displayed in collateral table. */
+  loanCollateralDisplayedColumns: string[] = ['type', 'value', 'totalValue', 'totalCollateralValue', 'action'];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+
   /**
    * Create Loans Account Terms Form
    * @param formBuilder FormBuilder
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
-      private settingsService: SettingsService) {
+      private settingsService: SettingsService,
+      public dialog: MatDialog) {
     this.createloansAccountTermsForm();
   }
   /**
@@ -189,6 +210,56 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
     disbursementDataFormArray.removeAt(index);
   }
 
+  /**
+   * Add a Collateral to the loan
+   */
+    addCollateral() {
+    const addCollateralDialogRef = this.dialog.open(LoansAccountAddCollateralDialogComponent, {
+      data: { collateralOptions: this.collateralOptions }
+    });
+    console.log(this.collateralOptions);
+    addCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      console.log(this.loanPrincipal);
+      if (response.data) {
+        const collateralData = {
+          type: response.data.value.collateral,
+          value: response.data.value.quantity,
+        };
+        this.totalCollateralValue += collateralData.type.pctToBase * collateralData.type.basePrice * collateralData.value / 100;
+        this.collateralDataSource = this.collateralDataSource.concat(collateralData);
+        this.collateralOptions = this.collateralOptions.filter((user: any) => user.collateralId !== response.data.value.collateral.collateralId);
+        if (this.loanPrincipal < this.totalCollateralValue) {
+          this.isCollateralSufficient = true;
+        } else {
+          this.isCollateralSufficient = false;
+        }
+      }
+    });
+  }
+  /**
+   * Delete a added collateral from loan
+   * @param id ID od the collateral to be deleted
+   */
+  deleteCollateral(id: any) {
+    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `collateral` }
+    });
+    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        const removed: any = this.collateralDataSource.splice(id, 1);
+        this.collateralOptions = this.collateralOptions.concat(removed[0].type);
+        this.totalCollateralValue -= removed[0].type.pctToBase * removed[0].type.basePrice * removed[0].value / 100;
+        this.collateralDataSource = this.collateralDataSource.concat([]);
+        this.pristine = false;
+        if (this.loanPrincipal < this.totalCollateralValue) {
+          this.isCollateralSufficient = true;
+        } else {
+          this.isCollateralSufficient = false;
+        }
+      }
+    });
+  }
+
   /**
    * Sets all select dropdown options.
    */
@@ -210,4 +281,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
     return this.loansAccountTermsForm.value;
   }
 
+  get loanCollateral() {
+    return {
+      collateral: this.collateralDataSource
+    };
+  }
+
 }