From d92f6c1c5e28d431594f536430c312d470d1dfd0 Mon Sep 17 00:00:00 2001
From: Francisco Cuandon <113402833+fuch-fcuandonh@users.noreply.github.com>
Date: Wed, 18 Oct 2023 10:50:03 -0600
Subject: [PATCH] feat:Unificaction of radhathakare's PR (#1879)

* feat:Clients Translate Module

* feat: Collections Translate Module

* feat:Loan Translate Module

* feat:Search Translate Module

* feat English Json File

---------

Co-authored-by: radhathakare <radhathakare322@gmail.com>
---
 .../client-address-step.component.html        |  28 +--
 .../client-datatable-step.component.html      |   4 +-
 ...client-family-member-dialog.component.html |  40 ++---
 .../client-family-members-step.component.html |  30 ++--
 .../client-general-step.component.html        |  72 ++++----
 .../client-preview-step.component.html        |  94 +++++-----
 .../address-tab/address-tab.component.html    |  24 +--
 .../charges-overview.component.html           |  14 +-
 .../client-pay-charges.component.html         |  12 +-
 .../view-charge/view-charge.component.html    |  38 ++---
 .../accept-client-transfer.component.html     |   8 +-
 .../activate-client.component.html            |   8 +-
 .../add-client-charge.component.html          |  26 +--
 .../add-client-collateral.component.html      |  26 +--
 .../client-assign-staff.component.html        |   8 +-
 .../client-screen-reports.component.html      |  10 +-
 .../close-client/close-client.component.html  |  12 +-
 .../create-self-service-user.component.html   |  38 ++---
 .../reactivate-client.component.html          |   8 +-
 .../reject-client-transfer.component.html     |   8 +-
 .../reject-client.component.html              |  12 +-
 .../take-survey/take-survey.component.html    |   8 +-
 .../transfer-client.component.html            |  14 +-
 .../undo-client-rejection.component.html      |   8 +-
 .../undo-client-transfer.component.html       |   8 +-
 ...date-client-savings-account.component.html |   8 +-
 .../view-survey/view-survey.component.html    |  10 +-
 .../withdraw-client.component.html            |  12 +-
 .../clients-view/clients-view.component.html  | 101 ++++++-----
 .../capture-image-dialog.component.html       |  10 +-
 .../delete-signature-dialog.component.html    |  12 +-
 .../edit-notes-dialog.component.html          |   6 +-
 .../unassign-staff-dialog.component.html      |   8 +-
 .../upload-document-dialog.component.html     |  12 +-
 .../upload-image-dialog.component.html        |   6 +-
 .../upload-signature-dialog.component.html    |   6 +-
 .../view-signature-dialog.component.html      |   8 +-
 .../add-family-member.component.html          |  39 +++--
 .../edit-family-member.component.html         |  37 ++--
 .../family-members-tab.component.html         |  27 ++-
 .../general-tab/general-tab.component.html    | 160 +++++++++---------
 .../identities-tab.component.html             |  18 +-
 src/app/clients/clients.component.html        |  18 +-
 .../create-client.component.html              |   8 +-
 .../edit-client/edit-client.component.html    |  56 +++---
 ...individual-collection-sheet.component.html |  54 +++---
 .../create-loans-account.component.html       |  10 +-
 ...count-add-collateral-dialog.component.html |  18 +-
 ...ew-guarantor-details-dialog.component.html |  18 +-
 .../edit-loans-account.component.html         |  10 +-
 .../create-glim-account.component.html        |   8 +-
 .../glim-charges-step.component.html          |  34 ++--
 .../glim-details-step.component.html          |  24 +--
 .../glim-preview-step.component.html          |  92 +++++-----
 .../glim-terms-step.component.html            |  38 ++---
 .../glim-account/glim-account.component.html  |  14 +-
 .../loans-account-charges-step.component.html |  34 ++--
 ...oans-account-datatable-step.component.html |   4 +-
 .../loans-account-details-step.component.html |  44 ++---
 .../loans-account-preview-step.component.html |  92 +++++-----
 ...loans-account-schedule-step.component.html |   8 +-
 .../loans-account-terms-step.component.html   | 148 ++++++++--------
 .../account-details.component.html            |  58 +++----
 .../charges-tab/charges-tab.component.html    |  37 ++--
 .../external-asset-owner-tab.component.html   |  99 +++++++++--
 .../floating-interest-rates.component.html    |   4 +-
 .../general-tab/general-tab.component.html    |  64 +++----
 .../add-collateral.component.html             |  14 +-
 .../add-loan-charge.component.html            |  20 +--
 .../adjust-loan-charge.component.html         |  26 +--
 .../approve-loan/approve-loan.component.html  |  18 +-
 .../asset-transfer-loan.component.html        |  18 +-
 .../assign-loan-officer.component.html        |  12 +-
 .../charge-off/charge-off.component.html      |  16 +-
 .../close-as-rescheduled.component.html       |  10 +-
 .../create-guarantor.component.html           |  48 +++---
 ...disburse-to-savings-account.component.html |  16 +-
 .../disburse/disburse.component.html          |  30 ++--
 .../edit-repayment-schedule.component.html    |  10 +-
 .../foreclosure/foreclosure.component.html    |  20 +--
 .../loan-credit-balance-refund.component.html |  16 +-
 .../loan-reschedule.component.html            |  36 ++--
 .../loan-screen-reports.component.html        |  12 +-
 .../loans-account-close.component.html        |  10 +-
 .../make-repayment.component.html             |  30 ++--
 .../prepay-loan/prepay-loan.component.html    |  30 ++--
 .../recovery-repayment.component.html         |  28 +--
 .../reject-loan/reject-loan.component.html    |  10 +-
 .../undo-approval.component.html              |   6 +-
 .../undo-disbursal.component.html             |   8 +-
 .../view-guarantors.component.html            |  46 ++---
 .../waive-interest.component.html             |  14 +-
 .../withdrawn-by-client.component.html        |  10 +-
 .../write-off-page.component.html             |  12 +-
 .../loan-collateral-tab.component.html        |  13 +-
 .../loan-delinquency-tags-tab.component.html  |   8 +-
 .../loan-tranche-details.component.html       |  26 +--
 .../loans-view/loans-view.component.html      |  60 +++----
 .../original-schedule-tab.component.html      |  22 +--
 .../overdue-charges-tab.component.html        |   8 +-
 .../repayment-schedule-tab.component.html     |  50 +++---
 .../reschedule-loan-tab.component.html        |  14 +-
 .../standing-instructions-tab.component.html  |  24 +--
 .../transactions-tab.component.html           |  40 ++---
 .../edit-transaction.component.html           |  28 +--
 .../export-transactions.component.html        |  12 +-
 .../view-reciept/view-reciept.component.html  |   2 +-
 .../view-transaction.component.html           |   6 +-
 .../view-charge/view-charge.component.html    |  36 ++--
 .../search-page/search-page.component.html    |  20 +--
 src/assets/translations/en-US.json            |   2 +-
 111 files changed, 1502 insertions(+), 1427 deletions(-)

diff --git a/src/app/clients/client-stepper/client-address-step/client-address-step.component.html b/src/app/clients/client-stepper/client-address-step/client-address-step.component.html
index d6dfc4f0b..16f21ad40 100644
--- a/src/app/clients/client-stepper/client-address-step/client-address-step.component.html
+++ b/src/app/clients/client-stepper/client-address-step/client-address-step.component.html
@@ -1,10 +1,10 @@
 <div class="mat-typography">
 
-  <h3>Address</h3>
+  <h3>{{"labels.heading.Address" |translate}}</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ "labels.buttons.Add" | translate}}
     </button>
   </div>
 
@@ -37,18 +37,18 @@
       </div>
 
       <p>
-        <span *ngIf="isFieldEnabled('street')">Street : {{address.street}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine1')">Address Line 1 : {{address.addressLine1}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine2')">Address Line 2 : {{address.addressLine2}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')">Address Line 3 : {{address.addressLine3}}<br /></span>
-        <span *ngIf="isFieldEnabled('townVillage')">Town / Village : {{address.townVillage}}<br /></span>
-        <span *ngIf="isFieldEnabled('city')">City : {{address.city}}<br /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')">State / Province :
+        <span *ngIf="isFieldEnabled('street')">{{ "labels.inputs.Street" |translate}} : {{address.street}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine1')">{{ "labels.inputs.Address Line" |translate}} 1 : {{address.addressLine1}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine2')">{{ "labels.inputs.Address Line" |translate}} 2 : {{address.addressLine2}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine3')">{{ "labels.inputs.Address Line" |translate}} 3 : {{address.addressLine3}}<br /></span>
+        <span *ngIf="isFieldEnabled('townVillage')">{{ "labels.inputs.Town / Village" |translate}} : {{address.townVillage}}<br /></span>
+        <span *ngIf="isFieldEnabled('city')">{{ "labels.inputs.City" |translate}} : {{address.city}}<br /></span>
+        <span *ngIf="isFieldEnabled('stateProvinceId')">{{ "labels.inputs.State / Province" |translate}} :
           {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('countryId')">Country :
+        <span *ngIf="isFieldEnabled('countryId')">{{ "labels.inputs.Country" |translate}} :
           {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('postalCode')">Postal Code : {{address.postalCode}}<br /></span>
-        <span *ngIf="isFieldEnabled('isActive')">Active Status : {{address.isActive}}<br /></span>
+        <span *ngIf="isFieldEnabled('postalCode')">{{ "labels.inputs.Postal Code" |translate}} : {{address.postalCode}}<br /></span>
+        <span *ngIf="isFieldEnabled('isActive')">{{ "labels.inputs.Active Status" |translate}} : {{address.isActive}}<br /></span>
       </p>
 
     </mat-expansion-panel>
@@ -58,10 +58,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{ "labels.buttons.Previous" | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{ "labels.buttons.Next" | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
index 2587444a1..b39aa9d34 100644
--- a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
+++ b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
@@ -40,10 +40,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{ "labels.buttons.Previous" | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{ "labels.buttons.Next" | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
index f93dc63db..779c55f3c 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
@@ -1,71 +1,71 @@
-<h1 mat-dialog-title>{{ data.context }} Family Member</h1>
+<h1 mat-dialog-title>{{ data.context }} {{"labels.heading.Family Member" |translate}}</h1>
 
 <form [formGroup]="familyMemberForm">
 
   <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>First Name</mat-label>
+      <mat-label>{{ "labels.inputs.First Name" |translate}}</mat-label>
       <input formControlName="firstName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
-        First Name is <strong>required</strong>
+        {{ "labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Middle Name</mat-label>
+      <mat-label>{{ "labels.inputs.Middle Name" |translate}}</mat-label>
       <input formControlName="middleName" matInput />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Last Name</mat-label>
+      <mat-label>{{ "labels.inputs.Last Name" |translate}}</mat-label>
       <input formControlName="lastName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
-        Last Name is <strong>required</strong>
+        {{ "labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Qualification</mat-label>
+      <mat-label>{{ "labels.inputs.Qualification" |translate}}</mat-label>
       <input formControlName="qualification" matInput />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Age</mat-label>
+      <mat-label>{{ "labels.inputs.Age" |translate}}</mat-label>
       <input type="number" formControlName="age" matInput [min]="0"/>
       <mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
-        Age is <strong>required and cannot be negative</strong>
+        {{ "labels.inputs.Age" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%">Is Dependent?</mat-checkbox>
+    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%">{{ "labels.inputs.Is Dependent" |translate}}?</mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Relationship</mat-label>
+      <mat-label>{{ "labels.inputs.Relationship" |translate}}</mat-label>
       <mat-select formControlName="relationshipId" required>
         <mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
           {{ relation.name  }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.controls.relationshipId.hasError('required')">
-        Relationship is <strong>required</strong>
+        {{ "labels.inputs.Relationship" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Gender</mat-label>
+      <mat-label>{{ "labels.inputs.Gender" |translate}}</mat-label>
       <mat-select formControlName="genderId" required>
         <mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
           {{ gender.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.controls.genderId.hasError('required')">
-        Gender is <strong>required</strong>
+        {{ "labels.inputs.Gender" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Profession</mat-label>
+      <mat-label>{{ "labels.inputs.Profession" |translate}}</mat-label>
       <mat-select formControlName="professionId">
         <mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
           {{ profession.name }}
@@ -74,7 +74,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Marital Status</mat-label>
+      <mat-label>{{ "labels.inputs.Marital Status" |translate}}</mat-label>
       <mat-select formControlName="maritalStatusId">
         <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions"
           [value]="maritalStatus.id">
@@ -85,20 +85,20 @@
 
 
     <mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
-      <mat-label>Date Of Birth</mat-label>
+      <mat-label>{{ "labels.inputs.Date Of Birth" |translate}}</mat-label>
       <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required>
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dueDatePicker></mat-datepicker>
       <mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
-        Date of birth is <strong>required</strong>
+        {{ "labels.inputs.Date of birth" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
   </div>
 
   <mat-dialog-actions align="center">
-    <button mat-raised-button mat-dialog-close>Cancel</button>
-    <button mat-raised-button color="primary" [disabled]="!familyMemberForm.valid" [mat-dialog-close]="{ member: familyMember }">Confirm</button>
+    <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" | translate}}</button>
+    <button mat-raised-button color="primary" [disabled]="!familyMemberForm.valid" [mat-dialog-close]="{ member: familyMember }">{{ "labels.buttons.Confirm" | translate}}</button>
   </mat-dialog-actions>
 
 </form>
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
index bb2d5ec1f..6a5fa0d73 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
@@ -1,10 +1,10 @@
 <div class="mat-typography">
 
-    <h3>Family Members</h3>
+    <h3>{{"labels.heading.Family Members" |translate}}</h3>
 
     <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
       <button mat-raised-button color="primary" (click)="addFamilyMember()">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ "labels.buttons.Add" | translate}}
       </button>
     </div>
 
@@ -36,17 +36,17 @@
         </div>
 
         <p>
-          First Name : {{ member.firstName }}<br />
-          Middle Name : {{ member.middleName }}<br />
-          Last Name : {{ member.lastName }}<br />
-          Qualification : {{ member.qualification }}<br />
-          Relationship : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
-          Age : {{ member.age }}<br />
-          Is Dependent : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          Marital Status : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
-          Gender : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
-          Profession : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          Date Of Birth : {{member.dateOfBirth  | dateFormat}}<br />
+          {{ "labels.inputs.First Name" |translate}} : {{ member.firstName }}<br />
+          {{ "labels.inputs.Middle Name" |translate}} : {{ member.middleName }}<br />
+          {{ "labels.inputs.Last Name" |translate}} : {{ member.lastName }}<br />
+          {{ "labels.inputs.Qualification" |translate}} : {{ member.qualification }}<br />
+          {{ "labels.inputs.Relationship" |translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Age" |translate}} : {{ member.age }}<br />
+          {{ "labels.inputs.Is Dependent" |translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+          {{ "labels.inputs.Marital Status" |translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Gender" |translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Profession" |translate}} : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Date Of Birth" |translate}} : {{member.dateOfBirth  | dateFormat}}<br />
         </p>
 
       </mat-expansion-panel>
@@ -56,10 +56,10 @@
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious>
         <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-        Previous
+        {{ "labels.buttons.Previous" | translate}}
       </button>
       <button mat-raised-button matStepperNext>
-        Next
+        {{ "labels.buttons.Next" | translate}}
         <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
       </button>
     </div>
diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
index 2d4bc5f88..ab44215c6 100644
--- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
+++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
@@ -3,19 +3,19 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Office</mat-label>
+      <mat-label>{{ "labels.inputs.Office" |translate}}</mat-label>
       <mat-select required formControlName="officeId">
         <mat-option *ngFor="let office of officeOptions" [value]="office.id">
           {{ office.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.officeId.hasError('required')">
-        Office is <strong>required</strong>
+        {{ "labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Legal Form</mat-label>
+      <mat-label>{{ "labels.inputs.Legal Form" |translate}}</mat-label>
       <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
           {{ legalForm.value }}
@@ -24,7 +24,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Staff</mat-label>
+      <mat-label>{{ "labels.inputs.Staff" |translate}}</mat-label>
       <mat-select formControlName="staffId">
         <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
           {{ staff.displayName }}
@@ -36,40 +36,40 @@
       <mat-label>{{ createClientForm.value.legalFormId === 1 ? 'Name' : 'Entity Name' }}</mat-label>
       <input matInput required formControlName="fullname">
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
-        Client name is <strong>required</strong>
+        {{ "labels.inputs.Client name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('pattern')">
-        Client name <strong>cannot</strong> begin with a special character or number
+        {{ "labels.inputs.Client name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('firstname')" fxFlex="48%">
-      <mat-label>First Name</mat-label>
+      <mat-label>{{ "labels.inputs.First Name" |translate}}</mat-label>
       <input matInput required formControlName="firstname">
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
-        Client first name is <strong>required</strong>
+        {{ "labels.inputs.Client first name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
-        Client first name <strong>cannot</strong> begin with a special character or number
+        {{ "labels.inputs.Client first name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('middlename')" fxFlex="48%">
-      <mat-label>Middle Name</mat-label>
+      <mat-label>{{ "labels.inputs.Middle Name" |translate}}</mat-label>
       <input matInput formControlName="middlename">
       <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
-        Client middle name <strong>cannot</strong> begin with a special character or number
+        {{ "labels.inputs.Client middle name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('lastname')" fxFlex="48%">
-      <mat-label>Last Name</mat-label>
+      <mat-label>{{ "labels.inputs.Last Name" |translate}}</mat-label>
       <input matInput required formControlName="lastname">
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
-        Client last name is <strong>required</strong>
+        {{ "labels.inputs.Client last name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
-        Client last name <strong>cannot</strong> begin with a special character or number
+        {{ "labels.inputs.Client last name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
       </mat-error>
     </mat-form-field>
 
@@ -81,7 +81,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>External Id</mat-label>
+      <mat-label>{{ "labels.inputs.External Id" |translate}}</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>
 
@@ -89,7 +89,7 @@
       *ngIf="createClientForm.contains('clientNonPersonDetails')">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Constitution</mat-label>
+        <mat-label>{{ "labels.inputs.Constitution" |translate}}</mat-label>
         <mat-select formControlName="constitutionId" required>
           <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
             {{ constitution.name }}
@@ -98,7 +98,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Main Business Line</mat-label>
+        <mat-label>{{ "labels.inputs.Main Business Line" |translate}}</mat-label>
         <mat-select formControlName="mainBusinessLineId">
           <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
             {{ business.name }}
@@ -107,26 +107,26 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
-        <mat-label>Incorporation Validity Till Date</mat-label>
+        <mat-label>{{ "labels.inputs.Incorporation Validity Till Date" |translate}}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
         <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Incorporation Number</mat-label>
+        <mat-label>{{ "labels.inputs.Incorporation Number" |translate}}</mat-label>
         <input matInput formControlName="incorpNumber">
       </mat-form-field>
 
       <mat-form-field fxFlex="98%">
-        <mat-label>Remarks</mat-label>
+        <mat-label>{{ "labels.inputs.Remarks" |translate}}</mat-label>
         <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
 
     </div>
 
     <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
-      <mat-label>Gender</mat-label>
+      <mat-label>{{ "labels.inputs.Gender" |translate}}</mat-label>
       <mat-select formControlName="genderId">
         <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
           {{ gender.name }}
@@ -135,24 +135,24 @@
     </mat-form-field>
 
     <mat-checkbox *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
-      Is staff?
+      {{ "labels.inputs.Is staff" |translate}}?
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Mobile No</mat-label>
+      <mat-label>{{ "labels.inputs.Mobile No" |translate}}</mat-label>
       <input matInput type="number" formControlName="mobileNo">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Email Address</mat-label>
+      <mat-label>{{ "labels.inputs.Email Address" |translate}}</mat-label>
       <input matInput formControlName="emailAddress">
       <mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
-        Email not valid
+        {{"error.Email not valid" |translate}}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Client Type</mat-label>
+      <mat-label>{{ "labels.inputs.Client Type" |translate}}</mat-label>
       <mat-select formControlName="clientTypeId">
         <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
           {{ clientType.name }}
@@ -161,7 +161,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Client Classification</mat-label>
+      <mat-label>{{ "labels.inputs.Client Classification" |translate}}</mat-label>
       <mat-select formControlName="clientClassificationId">
         <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
           {{ clientClassification.name }}
@@ -170,7 +170,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-      <mat-label>Submitted On</mat-label>
+      <mat-label>{{ "labels.inputs.Submitted On" |translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
@@ -179,33 +179,33 @@
     <br />
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="active" class="margin-v">
-      Active?
+      {{ "labels.inputs.Active" |translate}}?
     </mat-checkbox>
 
     <mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%" (click)="activatedOnDatePicker.open()">
-      <mat-label>Activation Date</mat-label>
+      <mat-label>{{ "labels.inputs.Activation Date" |translate}}</mat-label>
       <input matInput [min]="createClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
         formControlName="activationDate">
       <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #activatedOnDatePicker></mat-datepicker>
       <mat-error *ngIf="createClientForm.controls.activationDate.hasError('required')">
-        Activation Date is <strong>required</strong>
+        {{ "labels.inputs.Activation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="addSavings" class="margin-v">
-      Open Savings Account?
+      {{ "labels.inputs.Open Savings Account" |translate}}?
     </mat-checkbox>
 
     <mat-form-field *ngIf="createClientForm.contains('savingsProductId')" fxFlex="48%">
-      <mat-label>Savings Product</mat-label>
+      <mat-label>{{ "labels.inputs.Savings Product" |translate}}</mat-label>
       <mat-select required formControlName="savingsProductId">
         <mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.savingsProductId.hasError('required')">
-        Savings product is <strong>required</strong>
+        {{ "labels.inputs.Savings Product" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -214,10 +214,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{ "labels.buttons.Previous" | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{ "labels.buttons.Next" | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
index d6acccece..8d4b17306 100644
--- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
+++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
@@ -1,27 +1,27 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>General</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ "labels.heading.General" |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Name</span>
+    <span fxFlex="40%">{{ "labels.inputs.name" |translate}}</span>
     <span fxFlex="60%" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
     <span fxFlex="60%" *ngIf="client.legalFormId === 1">{{ client.firstname }} {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Office</span>
+    <span fxFlex="40%">{{ "labels.inputs.Office" |translate}}</span>
     <span fxFlex="60%">{{ client.officeId | find:clientTemplate.officeOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Legal Form</span>
+    <span fxFlex="40%">{{ "labels.inputs.Legal Form" |translate}}</span>
     <span fxFlex="60%">{{ client.legalFormId | find:clientTemplate.clientLegalFormOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.staffId">
-    <span fxFlex="40%">Staff</span>
+    <span fxFlex="40%">{{ "labels.inputs.Staff" |translate}}</span>
     <span fxFlex="60%">{{ client.staffId | find:clientTemplate.staffOptions:'id':'displayName' }}</span>
   </div>
 
@@ -31,61 +31,61 @@
   </div>
 
   <div fxFlexFill *ngIf="client.externalId">
-    <span fxFlex="40%">External Id</span>
+    <span fxFlex="40%">{{ "labels.inputs.External Id" |translate}}</span>
     <span fxFlex="60%">
       <mifosx-external-identifier externalId="{{client.externalId}}"></mifosx-external-identifier>
     </span>
   </div>
 
   <div fxFlexFill *ngIf="client.mobileNo">
-    <span fxFlex="40%">Mobile No</span>
+    <span fxFlex="40%">{{ "labels.inputs.Mobile No" |translate}}</span>
     <span fxFlex="60%">{{ client.mobileNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.emailAddress">
-    <span fxFlex="40%">Email Address</span>
+    <span fxFlex="40%">{{ "labels.inputs.Email Address" |translate}}</span>
     <span fxFlex="60%">{{ client.emailAddress }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.clientTypeId">
-    <span fxFlex="40%">Client Type</span>
+    <span fxFlex="40%">{{ "labels.inputs.Client Type" |translate}}</span>
     <span fxFlex="60%">{{ client.clientTypeId | find:clientTemplate.clientTypeOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.clientClassificationId">
-    <span fxFlex="40%">Client Classification</span>
+    <span fxFlex="40%">{{ "labels.inputs.Client Classification" |translate}}</span>
     <span fxFlex="60%">{{ client.clientClassificationId | find:clientTemplate.clientClassificationOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.savingsProductId">
-    <span fxFlex="40%">Savings Product</span>
+    <span fxFlex="40%">{{ "labels.inputs.Savings Product" |translate}}</span>
     <span fxFlex="60%">{{ client.savingsProductId | find:clientTemplate.savingProductOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.submittedOnDate">
-    <span fxFlex="40%">Submitted On Date</span>
+    <span fxFlex="40%">{{ "labels.inputs.Submitted On Date" |translate}}</span>
     <span fxFlex="60%">{{ client.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Active?</span>
+    <span fxFlex="40%">{{ "labels.inputs.Active" |translate}}?</span>
     <span fxFlex="60%">{{ client.active ? 'Yes' : 'No' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.activationDate">
-    <span fxFlex="40%">Activation Date</span>
+    <span fxFlex="40%">{{ "labels.inputs.Activation Date" |translate}}</span>
     <span fxFlex="60%">{{ client.activationDate  | dateFormat }}</span>
   </div>
 
   <ng-container *ngIf="client.legalFormId === 1">
 
     <div fxFlexFill *ngIf="client.genderId">
-      <span fxFlex="40%">Gender</span>
+      <span fxFlex="40%">{{ "labels.inputs.Gender" |translate}}</span>
       <span fxFlex="60%">{{ client.genderId | find:clientTemplate.genderOptions:'id':'name' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Is Staff?</span>
+      <span fxFlex="40%">{{ "labels.inputs.Is Staff" |translate}}?</span>
       <span fxFlex="60%">{{ client.isStaff ? 'Yes' : 'No' }}</span>
     </div>
 
@@ -94,27 +94,27 @@
   <ng-container *ngIf="client.legalFormId === 2">
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
-      <span fxFlex="40%">Incorporation Validity Till Date</span>
+      <span fxFlex="40%">{{ "labels.inputs.Incorporation Validity Till Date" |translate}}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Incorportation Number</span>
+      <span fxFlex="40%">{{ "labels.inputs.Incorportation Number" |translate}}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
-      <span fxFlex="40%">Main Business Line</span>
+      <span fxFlex="40%">{{ "labels.inputs.Main Business Line" |translate}}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.mainBusinessLineId | find:clientTemplate.clientNonPersonMainBusinessLineOptions:'id':'name' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.constitutionId">
-      <span fxFlex="40%">Constitution</span>
+      <span fxFlex="40%">{{ "labels.inputs.Constitution" |translate}}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.constitutionId | find:clientTemplate.clientNonPersonConstitutionOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Remarks</span>
+      <span fxFlex="40%">{{ "labels.inputs.Remarks" |translate}}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
     </div>
 
@@ -122,7 +122,7 @@
 
   <div fxFlexFill *ngIf="client.familyMembers.length" fxLayout="row wrap" fxLayout.lt-md="column" class="m-b-20">
 
-    <h3 class="mat-h3" fxFlexFill>Family Members</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ "labels.heading.Family Members" |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
@@ -145,17 +145,17 @@
         <mat-divider></mat-divider>
 
         <p>
-          First Name : {{ member.firstName }}<br />
-          Middle Name : {{ member.middleName }}<br />
-          Last Name : {{ member.lastName }}<br />
-          Qualification : {{ member.qualification }}<br />
-          Relationship : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
-          Age : {{ member.age }}<br />
-          Is Dependent : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          Marital Status : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
-          Gender : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
-          Profession : {{ member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          Date Of Birth : {{ member.dateOfBirth  | dateFormat }}<br />
+          {{ "labels.inputs.First Name" |translate}} : {{ member.firstName }}<br />
+          {{ "labels.inputs.Middle Name" |translate}} : {{ member.middleName }}<br />
+          {{ "labels.inputs.Last Name" |translate}} : {{ member.lastName }}<br />
+          {{ "labels.inputs.Qualification" |translate}} : {{ member.qualification }}<br />
+          {{ "labels.inputs.Relationship" |translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Age" |translate}} : {{ member.age }}<br />
+          {{ "labels.inputs.Is Dependent" |translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+          {{ "labels.inputs.Marital Status" |translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Gender" |translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Profession" |translate}} : {{ member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
+          {{ "labels.inputs.Date Of Birth" |translate}} : {{ member.dateOfBirth  | dateFormat }}<br />
         </p>
 
       </mat-expansion-panel>
@@ -166,7 +166,7 @@
 
   <div fxFlexFill *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Address</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ "labels.heading.Address" |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
@@ -189,18 +189,18 @@
         <mat-divider></mat-divider>
 
         <p>
-          <span *ngIf="isFieldEnabled('street')">Street : {{address.street}}<br /></span>
-          <span *ngIf="isFieldEnabled('addressLine1')">Address Line 1 : {{address.addressLine1}}<br /></span>
-          <span *ngIf="isFieldEnabled('addressLine2')">Address Line 2 : {{address.addressLine2}}<br /></span>
-          <span *ngIf="isFieldEnabled('addressLine3')">Address Line 3 : {{address.addressLine3}}<br /></span>
-          <span *ngIf="isFieldEnabled('townVillage')">Town / Village : {{address.townVillage}}<br /></span>
-          <span *ngIf="isFieldEnabled('city')">City : {{address.city}}<br /></span>
-          <span *ngIf="isFieldEnabled('stateProvinceId')">State / Province :
+          <span *ngIf="isFieldEnabled('street')">{{ "labels.inputs.Street" |translate}} : {{address.street}}<br /></span>
+          <span *ngIf="isFieldEnabled('addressLine1')">{{ "labels.inputs.Address Line" |translate}} 1 : {{address.addressLine1}}<br /></span>
+          <span *ngIf="isFieldEnabled('addressLine2')">{{ "labels.inputs.Address Line" |translate}} 2 : {{address.addressLine2}}<br /></span>
+          <span *ngIf="isFieldEnabled('addressLine3')">{{ "labels.inputs.Address Line" |translate}} 3 : {{address.addressLine3}}<br /></span>
+          <span *ngIf="isFieldEnabled('townVillage')">{{ "labels.inputs.Town / Village" |translate}} : {{address.townVillage}}<br /></span>
+          <span *ngIf="isFieldEnabled('city')">{{ "labels.inputs.City" |translate}} : {{address.city}}<br /></span>
+          <span *ngIf="isFieldEnabled('stateProvinceId')">{{ "labels.inputs.State / Province" |translate}} :
             {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
-          <span *ngIf="isFieldEnabled('countryId')">Country :
+          <span *ngIf="isFieldEnabled('countryId')">{{ "labels.inputs.Country" |translate}} :
             {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
-          <span *ngIf="isFieldEnabled('postalCode')">Postal Code : {{address.postalCode}}<br /></span>
-          <span *ngIf="isFieldEnabled('isActive')">Active Status : {{address.isActive}}<br /></span>
+          <span *ngIf="isFieldEnabled('postalCode')">{{ "labels.inputs.Postal Code" |translate}} : {{address.postalCode}}<br /></span>
+          <span *ngIf="isFieldEnabled('isActive')">{{ "labels.inputs.Active Status" |translate}} : {{address.isActive}}<br /></span>
         </p>
 
       </mat-expansion-panel>
@@ -214,12 +214,12 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{ "labels.buttons.Previous" | translate}}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    Cancel
+    {{ "labels.buttons.Cancel" | translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    Submit
+    {{ "labels.buttons.Submit" | translate}}
   </button>
 </div>
diff --git a/src/app/clients/clients-view/address-tab/address-tab.component.html b/src/app/clients/clients-view/address-tab/address-tab.component.html
index 1f4a7acf0..6802a42bb 100644
--- a/src/app/clients/clients-view/address-tab/address-tab.component.html
+++ b/src/app/clients/clients-view/address-tab/address-tab.component.html
@@ -1,10 +1,10 @@
 <div class="tab-container mat-typography">
 
-  <h3>Address</h3>
+  <h3>{{ "labels.heading.Address" |translate}}</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ "labels.buttons.Add" | translate}}
     </button>
   </div>
 
@@ -31,18 +31,18 @@
       </div>
 
       <p>
-        <span *ngIf="isFieldEnabled('street')">Street : {{address.street}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine1')">Address Line 1 : {{address.addressLine1}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine2')">Address Line 2 : {{address.addressLine2}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')">Address Line 3 : {{address.addressLine3}}<br /></span>
-        <span *ngIf="isFieldEnabled('townVillage')">Town / Village : {{address.townVillage}}<br /></span>
-        <span *ngIf="isFieldEnabled('city')">City : {{address.city}}<br /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')">State / Province :
+        <span *ngIf="isFieldEnabled('street')">{{ "labels.inputs.Street" |translate}} : {{address.street}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine1')">{{ "labels.inputs.Address Line" |translate}} 1 : {{address.addressLine1}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine2')">{{ "labels.inputs.Address Line" |translate}} 2 : {{address.addressLine2}}<br /></span>
+        <span *ngIf="isFieldEnabled('addressLine3')">{{ "labels.inputs.Address Line" |translate}} 3 : {{address.addressLine3}}<br /></span>
+        <span *ngIf="isFieldEnabled('townVillage')">{{ "labels.inputs.Town / Village" |translate}} : {{address.townVillage}}<br /></span>
+        <span *ngIf="isFieldEnabled('city')">{{ "labels.inputs.City" |translate}} : {{address.city}}<br /></span>
+        <span *ngIf="isFieldEnabled('stateProvinceId')">{{ "labels.inputs.State / Province" |translate}} :
           {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('countryId')">Country :
+        <span *ngIf="isFieldEnabled('countryId')">{{ "labels.inputs.Country" |translate}} :
           {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('postalCode')">Postal Code : {{address.postalCode}}<br /></span>
-        <span *ngIf="isFieldEnabled('isActive')">Active Status : {{address.isActive}}<br /></span>
+        <span *ngIf="isFieldEnabled('postalCode')">{{ "labels.inputs.Postal Code" |translate}} : {{address.postalCode}}<br /></span>
+        <span *ngIf="isFieldEnabled('isActive')">{{ "labels.inputs.Active Status" |translate}} : {{address.isActive}}<br /></span>
       </p>
 
     </mat-expansion-panel>
diff --git a/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
index 104920f33..60ec73ef5 100644
--- a/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
+++ b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
@@ -2,39 +2,39 @@
 
   <div style="margin-top: 5px;">
 
-    <h2> Charges Overview</h2>
+    <h2>{{ "labels.heading.Charges Overview" |translate}}</h2>
 
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.name" |translate}} </th>
         <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
           [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
           {{chargeOverviewData.name}} </td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> Due as of </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Due as of" |translate}} </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> Due </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Due" |translate}} </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> Paid </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Paid" |translate}} </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Waived" |translate}} </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Outstanding" |translate}} </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
       </ng-container>
 
diff --git a/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
index 3d7c65efc..76cd4e163 100644
--- a/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
+++ b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
@@ -7,28 +7,28 @@
       <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label> Amount </mat-label>
+          <mat-label> {{ "labels.inputs.Amount" |translate}} </mat-label>
           <input matInput required autofocus formControlName="amount">
           <mat-error *ngIf="transactionForm.controls.amount.hasError('required')">
-            Amount <strong>is required</strong>
+            {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field (click)="transactionDatePicker.open()">
-          <mat-label> Transaction date </mat-label>
+          <mat-label> {{ "labels.inputs.Transaction date" |translate}} </mat-label>
           <input matInput [min]="minDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="transactionForm.controls.transactionDate.hasError('required')">
-            Transaction date <strong>is required</strong>
+            {{ "labels.inputs.Transaction date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../..','general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../..','general']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">{{ "labels.buttons.Submit" | translate}}</button>
       </div>
 
     </form>
diff --git a/src/app/clients/clients-view/charges/view-charge/view-charge.component.html b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
index 8d8158b77..60df6f3f1 100644
--- a/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
+++ b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
@@ -1,15 +1,15 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
     <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-    Pay
+    {{ "labels.buttons.Pay" | translate}}
   </button>
   <button mat-raised-button color="primary" (click)="waiveCharge()" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
     <i class="fa fa-flag"></i>
-    Waive Charge
+    {{ "labels.buttons.Waive Charge" | translate}}
   </button>
   <button mat-raised-button color="primary" (click)="deleteCharge()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{ "labels.buttons.Delete" | translate}}
   </button>
 </div>
 
@@ -32,41 +32,41 @@
           <tbody>
 
             <tr>
-              <td> Currency </td>
+              <td> {{ "labels.inputs.Currency" |translate}} </td>
               <td> {{ chargeData.currency.name }} </td>
             </tr>
 
             <tr>
-              <td> Charge Time Type </td>
+              <td> {{ "labels.inputs.Charge Time Type" |translate}} </td>
               <td> {{ chargeData.chargeTimeType.value }} </td>
             </tr>
 
             <tr>
-              <td> Charge Calculation Type </td>
+              <td> {{ "labels.inputs.Charge Calculation Type" |translate}} </td>
               <td> {{ chargeData.chargeCalculationType.value }} </td>
             </tr>
 
             <tr>
-              <td> Due as of </td>
+              <td> {{ "labels.inputs.Due as of" |translate}} </td>
               <td> {{ chargeData.dueDate  | dateFormat }} </td>
             </tr>
 
             <tr>
-              <td> Due </td>
+              <td> {{ "labels.inputs.Due" |translate}} </td>
               <td> {{ chargeData.amount }} </td>
             </tr>
 
             <tr>
-              <td> Paid </td>
+              <td> {{ "labels.inputs.Paid" |translate}} </td>
               <td> {{ chargeData.amountPaid }} </td>
             </tr>
 
             <tr>
-              <td> Waived </td>
+              <td> {{ "labels.inputs.Waived" |translate}} </td>
               <td> {{ chargeData.amountWaived }} </td>
             </tr>
             <tr>
-              <td> Outstanding </td>
+              <td> {{ "labels.inputs.Outstanding" |translate}} </td>
               <td> {{ chargeData.amountOutstanding }} </td>
             </tr>
 
@@ -79,36 +79,36 @@
     </mat-card-content>
 
     <div fxLayout="row wrap" class="content" style="padding-top:10px">
-      <h1><b> Transactions </b></h1>
+      <h1><b> {{ "labels.heading.Transactions" |translate}} </b></h1>
 
       <table mat-table [dataSource]="chargeData.clientTransactionDatas" *ngIf="chargeData.clientTransactionDatas">
 
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> ID </th>
+          <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.ID" |translate}} </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.id}} </td>
         </ng-container>
 
         <ng-container matColumnDef="officeName">
-          <th mat-header-cell *matHeaderCellDef> Office Name </th>
+          <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Office Name" |translate}} </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.officeName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef> Type </th>
+          <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Type" |translate}} </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.type.value}} </td>
         </ng-container>
         <ng-container matColumnDef="transactionDate">
-          <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+          <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Transaction Date" |translate}} </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date  | dateFormat}} </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Amount" |translate}} </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | formatNumber }} </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Actions" |translate}} </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
               <fa-icon icon="trash" class="m-r-10"></fa-icon>
@@ -124,7 +124,7 @@
 
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../','general']">Back</button>
+      <button type="button" mat-raised-button [routerLink]="['../../','general']">{{ "labels.buttons.Back" | translate}}</button>
     </mat-card-actions>
 
   </mat-card>
diff --git a/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html b/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html
index 803e903fb..e39cee568 100644
--- a/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html
+++ b/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html
@@ -7,22 +7,22 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>Transfer Date</mat-label>
+          <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
index ca23865ec..032064267 100644
--- a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
+++ b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>Activated On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Activated On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
-              Activated On Date is <strong>required</strong>
+              {{ "labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html b/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html
index bd544a005..d0ee40fd5 100644
--- a/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html
+++ b/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html
@@ -8,29 +8,29 @@
 
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>Charge</mat-label>
+            <mat-label>{{ "labels.inputs.Charge" |translate}}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let clientCharge of clientChargeOptions" [value]="clientCharge.id">
                 {{ clientCharge.name + ' (' + clientCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientChargeForm.controls.chargeId.hasError('required')">
-              Charge is <strong>required</strong>
+              {{ "labels.inputs.Charge" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Amount</mat-label>
+              <mat-label>{{ "labels.inputs.Amount" |translate}}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
-                Amount is <strong>required</strong>
+                {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Charge Calculation</mat-label>
+              <mat-label>{{ "labels.inputs.Charge Calculation" |translate}}</mat-label>
               <mat-select formControlName="chargeCalculationType">
                 <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
                   [value]="chargeCalculation.id">
@@ -40,7 +40,7 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Charge time type</mat-label>
+              <mat-label>{{ "labels.inputs.Charge time type" |translate}}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,29 +49,29 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>Due for collection on</mat-label>
+              <mat-label>{{ "labels.inputs.Due for collection on" |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
                 formControlName="dueDate">
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.dueDate.hasError('required')">
-                Due for collection on is <strong>required</strong>
+                {{ "labels.inputs.Due for collection on" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>Due On</mat-label>
+              <mat-label>{{ "labels.inputs.Due On" |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
                 formControlName="feeOnMonthDay">
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.feeOnMonthDay.hasError('required')">
-                Due Date is <strong>required</strong>
+                {{ "labels.inputs.Due Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeInterval')">
-              <mat-label>Repeats Every</mat-label>
+              <mat-label>{{ "labels.inputs.Repeats Every" |translate}}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
 
@@ -80,8 +80,8 @@
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">{{ "labels.buttons.Submit" | translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html b/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html
index 3b5718874..85525db17 100644
--- a/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html
+++ b/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html
@@ -8,59 +8,59 @@
 
                 <div fxLayout="column">
                     <mat-form-field>
-                        <mat-label>Collateral</mat-label>
+                        <mat-label>{{ "labels.inputs.Collateral" |translate}}</mat-label>
                         <mat-select required formControlName="collateralId">
                             <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
                                 {{ clientCollateral.name }}
                             </mat-option>
                         </mat-select>
                         <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
-                            Collateral is <strong>required</strong>
+                            {{ "labels.inputs.Collateral" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
                     
                     <div *ngIf="collateralDetails" fxLayout="column">
 
                         <mat-form-field>
-                            <mat-label>Name</mat-label>
+                            <mat-label>{{ "labels.inputs.name" |translate}}</mat-label>
                             <input matInput required formControlName="name">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Type/Quality</mat-label>
+                            <mat-label>{{ "labels.inputs.Type/Quality" |translate}}</mat-label>
                             <input matInput required formControlName="quality">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Unit Type</mat-label>
+                            <mat-label>{{ "labels.inputs.Unit Type" |translate}}</mat-label>
                             <input matInput required formControlName="unitType">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Base Price</mat-label>
+                            <mat-label>{{ "labels.inputs.Base Price" |translate}}</mat-label>
                             <input matInput required formControlName="basePrice">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Percentage To Base</mat-label>
+                            <mat-label>{{ "labels.inputs.Percentage To Base" |translate}}</mat-label>
                             <input matInput required formControlName="pctToBase">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Quantity</mat-label>
+                            <mat-label>{{ "labels.inputs.Quantity" |translate}}</mat-label>
                             <input matInput required formControlName="quantity">
                             <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                Quantity is <strong>required</strong>
+                                {{ "labels.inputs.Quantity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                             </mat-error>
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total</mat-label>
+                            <mat-label>{{ "labels.inputs.Total" |translate}}</mat-label>
                             <input matInput required formControlName="totalValue">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total Collateral Value</mat-label>
+                            <mat-label>{{ "labels.inputs.Total Collateral Value" |translate}}</mat-label>
                             <input matInput required formControlName="totalCollateralValue">
                         </mat-form-field>
 
@@ -71,8 +71,8 @@
             </mat-card-content>
 
             <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+                <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{ "labels.buttons.Submit" | translate}}</button> 
             </mat-card-actions>
 
         </form>
diff --git a/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html b/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html
index a6accc117..5024d56a1 100644
--- a/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html
+++ b/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html
@@ -9,14 +9,14 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Staff</mat-label>
+            <mat-label>{{ "labels.inputs.Staff" |translate}}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientAssignStaffForm.controls.staffId.hasError('required')">
-              Staff is <strong>required</strong>
+              {{ "labels.inputs.Staff" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,8 +25,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
index 5ace2b29a..f2aac8095 100644
--- a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
+++ b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
@@ -9,14 +9,14 @@
         <div>
 
           <mat-form-field fxFlex>
-            <mat-label>Client Screen Reports</mat-label>
+            <mat-label>{{ "labels.inputs.Client Screen Reports" |translate}}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
                 {{ template.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientScreenReportForm.controls.templateId.hasError('required')">
-              Screen Report is <strong>required</strong>
+              {{ "labels.inputs.Screen Report" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,9 +25,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
         <button mat-raised-button color="primary" [disabled]="!clientScreenReportForm.valid">
-          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report</button>
+          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{ "labels.buttons.Generate Report" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -43,7 +43,7 @@
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
-        Print
+        {{ "labels.buttons.Print" | translate}}
       </button>
     </div>
 
diff --git a/src/app/clients/clients-view/client-actions/close-client/close-client.component.html b/src/app/clients/clients-view/client-actions/close-client/close-client.component.html
index 131317131..e01d07b3a 100644
--- a/src/app/clients/clients-view/client-actions/close-client/close-client.component.html
+++ b/src/app/clients/clients-view/client-actions/close-client/close-client.component.html
@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>Closed On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Closed On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeClientForm.controls.closureDate.hasError('required')">
-              Closed On Date is <strong>required</strong>
+              {{ "labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Closure Reason</mat-label>
+            <mat-label>{{ "labels.inputs.Closure Reason" |translate}}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeClientForm.controls.closureReasonId.hasError('required')">
-              Closure Reason is <strong>required</strong>
+              {{ "labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html b/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html
index 9866c46c8..54994ee9d 100644
--- a/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html
+++ b/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html
@@ -9,48 +9,48 @@
                 <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> User Name </mat-label>
+                        <mat-label> {{ "labels.inputs.User Name" |translate}} </mat-label>
                         <input matInput required formControlName="username">
                         <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
-                            User Name is <strong>required</strong>
+                            {{ "labels.inputs.User Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> First Name </mat-label>
+                        <mat-label> {{ "labels.inputs.First Name" |translate}} </mat-label>
                         <input matInput required formControlName="firstname">
                         <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
-                            First Name is <strong>required</strong>
+                            {{ "labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> Last Name </mat-label>
+                        <mat-label> {{ "labels.inputs.Last Name" |translate}} </mat-label>
                         <input matInput required formControlName="lastname">
                         <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
-                            Last Name is <strong>required</strong>
+                            {{ "labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> Email </mat-label>
+                        <mat-label> {{ "labels.inputs.Email" |translate}} </mat-label>
                         <input matInput required formControlName="email">
                         <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
-                            Email is <strong>required</strong>
+                            {{ "labels.inputs.Email" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                         <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
-                            Email should be a  <strong>valid</strong> email.
+                            {{ "labels.inputs.Email should be a" |translate}} <strong>{{ "labels.inputs.valid" |translate}}</strong> {{ "labels.inputs.email" |translate}}.
                         </mat-error>
                     </mat-form-field>
 
                     <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
-                        Auto Generate Password
+                        {{ "labels.inputs.Auto Generate Password" |translate}}
                     </mat-checkbox>
 
                     <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
 
                         <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
-                            Override Password Expire Policy ?
+                            {{ "labels.inputs.Override Password Expire Policy" |translate}} ?
                         </mat-checkbox>
     
                         <i class="fa fa-question-circle fa fa-align-left" title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"></i>
@@ -58,34 +58,34 @@
                     </div>
 
                     <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> Password </mat-label>
+                        <mat-label> {{ "labels.inputs.Password" |translate}} </mat-label>
                         <input matInput required formControlName="password" type="password">
                         <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
-                            Password is <strong>required</strong>
+                            {{ "labels.inputs.Password" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> Repeat Password </mat-label>
+                        <mat-label> {{ "labels.inputs.Repeat Password" |translate}} </mat-label>
                         <input matInput required formControlName="repeatPassword" type="password">
                         <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
-                            Repeat password is <strong>required</strong>
+                            {{ "labels.inputs.Repeat password" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                         <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
-                            Passwords should be <strong>matched</strong>
+                            {{ "labels.inputs.Passwords should be" |translate}} <strong>{{ "labels.inputs.matched" |translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> Status </mat-label>
+                        <mat-label> {{ "labels.inputs.Status" |translate}} </mat-label>
                         <input matInput formControlName="status">
                     </mat-form-field>
 
                 </div>
         
                 <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-                  <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-                  <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">Activate Self Service User</button>
+                  <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+                  <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">{{ "labels.buttons.Activate Self Service User" | translate}}</button>
                   <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
                 </mat-card-actions>
         
diff --git a/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html b/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html
index 31006f4d5..6136440fe 100644
--- a/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html
+++ b/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html
@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
-            <mat-label>Re Activation On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Re Activation On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reactivationDatePicker" required formControlName="reactivationDate">
             <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #reactivationDatePicker></mat-datepicker>
             <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
-              Reactivation Date is <strong>required</strong>
+              {{ "labels.inputs.Reactivation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html b/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html
index 964dc12bd..a66139cae 100644
--- a/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html
+++ b/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html
@@ -7,22 +7,22 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>Transfer Date</mat-label>
+          <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html b/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html
index 62e3d4538..d63746849 100644
--- a/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html
+++ b/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html
@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rejectionDatePicker.open()">
-            <mat-label>Rejection Date</mat-label>
+            <mat-label>{{ "labels.inputs.Rejection Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectionDatePicker" required formControlName="rejectionDate">
             <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectionDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectClientForm.controls.rejectionDate.hasError('required')">
-              Rejection Date is <strong>required</strong>
+              {{ "labels.inputs.Rejection Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Rejection Reason</mat-label>
+            <mat-label>{{ "labels.inputs.Rejection Reason" |translate}}</mat-label>
             <mat-select formControlName="rejectionReasonId">
               <mat-option *ngFor="let reason of rejectionData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rejectClientForm.controls.rejectionReasonId.hasError('required')">
-              Rejection Reason is <strong>required</strong>
+              {{ "labels.inputs.Rejection Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html b/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html
index 7ca448fce..f6b74c657 100644
--- a/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html
+++ b/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html
@@ -4,7 +4,7 @@
 
     <div class="surveySelect" fxLayout="row">
 
-      <mat-label class="nameLabel">Survey Name</mat-label>
+      <mat-label class="nameLabel">{{ "labels.inputs.Survey Name" |translate}}</mat-label>
       <mat-select (selectionChange)="onSurveyChange($event)">
         <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
           {{surveyData.name}}
@@ -42,7 +42,7 @@
 
             </div>
 
-            <div *ngIf="question.answer">Your answer is: {{question.answer.text}}</div>
+            <div *ngIf="question.answer">{{ "labels.text.Your answer is" |translate}}: {{question.answer.text}}</div>
 
           </ng-container>
 
@@ -52,8 +52,8 @@
 
     </div>
 
-    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">Cancel</button>
-    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>Submit</button>
+    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">{{ "labels.buttons.Cancel" |translate}}</button>
+    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>{{ "labels.buttons.Submit" |translate}}</button>
 
   </div>
 
diff --git a/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html b/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html
index a262bb4e1..747f68cc8 100644
--- a/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html
+++ b/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html
@@ -9,29 +9,29 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ "labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="destinationOfficeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientForm.controls.destinationOfficeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{ "labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="transferDatePicker.open()">
-            <mat-label>Transfer Date</mat-label>
+            <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required formControlName="transferDate">
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="transferClientForm.controls.transferDate.hasError('required')">
-              Transfer Date is <strong>required</strong>
+              {{ "labels.inputs.Transfer Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -40,8 +40,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html b/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
index aa5625891..d220ad441 100644
--- a/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
+++ b/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
-            <mat-label>Reopened On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Reopened On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reopenedDatePicker" required formControlName="reopenedDate">
             <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #reopenedDatePicker></mat-datepicker>
             <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
-              Reopened On Date is <strong>required</strong>
+              {{ "labels.inputs.Reopened On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html b/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html
index 7c5b7fe77..4816b50e2 100644
--- a/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html
+++ b/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html
@@ -7,22 +7,22 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>Transfer Date</mat-label>
+          <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html b/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html
index 152dee42e..9220c2f59 100644
--- a/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html
+++ b/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html
@@ -9,14 +9,14 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Default Savings Account</mat-label>
+            <mat-label>{{ "labels.inputs.Default Savings Account" |translate}}</mat-label>
             <mat-select formControlName="savingsAccountId">
               <mat-option *ngFor="let account of savingsAccounts" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientSavingsAccountForm.controls.savingsAccountId.hasError('required')">
-              Account is <strong>required</strong>
+              {{ "labels.inputs.Account" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,8 +25,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html b/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
index 7bb6116f5..c56c56364 100644
--- a/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
+++ b/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayoutAlign="end">
   <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Take Survey
+    {{ "labels.buttons.Take Survey" |translate}}
   </button>
 </div>
 
@@ -20,22 +20,22 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="surveyName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> Survey </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> {{ "labels.inputs.Survey" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> {{ "labels.inputs.Created By" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> DateTime </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.DateTime" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.date  | datetimeFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="score">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Score </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Score" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.score | formatNumber }} </td>
       </ng-container>
 
diff --git a/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html b/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html
index 053218b10..e5e18c34d 100644
--- a/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html
+++ b/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html
@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="withdrawalDatePicker.open()">
-            <mat-label>Withdrawal Date</mat-label>
+            <mat-label>{{ "labels.inputs.Withdrawal Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawalDatePicker" required formControlName="withdrawalDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawalDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalDate.hasError('required')">
-              Withdrawal Date is <strong>required</strong>
+              {{ "labels.inputs.Withdrawal Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Withdrawal Reason</mat-label>
+            <mat-label>{{ "labels.inputs.Withdrawal Reason" |translate}}</mat-label>
             <mat-select formControlName="withdrawalReasonId">
               <mat-option *ngFor="let reason of withdrawalData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalReasonId.hasError('required')">
-              Withdrawal Reason is <strong>required</strong>
+              {{ "labels.inputs.Withdrawal Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index 8f43e2507..6452c095e 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -11,20 +11,20 @@
         </div>
         <div fxLayoutAlign="center center" class="m-b-5">
           <button class="client-image-button" mat-raised-button (click)="doAction('Upload Image')"
-            matTooltip="Upload Image" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+            matTooltip="{{ 'tooltips.Upload Image' | translate }}" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
             <i class="fa fa-upload"></i>
           </button>
           <button class="client-image-button" mat-raised-button (click)="doAction('Capture Image')"
-            matTooltip="Capture Image" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+            matTooltip="{{ 'tooltips.Capture Image' | translate }}" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
             <i class="fa fa-camera"></i>
           </button>
           <button class="client-image-button" mat-raised-button (click)="doAction('Delete Image')"
-            matTooltip="Delete Image" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+            matTooltip="{{ 'tooltips.Delete Image' | translate }}" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
             <i class="fa fa-trash"></i>
           </button>
           <br>
         </div>
-        <p (click)="doAction('View Signature')" class="signature">View Signature</p>
+        <p (click)="doAction('View Signature')" class="signature">{{"labels.inputs.View Signature" |translate}}</p>
       </div>
 
       <div class="mat-typography client-card-title">
@@ -33,7 +33,7 @@
           <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup"
               [matTooltip]="clientViewData.status.value"></i>
-            <b>Client Name :</b><mifosx-entity-name entityName="{{clientViewData.displayName}}"></mifosx-entity-name>
+            <b>{{"labels.inputs.Client Name" |translate}} :</b><mifosx-entity-name entityName="{{clientViewData.displayName}}"></mifosx-entity-name>
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="clientMenu" aria-label="Client actions" yPosition="below">
@@ -46,15 +46,15 @@
 
         <mat-card-subtitle>
           <p>
-            <b>Office :</b><mifosx-entity-name entityName="{{clientViewData.officeName}}"></mifosx-entity-name><br />
-            <b>Client :</b> <mifosx-account-number accountNo="{{clientViewData.accountNo}}"></mifosx-account-number><br />
-            <b>External Id:</b><mifosx-external-identifier externalId="{{clientViewData.externalId}}" completed="true"></mifosx-external-identifier><br />
-            <span *ngIf="clientViewData.staffName"><b>Staff :</b> {{clientViewData.staffName ||
+            <b>{{"labels.inputs.Office" |translate}} :</b><mifosx-entity-name entityName="{{clientViewData.officeName}}"></mifosx-entity-name><br />
+            <b>{{"labels.inputs.Client" |translate}} :</b> <mifosx-account-number accountNo="{{clientViewData.accountNo}}"></mifosx-account-number><br />
+            <b>{{"labels.inputs.External Id" |translate}}:</b><mifosx-external-identifier externalId="{{clientViewData.externalId}}" completed="true"></mifosx-external-identifier><br />
+            <span *ngIf="clientViewData.staffName"><b>{{"labels.inputs.Staff" |translate}} :</b> {{clientViewData.staffName ||
               'Unassigned'}}<br /></span>
-            <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate |
+            <span *ngIf="clientViewData.activationDate"><b>{{"labels.inputs.Activation Date" |translate}} :</b> {{clientViewData.activationDate |
               dateFormat}}<br /></span>
             <span *ngIf="clientViewData.groups.length > 0">
-              Member Of :
+              {{"labels.inputs.Member Of" |translate}} :
               <span *ngFor="let group of clientViewData.groups">
                 <a>{{group.name}}</a>&nbsp;
               </span>
@@ -70,28 +70,28 @@
           <mat-icon matListIcon>
             <fa-icon icon="edit" size="sm"></fa-icon>
           </mat-icon>
-          <span>Edit</span>
+          <span>{{ "labels.buttons.Edit" |translate}}</span>
         </button>
 
         <button *ngIf="isActive()" mat-menu-item [matMenuTriggerFor]="accountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>
-          <span>Applications</span>
+          <span>{{ "labels.buttons.Applications" |translate}}</span>
         </button>
 
         <button mat-menu-item [matMenuTriggerFor]="Actions">
           <mat-icon matListIcon>
             <fa-icon icon="tasks" size="sm"></fa-icon>
           </mat-icon>
-          <span>Actions</span>
+          <span>{{ "labels.buttons.Actions" |translate}}</span>
         </button>
 
         <button mat-menu-item (click)="doAction('Assign Staff')" *ngIf="!clientViewData.staffId">
           <mat-icon matListIcon>
             <fa-icon icon="user-tie" size="sm"></fa-icon>
           </mat-icon>
-          <span>Assign Staff</span>
+          <span>{{ "labels.buttons.Assign Staff" |translate}}</span>
         </button>
 
         <span *ngIf="clientViewData.staffId">
@@ -99,70 +99,67 @@
             <mat-icon matListIcon>
               <fa-icon icon="user-tie" size="sm"></fa-icon>
             </mat-icon>
-            <span>Unassign Staff</span>
+            <span>{{ "labels.buttons.Unassign Staff" |translate}}</span>
           </button>
         </span>
 
-        <button mat-menu-item [matMenuTriggerFor]="More">More</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ "labels.buttons.More" |translate}}</button>
 
       </mat-menu>
 
       <mat-menu #accountApplications="matMenu">
         <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'"
-          [routerLink]="['loans-accounts', 'create']">New Loan Account</button>
+          [routerLink]="['loans-accounts', 'create']">{{ "labels.buttons.New Loan Account" |translate}}</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-          [routerLink]="['savings-accounts', 'create']">New Savings Account</button>
+          [routerLink]="['savings-accounts', 'create']">{{ "labels.buttons.New Savings Account" |translate}}</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'"
-          [routerLink]="['shares-accounts', 'create']">New Share Account</button>
+          [routerLink]="['shares-accounts', 'create']">{{ "labels.buttons.New Share Account" |translate}}</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
-          [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit
-          Account</button>
+          [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">{{ "labels.buttons.New Recurring Deposit Account" |translate}}</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
-          [routerLink]="['fixed-deposits-accounts', 'create']">New Fixed Deposits Account</button>
+          [routerLink]="['fixed-deposits-accounts', 'create']">{{ "labels.buttons.New Fixed Deposits Account" |translate}}</button>
       </mat-menu>
 
       <mat-menu #Actions="matMenu">
-        <button mat-menu-item (click)="doAction('Close')">Close</button>
-        <button mat-menu-item (click)="doAction('Transfer Client')">Transfer Client</button>
+        <button mat-menu-item (click)="doAction('Close')">{{ "labels.buttons.Close" |translate}}</button>
+        <button mat-menu-item (click)="doAction('Transfer Client')">{{ "labels.buttons.Transfer Client" |translate}}</button>
         <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            (click)="doAction('Activate')">Activate</button></span>
+            (click)="doAction('Activate')">{{ "labels.buttons.Activate" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            (click)="doAction('Withdraw')">Withdraw</button></span>
+            (click)="doAction('Withdraw')">{{ "labels.buttons.Withdraw" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            (click)="doAction('Reject')">Reject</button></span>
+            (click)="doAction('Reject')">{{ "labels.buttons.Reject" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">Delete</button></span>
+            *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">{{ "labels.buttons.Delete" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Closed'"><button mat-menu-item
-            (click)="doAction('Reactivate')">Reactivate</button></span>
+            (click)="doAction('Reactivate')">{{ "labels.buttons.Reactivate" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Rejected'"><button mat-menu-item
-            (click)="doAction('Undo Rejection')">Undo Rejection</button></span>
+            (click)="doAction('Undo Rejection')">{{ "labels.buttons.Undo Rejection" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
-            (click)="doAction('Undo Transfer')">Undo Transfer</button></span>
+            (click)="doAction('Undo Transfer')">{{ "labels.buttons.Undo Transfer" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
-            (click)="doAction('Accept Transfer')">Accept Transfer</button></span>
+            (click)="doAction('Accept Transfer')">{{ "labels.buttons.Accept Transfer" |translate}}</button></span>
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
-            (click)="doAction('Reject Transfer')">Reject transfer</button></span>
+            (click)="doAction('Reject Transfer')">{{ "labels.buttons.Reject transfer" |translate}}</button></span>
       </mat-menu>
 
       <mat-menu #More="matMenu">
-        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> Add Charge
+        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> {{ "labels.buttons.Add Charge" |translate}}
         </button>
-        <button mat-menu-item (click)="doAction('Create Collateral')">Create Collateral</button>
-        <button mat-menu-item (click)="doAction('Survey')">Survey</button>
+        <button mat-menu-item (click)="doAction('Create Collateral')">{{ "labels.buttons.Create Collateral" |translate}}</button>
+        <button mat-menu-item (click)="doAction('Survey')">{{ "labels.buttons.Survey" |translate}}</button>
         <button mat-menu-item (click)="doAction('Update Default Savings')"
-          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> Update Default Savings </button>
-        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> Upload
-          Signature </button>
-        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'"> Delete
-          Signature </button>
-        <button mat-menu-item (click)="doAction('Client Screen Reports')"> Client Screen Reports </button>
+          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> {{ "labels.buttons.Update Default Savings" |translate}} </button>
+        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> {{ "labels.buttons.Upload Signature" |translate}} </button>
+        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'"> {{ "labels.buttons.Delete Signature" |translate}} </button>
+        <button mat-menu-item (click)="doAction('Client Screen Reports')"> {{ "labels.buttons.Client Screen Reports" |translate}} </button>
         <button mat-menu-item (click)="doAction('Create Standing Instructions')"
-          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'">Create Standing Instructions</button>
+          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"> {{ "labels.buttons.Create Standing Instructions" |translate}}</button>
         <span *ngIf="clientViewData.status.value!='Transfer on hold'">
           <button mat-menu-item (click)="doAction('View Standing Instructions')"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">View Standing Instructions</button>
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"> {{ "labels.buttons.View Standing Instructions" |translate}}</button>
         </span>
-        <button mat-menu-item (click)="doAction('Create Self Service User')">Create Self Service User</button>
+        <button mat-menu-item (click)="doAction('Create Self Service User')"> {{ "labels.buttons.Create Self Service User" |translate}}</button>
       </mat-menu>
 
     </mat-card-title-group>
@@ -173,27 +170,27 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        General
+        {{"labels.inputs.General" |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./address']" routerLinkActive #address="routerLinkActive"
         [active]="address.isActive">
-        Address
+        {{"labels.inputs.Address" |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./family-members']" routerLinkActive #familyMembers="routerLinkActive"
         [active]="familyMembers.isActive">
-        Family Members
+        {{"labels.inputs.Family Members" |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./identities']" routerLinkActive #identities="routerLinkActive"
         [active]="identities.isActive" *mifosxHasPermission="'READ_CLIENTIDENTIFIER'">
-        Identities
+        {{"labels.inputs.Identities" |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #documents="routerLinkActive"
         [active]="documents.isActive" *mifosxHasPermission="'READ_DOCUMENT'">
-        Documents
+        {{"labels.inputs.Documents" |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive"
         *mifosxHasPermission="'READ_CLIENTNOTE'">
-        Notes
+        {{"labels.inputs.Notes" |translate}}
       </a>
       <ng-container *ngFor="let clientDatatable of clientDatatables">
         <a mat-tab-link [routerLink]="['./datatables',clientDatatable.registeredTableName]" routerLinkActive
diff --git a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
index 26f4d5ae2..689201c2a 100644
--- a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutGap="2%">
 
-  <h1 mat-dialog-title align="center">Capture Client Image</h1>
+  <h1 mat-dialog-title align="center">{{ "labels.heading.Capture Client Image" |translate}}</h1>
 
   <video #video width="540" height="480" autoplay></video>
 
@@ -12,16 +12,16 @@
 
   <div fxFlex="20%" align="center">
     <button #captureButton *ngIf="!isCaptured" mat-stroked-button color="primary" (click)="capture()">
-      Capture
+      {{ "labels.buttons.Capture" |translate}}
     </button>
     <button *ngIf="isCaptured" mat-stroked-button color="primary" (click)="recapture()">
-      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>Recapture
+      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{ "labels.buttons.Recapture" |translate}}
     </button>
   </div>
 
   <mat-dialog-actions align="end">
-    <button mat-raised-button mat-dialog-close>Cancel</button>
-    <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">Upload</button>
+    <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
+    <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">{{ "labels.buttons.Upload" |translate}}</button>
   </mat-dialog-actions>
 
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html
index d596b8dea..1f8bfe043 100644
--- a/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html
@@ -1,15 +1,15 @@
-<h1 mat-dialog-title>Delete Client Signature</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Delete Client Signature" |translate}}</h1>
 
 <div *ngIf="signatureId" mat-dialog-content>
-  <p>Are you sure you want to delete this clients signature ?</p>
+  <p>{{"labels.text.Delete clients signature" |translate}} ?</p>
 </div>
 
 <div *ngIf="!signatureId" mat-dialog-content>
-  <p>Client Signature is not provided.</p>
+  <p>{{"labels.text.Client Signature is not provided." |translate}}</p>
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">Confirm</button>
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">Upload</button>
+  <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
+  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">{{ "labels.buttons.Confirm" |translate}}</button>
+  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">{{ "labels.buttons.Upload" |translate}}</button>
 </mat-dialog-actions>
diff --git a/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html
index 63f36f9f1..083c000c1 100644
--- a/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html
@@ -1,13 +1,13 @@
-<h1 mat-dialog-title>Edit Note</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Edit Note" |translate}}</h1>
 <div>
   <form #formRef="ngForm" [formGroup]="noteForm">
     <mat-form-field>
       <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
     </mat-form-field>
     <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>Cancel</button>
+      <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
       <button mat-raised-button color="primary" [disabled]="noteForm.pristine"
-        [mat-dialog-close]="{ editForm: noteForm }">Confirm</button>
+        [mat-dialog-close]="{ editForm: noteForm }">{{ "labels.buttons.Confirm" |translate}}</button>
     </mat-dialog-actions>
   </form>
 </div>
\ No newline at end of file
diff --git a/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
index 2f8b3b5fd..ad56891f3 100644
--- a/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Unassign Staff</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Unassign Staff" |translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to unassign staff for this client ?</p>
+  <p>{{ "labels.text.Unassign Staff client" |translate}} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{ "labels.buttons.Confirm" |translate}}</button>
 </mat-dialog-actions>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
index dd5f4d6e7..9823f44b8 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
@@ -1,26 +1,26 @@
-<h1 mat-dialog-title>Upload {{ entityType }} Documents</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Upload" |translate}} {{ entityType }} {{ "labels.heading.Documents" |translate}}</h1>
 <div>
   <form [formGroup]="uploadDocumentForm" fxLayout="column">
 
     <mat-form-field fxFlex>
-      <mat-label>File Name</mat-label>
+      <mat-label>{{"labels.inputs.File Name" |translate}}</mat-label>
       <input formControlName="fileName" required matInput />
       <mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
-        File Name is <strong>required</strong>
+        {{"labels.inputs.File Name" |translate}} is <strong>required</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex *ngIf="!documentIdentifier">
-      <mat-label>Description</mat-label>
+      <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
       <input formControlName="description" matInput />
     </mat-form-field>
 
     <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
 
     <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>Cancel</button>
+      <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
       <button mat-raised-button color="primary" [disabled]="!uploadDocumentForm.valid"
-        [mat-dialog-close]="uploadDocumentForm.value">Confirm</button>
+        [mat-dialog-close]="uploadDocumentForm.value">{{ "labels.buttons.Confirm" |translate}}</button>
     </mat-dialog-actions>
 
   </form>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html
index 4c484e497..136ab08ab 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html
@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>Upload Client Image</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Upload Client Image" |translate}}</h1>
 
 <div>
 
   <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
   <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">Confirm</button>
+      <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
+      <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">{{ "labels.buttons.Confirm" |translate}}</button>
   </mat-dialog-actions>
 
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html
index cc86616d3..4f883468a 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html
@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>Upload Client Signature</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Upload Client Signature" |translate}}</h1>
 
 <div>
 
   <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
   <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">Confirm</button>
+      <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Cancel" |translate}}</button>
+      <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">{{ "labels.buttons.Confirm" |translate}}</button>
   </mat-dialog-actions>
 
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html
index f9dc56386..123fdb478 100644
--- a/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html
@@ -1,15 +1,15 @@
-<h1 mat-dialog-title>View Client Signature</h1>
+<h1 mat-dialog-title>{{ "labels.heading.View Client Signature" |translate}}</h1>
 
 <div *ngIf="signatureId" mat-dialog-content>
   <img [src]="signatureImage" alt="Signature">
 </div>
 
 <div *ngIf="!signatureId" mat-dialog-content>
-  <p>Client Signature is not provided.</p>
+  <p>{{ "labels.text.Client Signature is not provided." |translate}}</p>
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Close</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">Delete</button>
+  <button mat-raised-button mat-dialog-close>{{ "labels.buttons.Close" |translate}}</button>
+  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">{{ "labels.buttons.Delete" |translate}}</button>
   <button mat-raised-button color="primary" [mat-dialog-close]="{ upload: true }">{{ signatureId ? 'Reupload' : 'Upload'}}</button>
 </mat-dialog-actions>
diff --git a/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html b/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html
index 3c7af9762..a2f6650c3 100644
--- a/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html
+++ b/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html
@@ -5,68 +5,68 @@
     <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>First Name</mat-label>
+        <mat-label>{{"labels.inputs.First Name" |translate}}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
-          First Name is <strong>required</strong>
+          {{"labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Middle Name</mat-label>
+        <mat-label>{{"labels.inputs.Middle Name" |translate}}</mat-label>
         <input formControlName="middleName" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Last Name</mat-label>
+        <mat-label>{{"labels.inputs.Last Name" |translate}}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
-          Last Name is <strong>required</strong>
+          {{"labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Qualification</mat-label>
+        <mat-label>{{"labels.inputs.Qualification" |translate}}</mat-label>
         <input formControlName="qualification" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Age</mat-label>
+        <mat-label>{{"labels.inputs.Age" |translate}}</mat-label>
         <input type="number" formControlName="age" required matInput [min]="minAge" />
         <mat-error *ngIf="addFamilyMemberForm.controls.age.hasError('required')">
-          Age is <strong>required and cannot be negative</strong>
+          {{"labels.inputs.Age" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">Is Dependent?
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">{{"labels.inputs.Is Dependent" |translate}}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Relationship</mat-label>
+        <mat-label>{{"labels.inputs.Relationship" |translate}}</mat-label>
         <mat-select formControlName="relationshipId" required>
           <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
             {{ relation.name  }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.relationshipId.hasError('required')">
-          Relationship is <strong>required</strong>
+          {{"labels.inputs.Relationship" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Gender</mat-label>
+        <mat-label>{{"labels.inputs.Gender" |translate}}</mat-label>
         <mat-select formControlName="genderId" required>
           <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
             {{ gender.name }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.genderId.hasError('required')">
-          Gender is <strong>required</strong>
+          {{"labels.inputs.Gender" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Profession</mat-label>
+        <mat-label>{{"labels.inputs.Profession" |translate}}</mat-label>
         <mat-select formControlName="professionId">
           <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
             {{ profession.name }}
@@ -75,7 +75,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Marital Status</mat-label>
+        <mat-label>{{"labels.inputs.Marital Status" |translate}}</mat-label>
         <mat-select formControlName="maritalStatusId">
           <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
             [value]="maritalStatus.id">
@@ -86,22 +86,21 @@
 
 
       <mat-form-field fxFlex (click)="dueDatePicker.open()">
-        <mat-label>Date Of Birth</mat-label>
+        <mat-label>{{"labels.inputs.Date Of Birth" |translate}}</mat-label>
         <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
           required>
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="addFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          Date of birth
-          is <strong>required</strong>
+          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
     </div>
     
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" |translate}}</button>
+      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">{{ "labels.buttons.Submit" |translate}}</button>
     </div>
 
   </form>
diff --git a/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html b/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html
index 4d6bc64dc..aeca28958 100644
--- a/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html
+++ b/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html
@@ -5,36 +5,36 @@
     <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>First Name</mat-label>
+        <mat-label>{{"labels.inputs.First Name" |translate}}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
-          First Name is <strong>required</strong>
+          {{"labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Middle Name</mat-label>
+        <mat-label>{{"labels.inputs.Middle Name" |translate}}</mat-label>
         <input formControlName="middleName" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Last Name</mat-label>
+        <mat-label>{{"labels.inputs.Last Name" |translate}}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
-          Last Name is <strong>required</strong>
+          {{"labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Qualification</mat-label>
+        <mat-label>{{"labels.inputs.Qualification" |translate}}</mat-label>
         <input formControlName="qualification" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Age</mat-label>
+        <mat-label>{{"labels.inputs.Age" |translate}}</mat-label>
         <input type="number" formControlName="age" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.age.hasError('required')">
-          Age is <strong>required</strong>
+          {{"labels.inputs.Age" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -42,31 +42,31 @@
       </mat-checkbox>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Relationship</mat-label>
+        <mat-label>{{"labels.inputs.Relationship" |translate}}</mat-label>
         <mat-select formControlName="relationshipId" required>
           <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
             {{ relation.name  }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.relationshipId.hasError('required')">
-          Relationship is <strong>required</strong>
+          {{"labels.inputs.Relationship" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Gender</mat-label>
+        <mat-label>{{"labels.inputs.Gender" |translate}}</mat-label>
         <mat-select formControlName="genderId" required>
           <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
             {{ gender.name }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.genderId.hasError('required')">
-          Gender is <strong>required</strong>
+          {{"labels.inputs.Gender" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Profession</mat-label>
+        <mat-label>{{"labels.inputs.Profession" |translate}}</mat-label>
         <mat-select formControlName="professionId">
           <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
             {{ profession.name }}
@@ -75,7 +75,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>Marital Status</mat-label>
+        <mat-label>{{"labels.inputs.Marital Status" |translate}}</mat-label>
         <mat-select formControlName="maritalStatusId">
           <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
             [value]="maritalStatus.id">
@@ -86,22 +86,21 @@
 
 
       <mat-form-field fxFlex (click)="dueDatePicker.open()">
-        <mat-label>Date Of Birth</mat-label>
+        <mat-label>{{"labels.inputs.Date Of Birth" |translate}}</mat-label>
         <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
           required>
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="editFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          Date of birth
-          is <strong>required</strong>
+          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
     </div>
     
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-      <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+      <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">{{ "labels.buttons.Submit" |translate}}</button>
     </div>
 
   </form>
diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
index 49657f55f..4e48d727b 100644
--- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
+++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
@@ -2,12 +2,11 @@
 
   <router-outlet>
 
-    <h3>Family Members</h3>
+    <h3>{{"labels.heading.Family Members" |translate}}</h3>
 
     <div fxLayout="row" fxLayoutAlign="flex-end">
       <button mat-raised-button color="primary" [routerLink]="['./add']">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ "labels.buttons.Add" |translate}}
       </button>
     </div>
 
@@ -36,17 +35,17 @@
         </div>
 
         <p>
-          First Name : {{member.firstName}}<br />
-          Middle Name : {{member.middleName}}<br />
-          Last Name : {{member.lastName}}<br />
-          Qualification : {{member.qualification}}<br />
-          Mobile Number : {{member.mobileNumber}}<br />
-          Age : {{member.age}}<br />
-          Is Dependent : {{member.isDependent}}<br />
-          Martial Status : {{member.maritalStatus}}<br />
-          Gender : {{member.gender}}<br />
-          Profession : {{member.profession}}<br />
-          Date Of Birth : {{member.dateOfBirth | dateFormat}}<br />
+          {{"labels.inputs.First Name" |translate}} : {{member.firstName}}<br />
+          {{"labels.inputs.Middle Name" |translate}} : {{member.middleName}}<br />
+          {{"labels.inputs.Last Name" |translate}} : {{member.lastName}}<br />
+          {{"labels.inputs.Qualification" |translate}} : {{member.qualification}}<br />
+          {{"labels.inputs.Mobile Number" |translate}} : {{member.mobileNumber}}<br />
+          {{"labels.inputs.Age" |translate}} : {{member.age}}<br />
+          {{"labels.inputs.Is Dependent" |translate}} : {{member.isDependent}}<br />
+          {{"labels.inputs.Martial Status" |translate}} : {{member.maritalStatus}}<br />
+          {{"labels.inputs.Gender" |translate}} : {{member.gender}}<br />
+          {{"labels.inputs.Profession" |translate}} : {{member.profession}}<br />
+          {{"labels.inputs.Date Of Birth" |translate}} : {{member.dateOfBirth  | dateFormat}}<br />
         </p>
 
       </mat-expansion-panel>
diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index c38b8f6d5..872bda9bf 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -1,21 +1,21 @@
 <div class="tab-container mat-typography">
 
-  <h3>Performance History</h3>
+  <h3>{{ "labels.heading.Performance History" |translate}}</h3>
   <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
     <table>
       <tbody>
         <tr>
           <td>
             <p>
-              No. Of Loan Cycles :{{clientSummary?.loanCycle}} <br />
-              No. of Active Loans :{{clientSummary?.activeLoans}} <br />
-              Last Loan Amount :{{clientSummary?.lastLoanAmount | formatNumber}} <br />
+              {{"labels.inputs.No. Of Loan Cycles" |translate}} :{{clientSummary?.loanCycle}} <br />
+              {{"labels.inputs.No. of Active Loans" |translate}} :{{clientSummary?.activeLoans}} <br />
+              {{"labels.inputs.Last Loan Amount" |translate}} :{{clientSummary?.lastLoanAmount | formatNumber}} <br />
             </p>
           </td>
           <td>
             <p>
-              No. of Active Savings :{{clientSummary?.activeSavings}} <br />
-              Total Savings :{{clientSummary?.totalSavings | formatNumber}} <br />
+              {{"labels.inputs.No. of Active Savings" |translate}} :{{clientSummary?.activeSavings}} <br />
+              {{"labels.inputs.Total Savings" |translate}} :{{clientSummary?.totalSavings | formatNumber}} <br />
             </p>
           </td>
         </tr>
@@ -27,13 +27,13 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div className="heading-name">
-        <h3>Upcoming Charges</h3>
+        <h3>{{ "labels.heading.Upcoming Charges" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'charges', 'overview']" *mifosxHasPermission="'READ_CLIENTCHARGE'">Charges
-          Overview</button>
+        <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'charges', 'overview']" *mifosxHasPermission="'READ_CLIENTCHARGE'">
+          {{ "labels.buttons.Charges Overview" |translate}}</button>
       </div>
     </div>
   </div>
@@ -41,39 +41,39 @@
   <table mat-table [dataSource]="upcomingCharges">
 
     <ng-container matColumnDef="Name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" |translate}} </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
           [ngClass]="(!(element.isWaived || element.isPaid)) | statusLookup"></i>
         {{element.name}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Due as of">
-      <th mat-header-cell *matHeaderCellDef> Due as of </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due as of" |translate}}" </th>
       <td mat-cell *matCellDef="let element"> {{element.dueDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Due" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amount | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>Paid </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Waived">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountWaived | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountOutstanding | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <button class="account-action-button" mat-raised-button color="primary"
           (click)="routeEdit($event)" [routerLink]="['../','charges', element.id, 'pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
@@ -96,7 +96,7 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>Loan Accounts</h3>
+        <h3>{{"labels.heading.Loan Accounts" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
@@ -110,7 +110,7 @@
   <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
           [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
         {{element.accountNo}}
@@ -118,54 +118,54 @@
     </ng-container>
 
     <ng-container matColumnDef="Loan Account">
-      <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Original Loan">
-      <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
     </ng-container>
     <ng-container matColumnDef="Loan Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Loan Balance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Amount Paid </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Amount Paid" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
-      <th mat-header-cell class="center" *matHeaderCellDef> Type </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Type" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" |translate}}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary" matTooltip="Make Repayment" matTooltipPosition="above"
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Make Repayment' | translate }}" matTooltipPosition="above"
         (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Make Repayment']">
           <i class="fa fa-dollar"></i>
         </button>
         <span *ngIf="element.status.pendingApproval">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Approve"
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Approve' | translate }}"
             matTooltipPosition="above" *mifosxHasPermission="'APPROVE_LOAN'" (click)="routeEdit($event)"
             [routerLink]="['../','loans-accounts', element.id, 'actions', 'Approve']">
             <i class="fa fa-check"></i>
           </button>
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Disburse"
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Disburse' | translate }}"
             matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'"
             (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Disburse']">
             <i class="fa fa-flag"></i>
           </button>
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid">
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="Transfer Funds"
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Transfer Funds' | translate }}"
           matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'"
           (click)="routeEdit($event); routeTransferFund(element.id)">
           <i class="fa fa-exchange"></i>
@@ -184,7 +184,7 @@
   <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
           [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
         {{element.accountNo}}
@@ -192,34 +192,34 @@
     </ng-container>
 
     <ng-container matColumnDef="Loan Account">
-      <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Original Loan">
-      <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>Loan Balance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Amount Paid </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Amount Paid" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
-      <th mat-header-cell class="center" *matHeaderCellDef> Type </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Type" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <i class="fa fa-large" [ngClass]="(element.loanType.value === 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" |translate}} </th>
       <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
@@ -233,7 +233,7 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>Saving Accounts</h3>
+        <h3>{{"labels.heading.Saving Accounts" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
@@ -248,28 +248,28 @@
     [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isSavings'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Last Active">
-      <th mat-header-cell *matHeaderCellDef> Last Active </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
           (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
@@ -307,18 +307,18 @@
     [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isSavings'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" |translate}} </th>
       <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
@@ -331,7 +331,7 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>Fixed Deposit Accounts</h3>
+        <h3>{{"labels.heading.Fixed Deposit Accounts" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
@@ -346,28 +346,28 @@
     [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isFixed'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Last Active">
-      <th mat-header-cell *matHeaderCellDef> Last Active </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
           color="primary" (click)="routeEdit($event)" [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Approve']">
@@ -398,18 +398,18 @@
     [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isFixed'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" |translate}} </th>
       <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
@@ -423,7 +423,7 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>Recurring Deposit Accounts</h3>
+        <h3>{{"labels.heading.Recurring Deposit Accounts" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
@@ -438,28 +438,28 @@
     [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isRecurring'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Last Active">
-      <th mat-header-cell *matHeaderCellDef> Last Active </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <ng-container *ngIf="element.status.submittedAndPendingApproval">
           <button class="account-action-button" mat-raised-button *mifosxHasPermission="'APPROVE_SAVINGSACCOUNT'"
@@ -494,18 +494,18 @@
     [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isRecurring'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" |translate}} </th>
       <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
@@ -518,7 +518,7 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>Shares Accounts</h3>
+        <h3>{{"labels.inputs.Shares Accounts" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
@@ -532,28 +532,28 @@
   <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Share Account">
-      <th mat-header-cell *matHeaderCellDef> Share Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Approved Shares">
-      <th mat-header-cell *matHeaderCellDef> Approved Shares </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Approved Shares" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.totalApprovedShares}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Pending For Approval Shares">
-      <th mat-header-cell *matHeaderCellDef> Pending For Approval Shares </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Pending For Approval Shares" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.totalPendingForApprovalShares}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" |translate}} </th>
       <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
           color="primary" (click)="routeEdit($event)" [routerLink]="['../','shares-accounts', element.id, 'actions', 'Approve']">
@@ -580,28 +580,28 @@
   <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share':'closed'">
 
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" |translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
         {{element.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Share Account">
-      <th mat-header-cell *matHeaderCellDef> Share Account </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Account" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Approved Shares">
-      <th mat-header-cell *matHeaderCellDef> Approved Shares </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Approved Shares" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.totalApprovedShares}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Pending For Approval Shares">
-      <th mat-header-cell *matHeaderCellDef> Pending For Approval Shares </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Pending For Approval Shares" |translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.totalPendingForApprovalShares}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" |translate}} </th>
       <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
@@ -614,13 +614,13 @@
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>Collateral Data</h3>
+        <h3>{{"labels.heading.Collateral Data" |translate}}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary" disabled>
-          View Collaterals
+          {{"labels.buttons.View Collaterals" |translate}}
         </button>
       </div>
     </div>
@@ -629,27 +629,27 @@
   <table mat-table [dataSource]="collaterals">
 
     <ng-container matColumnDef="ID">
-      <th mat-header-cell *matHeaderCellDef>ID</th>
+      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.ID" |translate}}</th>
       <td mat-cell *matCellDef="let element">{{ element.collateralId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Name">
-      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.name" |translate}}</th>
       <td mat-cell *matCellDef="let element">{{ element.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Quantity">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>Quantity</th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{"labels.inputs.Quantity" |translate}}</th>
       <td mat-cell class="r-amount" *matCellDef="let element">{{ element.quantity | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Value">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>Total Value</th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{"labels.inputs.Total Value" |translate}}</th>
       <td mat-cell class="r-amount" *matCellDef="let element">{{ element.basePrice*element.quantity | formatNumber}}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Collateral Value">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>Total Collateral Value</th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{"labels.inputs.Total Collateral Value" |translate}}</th>
       <td mat-cell class="r-amount" *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 | formatNumber}}</td>
     </ng-container>
 
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.html b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
index 54271ef93..848ed388e 100644
--- a/src/app/clients/clients-view/identities-tab/identities-tab.component.html
+++ b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
@@ -1,35 +1,35 @@
 <div class="tab-container mat-typography">
 
-    <h3>Identities</h3>
+    <h3>{{"labels.heading.Identities" |translate}}</h3>
 
     <button mat-raised-button class="f-right" color="primary" (click)="addIdentifier()" *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon> Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon> {{"labels.buttons.Add" |translate}}
     </button>
 
     <table mat-table #identifiersTable [dataSource]="clientIdentities">
 
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> Id </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Id" |translate}} </th>
           <td mat-cell *matCellDef="let identity">{{identity.id}}</td>
         </ng-container>
 
         <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef> type </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" |translate}} </th>
           <td mat-cell *matCellDef="let identity"> {{identity.documentType.name}}</td>
         </ng-container>
 
         <ng-container matColumnDef="documentKey">
-          <th mat-header-cell *matHeaderCellDef> Key </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key" |translate}} </th>
           <td mat-cell *matCellDef="let identity"> {{identity.documentKey}} </td>
         </ng-container>
 
         <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> Description </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" |translate}} </th>
           <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
         </ng-container>
 
         <ng-container matColumnDef="documents">
-          <th mat-header-cell *matHeaderCellDef>Identity Documents </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Identity Documents" |translate}} </th>
           <td mat-cell *matCellDef="let identity">
             <div *ngFor="let document of identity.documents">
               {{document.name}}
@@ -39,14 +39,14 @@
         </ng-container>
 
         <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> Status </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" |translate}} </th>
           <td mat-cell *matCellDef="let identity">
               {{(identity.status==='clientIdentifierStatusType.active')?'active':'inactive'}}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" |translate}} </th>
           <td mat-cell *matCellDef="let identity; let i = index">
             <button class="identity-action-button" mat-raised-button color="primary" (click)="uploadDocument(i,identity.id)" *mifosxHasPermission="'CREATE_DOCUMENT'">
               <fa-icon icon="eye"></fa-icon>
diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index f9d81d7ab..3560f9d9e 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -6,15 +6,15 @@
       </mat-form-field>
     </div>
     <div class="filter-box" *ngIf="existsClientsToFilter">
-      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10">Show Closed Accounts
+      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10">{{"labels.inputs.Show Closed Accounts" | translate}}
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Clients']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Client
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Client" | translate}}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Client
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Client" | translate}}
       </button>
     </div>
   </div>
@@ -25,13 +25,13 @@
 
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
         <td mat-cell *matCellDef="let row" [routerLink]="[row.id,'general']"> {{row.displayName}} </td>
       </ng-container>
 
       <!-- Account no Column -->
       <ng-container matColumnDef="accountNumber">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account No. </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account No" | translate}}. </th>
         <td mat-cell *matCellDef="let row">
           <mifosx-account-number display="left" accountNo="{{row.accountNumber}}"></mifosx-account-number>
         </td>
@@ -39,7 +39,7 @@
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
         <td mat-cell *matCellDef="let row">
           <mifosx-external-identifier display="left" externalId="{{row.externalId}}"></mifosx-external-identifier>
         </td>
@@ -47,7 +47,7 @@
 
       <!-- Status Column -->
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
         <td mat-cell *matCellDef="let row">
           <div [ngClass]="row.status.code | statusLookup">
             <fa-icon icon="stop"></fa-icon>
@@ -59,7 +59,7 @@
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef> Office Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
         <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
       </ng-container>
 
@@ -75,7 +75,7 @@
   <div class="alert" [hidden]="!notExistsClientsToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      No client was found
+      {{"labels.text.No client was found" | translate}}
     </div>
   </div>
 </mat-card>
diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html
index 64efe5358..51472c7de 100644
--- a/src/app/clients/create-client/create-client.component.html
+++ b/src/app/clients/create-client/create-client.component.html
@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="clientGeneralForm">
 
-      <ng-template matStepLabel>GENERAL</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.GENERAL" |translate}}</ng-template>
 
       <mifosx-client-general-step [clientTemplate]="clientTemplate" (legalFormChangeEvent)="legalFormChange($event)"></mifosx-client-general-step>
 
@@ -32,7 +32,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>FAMILY MEMBERS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.FAMILY MEMBERS" |translate}}</ng-template>
 
       <mifosx-client-family-members-step #clientFamily [clientTemplate]="clientTemplate"></mifosx-client-family-members-step>
 
@@ -40,7 +40,7 @@
 
     <mat-step *ngIf="clientTemplate.isAddressEnabled">
 
-      <ng-template matStepLabel>ADDRESS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.ADDRESS" |translate}}</ng-template>
 
       <mifosx-client-address-step #clientAddress [clientTemplate]="clientTemplate"
         [clientAddressFieldConfig]="clientAddressFieldConfig">
@@ -58,7 +58,7 @@
 
     <mat-step *ngIf="areFormvalids()" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" |translate}}</ng-template>
 
       <mifosx-client-preview-step
         [clientTemplate]="clientTemplate"
diff --git a/src/app/clients/edit-client/edit-client.component.html b/src/app/clients/edit-client/edit-client.component.html
index 6f2f902f2..163a03a31 100644
--- a/src/app/clients/edit-client/edit-client.component.html
+++ b/src/app/clients/edit-client/edit-client.component.html
@@ -9,19 +9,19 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeOptions" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editClientForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Legal Form</mat-label>
+            <mat-label>{{"labels.inputs.Legal Form" |translate}}</mat-label>
             <mat-select formControlName="legalFormId">
               <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
                 {{ legalForm.value }}
@@ -30,12 +30,12 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account No</mat-label>
+            <mat-label>{{"labels.inputs.Account No" |translate}}</mat-label>
             <input matInput formControlName="accountNo">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Staff</mat-label>
+            <mat-label>{{"labels.inputs.Staff" |translate}}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                 {{ staff.displayName }}
@@ -47,33 +47,33 @@
             <mat-label>{{ legalFormId === 1 ? 'Name' : 'Entity Name' }}</mat-label>
             <input matInput required formControlName="fullname">
             <mat-error *ngIf="editClientForm.controls.fullname.hasError('required')">
-              Client name is <strong>required</strong>
+              {{"labels.inputs.Client name" |translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('firstname')" fxFlex="48%">
-            <mat-label>First Name</mat-label>
+            <mat-label>{{"labels.inputs.First Name" |translate}}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
-              Client first name is <strong>required</strong>
+              {{"labels.inputs.Client first name" |translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('middlename')" fxFlex="48%">
-            <mat-label>Middle Name</mat-label>
+            <mat-label>{{"labels.inputs.Middle Name" |translate}}</mat-label>
             <input matInput formControlName="middlename">
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('lastname')" fxFlex="48%">
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{"labels.inputs.Last Name" |translate}}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
-              Client last name is <strong>required</strong>
+              {{"labels.inputs.Client last name" |translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="legalFormId === 1" fxFlex="48%">
-            <mat-label>Gender</mat-label>
+            <mat-label>{{"labels.inputs.Gender" |translate}}</mat-label>
             <mat-select formControlName="genderId">
               <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
                 {{ gender.name }}
@@ -92,7 +92,7 @@
             *ngIf="editClientForm.contains('clientNonPersonDetails')">
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Constitution</mat-label>
+              <mat-label>{{"labels.inputs.Constitution" |translate}}</mat-label>
               <mat-select formControlName="constitutionId" required>
                 <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
                   {{ constitution.name }}
@@ -101,7 +101,7 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Main Business Line</mat-label>
+              <mat-label>{{"labels.inputs.Main Business Line" |translate}}</mat-label>
               <mat-select formControlName="mainBusinessLineId">
                 <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
                   {{ business.name }}
@@ -110,39 +110,39 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
-              <mat-label>Incorporation Validity Till Date</mat-label>
+              <mat-label>{{"labels.inputs.Incorporation Validity Till Date" |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
               <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Incorporation No</mat-label>
+              <mat-label>{{"labels.inputs.Incorporation No" |translate}}</mat-label>
               <input matInput formControlName="incorpNumber">
             </mat-form-field>
 
             <mat-form-field fxFlex="98%">
-              <mat-label>Remarks</mat-label>
+              <mat-label>{{"labels.inputs.Remarks" |translate}}</mat-label>
               <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id" |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-checkbox *ngIf="legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
-            Is staff?
+            {{"labels.inputs.Is staff" |translate}}?
           </mat-checkbox>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Mobile No</mat-label>
+            <mat-label>{{"labels.inputs.Mobile No" |translate}}</mat-label>
             <input matInput type="number" formControlName="mobileNo">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Email Address</mat-label>
+            <mat-label>{{"labels.inputs.Email Address" |translate}}</mat-label>
             <input matInput formControlName="emailAddress">
             <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email">
               Email not valid
@@ -150,7 +150,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Client Type</mat-label>
+            <mat-label>{{"labels.inputs.Client Type" |translate}}</mat-label>
             <mat-select formControlName="clientTypeId">
               <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
                 {{ clientType.name }}
@@ -159,7 +159,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Client Classification</mat-label>
+            <mat-label>{{"labels.inputs.Client Classification" |translate}}</mat-label>
             <mat-select formControlName="clientClassificationId">
               <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
                 {{ clientClassification.name }}
@@ -168,17 +168,17 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-            <mat-label>Submitted On</mat-label>
+            <mat-label>{{"labels.inputs.Submitted On" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="editClientForm.controls.submittedOnDate.hasError('required')">
-              Submitted Date is <strong>required</strong>
+              {{"labels.inputs.Submitted Date" |translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="activatedOnDatePicker.open()">
-            <mat-label>Activated On</mat-label>
+            <mat-label>{{"labels.inputs.Activated On" |translate}}</mat-label>
             <input matInput [min]="editClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker"
               formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
@@ -190,8 +190,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">{{"labels.buttons.Submit" |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html b/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html
index 649f42e96..9373d99c0 100644
--- a/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html
+++ b/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html
@@ -4,7 +4,7 @@
 
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-        No repayments and disbursal are available for selected client and meeting date
+      {{"labels.text.No repayments and disbursal" |translate}}
     </div>
 
   </div>
@@ -14,30 +14,30 @@
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
       <mat-form-field fxFlex="98%">
-        <mat-label>Branch Office</mat-label>
+        <mat-label>{{"labels.inputs.Branch Office" |translate}}</mat-label>
         <mat-select formControlName="officeId" required>
           <mat-option *ngFor="let office of officesData" [value]="office.id">
             {{ office.name }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="collectionSheetForm.controls.officeId.hasError('required')">
-          Branch Office is <strong>required</strong>
+          {{"labels.inputs.Branch Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="98%" (click)="transactionDatePicker.open()">
-        <mat-label>Repayment date</mat-label>
+        <mat-label>{{"labels.inputs.Repayment Date" |translate}}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
           formControlName="transactionDate">
         <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #transactionDatePicker></mat-datepicker>
         <mat-error *ngIf="collectionSheetForm.controls.transactionDate.hasError('required')">
-          Repayment Date is <strong>required</strong>
+          {{"labels.inputs.Repayment Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="98%">
-        <mat-label>Staff</mat-label>
+        <mat-label>{{"labels.inputs.Staff" |translate}}</mat-label>
         <mat-select formControlName="staffId">
           <mat-option *ngFor="let loanOfficer of loanOfficerData" [value]="loanOfficer.id">
             {{ loanOfficer.displayName }}
@@ -48,9 +48,9 @@
     </div>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" |translate}}</button>
       <button mat-raised-button color="primary" [disabled]="!collectionSheetForm.valid">
-        <fa-icon icon="search" class="m-r-10"></fa-icon> Collection Sheet
+        <fa-icon icon="search" class="m-r-10"></fa-icon> {{"labels.buttons.Collection Sheet" |translate}}
       </button>
     </mat-card-actions>
 
@@ -66,45 +66,45 @@
 
       <div class="m-b-20">
         <button mat-raised-button color="primary" (click)="isCollapsed = false">
-          Parameters
+          {{"labels.buttons.Parameters" |translate}}
         </button>
       </div>
 
       <ng-container *ngIf="loansDataSource">
 
-        <h2 class="mat-h2">Due Collections</h2>
+        <h2 class="mat-h2">{{"labels.heading.Due Collections" |translate}}</h2>
 
         <table class="mat-elevation-z1" mat-table [dataSource]="loansDataSource" matSort>
 
           <ng-container matColumnDef="loanAccount">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Account# </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Loan Account" |translate}} # </th>
             <td mat-cell *matCellDef="let loan"> {{ loan.accountId }}</td>
           </ng-container>
 
           <ng-container matColumnDef="productName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" |translate}} </th>
             <td mat-cell *matCellDef="let loan"> {{ loan.productShortName }}({{ loan.productId }}) </td>
           </ng-container>
 
           <ng-container matColumnDef="clientName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Client Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Client Name" |translate}} </th>
             <td mat-cell *matCellDef="let loan"> {{ loan.clientName }}({{ loan.clientId }}) </td>
           </ng-container>
 
           <ng-container matColumnDef="totalDue">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Due </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Total Due" |translate}} </th>
             <td mat-cell *matCellDef="let loan"> {{ loan.totalDue }} </td>
           </ng-container>
 
           <ng-container matColumnDef="charges">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Charges </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Charges" |translate}} </th>
             <td mat-cell *matCellDef="let loan"> {{ loan.feeDue }} </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions" |translate}} </th>
             <td mat-cell *matCellDef="let loan; let i = index">
-              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans/accounts', loan, i)">Add Payment</button>
+              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans/accounts', loan, i)">{{"labels.buttons.Add Payment" |translate}}</button>
             </td>
           </ng-container>
 
@@ -119,39 +119,39 @@
 
       <ng-container *ngIf="savingsDataSource">
 
-        <h2 class="mat-h2">Due Savings Collections</h2>
+        <h2 class="mat-h2">{{"labels.inputs.Due Savings Collections" |translate}}</h2>
 
         <table class="mat-elevation-z1" mat-table [dataSource]="savingsDataSource" matSort>
 
           <ng-container matColumnDef="depositAccount">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Deposit Account </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Deposit Account" |translate}} </th>
             <td mat-cell *matCellDef="let saving"> {{ saving.depositAccountType }}</td>
           </ng-container>
 
           <ng-container matColumnDef="savingsAccountNo">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Savings Account # </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Savings Account" |translate}} # </th>
             <td mat-cell *matCellDef="let saving"> {{ saving.accountId }} </td>
           </ng-container>
 
           <ng-container matColumnDef="productName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" |translate}} </th>
             <td mat-cell *matCellDef="let saving"> {{ saving.productName }}({{ saving.productId }}) </td>
           </ng-container>
 
           <ng-container matColumnDef="clientName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Client Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Client Name" |translate}} </th>
             <td mat-cell *matCellDef="let saving"> {{ saving.clientName }}({{ saving.clientId }}) </td>
           </ng-container>
 
           <ng-container matColumnDef="totalDue">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Due </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Total Due" |translate}} </th>
             <td mat-cell *matCellDef="let saving"> {{ saving.dueAmount }} </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions" |translate}} </th>
             <td mat-cell *matCellDef="let saving; let j = index">
-              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('savings', saving, j)">Add Payment</button>
+              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('savings', saving, j)">{{"labels.buttons.Add Payment" |translate}}</button>
             </td>
           </ng-container>
 
@@ -165,8 +165,8 @@
       </ng-container>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" (click)="submit()">{{"labels.buttons.Submit" |translate}}</button>
       </mat-card-actions>
 
     </mat-card>
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 758c96baa..63188047c 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
@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="loansAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS"  |translate}}</ng-template>
 
       <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountTemplate"
         (loansAccountProductTemplate)="setTemplate($event)" #loansAccountDetailsForm>
@@ -33,7 +33,7 @@
 
     <mat-step [stepControl]="loansAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS"  |translate}}</ng-template>
 
       <mifosx-loans-account-terms-step #loanAccountTerms [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate] = "loansAccountTemplate" [collateralOptions]="collateralOptions"
@@ -44,7 +44,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES"  |translate}}</ng-template>
 
       <mifosx-loans-account-charges-step #loanAccountCharges [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
@@ -55,7 +55,7 @@
 
     <mat-step state="repayment" *ngIf="loansAccountFormValid" completed>
 
-      <ng-template matStepLabel>REPAYMENT SCHEDULE</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE"  |translate}}</ng-template>
 
       <mifosx-loans-account-schedule-step #loanAccountSchedule [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" [currencyCode]="currencyCode">
@@ -73,7 +73,7 @@
 
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW"  |translate}}</ng-template>
 
       <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">
diff --git a/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html b/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html
index fd0e49cff..4bffa103d 100644
--- a/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html
+++ b/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html
@@ -1,44 +1,44 @@
-<h1 mat-dialog-title>Add Loan Collateral</h1>
+<h1 mat-dialog-title>{{"labels.heading.Add Loan Collateral"  |translate}}</h1>
 
 <div mat-dialog-content [formGroup]="addCollateralForm" fxLayout="column">
 
   <mat-form-field>
-    <mat-label>Collateral</mat-label>
+    <mat-label>{{"labels.inputs.Collateral"  |translate}}</mat-label>
     <mat-select formControlName="collateral" required>
       <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType" >
         {{ collateralType.name }}
       </mat-option>
     </mat-select>
     <mat-error>
-      Collateral is <strong>required</strong>
+      {{"labels.inputs.Collateral"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Quantity</mat-label>
+    <mat-label>{{"labels.inputs.Quantity"  |translate}}</mat-label>
     <input type="number" [max]="maxQuantity" [min]="0" matInput formControlName="quantity" required>
     <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('required')">
-      Quantity is <strong>required</strong>
+      {{"labels.inputs.Quantity"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
     </mat-error>
     <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('max')">
-      Quantity can not be more than <strong>{{ maxQuantity }}</strong>
+      {{"labels.inputs.Quantity can not be more than"  |translate}} <strong>{{ maxQuantity }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Total Value</mat-label>
+    <mat-label>{{"labels.inputs.Total Value"  |translate}}</mat-label>
     <input type="text" matInput formControlName="totalValue" [disabled]="true">
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Total Collateral Value</mat-label>
+    <mat-label>{{"labels.inputs.Total Collateral Value"  |translate}}</mat-label>
     <input type="text" matInput formControlName="totalCollateralValue" [disabled]="true">
   </mat-form-field>
 
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> Cancel </button>
+  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel"  |translate}} </button>
   <button mat-raised-button color="primary" [mat-dialog-close]="{ data: addCollateralForm }"
     [disabled]="!addCollateralForm.valid || addCollateralForm.pristine">{{ layout.addButtonText }}</button>
 </mat-dialog-actions>
diff --git a/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html b/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html
index c673dff74..647103020 100644
--- a/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html
+++ b/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html
@@ -1,37 +1,37 @@
-<h1 mat-dialog-title>Guarantor Detail</h1>
+<h1 mat-dialog-title>{{"labels.heading.Guarantor Detail"  |translate}}</h1>
 
 <div mat-dialog-content fxLayout="column">
 
   <div fxLayout="row wrap" fxLayout.lt-md="column">
 
     <div fxFlexFill>
-      <span fxFlex="50%">First Name:</span>
+      <span fxFlex="50%">{{"labels.inputs.First Name"  |translate}}:</span>
       <span fxFlex="50%">{{ data.guarantorData.firstname }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">Last Name:</span>
+      <span fxFlex="50%">{{"labels.inputs.Last Name"  |translate}}:</span>
       <span fxFlex="50%">{{ data.guarantorData.lastname }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">Relationship:</span>
+      <span fxFlex="50%">{{"labels.inputs.Relationship"  |translate}}:</span>
       <span fxFlex="50%">{{ data.guarantorData.clientRelationshipType.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">Guarantor Type:</span>
+      <span fxFlex="50%">{{"labels.inputs.Guarantor Type"  |translate}}:</span>
       <span fxFlex="50%">{{ data.guarantorData.guarantorType.value }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">Status:</span>
+      <span fxFlex="50%">{{"labels.inputs.Status"  |translate}}:</span>
       <span fxFlex="50%">
         <span *ngIf="data.guarantorData.status">
-          Active
+          {{"labels.inputs.Active"  |translate}}
         </span>
         <span *ngIf="!data.guarantorData.status">
-          Deleted
+          {{"labels.inputs.Deleted"  |translate}}
         </span></span>
     </div>
 
@@ -40,5 +40,5 @@
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> Cancel </button>
+  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel"  |translate}} </button>
 </mat-dialog-actions>
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 e4f0fb4bf..d0ac48232 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
@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="loansAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS"  |translate}}</ng-template>
 
       <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountAndTemplate"
         (loansAccountProductTemplate)="setTemplate($event)">
@@ -33,7 +33,7 @@
 
     <mat-step [stepControl]="loansAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS"  |translate}}</ng-template>
 
       <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate]="loansAccountAndTemplate" [collateralOptions]="collateralOptions">
@@ -43,7 +43,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES"  |translate}}</ng-template>
 
       <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountAndTemplate"
@@ -54,7 +54,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>REPAYMENT SCHEDULE</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE"  |translate}}</ng-template>
 
       <mifosx-loans-account-schedule-step [loansAccountTemplate]="loansAccountAndTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount"
@@ -65,7 +65,7 @@
 
     <mat-step state="preview" *ngIf="loansAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW"  |translate}}</ng-template>
 
       <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountAndTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">
diff --git a/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html b/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
index 43c8b928d..652935784 100644
--- a/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
+++ b/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="loansAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS"  |translate}}</ng-template>
 
       <mifosx-glim-details-step [loansAccountTemplate]="loansAccountTemplate"
         (loansAccountProductTemplate)="setTemplate($event)" [gsimData]="gsimData">
@@ -33,7 +33,7 @@
 
     <mat-step [stepControl]="loansAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS"  |translate}}</ng-template>
 
       <mifosx-glim-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate] = "loansAccountTemplate">
@@ -43,7 +43,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES"  |translate}}</ng-template>
 
       <mifosx-glim-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
@@ -55,7 +55,7 @@
 
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW"  |translate}}</ng-template>
 
       <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
index 8b31bb7fa..d509a4f5d 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Charge</mat-label>
+      <mat-label>{{"labels.inputs.Charge"  |translate}}</mat-label>
       <mat-select #charge>
         <mat-option *ngFor="let charge of chargeData" [value]="charge">
           {{ charge.name }}
@@ -12,28 +12,28 @@
     <div fxFlex="48%" fxFlexAlign="center">
       <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        Add
+        {{"labels.buttons.Add"  |translate}}
       </button>
     </div>
 
     <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <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> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeCalculationType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount }}
           <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -43,14 +43,14 @@
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
             {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
@@ -61,7 +61,7 @@
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-            N/A
+              {{"labels.inputs.N/A"  |translate}}
           </span>
           <button mat-icon-button color="primary"
             *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
@@ -73,7 +73,7 @@
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
           <button mat-icon-button color="primary"
@@ -85,7 +85,7 @@
       </ng-container>
 
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
             <fa-icon icon="trash"></fa-icon>
@@ -113,22 +113,22 @@
 
         <!-- Position Column -->
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> Client ID </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID"  |translate}} </th>
           <td mat-cell *matCellDef="let element"> {{element.id}} </td>
         </ng-container>
 
         <!-- Name Column -->
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> Client Name </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name"  |translate}} </th>
           <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
         </ng-container>
 
          <!-- Weight Column -->
          <ng-container matColumnDef="purpose">
-          <th mat-header-cell *matHeaderCellDef> Loan Purpose </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Purpose"  |translate}} </th>
           <td mat-cell *matCellDef="let element">
             <mat-form-field>
-                <mat-label>Select Purpose</mat-label>
+                <mat-label>{{"labels.inputs.Select Purpose"  |translate}}</mat-label>
                 <mat-select [(ngModel)]="element.loanPurposeId">
                 <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
                     {{ purpose.name }}
@@ -140,7 +140,7 @@
 
         <!-- Symbol Column -->
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan"  |translate}} </th>
           <td mat-cell *matCellDef="let element">
             <mat-form-field>
                 <input type="number" matInput [(ngModel)]="element.principal">
@@ -160,10 +160,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{"labels.buttons.Previous"  |translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{"labels.buttons.Next"  |translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
index 064ccd847..f0087a4d7 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
@@ -3,19 +3,19 @@
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Product Name</mat-label>
+        <mat-label>{{"labels.inputs.Product Name"  |translate}}</mat-label>
         <mat-select formControlName="productId" required>
           <mat-option *ngFor="let product of productData" [value]="product.id">
             {{ product.name }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Product Name is <strong>required</strong>
+          {{"labels.inputs.Product Name"  |translate}} {{ "labels.commons.is"  |translate}}  <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Loan officer</mat-label>
+        <mat-label>{{"labels.inputs.Loan officer"  |translate}}</mat-label>
         <mat-select formControlName="loanOfficerId">
           <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
             {{ loanOfficer.displayName }}
@@ -25,7 +25,7 @@
 
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Fund</mat-label>
+        <mat-label>{{"labels.inputs.Fund"  |translate}}</mat-label>
         <mat-select formControlName="fundId">
           <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
             {{ fund.name }}
@@ -34,24 +34,24 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
-        <mat-label>Submitted on</mat-label>
+        <mat-label>{{"labels.inputs.Submitted on"  |translate}}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
           formControlName="submittedOnDate">
         <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
         <mat-datepicker #submitPicker></mat-datepicker>
         <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-          Submitted on is <strong>required</strong>
+          {{"labels.inputs.Submitted on"  |translate}} {{ "labels.commons.is"  |translate}}  <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
-        <mat-label>Disbursement on</mat-label>
+        <mat-label>{{"labels.inputs.Disbursement on"  |translate}}</mat-label>
         <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
           formControlName="expectedDisbursementDate">
         <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
         <mat-datepicker #disbursementPicker></mat-datepicker>
         <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-          Disbursement on is <strong>required</strong>
+          {{"labels.inputs.Disbursement on"  |translate}} {{ "labels.commons.is"  |translate}}  <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -59,10 +59,10 @@
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
+      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage"  |translate}}</h3>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Link savings</mat-label>
+        <mat-label>{{"labels.inputs.Link savings"  |translate}}</mat-label>
         <mat-select formControlName="linkAccountId">
           <mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
             {{ savingaccount.accountNumber }}
@@ -77,10 +77,10 @@
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious disabled>
         <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-        Previous
+        {{"labels.buttons.Previous"  |translate}}
       </button>
       <button mat-raised-button matStepperNext>
-        Next
+        {{"labels.buttons.Next"  |translate}}
         <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
       </button>
     </div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
index 9b104af1d..a7ed26a90 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
@@ -1,70 +1,70 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Details</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details"  |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Product:</span>
+      <span fxFlex="40%">{{"labels.inputs.Product"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-      <span fxFlex="40%">Loan officer:</span>
+      <span fxFlex="40%">{{"labels.inputs.Loan officer"  |translate}}:</span>
       <span
         fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-      <span fxFlex="40%">Loan purpose:</span>
+      <span fxFlex="40%">{{"labels.inputs.Loan purpose"  |translate}}:</span>
       <span
         fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.fundId">
-      <span fxFlex="40%">Fund:</span>
+      <span fxFlex="40%">{{"labels.inputs.Fund"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Submitted on:</span>
+      <span fxFlex="40%">{{"labels.inputs.Submitted on"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Disbursement on:</span>
+      <span fxFlex="40%">{{"labels.inputs.Disbursement on"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.externalId">
-      <span fxFlex="40%">External id:</span>
+      <span fxFlex="40%">{{"labels.inputs.External id"  |translate}}:</span>
       <span fxFlex="60%">
         <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
       </span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>Terms</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms"  |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Principal:</span>
+      <span fxFlex="40%">{{"labels.inputs.Principal"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Loan term:</span>
+      <span fxFlex="40%">{{"labels.inputs.Loan term"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
         {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Number of repayments:</span>
+      <span fxFlex="40%">{{"labels.inputs.Number of repayments"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Repaid every:</span>
+      <span fxFlex="40%">{{"labels.inputs.Repaid every"  |translate}}:</span>
       <span fxFlex="60%">{{loansAccount.repaymentEvery}}
         {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
         {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
@@ -72,137 +72,137 @@
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-      <span fxFlex="40%">First repayment on:</span>
+      <span fxFlex="40%">{{"labels.inputs.First repayment on"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-      <span fxFlex="40%">Interest charged from:</span>
+      <span fxFlex="40%">{{"labels.inputs.Interest charged from"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-      <span fxFlex="40%">Nominal interest rate:</span>
+      <span fxFlex="40%">{{"labels.inputs.Nominal interest rate"  |translate}}:</span>
       <span
         fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.interestType">
-      <span fxFlex="40%">Interest method: </span>
+      <span fxFlex="40%">{{"labels.inputs.Interest method"  |translate}}: </span>
       <span fxFlex="60%">{{loansAccount.interestType}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-      <span fxFlex="40%">Is Equal Amortization:</span>
+      <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization"  |translate}}:</span>
       <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Amortization</span>
+      <span fxFlex="40%">{{"labels.inputs.Amortization"  |translate}}</span>
       <span
         fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Interest calculation period: </span>
+      <span fxFlex="40%">{{"labels.inputs.Interest calculation period"  |translate}}: </span>
       <span
         fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
-      <span fxFlex="40%">Calculate interest for exact days in partial period:</span>
+      <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period"  |translate}}:</span>
       <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-      <span fxFlex="40%">Arrears tolerance: </span>
+      <span fxFlex="40%">{{"labels.inputs.Arrears tolerance"  |translate}}: </span>
       <span
         fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-      <span fxFlex="40%">Interest free period: </span>
+      <span fxFlex="40%">{{"labels.inputs.Interest free period"  |translate}}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Repayment strategy: </span>
+      <span fxFlex="40%">{{"labels.inputs.Repayment strategy"  |translate}}: </span>
       <span
         fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>Moratorium</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium"  |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-      <span fxFlex="40%">On principal payment: </span>
+      <span fxFlex="40%">{{"labels.inputs.On principal payment"  |translate}}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-      <span fxFlex="40%">On interest payment: </span>
+      <span fxFlex="40%">{{"labels.inputs.On interest payment"  |translate}}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-      <span fxFlex="40%">On Arrears Aging: </span>
+      <span fxFlex="40%">{{"labels.inputs.On Arrears Aging"  |translate}}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.isTopup">
-      <span fxFlex="40%">Is Topup Loan? </span>
+      <span fxFlex="40%">{{"labels.inputs.Is Topup Loan"  |translate}}? </span>
       <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Recalculate Interest: </span>
+      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest"  |translate}}: </span>
       <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-      <span fxFlex="40%">Days in month: </span>
+      <span fxFlex="40%">{{"labels.inputs.Days in month"  |translate}}: </span>
       <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h3 class="mat-h3" fxFlexFill>Charges</h3>
+      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges"  |translate}}</h3>
 
       <mat-divider fxFlexFill></mat-divider>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <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> Type </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.chargeCalculationType.value }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.amount }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="chargeTimeType">
-          <th mat-header-cell *matHeaderCellDef> Collected On </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.chargeTimeType.value }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="date">
-          <th mat-header-cell *matHeaderCellDef> Date </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
           <td mat-cell *matCellDef="let charge">
             <span
               *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -214,7 +214,7 @@
             <span
               *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                     || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-              N/A
+                    {{"labels.inputs.N/A"  |translate}}
             </span>
           </td>
         </ng-container>
@@ -228,29 +228,29 @@
 
     <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
+      <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges"  |translate}}</h3>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
       <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <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="type">
-          <th mat-header-cell *matHeaderCellDef> Type </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
         </ng-container>
 
         <ng-container matColumnDef="collectedon">
-          <th mat-header-cell *matHeaderCellDef> Collected On </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
         </ng-container>
 
@@ -264,12 +264,12 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{"labels.buttons.Previous"  |translate}}
     </button>
     <button mat-raised-button [routerLink]="['../']">
-      Cancel
+      {{"labels.buttons.Cancel"  |translate}}
     </button>
     <button mat-raised-button color="primary" (click)="submit.emit()">
-      Submit
+      {{"labels.buttons.Submit"  |translate}}
     </button>
   </div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
index defb47bee..c1520f5cb 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
@@ -2,57 +2,57 @@
 
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-      <h4 fxFlex="98%" class="mat-h4">Term Options</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options"  |translate}}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Loan Term</mat-label>
+        <mat-label>{{"labels.inputs.Loan Term"  |translate}}</mat-label>
         <input matInput required formControlName="loanTermFrequency">
         <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
-          Loan Term is <strong>required</strong>
+          {{"labels.inputs.Loan Term"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Frequency</mat-label>
+        <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
         <mat-select required formControlName="loanTermFrequencyType">
           <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
             {{ type.value }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
-          Frequency is <strong>required</strong>
+          {{"labels.inputs.Frequency"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Number of repayments</mat-label>
+        <mat-label>{{"labels.inputs.Number of repayments"  |translate}}</mat-label>
         <input type="number" matInput formControlName="numberOfRepayments">
         <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
-          Number of repayments is <strong>required</strong>
+          {{"labels.inputs.Number of repayments"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
-        <mat-label>First repayment on</mat-label>
+        <mat-label>{{"labels.inputs.First repayment on"  |translate}}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
           formControlName="repaymentsStartingFromDate">
         <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
         <mat-datepicker #repaymentsPicker></mat-datepicker>
       </mat-form-field>
 
-      <h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every"  |translate}}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Repaid every</mat-label>
+        <mat-label>{{"labels.inputs.Repaid every"  |translate}}</mat-label>
         <input matInput required formControlName="repaymentEvery"
           [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
         <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
-          Repaid every is <strong>required</strong>
+          {{"labels.inputs.Repaid every"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Frequency</mat-label>
+        <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
         <mat-select formControlName="repaymentFrequencyType" required
           [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
           <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData"
@@ -63,7 +63,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-        <mat-label>Select On</mat-label>
+        <mat-label>{{"labels.inputs.Select On"  |translate}}</mat-label>
         <mat-select formControlName="repaymentFrequencyNthDayType">
           <mat-option
             *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
@@ -74,7 +74,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-        <mat-label>Select Day</mat-label>
+        <mat-label>{{"labels.inputs.Select Day"  |translate}}</mat-label>
         <mat-select formControlName="repaymentFrequencyDayOfWeekType">
           <mat-option
             *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
@@ -85,7 +85,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
-        <mat-label>Interest charged from</mat-label>
+        <mat-label>{{"labels.inputs.Interest charged from"  |translate}}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
           formControlName="interestChargedFromDate">
         <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
@@ -95,12 +95,12 @@
     <ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Nominal interest rate</mat-label>
+        <mat-label>{{"labels.inputs.Nominal interest rate"  |translate}}</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod">
       </mat-form-field>
 
         <mat-form-field fxFlex="48%">
-          <mat-label>Interest method</mat-label>
+          <mat-label>{{"labels.inputs.Interest method"  |translate}}</mat-label>
           <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
             formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData"
@@ -118,10 +118,10 @@
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious>
         <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-        Previous
+        {{"labels.buttons.Previous"  |translate}}
       </button>
       <button mat-raised-button matStepperNext>
-        Next
+        {{"labels.buttons.Next"  |translate}}
         <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
       </button>
     </div>
diff --git a/src/app/loans/glim-account/glim-account.component.html b/src/app/loans/glim-account/glim-account.component.html
index a717dfbcb..e1cf71f69 100644
--- a/src/app/loans/glim-account/glim-account.component.html
+++ b/src/app/loans/glim-account/glim-account.component.html
@@ -2,38 +2,38 @@
 
   <mat-card-content>
 
-    <h2> GLIM Account Overview</h2>
+    <h2> {{"labels.heading.GLIM Account Overview"  |translate}}</h2>
 
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="loanId">
-        <th mat-header-cell *matHeaderCellDef> Loan Id </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id"  |translate}} </th>
         <td mat-cell *matCellDef="let element">
           {{element.childLoanId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="clientId">
-        <th mat-header-cell *matHeaderCellDef> Client ID </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID"  |translate}} </th>
         <td mat-cell *matCellDef="let element">{{element.clientId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="clientName">
-        <th mat-header-cell *matHeaderCellDef> Client Name</th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name"  |translate}} </th>
         <td mat-cell *matCellDef="let element">{{element.clientName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="loanAccountNumber">
-        <th mat-header-cell *matHeaderCellDef> Loan Account Number</th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account Number"  |translate}} </th>
         <td mat-cell *matCellDef="let element"> {{element.childLoanAccountNo}} </td>
       </ng-container>
 
       <ng-container matColumnDef="clientPrincipalLoan">
-        <th mat-header-cell *matHeaderCellDef> Client Principal Loan </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Principal Loan"  |translate}} </th>
         <td mat-cell *matCellDef="let element" > {{element.childPrincipalAmount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="groupPrincipalLoan">
-        <th mat-header-cell *matHeaderCellDef> Group Principal Loan </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Principal Loan"  |translate}} </th>
         <td mat-cell *matCellDef="let element" > {{element.parentPrincipalAmount}} </td>
       </ng-container>
 
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 eda7942dd..8224bc77c 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
@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{"labels.inputs.Charge"  |translate}}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData" [value]="charge">
         {{ charge.name }}
@@ -12,7 +12,7 @@
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add
+      {{"labels.buttons.Add"  |translate}}
     </button>
   </div>
 
@@ -20,21 +20,21 @@
     [hidden]="chargesDataSource.length === 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <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> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeCalculationType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -44,14 +44,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         <span
           *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -63,7 +63,7 @@
         <span
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                       || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-          N/A
+                      {{"labels.inputs.N/A"  |translate}}
         </span>
         <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
@@ -73,7 +73,7 @@
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
           <fa-icon icon="trash"></fa-icon>
@@ -88,27 +88,27 @@
 
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h4 fxFlex="98%" class="mat-h4">Overdue Charges</h4>
+  <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Overdue Charges"  |translate}}</h4>
 
   <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <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="type">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="collectedon">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
@@ -121,13 +121,13 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{"labels.buttons.Previous"  |translate}}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
-    Next
+    {{"labels.buttons.Next"  |translate}}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    Cancel
+    {{"labels.buttons.Cancel"  |translate}}
   </button>
 </div>
diff --git a/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html b/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
index 2587444a1..39ce39f22 100644
--- a/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
@@ -40,10 +40,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{"labels.buttons.Previous"  |translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{"labels.buttons.Next"  |translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
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 a47d21565..5b0ed69c8 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
@@ -3,20 +3,20 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Product Name</mat-label>
-      <mat-select formControlName="productId" matTooltip="The name of the loan product that the loan account is based upon" required>
+      <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">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Product Name is <strong>required</strong>
+        {{"labels.inputs.Product Name"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loanProductSelected">
-      <mat-label>Loan officer</mat-label>
-      <mat-select formControlName="loanOfficerId" matTooltip="The financial institution representative who has responsibility for, and interacts with, the client/group associated with a loan account">
+      <mat-label>{{"labels.inputs.Loan officer"  |translate}}</mat-label>
+      <mat-select formControlName="loanOfficerId" matTooltip="{{ 'tooltips.Financial institution representative' | translate }}">
         <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
           {{ loanOfficer.displayName }}
         </mat-option>
@@ -27,8 +27,8 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Loan purpose</mat-label>
-      <mat-select formControlName="loanPurposeId" matTooltip="Provides an indication of how the funds provided through the loan will be directed and can be used to group loans with the same purpose for reporting">
+      <mat-label>{{"labels.inputs.Loan purpose"  |translate}}</mat-label>
+      <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate }}">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
           {{ loanPurpose.name }}
         </mat-option>
@@ -36,7 +36,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Fund</mat-label>
+      <mat-label>{{"labels.inputs.Fund"  |translate}}</mat-label>
       <mat-select formControlName="fundId">
         <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
           {{ fund.name }}
@@ -45,38 +45,38 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
-      <mat-label>Submitted on</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" matTooltip="The date the loan account application was received" required
+      <mat-label>{{"labels.inputs.Submitted on"  |translate}}</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" matTooltip="{{ 'tooltips.Date the loan account application' | translate }}" required
         formControlName="submittedOnDate">
       <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
       <mat-datepicker #submitPicker></mat-datepicker>
       <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-        Submitted on is <strong>required</strong>
+        {{"labels.inputs.Submitted on"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
-      <mat-label>Disbursement on</mat-label>
-      <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" matTooltip="The date that the loan account is expected to be disbursed" required
+      <mat-label>{{"labels.inputs.Disbursement on"  |translate}}</mat-label>
+      <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" matTooltip="{{ 'tooltips.Date that the loan account disbursed' | translate }}" required
         formControlName="expectedDisbursementDate">
       <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
       <mat-datepicker #disbursementPicker></mat-datepicker>
       <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-        Disbursement on is <strong>required</strong>
+        {{"labels.inputs.Disbursement on"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>External id</mat-label>
-      <input matInput formControlName="externalId" matTooltip="Provides an external id for the loan account">
+      <mat-label>{{"labels.inputs.External id"  |translate}}</mat-label>
+      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}">
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage"  |translate}}</h3>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Link savings</mat-label>
+      <mat-label>{{"labels.inputs.Link savings"  |translate}}</mat-label>
       <mat-select formControlName="linkAccountId">
         <mat-option *ngFor="let savingaccount of accountLinkingOptions" [value]="savingaccount.id">
           ({{ savingaccount.accountNo }}) {{ savingaccount.productName }}
@@ -85,21 +85,21 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
-      <p>Create standing instructions at disbursement</p>
+      <p>{{"labels.inputs.Create standing instructions at disbursement"  |translate}}</p>
     </mat-checkbox>
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{"labels.buttons.Previous"  |translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{"labels.buttons.Next"  |translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
     <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-      Cancel
+      {{"labels.buttons.Cancel"  |translate}}
     </button>
   </div>
 
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 de649d0d1..f3b4bef07 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
@@ -1,52 +1,52 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details"  |translate}}</h3>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Product:</span>
+    <span fxFlex="40%">{{"labels.inputs.Product"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-    <span fxFlex="40%">Loan officer:</span>
+    <span fxFlex="40%">{{"labels.inputs.Loan officer"  |translate}}:</span>
     <span
       fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-    <span fxFlex="40%">Loan purpose:</span>
+    <span fxFlex="40%">{{"labels.inputs.Loan purpose"  |translate}}:</span>
     <span
       fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.fundId">
-    <span fxFlex="40%">Fund:</span>
+    <span fxFlex="40%">{{"labels.inputs.Fund"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Submitted on:</span>
+    <span fxFlex="40%">{{"labels.inputs.Submitted on"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Disbursement on:</span>
+    <span fxFlex="40%">{{"labels.inputs.Disbursement on"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.externalId">
-    <span fxFlex="40%">External id:</span>
+    <span fxFlex="40%">{{"labels.inputs.External id"  |translate}}:</span>
     <span fxFlex="60%">
       <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms"  |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Principal:</span>
+    <span fxFlex="40%">{{"labels.inputs.Principal"  |translate}}:</span>
     <span fxFlex="60%">
       {{ loansAccount.principalAmount | currency:loansAccountProductTemplate.currency.code:'symbol-narrow':'1.2-2'}}
       <span class="m-l-5">{{loansAccountProductTemplate.currency.code}}</span>
@@ -54,18 +54,18 @@
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Loan term:</span>
+    <span fxFlex="40%">{{"labels.inputs.Loan term"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
       {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Number of repayments:</span>
+    <span fxFlex="40%">{{"labels.inputs.Number of repayments"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Repaid every:</span>
+    <span fxFlex="40%">{{"labels.inputs.Repaid every"  |translate}}:</span>
     <span fxFlex="60%">{{loansAccount.repaymentEvery}}
       {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
       {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
@@ -73,137 +73,137 @@
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-    <span fxFlex="40%">First repayment on:</span>
+    <span fxFlex="40%">{{"labels.inputs.First repayment on"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-    <span fxFlex="40%">Interest charged from:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest charged from"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-    <span fxFlex="40%">Nominal interest rate:</span>
+    <span fxFlex="40%">{{"labels.inputs.Nominal interest rate"  |translate}}:</span>
     <span
       fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestType">
-    <span fxFlex="40%">Interest method: </span>
+    <span fxFlex="40%">{{"labels.inputs.Interest method"  |translate}}: </span>
     <span fxFlex="60%">{{loansAccount.interestType}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-    <span fxFlex="40%">Is Equal Amortization:</span>
+    <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization"  |translate}}:</span>
     <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Amortization</span>
+    <span fxFlex="40%">{{"labels.inputs.Amortization"  |translate}}</span>
     <span
       fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest calculation period: </span>
+    <span fxFlex="40%">{{"labels.inputs.Interest calculation period"  |translate}}: </span>
     <span
       fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
-    <span fxFlex="40%">Calculate interest for exact days in partial period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period"  |translate}}:</span>
     <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-    <span fxFlex="40%">Arrears tolerance: </span>
+    <span fxFlex="40%">{{"labels.inputs.Arrears tolerance"  |translate}}: </span>
     <span
       fxFlex="60%">{{loansAccount.inArrearsTolerance}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-    <span fxFlex="40%">Interest free period: </span>
+    <span fxFlex="40%">{{"labels.inputs.Interest free period"  |translate}}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Repayment strategy: </span>
+    <span fxFlex="40%">{{"labels.inputs.Repayment strategy"  |translate}}: </span>
     <span
       fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Moratorium</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium"  |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-    <span fxFlex="40%">On principal payment: </span>
+    <span fxFlex="40%">{{"labels.inputs.On principal payment"  |translate}}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-    <span fxFlex="40%">On interest payment: </span>
+    <span fxFlex="40%">{{"labels.inputs.On interest payment"  |translate}}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-    <span fxFlex="40%">On Arrears Aging: </span>
+    <span fxFlex="40%">{{"labels.inputs.On Arrears Aging"  |translate}}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.isTopup">
-    <span fxFlex="40%">Is Topup Loan? </span>
+    <span fxFlex="40%">{{"labels.inputs.Is Topup Loan"  |translate}}? </span>
     <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Recalculate Interest: </span>
+    <span fxFlex="40%">{{"labels.inputs.Recalculate Interest"  |translate}}: </span>
     <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-    <span fxFlex="40%">Days in month: </span>
+    <span fxFlex="40%">{{"labels.inputs.Days in month"  |translate}}: </span>
     <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges"  |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <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> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeCalculationType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           <span
             *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -215,7 +215,7 @@
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                   || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-            N/A
+                  {{"labels.inputs.N/A"  |translate}}
           </span>
         </td>
       </ng-container>
@@ -229,29 +229,29 @@
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
+    <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges"  |translate}}</h3>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <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="type">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="collectedon">
-        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
       </ng-container>
 
@@ -265,12 +265,12 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{"labels.buttons.Previous"  |translate}}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    Cancel
+    {{"labels.buttons.Cancel"  |translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    Submit
+    {{"labels.buttons.Submit"  |translate}}
   </button>
 </div>
diff --git a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
index 01dd36559..e33644e76 100644
--- a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
   <a mat-button (click)="showRepaymentInfo()">
-    Repayment Info
+    {{"labels.inputs.Repayment Info"  |translate}}
   </a>
 
   <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"
@@ -13,13 +13,13 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{"labels.buttons.Previous"  |translate}}
   </button>
   <button mat-raised-button matStepperNext>
-    Next
+    {{"labels.buttons.Next"  |translate}}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    Cancel
+    {{"labels.buttons.Cancel"  |translate}}
   </button>
 </div>
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 941540547..8ba9f7336 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
@@ -3,68 +3,68 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Principal {{currencyDisplaySymbol}}</mat-label>
+      <mat-label>{{"labels.inputs.Principal"  |translate}} {{currencyDisplaySymbol}}</mat-label>
       <input type="number" matInput formControlName="principalAmount">
       <mat-error *ngIf="loansAccountTermsForm.controls.principalAmount.hasError('required')">
-        Principal is <strong>required</strong>
+        {{"labels.inputs.Principal"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Term Options <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>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options <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>"  |translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Loan Term</mat-label>
+      <mat-label>{{"labels.inputs.Loan Term"  |translate}}</mat-label>
       <input type="number" matInput required disabled formControlName="loanTermFrequency">
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
-        Loan Term is <strong>required</strong>
+        {{"labels.inputs.Loan Term"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
       <mat-select required formControlName="loanTermFrequencyType">
         <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
           {{ type.value }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
-        Frequency is <strong>required</strong>
+        {{"labels.inputs.Frequency"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <h4 fxFlex="98%" class="mat-h4">Repayments </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Number of repayments</mat-label>
+      <mat-label>{{"labels.inputs.Number of repayments"  |translate}}</mat-label>
       <input type="number" matInput formControlName="numberOfRepayments" matTooltip="Enter the total count of repayments that loan schedule has excluding the down-payment. Example:
       If the loan account has 4 Installments including down-payment then number of repayments is equal to 3">
       <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
-        Number of repayments is <strong>required</strong>
+        {{"labels.inputs.Number of repayments"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
-      <mat-label>First repayment on</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" matTooltip="May be entered to override the date the system would schedule" [matDatepicker]="repaymentsPicker"
+      <mat-label>{{"labels.inputs.First repayment on"  |translate}}</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" matTooltip="{{ 'tooltips.May be entered to override' | translate }}" [matDatepicker]="repaymentsPicker"
         formControlName="repaymentsStartingFromDate">
       <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
       <mat-datepicker #repaymentsPicker></mat-datepicker>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every"  |translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate }}"></i></h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Repaid every</mat-label>
+      <mat-label>{{"labels.inputs.Repaid every"  |translate}}</mat-label>
       <input type="number" matInput required formControlName="repaymentEvery"
       matTooltip="These fields are input to calculating the repayment schedule for a loan account and are used to determine when payments are due.">
       <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
-        Repaid every is <strong>required</strong>
+        {{"labels.inputs.Repaid every"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" disabled required>
         <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
           {{ repaymentFrequencyType.value }}
@@ -73,7 +73,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-      <mat-label>Select On</mat-label>
+      <mat-label>{{"labels.inputs.Select On"  |translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
           [value]="repaymentFrequencyNthDayType.id">
@@ -83,7 +83,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-      <mat-label>Select Day</mat-label>
+      <mat-label>{{"labels.inputs.Select Day"  |translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
           [value]="repaymentFrequencyDayOfWeekType.id">
@@ -93,8 +93,8 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
-      <mat-label>Interest charged from</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker" matTooltip="May be entered to override the date the system would start charging interest"
+      <mat-label>{{"labels.inputs.Interest charged from"  |translate}}</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker" matTooltip="{{ 'tooltips.May be entered to override the date' | translate }}"
         formControlName="interestChargedFromDate">
       <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
       <mat-datepicker #interestPicker></mat-datepicker>
@@ -103,13 +103,13 @@
     <ng-container *ngIf="!loansAccountTemplate?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Nominal interest rate</mat-label>
+        <mat-label>{{"labels.inputs.Nominal interest rate"  |translate}}</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod">
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Interest method</mat-label>
-        <mat-select formControlName="interestType" matTooltip="The Interest method value is input to calculating the payments amount for repayment of the loan.">
+        <mat-label>{{"labels.inputs.Interest method"  |translate}}</mat-label>
+        <mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate }}">
           <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
             {{ interestType.value }}
           </mat-option>
@@ -118,7 +118,7 @@
 
       <mat-checkbox fxFlex="48%" formControlName="isEqualAmortization"
         [checked]="loansAccountTermsData?.isEqualAmortization">
-        <p>Is Equal Amortization</p>
+        <p>{{"labels.inputs.Is Equal Amortization"  |translate}}</p>
       </mat-checkbox>
 
     </ng-container>
@@ -128,7 +128,7 @@
       <div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field fxFlex="48%">
-          <mat-label>Interest Method</mat-label>
+          <mat-label>{{"labels.inputs.Interest Method"  |translate}}</mat-label>
           <mat-select formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
               {{ interestType.value }}
@@ -137,7 +137,7 @@
         </mat-form-field>
 
         <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
-          <p>Is Floating Rate?</p>
+          <p>{{"labels.inputs.Is Floating Rate"  |translate}}?</p>
         </mat-checkbox>
 
       </div>
@@ -145,22 +145,22 @@
     </ng-container>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Amortization</mat-label>
-      <mat-select required matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." formControlName="amortizationType">
+      <mat-label>{{"labels.inputs.Amortization"  |translate}}</mat-label>
+      <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate }}" formControlName="amortizationType">
         <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
           {{ amortizationType.value }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
-        Amortization Type is <strong>required</strong>
+        {{"labels.inputs.Amortization Type"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Interest Calculations</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations"  |translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest calculation period</mat-label>
-      <mat-select formControlName="interestCalculationPeriodType" matTooltip="Daily - Will Calculate the interest on DAILY basis ex: Month of February has 28days and it will calculate interest for 28days, SAME AS REPAYMENT PERIOD- it calculates for the month,that is, 30days.">
+      <mat-label>{{"labels.inputs.Interest calculation period"  |translate}}</mat-label>
+      <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate }}">
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
           {{ interestCalculationPeriodType.value }}
@@ -168,62 +168,62 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion" matTooltip="To be used with SAME AS REPAYMENT PERIOD- for  calculating exact interest with partial period  ex: Interest charged from is 5th of April , Principal is 10000 and interest is 1% per month then the interest will be (10000 * 1%)* (25/30) , it calculates for the month first then calculates exact periods between start date and end date(can be a decimal)">
-      <p>Calculate interest for exact days in partial period</p>
+    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion" matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate }}">
+      <p>{{"labels.inputs.Calculate interest for exact days in partial period"  |translate}}</p>
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Arrears tolerance {{currencyDisplaySymbol}}</mat-label>
-      <input matInput type="number" formControlName="inArrearsTolerance" matTooltip="With 'Arrears tolerance' you can specify a tolerance amount and if the loan is behind (in arrears), but within the tolerance, it won't be classified as 'in arrears' and part of the portfolio at risk.">
+      <mat-label>{{"labels.inputs.Arrears tolerance"  |translate}} {{currencyDisplaySymbol}}</mat-label>
+      <input matInput type="number" formControlName="inArrearsTolerance" matTooltip="{{ 'tooltips.With Arrears tolerance' | translate }}">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest free period</mat-label>
-      <input matInput formControlName="graceOnInterestCharged" matTooltip="If the Interest Free Period is '4' and the client's Repayment Frequency is every week, then for the first four weeks the client need not to pay interest, he has to pay principle due for that week only.">
+      <mat-label>{{"labels.inputs.Interest free period"  |translate}}</mat-label>
+      <input matInput formControlName="graceOnInterestCharged" matTooltip="{{ 'tooltips.If the Interest Free Period' | translate }}">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Repayment strategy</mat-label>
-      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid.">
+      <mat-label>{{"labels.inputs.Repayment strategy"  |translate}}</mat-label>
+      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate }}">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
           {{ transactionProcessingStrategy.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
-        Repayment Strategy is <strong>required</strong>
+        {{"labels.inputs.Repayment Strategy"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Moratorium <i class="fas fa-question" matTooltip="The moratorium information will default from the loan product settings, but can be changed for this loan account"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium"  |translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate }}"></i></h4>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>Grace on principal payment</mat-label>
+      <mat-label>{{"labels.inputs.Grace on principal payment"  |translate}}</mat-label>
       <input type="number" matInput formControlName="graceOnPrincipalPayment">
     </mat-form-field>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>Grace on interest payment</mat-label>
+      <mat-label>{{"labels.inputs.Grace on interest payment"  |translate}}</mat-label>
       <input type="number" matInput formControlName="graceOnInterestPayment">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>On arrears ageing</mat-label>
+      <mat-label>{{"labels.inputs.On arrears ageing"  |translate}}</mat-label>
       <input type="number" matInput formControlName="graceOnArrearsAgeing">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
-      <mat-label>Installment Amount</mat-label>
+      <mat-label>{{"labels.inputs.Installment Amount"  |translate}}</mat-label>
       <input type="number" matInput formControlName="fixedEmiAmount">
     </mat-form-field>
 
     <ng-container *ngIf="loansAccountTermsData?.canUseForTopup">
 
       <mat-checkbox fxFlex="48%" formControlName="isTopup">
-        <p>Is Topup Loan?</p>
+        <p>{{"labels.inputs.Is Topup Loan"  |translate}}?</p>
       </mat-checkbox>
 
       <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.isTopup.value">
-        <mat-label>Loan closed with Topup</mat-label>
+        <mat-label>{{"labels.inputs.Loan closed with Topup"  |translate}}</mat-label>
         <mat-select formControlName="loanIdToClose">
           <mat-option *ngFor="let clientActiveLoan of clientActiveLoanData" [value]="clientActiveLoan.id">
             {{ clientActiveLoan.accountNo }}
@@ -236,24 +236,24 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Recalculate Interest</span>
+      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest"  |translate}}</span>
       <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <span fxFlex="40%">Days in year</span>
+      <span fxFlex="40%">{{"labels.inputs.Days in year"  |translate}}</span>
       <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value}}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">Advance payments adjustment type</span>
+        <span fxFlex="40%">{{"labels.inputs.Advance payments adjustment type"  |translate}}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
       </div>
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">Days in month</span>
+        <span fxFlex="40%">{{"labels.inputs.Days in month"  |translate}}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value }}</span>
       </div>
 
@@ -262,13 +262,13 @@
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
 
       <div fxFlexFill>
-        <span fxFlex="40%">Interest recalculation compounding on</span>
+        <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on"  |translate}}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
           }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">Frequency Interval for recalculation</span>
+        <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation"  |translate}}</span>
         <span fxFlex="60%">
           <span>{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
           <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
@@ -289,16 +289,16 @@
 
     <div fxFlexFill
       *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled && loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id != 1">
-      <span fxFlex="40%">Frequency Interval for recalculation</span>
+      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation"  |translate}}</span>
       <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
     </div>
 
     <ng-container *ngIf="multiDisburseLoan">
       <mat-divider fxFlex="98%"></mat-divider>
       <div fxFlexFill *ngIf="allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">Loan Tranche Details</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details"  |translate}}</h4>
         <mat-form-field fxFlex="48%">
-          <mat-label>Maximum allowed outstanding balance</mat-label>
+          <mat-label>{{"labels.inputs.Maximum allowed outstanding balance"  |translate}}</mat-label>
           <input matInput required formControlName="maxOutstandingLoanBalance">
         </mat-form-field>
         <span fxFlex>
@@ -309,28 +309,28 @@
         </span>
       </div>
       <div fxFlexFill *ngIf="!allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">Loan Tranche Details are not allowed for this Loan Product</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details are not allowed for this Loan Product"  |translate}}</h4>
       </div>
 
       <table mat-table [dataSource]="disbursementDataSource" [hidden]="disbursementDataSource.length === 0">
 
         <ng-container matColumnDef="expectedDisbursementDate">
-          <th mat-header-cell *matHeaderCellDef> Eexpected Disbursement Date </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Eexpected Disbursement Date"  |translate}} </th>
           <td mat-cell *matCellDef="let row">
             {{ row.expectedDisbursementDate | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="principal">
-          <th mat-header-cell *matHeaderCellDef> Principal </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal"  |translate}} </th>
           <td mat-cell *matCellDef="let row">
             {{ row.principal }} </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
           <td mat-cell *matCellDef="let row; let rowIndex = index">
             <button type="button" mat-icon-button color="warn" (click)="removeDisbursementDataEntry(rowIndex)"
-              matTooltip="Delete" matTooltipPosition="left">
+              matTooltip="{{ 'tooltips.Delete' | translate }}" matTooltipPosition="left">
               <fa-icon icon="trash"></fa-icon>
             </button>
           </td>
@@ -346,7 +346,7 @@
       *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled  && loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
 
       <div fxFlexFill>
-        <span fxFlex="40%">Frequency for compounding</span>
+        <span fxFlex="40%">{{"labels.inputs.Frequency for compounding"  |translate}}</span>
         <span fxFlex="60%">{{
           loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
           <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
@@ -369,7 +369,7 @@
 
     <div fxFlexFill
       *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled && loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
-      <span fxFlex="40%">Frequency Interval for compounding</span>
+      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for compounding"  |translate}}</span>
       <span fxFlex="60%">{{
         loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
     </div>
@@ -378,13 +378,13 @@
 
     <div fxFlex="50%">
       <div fxLayout="column" fxFlex="50%" class="table_name">
-        <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Collaterals Data"  |translate}}</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" class="m-r-10"></fa-icon>Add
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add"  |translate}}
           </button>
         </div>
       </div>
@@ -392,27 +392,27 @@
     <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
 
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef> Quantity </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Quantity"  |translate}} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="totalValue">
-        <th mat-header-cell *matHeaderCellDef> Total Value </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Value"  |translate}} </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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Collateral Value"  |translate}} </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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </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>
@@ -428,14 +428,14 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{"labels.buttons.Previous"  |translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{"labels.buttons.Next"  |translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
     <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-      Cancel
+      {{"labels.buttons.Cancel"  |translate}}
     </button>
   </div>
 
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 ada1a99c8..7473ddc57 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
@@ -3,12 +3,12 @@
     <div fxLayout="row wrap" fxLayout.lt-md="column">
 
         <div fxFlexFill>
-            <span fxFlex="50%">Repayment Strategy:</span>
+            <span fxFlex="50%">{{"labels.inputs.Repayment Strategy"  |translate}}:</span>
             <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName }}</span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%">Repayments:</span>
+            <span fxFlex="50%">{{"labels.inputs.Repayments"  |translate}}:</span>
             <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value}}
             <span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0">
               &nbsp;on&nbsp;{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value}}
@@ -17,32 +17,32 @@
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Amortization </span>
+            <span fxFlex="50%"> {{"labels.inputs.Amortization"  |translate}} </span>
             <span fxFlex="50%"> {{loanDetails.amortizationType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Equal Amortization </span>
+            <span fxFlex="50%"> {{"labels.inputs.Equal Amortization"  |translate}} </span>
             <span fxFlex="50%"> {{loanDetails.isEqualAmortization | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Interest </span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest"  |translate}} </span>
             <span fxFlex="50%"> {{loanDetails.annualInterestRate}} per annum ({{loanDetails.interestRatePerPeriod}}%&nbsp; {{loanDetails.interestRateFrequencyType.value}}) - {{loanDetails.interestType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Grace: On Principal Payment</span>
+            <span fxFlex="50%"> {{"labels.inputs.Grace: On Principal Payment"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnPrincipalPayment}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Grace: On Interest Payment</span>
+            <span fxFlex="50%"> {{"labels.inputs.Grace: On Interest Payment"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnInterestPayment}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Grace on Arrears Ageing</span>
+            <span fxFlex="50%"> {{"labels.inputs.Grace on Arrears Ageing"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnArrearsAgeing}} </span>
         </div>
 
@@ -57,107 +57,107 @@
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Interest Free Period</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Free Period"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnInterestCharged}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Interest Calculation Period</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Allow Partial Interest Calculation with same as repayment</span>
+            <span fxFlex="50%"> {{"labels.inputs.Allow Partial Interest Calculation with same as repayment"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.allowPartialPeriodInterestCalcualtion}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Interest Type</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Type"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.interestType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Submitted on</span>
+            <span fxFlex="50%"> {{"labels.inputs.Submitted on"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.submittedOnDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Approved on</span>
+            <span fxFlex="50%"> {{"labels.inputs.Approved on"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.approvedOnDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Disbursed on</span>
+            <span fxFlex="50%"> {{"labels.inputs.Disbursed on"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Matures on</span>
+            <span fxFlex="50%"> {{"labels.inputs.Matures on"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.expectedMaturityDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">
-            <span fxFlex="50%"> Fixed EMI amount</span>
+            <span fxFlex="50%"> {{"labels.inputs.Fixed EMI amount"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.fixedEmiAmount | formatNumber}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> Is Topup Loan?</span>
+            <span fxFlex="50%"> {{"labels.inputs.Is Topup Loan"  |translate}}?</span>
             <span fxFlex="50%"> {{loanDetails.isTopup | yesNo}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> Loan closed with Topup </span>
+            <span fxFlex="50%"> {{"labels.inputs.Loan closed with Topup"  |translate}} </span>
             <span fxFlex="50%"> <a href="#">{{loanDetails.closureLoanAccountNo}}</a> </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> Topup closure amount</span>
+            <span fxFlex="50%"> {{"labels.inputs.Topup closure amount"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.topupAmount| formatNumber}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Recalculate Interest based on new terms</span>
+            <span fxFlex="50%"> {{"labels.inputs.Recalculate Interest based on new terms"  |translate}}</span>
             <span fxFlex="50%">  {{loanDetails.isInterestRecalculationEnabled | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Days in year</span>
+            <span fxFlex="50%"> {{"labels.inputs.Days in year"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.daysInYearType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> Days in month</span>
+            <span fxFlex="50%"> {{"labels.inputs.Days in month"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.daysInMonthType.value }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> Interest recalculation compounding on</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest recalculation compounding on"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> Advance payments adjustment type</span>
+            <span fxFlex="50%"> {{"labels.inputs.Advance payments adjustment type"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> Frequency for recalculate Outstanding Principal</span>
+            <span fxFlex="50%"> {{"labels.inputs.Frequency for recalculate Outstanding Principal"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.calendarData.humanReadable}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled && loanDetails.interestRecalculationData.interestRecalculationCompoundingType.id !=0">
-            <span fxFlex="50%"> Frequency for compounding</span>
+            <span fxFlex="50%"> {{"labels.inputs.Frequency for compounding"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.compoundingCalendarData.humanReadable}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-            <span fxFlex="50%"> Variable Installments Allowed</span>
+            <span fxFlex="50%"> {{"labels.inputs.Variable Installments Allowed"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.isVariableInstallmentsAllowed | yesNo}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-            <span fxFlex="50%"> Gap between Installments:(Min</span>
+            <span fxFlex="50%"> {{"labels.inputs.Gap between Installments"  |translate}}</span>
             <span fxFlex="50%"> {{loanDetails.minimumGap}}&nbsp;Days&nbsp;, Max:{{loanDetails.maximumGap}}&nbsp;Days) </span>
         </div>
 
diff --git a/src/app/loans/loans-view/charges-tab/charges-tab.component.html b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
index 85609c275..bd545eae6 100644
--- a/src/app/loans/loans-view/charges-tab/charges-tab.component.html
+++ b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
@@ -3,23 +3,28 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="feepenalty">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Fee/Penalty </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Fee/Penalty"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
-        <span *ngIf="charge.penalty">Penalty</span>
-        <span *ngIf="!charge.penalty">Fee</span>
+        <span *ngIf="charge.penalty">{{"labels.inputs.Penalty"  |translate}}</span>
+        <span *ngIf="!charge.penalty">{{"labels.inputs.Fee"  |translate}}</span>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="paymentdueat">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Payment due at </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Payment due at"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
+    <ng-container matColumnDef="submittedDate">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Submitted On"  |translate}} </th>
+      <td mat-cell *matCellDef="let charge"> {{ charge.submittedOnDate | dateFormat }} </td>
+    </ng-container>
+
     <ng-container matColumnDef="dueDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header [hide]="useDueDate">
         <span *ngIf="useDueDate"> Due as of </span>
@@ -32,58 +37,58 @@
     </ng-container>
 
     <ng-container matColumnDef="calculationtype">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Calculation Type </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Calculation Type"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Due"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge">  {{ charge.amount |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Paid"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.amountPaid |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="waived">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Waived"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.amountWaived |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Outstanding"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{charge.amountOutstanding |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Actions </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell class="center" *matCellDef="let charge">
         <span *ngIf="status === 'Submitted and pending approval'">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
             (click)="routeEdit($event); editCharge(charge)">
             <i class="fa fa-pencil"></i>
           </button>
-          <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
+          <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
             (click)="routeEdit($event); deleteCharge(charge.id)">
             <i class="fa fa-trash"></i>
           </button>
         </span>
-        <button class="account-action-button" mat-raised-button color="accent" matTooltip="Adjust Charge"
+        <button class="account-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Adjust Charge' | translate }}"
           *ngIf="!charge.paid && status=='Active'"
           (click)="routeEdit($event); adjustCharge(charge.id)">
           <i class="fa fa-pencil"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
           *ngIf="charge.chargePayable && !charge.paid && status=='Active'"
           (click)="routeEdit($event); payCharge(charge.id)">
           <i class="fa fa-dollar"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
           *ngIf="!charge.actionFlag" (click)="routeEdit($event); waiveCharge(charge.id)">
           <i class="fa fa-flag"></i>
         </button>
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
index 65d3fe03c..36215eee3 100644
--- a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
@@ -1,28 +1,99 @@
 <div class="tab-container mat-typography">
   <div fxFlexFill *ngIf="existActiveTransfer">
-    <h3>Active Asset Transfer</h3>
-    <mifosx-external-asset-transfer [transferData]="activeTransferData"></mifosx-external-asset-transfer>
+    <h3>{{"labels.heading.Active Asset Transfer"  |translate}}</h3>
+    <div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
+      <table>
+        <tbody>
+          <tr>
+            <td fxFlex="25%">
+              <b>{{"labels.inputs.Status"  |translate}} :</b>
+            </td>
+            <td fxFlex="25%" class="left">
+              <div [ngClass]="itemStatus(activeTransferData.status)">
+                <fa-icon icon="stop"></fa-icon>
+                <span class="m-l-10 status">{{activeTransferData.status}}</span>
+              </div>
+            </td>
+            <td fxFlex="25%">
+              <b>{{"labels.inputs.Owner External Id"  |translate}} :</b>
+            </td>
+            <td fxFlex="25%" class="left">
+              <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
+            </td>
+          </tr>
+          <tr>
+            <td fxFlex="25%">
+              <b>{{"labels.inputs.Settlement Date"  |translate}} :</b>
+            </td>
+            <td fxFlex="25%" class="left">
+              {{activeTransferData.settlementDate | dateFormat}}
+            </td>
+            <td fxFlex="25%">
+              <b>{{"labels.inputs.Effective Date"  |translate}} :</b>
+            </td>
+            <td fxFlex="25%" class="left">
+              {{activeTransferData.effectiveFrom | dateFormat}}
+            </td>
+          </tr>
+          <tr>
+            <td fxFlex="25%">
+              <b>{{"labels.inputs.Details"  |translate}} :</b>
+            </td>
+            <td fxFlex="75%" class="left">
+              <table>
+                <tbody>
+                  <tr>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Principal Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | formatNumber}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Interest Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | formatNumber}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Fees Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Penalties Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | formatNumber}}</td>
+                  </tr>
+                  <tr>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Overpaid"  |translate}} :</b></td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 
   <div fxLayout="row" fxLayoutAlign="start center">
 
-    <h3 fxFlex="90%">External Asset Owner</h3>
+    <h3 fxFlex="90%">{{"labels.heading.External Asset Owner"  |translate}}</h3>
 
     <div fxFlex="10%" *ngIf="canBeSold()" >
       <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Sell Loan
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Sale Loan"  |translate}}
       </button>
     </div>
 
     <div fxFlex="10%" *ngIf="canBeCancelled()" >
       <button mat-raised-button class="f-right" color="warn" (click)="cancelSaleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>Cancel Sell Loan
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{"labels.buttons.Cancel Sale Loan"  |translate}}
       </button>
     </div>
 
     <div fxFlex="10%" *ngIf="canBeBuyed()" >
       <button mat-raised-button class="f-right" color="primary" (click)="buyBackLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Buy Back Loan
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Buy Back Loan"  |translate}}
       </button>
     </div>
   </div>
@@ -30,7 +101,7 @@
   <table mat-table mat-sort [dataSource]="loanTransfersData" *ngIf="loanTransfersData.length>0">
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <div [ngClass]="itemStatus(item.status)">
           <fa-icon icon="stop"></fa-icon>
@@ -42,38 +113,38 @@
     </ng-container>
 
     <ng-container matColumnDef="effectiveFrom">
-      <th mat-header-cell *matHeaderCellDef> Effective From </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Effective From"  |translate}} </th>
       <td mat-cell *matCellDef="let item"> {{ item.effectiveFrom | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="ownerExternalId">
-      <th mat-header-cell *matHeaderCellDef> Owner External Id </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Owner External Id"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <mifosx-external-identifier externalId="{{item.owner.externalId}}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="transferExternalId">
-      <th mat-header-cell *matHeaderCellDef> Transfer External Id </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transfer External Id"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <mifosx-external-identifier externalId="{{item.transferExternalId}}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="settlementDate">
-      <th mat-header-cell *matHeaderCellDef> Settlement Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Settlement Date"  |translate}} </th>
       <td mat-cell *matCellDef="let item"> {{ item.settlementDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="purchasePriceRatio">
-      <th mat-header-cell *matHeaderCellDef> Purchase Price Ratio </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Purchase Price Ratio"  |translate}} </th>
       <td mat-cell *matCellDef="let item"> {{ item.purchasePriceRatio | number }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell *matCellDef="let item" class="center td-min-space">
-        <button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="View Journal Entries"
+        <button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate }}"
           matTooltipPosition="left" (click)="routeJournalEntry($event)" [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]">
           <i class="fa fa-arrow-circle-right"></i>
         </button>
diff --git a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
index 15c4e4b96..e8fd2b95c 100644
--- a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
+++ b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
@@ -3,12 +3,12 @@
   <table mat-table [dataSource]="interestRateData">
 
     <ng-container matColumnDef="fromDate">
-      <th mat-header-cell *matHeaderCellDef> From Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Date"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.fromDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="interestRate">
-      <th mat-header-cell *matHeaderCellDef> Interest Rate </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest Rate"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.effectiveInterestRate }} </td>
     </ng-container>
 
diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.html b/src/app/loans/loans-view/general-tab/general-tab.component.html
index a6e162a99..92446f8ce 100644
--- a/src/app/loans/loans-view/general-tab/general-tab.component.html
+++ b/src/app/loans/loans-view/general-tab/general-tab.component.html
@@ -1,19 +1,19 @@
 <div class="tab-container mat-typography">
 
   <ng-container *ngIf="loanDetails.summary">
-    <h3>Performance History</h3>
+    <h3>{{"labels.heading.Performance History"  |translate}}</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
       <table>
         <tbody>
           <tr>
             <td fxFlex="25%">
-              <b>Number of Repayments :</b>
+              <b>{{"labels.inputs.Number of Repayments"  |translate}} :</b>
             </td>
             <td fxFlex="25%" class="left">
               {{loanDetails?.numberOfRepayments | formatNumber}}
             </td>
             <td fxFlex="25%">
-              <b>Maturity Date :</b>
+              <b>{{"labels.inputs.Maturity Date"  |translate}} :</b>
             </td>
             <td fxFlex="25%" class="left">
               {{loanDetails?.timeline.expectedMaturityDate | dateFormat}}
@@ -26,7 +26,7 @@
 
   <div *ngIf="loanDetails.summary">
 
-    <h3> Loan Summary </h3>
+    <h3> {{"labels.heading.Loan Summary"  |translate}} </h3>
 
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="Empty">
@@ -35,37 +35,37 @@
       </ng-container>
 
       <ng-container matColumnDef="Original">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Original </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Original"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.original | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Paid">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Paid </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid"  |translate}} </th>
         <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.paid | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Adjustments">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Credit Adjustments </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit Adjustments"  |translate}} </th>
         <td mat-cell class="r-amount amount-plus" *matCellDef="let ele"> {{ ele.adjustment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived"  |translate}} </th>
         <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.waived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Written Off">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Written Off </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Written Off"  |translate}} </th>
         <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.writtenOff | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Outstanding">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.outstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Over Due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Over Due </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Over Due"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
@@ -77,29 +77,29 @@
 
   <div *ngIf="loanDetails.summary">
 
-    <h3> Loan Details</h3>
+    <h3> {{"labels.heading.Loan Details"  |translate}} </h3>
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef> Key </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key"  |translate}} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
-        <th mat-header-cell *matHeaderCellDef> Value </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value"  |translate}} </th>
         <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> Not Available </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available"  |translate}} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Purpose'">
             <span *ngIf="loanDetails.loanPurposeName"> {{loanDetails.loanPurposeName}} </span>
-            <span *ngIf="!loanDetails.loanPurposeName"> Not Available </span>
+            <span *ngIf="!loanDetails.loanPurposeName"> {{"labels.inputs.Not Available"  |translate}} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> Unassigned </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned"  |translate}} </span>
             <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
               <span *ngIf="loanDetails.loanOfficerName">
                     <!-- <a ng-click="clickEvent('unassignloanofficer', loanDetails.id)" *mifosxHasPermission = "'REMOVELOANOFFICER_LOAN'"><i
@@ -116,7 +116,7 @@
             <span *ngIf="loanDetails.externalId">
               <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> Not Available </span>
+            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available"  |translate}} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Proposed Amount' || ele.key === 'Approved Amount' || ele.key === 'Disburse Amount'">
@@ -134,24 +134,24 @@
 
   <div *ngIf="!loanDetails.summary">
 
-    <h3> Loan Details </h3>
+    <h3> {{"labels.heading.Loan Details"  |translate}} </h3>
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef> Key </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key"  |translate}} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
-        <th mat-header-cell *matHeaderCellDef> Value </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value"  |translate}} </th>
         <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> Not Available </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available"  |translate}} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> Unassigned </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned"  |translate}} </span>
             <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
               <span *ngIf="loanDetails.loanOfficerName">
                     <!-- <a ng-click="clickEvent('unassignloanofficer', loanDetails.id)" *mifosxHasPermission = "'REMOVELOANOFFICER_LOAN'"><i
@@ -168,7 +168,7 @@
             <span *ngIf="loanDetails.externalId">
               <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> Not Available </span>
+            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available"  |translate}} </span>
           </ng-container>
 
         </td>
@@ -181,38 +181,38 @@
   </div>
 
   <div *ngIf="!loanDetails.summary">
-    <h3> Loan Purpose </h3>
+    <h3> {{"labels.heading.Loan Purpose"  |translate}} </h3>
     <div class="container">
       <div fxLayout="row wrap" fxLayout.lt-md="column">
 
         <div fxFlexFill>
-            <span fxFlex="50%">Loan Purpose:</span>
+            <span fxFlex="50%">{{"labels.inputs.Loan Purpose"  |translate}}:</span>
             <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
               {{ loanDetails.loanPurposeName }}
             </span>
             <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
-              Not Provided
+              {{"labels.inputs.Not Provided"  |translate}}
             </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">Proposed Amount:</span>
+          <span fxFlex="50%">{{"labels.inputs.Proposed Amount"  |translate}}:</span>
           <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
         </div>
 
         <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
-          <span fxFlex="50%">Approved Amount:</span>
+          <span fxFlex="50%">{{"labels.inputs.Approved Amount"  |translate}}:</span>
           <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
-          <span fxFlex="50%">Disburse Amount:</span>
+          <span fxFlex="50%">{{"labels.inputs.Disburse Amount"  |translate}}:</span>
           <span fxFlex="50%">{{ loanDetails.principal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">Arrears By:</span>
-          <span fxFlex="50%"> Not Provided</span>
+          <span fxFlex="50%">{{"labels.inputs.Arrears By"  |translate}}:</span>
+          <span fxFlex="50%">{{"labels.inputs.Not Provided"  |translate}}</span>
         </div>
 
       </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
index 6947f6be0..694dd1a3e 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Collateral Type</mat-label>
+            <mat-label>{{"labels.inputs.Collateral Type"  |translate}}</mat-label>
             <mat-select required formControlName="collateralTypeId">
               <mat-option *ngFor="let collateral of dataObject.allowedCollateralTypes" [value]="collateral.id">
                 {{ collateral.name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
-              Collateral type <strong>required</strong>
+              {{"labels.inputs.Collateral type"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Value</mat-label>
+            <mat-label>{{"labels.inputs.Value"  |translate}}</mat-label>
             <input matInput required formControlName="value">
             <mat-error *ngIf="collateralForm.controls.value.hasError('required')">
-              Value is <strong>required</strong>
+              {{"labels.inputs.Value"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description"  |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -36,9 +36,9 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
-            *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
+            *mifosxHasPermission="'CREATE_COLLATERAL'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html b/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html
index 83312a1aa..49f0c9a60 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html
@@ -8,52 +8,52 @@
 
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>Charge</mat-label>
+            <mat-label>{{"labels.inputs.Charge"  |translate}}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
                 {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
-              Charge is <strong>required</strong>
+              {{"labels.inputs.Charge"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Amount</mat-label>
+            <mat-label>{{"labels.inputs.Amount"  |translate}}</mat-label>
             <input type="number" required matInput formControlName="amount" />
             <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
-              Amount is <strong>required</strong>
+              {{"labels.inputs.Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Charge Calculation</mat-label>
+            <mat-label>{{"labels.inputs.Charge Calculation"  |translate}}</mat-label>
             <input matInput formControlName="chargeCalculation" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Charge Time</mat-label>
+            <mat-label>{{"labels.inputs.Charge Time"  |translate}}</mat-label>
             <input matInput formControlName="chargeTime" />
           </mat-form-field>
 
           <mat-form-field *ngIf="loanChargeForm.controls['dueDate']" (click)="dueDatePicker.open()">
-            <mat-label>Due On</mat-label>
+            <mat-label>{{"labels.inputs.Due On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
               formControlName="dueDate">
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
             <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
-              Due Date is <strong>required</strong>
+              {{"labels.inputs.Due Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
-            *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
+            *mifosxHasPermission="'CREATE_LOANCHARGE'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html b/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html
index fcef66fad..82be1780e 100644
--- a/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html
@@ -9,22 +9,22 @@
         <div fxLayout="column">
 
           <mat-form-field appearance="fill">
-            <mat-label>Amount</mat-label>
+            <mat-label>{{"labels.inputs.Amount"  |translate}}</mat-label>
             <span matTextSuffix class="m-l-10">{{ loanDetailsData.currency.code }}</span>
             <span fxFlex="auto"></span>
             <input type="number" matInput required class="right-input" formControlName="amount">
             <mat-error *ngIf="adjustLoanChargeForm.controls.amount.hasError('required')">
-              Amount <strong>is required</strong>
+              {{"labels.inputs.Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -36,7 +36,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">Show Payment Details</span>
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -44,42 +44,42 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label> {{"labels.inputs.Account"  |translate}} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque"  |translate}} #</mat-label>
               <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code"  |translate}}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept"  |translate}} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label>{{"labels.inputs.Bank"  |translate}} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../..']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../..']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!adjustLoanChargeForm.valid"
-            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'">Submit</button>
+            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
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 1e84d4999..56d95d7bb 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
@@ -9,18 +9,18 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="approvedDatePicker.open()">
-            <mat-label>Approved On</mat-label>
+            <mat-label>{{"labels.inputs.Approved On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="approvedDatePicker" required
               formControlName="approvedOnDate">
             <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedDatePicker></mat-datepicker>
             <mat-error *ngIf="approveLoanForm.controls.approvedOnDate.hasError('required')">
-              Approved Date <strong>is required</strong>
+              {{"labels.inputs.Approved Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="disbursementDatePicker.open()">
-            <mat-label>Expected disbursement on</mat-label>
+            <mat-label>{{"labels.inputs.Expected disbursement on"  |translate}}</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="disbursementDatePicker"
               formControlName="expectedDisbursementDate">
             <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
@@ -28,29 +28,29 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Approved Amount</mat-label>
+            <mat-label>{{"labels.inputs.Approved Amount"  |translate}}</mat-label>
             <input matInput type="number" formControlName="approvedLoanAmount">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput type="number" required formControlName="approvedLoanAmount">
             <mat-error *ngIf="approveLoanForm.controls.approvedLoanAmount.hasError('required')">
-              Transaction Amount is <strong>required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
+            *mifosxHasPermission="'APPROVE_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html b/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html
index 9cd74fa67..fe8552a31 100644
--- a/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html
@@ -9,43 +9,43 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="settlementDatePicker.open()">
-            <mat-label>Settlement Date</mat-label>
+            <mat-label>{{"labels.inputs.Settlement Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementDatePicker" required
               formControlName="settlementDate">
             <mat-datepicker-toggle matSuffix [for]="settlementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #settlementDatePicker></mat-datepicker>
             <mat-error *ngIf="saleLoanForm.controls.settlementDate.hasError('required')">
-              Settlement Date <strong>is required</strong>
+              {{"labels.inputs.Settlement Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isBuyBack()">
-            <mat-label>Purchase Price Ratio</mat-label>
+            <mat-label>{{"labels.inputs.Purchase Price Ratio"  |translate}}</mat-label>
             <input type="number" matInput required formControlName="purchasePriceRatio">
             <mat-error *ngIf="saleLoanForm.controls.purchasePriceRatio.hasError('required')">
-              Purchase Price Ratio <strong>is required</strong>
+              {{"labels.inputs.Purchase Price Ratio"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isBuyBack()">
-            <mat-label>Owner External Id</mat-label>
+            <mat-label>{{"labels.inputs.Owner External Id"  |translate}}</mat-label>
             <input matInput formControlName="ownerExternalId">
             <mat-error *ngIf="saleLoanForm.controls.ownerExternalId.hasError('required')">
-              Owner External Id <strong>is required</strong>
+              {{"labels.inputs.Owner External Id"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transfer External Id</mat-label>
+            <mat-label>{{"labels.inputs.Transfer External Id"  |translate}}</mat-label>
             <input matInput formControlName="transferExternalId">
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!saleLoanForm.valid"
-            *mifosxHasPermission="'SALE_LOAN'">Submit</button>
+            *mifosxHasPermission="'SALE_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html b/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html
index a438d7925..1a99b6f8b 100644
--- a/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html
@@ -9,34 +9,34 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label> To Loan Officer</mat-label>
+            <mat-label> {{"labels.inputs.To Loan Officer"  |translate}}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
               <mat-option *ngFor="let loanOfficer of loanOfficers" [value]="loanOfficer.id">
                 {{ loanOfficer.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="assignOfficerForm.controls.toLoanOfficerId.hasError('required')">
-              Loan Officer is <strong>required</strong>
+              {{"labels.inputs.Loan Officer"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="assignOnDatePicker.open()">
-            <mat-label>Assignment Date</mat-label>
+            <mat-label>{{"labels.inputs.Assignment Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required
               formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignOnDatePicker></mat-datepicker>
             <mat-error *ngIf="assignOfficerForm.controls.assignmentDate.hasError('required')">
-              Assignment Date <strong>is required</strong>
+              {{"labels.inputs.Assignment Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid"
-            *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+            *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html b/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html
index f9544c157..eb916441d 100644
--- a/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html
@@ -9,44 +9,44 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="chargeoffLoanForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is required</strong>
+              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Reason for Charge-Off</mat-label>
+            <mat-label>{{"labels.inputs.Reason for Charge-Off"  |translate}}</mat-label>
             <mat-select formControlName="chargeOffReasonId">
               <mat-option *ngFor="let chargeOffReason of chargeOffReasonOptions" [value]="chargeOffReason.id">
                 {{ chargeOffReason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeoffLoanForm.controls.chargeOffReasonId.hasError('required')">
-              Reason for Charge-Off <strong>is required</strong>
+              {{"labels.inputs.Reason for Charge-Off"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!chargeoffLoanForm.valid"
-            *mifosxHasPermission="'CHARGEOFF_LOAN'">Submit</button>
+            *mifosxHasPermission="'CHARGEOFF_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html b/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html
index 434e6b795..f64202a68 100644
--- a/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html
@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedDatePicker.open()">
-            <mat-label>Closed On</mat-label>
+            <mat-label>{{"labels.inputs.Closed On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
-              Closed Date <strong>is required</strong>
+              {{"labels.inputs.Closed Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
-            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
+            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html b/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html
index 8258131d0..5f2a923ce 100644
--- a/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html
@@ -9,16 +9,16 @@
         <div fxLayout="column">
 
           <mat-checkbox labelPosition="before" formControlName="existingClient">
-            Existing Client
+            {{"labels.inputs.Existing Client"  |translate}}
           </mat-checkbox>
 
           <ng-container *ngIf="!showClientDetailsForm">
 
             <mat-form-field fxFlex="30%">
-              <mat-label>Name</mat-label>
+              <mat-label>{{"labels.inputs.name"  |translate}}</mat-label>
               <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete">
               <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
-                Name <strong>is required</strong>
+                {{"labels.inputs.name"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -30,7 +30,7 @@
             </mat-autocomplete>
 
             <mat-form-field>
-              <mat-label>Relationship</mat-label>
+              <mat-label>{{"labels.inputs.Relationship"  |translate}}</mat-label>
               <mat-select formControlName="clientRelationshipTypeId">
                 <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
                   {{ relationType.name }}
@@ -41,7 +41,7 @@
             <ng-container *ngIf="accountOptions.length > 0">
 
               <mat-form-field>
-                <mat-label>Account</mat-label>
+                <mat-label>{{"labels.inputs.Account"  |translate}}</mat-label>
                 <mat-select formControlName="savingsId">
                   <mat-option *ngFor="let accountOption of accountOptions" [value]="accountOption.id">
                     {{ accountOption.productName }} - {{ accountOption.accountNo }}
@@ -50,7 +50,7 @@
               </mat-form-field>
 
               <mat-form-field>
-                <mat-label>Amount</mat-label>
+                <mat-label>{{"labels.inputs.Amount"  |translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
               </mat-form-field>
 
@@ -61,7 +61,7 @@
           <ng-container *ngIf="showClientDetailsForm">
 
             <mat-form-field>
-              <mat-label>Relationship</mat-label>
+              <mat-label>{{"labels.inputs.Relationship"  |translate}}</mat-label>
               <mat-select formControlName="clientRelationshipTypeId">
                 <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
                   {{ relationType.name }}
@@ -70,55 +70,55 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>First Name</mat-label>
+              <mat-label>{{"labels.inputs.First Name"  |translate}}</mat-label>
               <input matInput required formControlName="firstname">
               <mat-error *ngIf="newGuarantorForm.controls.firstname.hasError('required')">
-                First Name <strong>is required</strong>
+                {{"labels.inputs.First Name"  |translate}} {{ "labels.commons.is"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Last Name</mat-label>
+              <mat-label>{{"labels.inputs.Last Name"  |translate}}</mat-label>
               <input matInput required formControlName="lastname">
               <mat-error *ngIf="newGuarantorForm.controls.lastname.hasError('required')">
-                Last Name <strong>is required</strong>
+                {{"labels.inputs.Last Name"  |translate}} {{ "labels.commons.is"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field (click)="dobDatePicker.open()">
-              <mat-label>Date Of Birth</mat-label>
+              <mat-label>{{"labels.inputs.Date Of Birth"  |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dobDatePicker" formControlName="dob">
               <mat-datepicker-toggle matSuffix [for]="dobDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dobDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Address Line 1</mat-label>
+              <mat-label>{{"labels.inputs.Address Line"  |translate}} 1</mat-label>
               <input matInput formControlName="addressLine1">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Address Line 2</mat-label>
+              <mat-label>{{"labels.inputs.Address Line"  |translate}} 2</mat-label>
               <input matInput formControlName="addressLine2">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>City</mat-label>
+              <mat-label>{{"labels.inputs.City"  |translate}}</mat-label>
               <input matInput formControlName="city">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Zip</mat-label>
+              <mat-label>{{"labels.inputs.Zip"  |translate}}</mat-label>
               <input matInput formControlName="zip">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Mobile</mat-label>
+              <mat-label>{{"labels.inputs.Mobile"  |translate}}</mat-label>
               <input type="number" matInput formControlName="mobileNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Residence Phone #</mat-label>
+              <mat-label>{{"labels.inputs.Residence Phone"  |translate}} #</mat-label>
               <input type="number" matInput formControlName="housePhoneNumber">
             </mat-form-field>
 
@@ -127,9 +127,9 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!newGuarantorForm.valid"
-            *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
+            *mifosxHasPermission="'CREATE_GUARANTOR'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
@@ -139,18 +139,18 @@
     <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">
       <div class="mat-table">
         <div class="mat-header-row">
-          <div class="mat-header-cell">Client Details</div>
+          <div class="mat-header-cell">{{"labels.inputs.Client Details"  |translate}}</div>
         </div>
         <div class="mat-row">
-          <div class="mat-cell">Name</div>
+          <div class="mat-cell">{{"labels.inputs.name"  |translate}}</div>
           <div class="mat-cell">{{newGuarantorForm.controls.name.value.displayName}}</div>
         </div>
         <div class="mat-row">
-          <div class="mat-cell">Id</div>
+          <div class="mat-cell">{{"labels.inputs.Id"  |translate}}</div>
           <div class="mat-cell">{{newGuarantorForm.controls.name.value.id}}</div>
         </div>
         <div class="mat-row">
-          <div class="mat-cell">Office</div>
+          <div class="mat-cell">{{"labels.inputs.Office"  |translate}}</div>
           <div class="mat-cell">{{newGuarantorForm.controls.name.value.officeName}}</div>
         </div>
       </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html b/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html
index 81053960c..6e62c9af6 100644
--- a/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html
@@ -9,40 +9,40 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="disbursementDatePicker.open()">
-            <mat-label>Disbursement On</mat-label>
+            <mat-label>{{"labels.inputs.Disbursement On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementDatePicker" required
               formControlName="actualDisbursementDate">
             <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #disbursementDatePicker></mat-datepicker>
             <mat-error *ngIf="disbursementForm.controls.actualDisbursementDate.hasError('required')">
-              Disbursement Date is <strong>required</strong>
+              {{"labels.inputs.Disbursement Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput type="number" required formControlName="transactionAmount">
             <mat-error *ngIf="disbursementForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount is <strong>required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="dataObject.fixedEmiAmount">
-            <mat-label>Fixed EMI amount</mat-label>
+            <mat-label>{{"labels.inputs.Fixed EMI amount"  |translate}}</mat-label>
             <input matInput type="number" formControlName="fixedEmiAmount">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
-            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
+            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
index 189991113..8faffeead 100644
--- a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
@@ -9,31 +9,31 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="actualDisbursementDatePicker.open()">
-            <mat-label>Disbursed On</mat-label>
+            <mat-label>{{"labels.inputs.Disbursed On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="actualDisbursementDatePicker" required
               formControlName="actualDisbursementDate">
             <mat-datepicker-toggle matSuffix [for]="actualDisbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #actualDisbursementDatePicker></mat-datepicker>
             <mat-error *ngIf="disbursementLoanForm.controls.actualDisbursementDate.hasError('required')">
-              Disbursed On Date<strong>is required</strong>
+              {{"labels.inputs.Disbursed On Date"  |translate}}<strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput required formControlName="transactionAmount">
             <mat-error *ngIf="disbursementLoanForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount <strong>is required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -45,7 +45,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">Show Payment Details</span>
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -53,42 +53,42 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label>{{"labels.inputs.Account"  |translate}} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque"  |translate}} #</mat-label>
               <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code"  |translate}}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept"  |translate}} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label>{{"labels.inputs.Bank"  |translate}} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid"
-            *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
+            *mifosxHasPermission="'DISBURSE_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html b/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html
index 089e3848d..e3abb5a70 100644
--- a/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html
@@ -11,11 +11,11 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-        <button type="button" (click)="reset()">Reset</button>
-        <button type="button" color="primary" mat-raised-button (click)="applyPattern()">Pattern</button>
-        <button type="button" color="primary" mat-raised-button [disabled]="!wasChanged" (click)="validate()">Validate</button>
-        <button type="button" color="primary" mat-raised-button [disabled]="!wasValidated" (click)="submit()">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
+        <button type="button" (click)="reset()">{{"labels.buttons.Reset"  |translate}}</button>
+        <button type="button" color="primary" mat-raised-button (click)="applyPattern()">{{"labels.buttons.Pattern"  |translate}}</button>
+        <button type="button" color="primary" mat-raised-button [disabled]="!wasChanged" (click)="validate()">{{"labels.buttons.Validate"  |translate}}</button>
+        <button type="button" color="primary" mat-raised-button [disabled]="!wasValidated" (click)="submit()">{{"labels.buttons.Submit"  |translate}}</button>
       </mat-card-actions>
 
     </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
index 3aa975f59..c35e0c321 100644
--- a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
@@ -9,52 +9,52 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionsDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionsDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionsDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionsDatePicker></mat-datepicker>
             <mat-error *ngIf="foreclosureForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is required</strong>
+              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Principal</mat-label>
+            <mat-label>{{"labels.inputs.Principal"  |translate}}</mat-label>
             <input matInput formControlName="outstandingPrincipalPortion">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Interest</mat-label>
+            <mat-label>{{"labels.inputs.Interest"  |translate}}</mat-label>
             <input matInput formControlName="outstandingInterestPortion">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Fee Amount</mat-label>
+            <mat-label>{{"labels.inputs.Fee Amount"  |translate}}</mat-label>
             <input matInput formControlName="outstandingFeeChargesPortion">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Penalty Amount</mat-label>
+            <mat-label>{{"labels.inputs.Penalty Amount"  |translate}}</mat-label>
             <input matInput required formControlName="outstandingPenaltyChargesPortion">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput required formControlName="transactionAmount">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid"
-            *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
+            *mifosxHasPermission="'FORECLOSURE_LOAN'">{{"labels.buttons.Foreclosure"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html b/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html
index e19d92dab..7774de0ff 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html
@@ -9,40 +9,40 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="creditBalanceLoanForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is required</strong>
+              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput required formControlName="transactionAmount">
             <mat-error *ngIf="creditBalanceLoanForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount <strong>is required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html b/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html
index 117ee7fec..10f3be351 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html
@@ -9,49 +9,49 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rescheduleDatePicker.open()">
-            <mat-label>Reschedule from Installment On</mat-label>
+            <mat-label>{{"labels.inputs.Reschedule from Installment On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="rescheduleDatePicker" required
               formControlName="rescheduleFromDate">
             <mat-datepicker-toggle matSuffix [for]="rescheduleDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rescheduleDatePicker></mat-datepicker>
             <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleFromDate.hasError('required')">
-              Reschedule Date <strong>is required</strong>
+              {{"labels.inputs.Reschedule Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Reason for Rescheduling</mat-label>
+            <mat-label>{{"labels.inputs.Reason for Rescheduling"  |translate}}</mat-label>
             <mat-select formControlName="rescheduleReasonId">
               <mat-option *ngFor="let rescheduleReasonCode of codes" [value]="rescheduleReasonCode.id">
                 {{ rescheduleReasonCode.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleReasonId.hasError('required')">
-              Reason for Rescheduling <strong>is required</strong>
+              {{"labels.inputs.Reason for Rescheduling"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="submittedDatePicker.open()">
-            <mat-label>Submitted On</mat-label>
+            <mat-label>{{"labels.inputs.Submitted On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="submittedDatePicker" required
               formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedDatePicker></mat-datepicker>
             <mat-error *ngIf="rescheduleLoanForm.controls.submittedOnDate.hasError('required')">
-              Submitted On Date <strong>is required</strong>
+              {{"labels.inputs.Submitted On Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Comments</mat-label>
+            <mat-label>{{"labels.inputs.Comments"  |translate}}</mat-label>
             <textarea matInput formControlName="rescheduleReasonComment"></textarea>
           </mat-form-field>
 
-          <mat-checkbox [formControl]="changeRepaymentDate"> Change Repayment Date </mat-checkbox>
+          <mat-checkbox [formControl]="changeRepaymentDate"> {{"labels.inputs.Change Repayment Date"  |translate}} </mat-checkbox>
 
           <ng-container *ngIf="changeRepaymentDate.value" (click)="installmentrescheduledDatePicker.open()">
             <mat-form-field>
-              <mat-label>Installment Rescheduled to</mat-label>
+              <mat-label>{{"labels.inputs.Installment Rescheduled to"  |translate}}</mat-label>
               <input matInput [min]="minDate" [matDatepicker]="installmentrescheduledDatePicker"
                 formControlName="adjustedDueDate">
               <mat-datepicker-toggle matSuffix [for]="installmentrescheduledDatePicker"></mat-datepicker-toggle>
@@ -59,33 +59,33 @@
             </mat-form-field>
           </ng-container>
 
-          <mat-checkbox [formControl]="introduceGracePeriods"> Introduce Mid-term grace periods </mat-checkbox>
+          <mat-checkbox [formControl]="introduceGracePeriods"> {{"labels.inputs.Introduce Mid-term grace periods"  |translate}} </mat-checkbox>
 
           <ng-container *ngIf="introduceGracePeriods.value">
             <mat-form-field>
-              <mat-label>Principal Grace Periods </mat-label>
+              <mat-label>{{"labels.inputs.Principal Grace Periods"  |translate}} </mat-label>
               <input matInput formControlName="graceOnPrincipal">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Interest Grace Periods </mat-label>
+              <mat-label>{{"labels.inputs.Interest Grace Periods"  |translate}} </mat-label>
               <input matInput formControlName="graceOnInterest">
             </mat-form-field>
           </ng-container>
 
-          <mat-checkbox [formControl]="extendRepaymentPeriod"> Extend Repayment Period </mat-checkbox>
+          <mat-checkbox [formControl]="extendRepaymentPeriod"> {{"labels.inputs.Extend Repayment Period"  |translate}} </mat-checkbox>
 
           <ng-container *ngIf="extendRepaymentPeriod.value">
             <mat-form-field>
-              <mat-label>Number Of new Repayments</mat-label>
+              <mat-label>{{"labels.inputs.Number Of new Repayments"  |translate}}</mat-label>
               <input matInput formControlName="extraTerms">
             </mat-form-field>
           </ng-container>
 
-          <mat-checkbox [formControl]="adjustinterestrates"> Adjust interest rates for remainder of loan </mat-checkbox>
+          <mat-checkbox [formControl]="adjustinterestrates"> {{"labels.inputs.Adjust interest rates for remainder of loan"  |translate}} </mat-checkbox>
           <ng-container *ngIf="adjustinterestrates.value">
             <mat-form-field>
-              <mat-label>New Interest Rate</mat-label>
+              <mat-label>{{"labels.inputs.New Interest Rate"  |translate}}</mat-label>
               <input matInput formControlName="newInterestRate">
             </mat-form-field>
           </ng-container>
@@ -93,9 +93,9 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
+            *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html b/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
index 7c06c54c8..1d26ab68d 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
@@ -9,23 +9,23 @@
         <div>
 
           <mat-form-field fxFlex>
-            <mat-label>Loan Screen Reports</mat-label>
+            <mat-label>{{"labels.inputs.Loan Screen Reports"  |translate}}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
                 {{ template.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
-              Screen Report is <strong>required</strong>
+              {{"labels.inputs.Screen Report"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report
+            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{"labels.buttons.Generate Report"  |translate}}
           </button>
         </mat-card-actions>
 
@@ -44,12 +44,12 @@
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
-        Print
+        {{"labels.buttons.Print"  |translate}}
       </button>
     </div>
 
     <div #screenReport class="screen-report">
-      <p>Please select a screen report.</p>
+      <p>{{"labels.text.Please select a screen report."  |translate}}</p>
     </div>
 
   </mat-card>
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
index 3106a0df1..6b587c723 100644
--- a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedDatePicker.open()">
-            <mat-label>Closed On</mat-label>
+            <mat-label>{{"labels.inputs.Closed On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
-              Closed Date <strong>is required</strong>
+              {{"labels.inputs.Closed Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
-            *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
+            *mifosxHasPermission="'CLOSE_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
index 47ccae931..d3d82fb48 100644
--- a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
@@ -9,13 +9,13 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="repaymentLoanForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is required</strong>
+              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -54,22 +54,22 @@
           </div>
 
           <mat-form-field appearance="fill">
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <span matTextSuffix class="m-l-10">{{ dataObject.currency.code }}</span>
             <span fxFlex="auto"></span>
             <input type="number" matInput required class="right-input" formControlName="transactionAmount">
             <mat-error *ngIf="repaymentLoanForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount <strong>is required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -81,7 +81,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">Show Payment Details</span>
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -89,42 +89,42 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label> {{"labels.inputs.Account"  |translate}} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label> {{"labels.inputs.Cheque"  |translate}} #</mat-label>
               <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label> {{"labels.inputs.Routing Code"  |translate}}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label> {{"labels.inputs.Reciept"  |translate}} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label> {{"labels.inputs.Bank"  |translate}} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label> {{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
index 51aa592b1..900194233 100644
--- a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
@@ -9,13 +9,13 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="prepayLoanForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is required</strong>
+              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -54,22 +54,22 @@
           </div>
 
           <mat-form-field appearance="fill">
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <span matTextSuffix class="m-l-10">{{ prepayData.currency.code }}</span>
             <span fxFlex="auto"></span>
             <input type="number" matInput required class="right-input" formControlName="transactionAmount">
             <mat-error *ngIf="prepayLoanForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount <strong>is required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -81,7 +81,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">Show Payment Details</span>
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -89,42 +89,42 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label> {{"labels.inputs.Account"  |translate}} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque"  |translate}} #</mat-label>
               <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code"  |translate}}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept"  |translate}} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label>{{"labels.inputs.Bank"  |translate}} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
index 9cc0c2aca..fb4db75df 100644
--- a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is required</strong>
+              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput required formControlName="transactionAmount">
             <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount <strong>is required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -40,7 +40,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">Show Payment Details</span>
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -48,42 +48,42 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label> {{"labels.inputs.Account"  |translate}} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque"  |translate}} #</mat-label>
               <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code"  |translate}}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept"  |translate}} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label>{{"labels.inputs.Bank"  |translate}} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html b/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html
index a1ccb4858..fbf5b3b8c 100644
--- a/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html
@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rejectedDatePicker.open()">
-            <mat-label>Rejected On</mat-label>
+            <mat-label>{{"labels.inputs.Rejected On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required
               formControlName="rejectedOnDate">
             <mat-datepicker-toggle matSuffix [for]="rejectedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectLoanForm.controls.rejectedOnDate.hasError('required')">
-              Rejected Date <strong>is required</strong>
+              {{"labels.inputs.Rejected Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid"
-            *mifosxHasPermission="'REJECT_LOAN'">Submit</button>
+            *mifosxHasPermission="'REJECT_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
index 483a56ee0..a6c4bc313 100644
--- a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
@@ -7,14 +7,14 @@
       <div fxLayout="column">
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
           <textarea matInput [formControl]="note"></textarea>
         </mat-form-field>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" (click)="submit()"
-            *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
+            *mifosxHasPermission="'APPROVALUNDO_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html b/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html
index 120cccbf6..62a342a99 100644
--- a/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html
@@ -7,16 +7,16 @@
       <div fxLayout="column">
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
-          <textarea matInput [formControl]="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
+          <textarea matInput required [formControl]="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
         <button mat-raised-button color="primary" (click)="submit()"
-          *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
+          *mifosxHasPermission="'DISBURSALUNDO_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
       </mat-card-actions>
 
     </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html b/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
index c41336aea..12259e12f 100644
--- a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
@@ -8,23 +8,23 @@
         <table>
           <tbody>
             <tr>
-              <td>Disbursement Date</td>
+              <td>{{"labels.inputs.Disbursement Date"  |translate}}</td>
               <td>{{dataObject.timeline.actualDisbursementDate}}<span
-                  *ngIf="!dataObject.timeline.actualDisbursementDate">Not Available</span></td>
+                  *ngIf="!dataObject.timeline.actualDisbursementDate">{{"labels.inputs.Not Available"  |translate}}</span></td>
             </tr>
             <tr>
-              <td>Currency</td>
+              <td>{{"labels.inputs.Currency"  |translate}}</td>
               <td>{{dataObject.currency.name}}</td>
             </tr>
             <tr>
-              <td>Loan Officer</td>
-              <td>{{dataObject.loanOfficerName}} <span *ngIf="!dataObject.loanOfficerName">Unassigned</span>
+              <td>{{"labels.inputs.Loan Officer"  |translate}}</td>
+              <td>{{dataObject.loanOfficerName}} <span *ngIf="!dataObject.loanOfficerName">{{"labels.inputs.Unassigned"  |translate}}</span>
                 <span *ngIf="dataObject.loanOfficerName">
                   <fa-icon icon="times"></fa-icon>
                 </span></td>
             </tr>
             <tr>
-              <td>External Id</td>
+              <td>{{"labels.inputs.External Id"  |translate}}</td>
               <td>
                 <mifosx-external-identifier externalId="{{dataObject.externalId}}"></mifosx-external-identifier>
               </td>
@@ -37,27 +37,27 @@
         <table>
           <tbody>
             <tr>
-              <td>Loan Purpose</td>
+              <td>{{"labels.inputs.Loan Purpose"  |translate}}</td>
               <td>
-                {{dataObject.loanPurposeName}} <span *ngIf="!dataObject.loanPurposeName"> Not Provided </span>
+                {{dataObject.loanPurposeName}} <span *ngIf="!dataObject.loanPurposeName"> {{"labels.inputs.Not Provided"  |translate}} </span>
               </td>
             </tr>
             <tr>
-              <td>Approved Amount</td>
+              <td>{{"labels.inputs.Approved Amount"  |translate}}</td>
               <td>
                 <span>{{dataObject.approvedPrincipal | formatNumber}}</span>
               </td>
             </tr>
             <tr>
-              <td>Disburse Amount</td>
+              <td>{{"labels.inputs.Disburse Amount"  |translate}}</td>
               <td>
                 <span>{{dataObject.principal | formatNumber}}</span>
               </td>
             </tr>
             <tr>
-              <td>Arrears By</td>
+              <td>{{"labels.inputs.Arrears By"  |translate}}</td>
               <td>{{dataObject.summary.totalOverdue | formatNumber}}
-                <span *ngIf="dataObject.summary.totalOverdue < 0">Not Provided</span>
+                <span *ngIf="dataObject.summary.totalOverdue < 0">{{"labels.inputs.Not Provided"  |translate}}</span>
               </td>
             </tr>
           </tbody>
@@ -71,7 +71,7 @@
       <div class="heading-content">
         <div fxLayout="column" fxFlex="50%">
           <div class="heading-name">
-            <h3>Guarantors Details</h3>
+            <h3>{{"labels.heading.Guarantors Details"  |translate}}</h3>
           </div>
         </div>
         <div fxLayout="column" fxFlex="50%">
@@ -85,7 +85,7 @@
       <table fxFlexFill mat-table
         [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
         <ng-container matColumnDef="fullname">
-          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
               {{guarantor.firstname}} &nbsp; {{guarantor.lastname}}
@@ -94,7 +94,7 @@
         </ng-container>
 
         <ng-container matColumnDef="relationship">
-          <th mat-header-cell *matHeaderCellDef> Relationship </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Relationship"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
               {{guarantor.clientRelationshipType.name}}
@@ -103,7 +103,7 @@
         </ng-container>
 
         <ng-container matColumnDef="guarantortype">
-          <th mat-header-cell *matHeaderCellDef> Guarantor Type </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Guarantor Type"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
               {{guarantor.guarantorType.value}}
@@ -112,7 +112,7 @@
         </ng-container>
 
         <ng-container matColumnDef="depositAccount">
-          <th mat-header-cell *matHeaderCellDef> Deposit Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Deposit Account"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
 
@@ -121,7 +121,7 @@
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
 
@@ -130,7 +130,7 @@
         </ng-container>
 
         <ng-container matColumnDef="remainingAmount">
-          <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Remaining Amount"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
 
@@ -139,21 +139,21 @@
         </ng-container>
 
         <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> Status </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
               <span *ngIf="guarantor.status">
-                Active
+                {{"labels.inputs.Active"  |translate}}
               </span>
               <span *ngIf="!guarantor.status">
-                Deleted
+                {{"labels.inputs.Deleted"  |translate}}
               </span>
             </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="action">
-          <th mat-header-cell *matHeaderCellDef> Action </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Action"  |translate}} </th>
           <td mat-cell *matCellDef="let guarantor; let id = index">
             <span *ngIf="!guarantor.guarantorFundingDetails">
               <button mat-raised-button class="account-action-button" color="primary"
diff --git a/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html b/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html
index 7b091bcb6..dc3ccdec7 100644
--- a/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html
@@ -9,35 +9,35 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="interestDatePicker.open()">
-            <mat-label>Interest waived on</mat-label>
+            <mat-label>{{"labels.inputs.Interest waived on"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="interestDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #interestDatePicker></mat-datepicker>
             <mat-error *ngIf="loanInterestForm.controls.transactionDate.hasError('required')">
-              Interest Date is <strong>required</strong>
+              {{"labels.inputs.Interest Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transaction amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
             <input matInput required formControlName="transactionAmount">
             <mat-error *ngIf="loanInterestForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount is <strong>required</strong>
+              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid"
-            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
+            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html b/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html
index e0dcbea3b..eba6f56c3 100644
--- a/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html
@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
-            <mat-label>Withdrawn On</mat-label>
+            <mat-label>{{"labels.inputs.Withdrawn On"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required
               formControlName="withdrawnOnDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawnByClientLoanForm.controls.withdrawnOnDate.hasError('required')">
-              Withdrawn On Date <strong>is required</strong>
+              {{"labels.inputs.Withdrawn On Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
           <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid"
-            *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
+            *mifosxHasPermission="'WITHDRAW_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html b/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html
index 08c92f837..ad1fbae88 100644
--- a/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html
@@ -9,23 +9,23 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="writeOffDatePicker.open()">
-            <mat-label>Write off on</mat-label>
+            <mat-label>{{"labels.inputs.Write off on"  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="writeOffDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="writeOffDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #writeOffDatePicker></mat-datepicker>
             <mat-error *ngIf="writeOffForm.controls.transactionDate.hasError('required')">
-              Write Off Date <strong>is required</strong>
+              {{"labels.inputs.Write Off Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Amount</mat-label>
+            <mat-label>{{"labels.inputs.Amount"  |translate}}</mat-label>
             <input matInput formControlName="amount">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -34,9 +34,9 @@
       </form>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
         <button mat-raised-button color="primary" (click)="submit()"
-          *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
+          *mifosxHasPermission="'WRITEOFF_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
       </mat-card-actions>
 
     </mat-card-content>
diff --git a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
index 597e0dfa8..1147ec20b 100644
--- a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
+++ b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
@@ -30,7 +30,7 @@
   <table mat-table *ngIf="loanCollaterals?.length > 0" [dataSource]="loanCollaterals">
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> ID </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.id }} </td>
     </ng-container>
 
@@ -40,13 +40,18 @@
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
     </ng-container>
 
     <ng-container matColumnDef="total">
-      <th mat-header-cell *matHeaderCellDef> Total Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.value | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Value"  |translate}} </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.total }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="totalCollateral">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Collateral Value"  |translate}} </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalCollateral }} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html b/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html
index 3e22ceb9d..69fb258c9 100644
--- a/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html
+++ b/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html
@@ -1,11 +1,11 @@
 <div class="container">
 
-  <h3>Loan Delinquency Tags</h3>
+  <h3>{{"labels.heading.Loan Delinquency Tags"  |translate}}</h3>
 
   <table mat-table [dataSource]="loanDelinquencyTags" *ngIf="loanDelinquencyTags.length>0">
 
     <ng-container matColumnDef="classification">
-      <th mat-header-cell *matHeaderCellDef> Delinquency Classification </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Delinquency Classification"  |translate}} </th>
       <td mat-cell *matCellDef="let item"> {{ item.delinquencyRange.classification }}
         <span *ngIf="item.delinquencyRange.maximumAgeDays">( {{ item.delinquencyRange.minimumAgeDays }} - {{ item.delinquencyRange.maximumAgeDays }} )</span>
         <span *ngIf="!item.delinquencyRange.maximumAgeDays">( {{ item.delinquencyRange.minimumAgeDays }} )</span>
@@ -13,7 +13,7 @@
     </ng-container>
 
     <ng-container matColumnDef="addedOn">
-      <th mat-header-cell *matHeaderCellDef> Added On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Added On"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.addedOnDate">
           {{ item.addedOnDate  | dateFormat }}
@@ -22,7 +22,7 @@
     </ng-container>
 
     <ng-container matColumnDef="liftedOn">
-      <th mat-header-cell *matHeaderCellDef> Lifted On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lifted On"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.liftedOnDate">
           {{ item.liftedOnDate  | dateFormat }}
diff --git a/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html b/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
index 579ca53fd..2542f6df7 100644
--- a/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
+++ b/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
@@ -1,32 +1,32 @@
 <div class="container">
 
   <div fxFlexFill>
-    <span fxFlex="40%">Maximum allowed outstanding balance:</span>
+    <span fxFlex="40%">{{"labels.inputs.Maximum allowed outstanding balance"  |translate}}:</span>
     <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | formatNumber }}</span>
   </div>
 
-  <h3>Loan Tranche Details</h3>
+  <h3>{{"labels.heading.Loan Tranche Details"  |translate}}</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="flex-end" fxLayoutGap="2%">
     <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()"
       (click)="addDisbursementDataEntry()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add"  |translate}}
     </button>
     <button mat-raised-button color="primary" *ngIf="!pristine"
       (click)="editDisbursementData()">
-      Apply Changes
+      {{"labels.buttons.Apply Changes"  |translate}}
     </button>
   </div>
 
   <table mat-table [dataSource]="disbursementDataSource" *ngIf="disbursementDataSource.length > 0">
 
     <ng-container matColumnDef="expected disbursement on">
-      <th mat-header-cell *matHeaderCellDef> Expected Disbursement On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Expected Disbursement On"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="disbursed on">
-      <th mat-header-cell *matHeaderCellDef> Disbursed On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Disbursed On"  |translate}} </th>
       <td mat-cell *matCellDef="let ele">
         <span *ngIf="ele.actualDisbursementDate">
           {{ ele.actualDisbursementDate | dateFormat }}
@@ -35,23 +35,23 @@
     </ng-container>
 
     <ng-container matColumnDef="principal">
-      <th mat-header-cell *matHeaderCellDef> Principal </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.principal }} </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell *matCellDef="let ele; let rowIndex = index">
         <span *ngIf="ele.actualDisbursementDate">
           <i class="fa fa-check "></i>
         </span>
         <button type="button" mat-icon-button color="primary"
-          (click)="editDisbursementDataEntry(rowIndex)" matTooltip="Edit"
+          (click)="editDisbursementDataEntry(rowIndex)" matTooltip="{{ 'tooltips.Edit' | translate }}"
           matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()">
           <fa-icon icon="edit"></fa-icon>
         </button>
         <button type="button" mat-icon-button color="warn"
-          (click)="removeDisbursementDataEntry(rowIndex)" matTooltip="Delete"
+          (click)="removeDisbursementDataEntry(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate }}"
           matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()">
           <fa-icon icon="trash"></fa-icon>
         </button>
@@ -64,17 +64,17 @@
 
   <div *ngIf="loanDetails.emiAmountVariations.length > 0">
 
-    <h3>Installment Amount Variations: </h3>
+    <h3>{{"labels.heading.Installment Amount Variations"  |translate}}: </h3>
 
     <table mat-table [dataSource]="loanDetails.emiAmountVariations">
 
       <ng-container matColumnDef="emi amount variation from">
-        <th mat-header-cell *matHeaderCellDef> Applicable From Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Applicable From Date"  |translate}} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="fixed emi amount">
-        <th mat-header-cell *matHeaderCellDef> Installment Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Installment Amount"  |translate}} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.termValue }} </td>
       </ng-container>
 
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index 962d2f419..916d52c4e 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -7,7 +7,7 @@
       <div class="profile-image-container">
         <div>
           <mifosx-svg-icon [iconClass]="" iconFile="account_placeholder"
-          iconName="LOAN_ACCOUNT" iconWidth="210" matTooltip="Loan Account">
+          iconName="LOAN_ACCOUNT" iconWidth="210" matTooltip="{{ 'tooltips.Loan Account' | translate }}">
           </mifosx-svg-icon>
         </div>
       </div>
@@ -20,40 +20,40 @@
               <h3>
                 <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}"
                   [ngClass]="loanDetailsData.inArrears?'status-active-overdue':( iconLoanStatusColor() | statusLookup)"></i>
-                Loan Product: {{loanDetailsData.loanProductName}} <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}"></mifosx-account-number>
+                  {{"labels.heading.Loan Product"  |translate}}: {{loanDetailsData.loanProductName}} <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}"></mifosx-account-number>
               </h3>
               <span class="loans-overview">
-                {{entityType}} Name: {{loanDetailsData.clientName ||
+                {{entityType}} {{"labels.inputs.name"  |translate}}: {{loanDetailsData.clientName ||
                 loanDetailsData.groupName}}<span class="m-l-10">({{loanDetailsData.clientAccountNo}})</span><br />
               </span>
               <div *ngIf="loanDisplayArrearsDelinquency != 1">
                 <span class="loans-overview" *ngIf="loanDetailsData.delinquencyRange">
-                  Loan Account Classification : {{loanDetailsData?.delinquencyRange.classification}}<br />
+                  {{"labels.inputs.Loan Account Classification"  |translate}} : {{loanDetailsData?.delinquencyRange.classification}}<br />
                 </span>
                 <span class="loans-overview"
                   *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.pastDueDays > 0">
-                  Past Due Days : {{loanDetailsData?.delinquent.pastDueDays | formatNumber }}<br />
+                  {{"labels.inputs.Past Due Days"  |translate}} : {{loanDetailsData?.delinquent.pastDueDays | formatNumber }}<br />
                 </span>
                 <span class="loans-overview" *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.delinquentDays > 0
                   && loanDetailsData.delinquent.pastDueDays != loanDetailsData.delinquent.delinquentDays">
-                  Delinquent Days : {{loanDetailsData?.delinquent.delinquentDays | formatNumber }}
+                  {{"labels.inputs.Delinquent Days"  |translate}} : {{loanDetailsData?.delinquent.delinquentDays | formatNumber }}
                 </span>
               </div>
             </div>
 
             <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
-              <h3> Loan Account OverView </h3>
-              <span>Current Balance: {{loanDetailsData.currency.displaySymbol}}
+              <h3> {{"labels.heading.Loan Account OverView"  |translate}} </h3>
+              <span>{{"labels.inputs.Current Balance"  |translate}}: {{loanDetailsData.currency.displaySymbol}}
                 {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
               <div *ngIf="loanDisplayArrearsDelinquency < 2">
-                <span *ngIf="loanDetailsData.inArrears">Arrears By: {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
-                <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">Not Provided</span>
+                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears By"  |translate}}: {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+                <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided"  |translate}}</span>
                 </span><br>
-                <span *ngIf="loanDetailsData.inArrears">Arrears Since: {{loanDetailsData.summary.overdueSinceDate |
+                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears Since"  |translate}}: {{loanDetailsData.summary.overdueSinceDate |
                   dateFormat}}
                 </span>
                 <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                  Overpaid By: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | formatNumber }}
+                  {{"labels.inputs.Overpaid By"  |translate}}: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | formatNumber }}
                 </span>
               </div>
             </div>
@@ -84,7 +84,7 @@
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.optionsPayment.length" class="loan-span">
-          <button mat-menu-item [matMenuTriggerFor]="Payments">Payments</button>
+          <button mat-menu-item [matMenuTriggerFor]="Payments">{{"labels.buttons.Payments"  |translate}}</button>
           <mat-menu #Payments="matMenu">
             <span *ngFor="let item of buttonConfig.optionsPayment">
               <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
@@ -94,7 +94,7 @@
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length" class="loan-span">
-          <button mat-menu-item [matMenuTriggerFor]="More">More</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.buttons.More"  |translate}}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let item of buttonConfig.options">
               <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
@@ -112,88 +112,88 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        General
+        {{"labels.inputs.General"  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./accountdetail']" routerLinkActive #accountdetail="routerLinkActive"
         [active]="accountdetail.isActive">
-        Account Details
+        {{"labels.inputs.Account Details"  |translate}}
       </a>
       <ng-container *ngIf="loanDetailsData.originalSchedule">
         <a mat-tab-link [routerLink]="['./original-schedule']" routerLinkActive #originalSchedule="routerLinkActive"
           [active]="originalSchedule.isActive">
-          Original Schedule
+          {{"labels.inputs.Original Schedule"  |translate}}
         </a>
       </ng-container>
       <a mat-tab-link [routerLink]="['./repayment-schedule']" routerLinkActive #repaymentSchedule="routerLinkActive"
         [active]="repaymentSchedule.isActive">
-        Repayment Schedule
+        {{"labels.inputs.Repayment Schedule"  |translate}}
       </a>
       <ng-container *ngIf="loanDetailsData.transactions">
         <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
           [active]="transactions.isActive">
-          Transactions
+          {{"labels.inputs.Transactions"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
         <a mat-tab-link [routerLink]="['./delinquencytags']" routerLinkActive #delinquencytags="routerLinkActive"
           [active]="delinquencytags.isActive">
-          Delinquency Tags
+          {{"labels.inputs.Delinquency Tags"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.collateral">
         <a mat-tab-link [routerLink]="['./loan-collateral']" routerLinkActive #loanCollateralDetails="routerLinkActive"
           [active]="loanCollateralDetails.isActive">
-          Loan Collateral Details
+          {{"labels.inputs.Loan Collateral Details"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.multiDisburseLoan">
         <a mat-tab-link [routerLink]="['./loan-tranche-details']" routerLinkActive
           #loanTrancheDetails="routerLinkActive" [active]="loanTrancheDetails.isActive">
-          Loan Tranche Details
+          {{"labels.inputs.Loan Tranche Details"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
         <a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive"
           [active]="overduecharges.isActive">
-          Overdue Charges
+          {{"labels.inputs.Overdue Charges"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.isLoanProductLinkedToFloatingRate">
         <a mat-tab-link [routerLink]="['./floating-interest-rates']" routerLinkActive
           #floatingInterestRates="routerLinkActive" [active]="floatingInterestRates.isActive">
-          Floating Interest Rates
+          {{"labels.inputs.Floating Interest Rates"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.charges">
         <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
           [active]="charges.isActive">
-          Charges
+          {{"labels.inputs.Charges"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
         <a mat-tab-link [routerLink]="['./loan-reschedules']" routerLinkActive #loanReschedules="routerLinkActive"
           [active]="loanReschedules.isActive">
-          Loan Reschedules
+          {{"labels.inputs.Loan Reschedules"  |translate}}
         </a>
       </ng-container>
       <a mat-tab-link [routerLink]="['./loan-documents']" routerLinkActive #loanDocuments="routerLinkActive"
         [active]="loanDocuments.isActive">
-        Loan Documents
+        {{"labels.inputs.Loan Documents"  |translate}}
       </a>
       <a mat-tab-link *mifosxHasPermission="'READ_LOANNOTE'" [routerLink]="['./notes']" routerLinkActive
         #notes="routerLinkActive" [active]="notes.isActive">
-        Notes
+        {{"labels.inputs.Notes"  |translate}}
       </a>
       <ng-container *ngIf="loanDetailsData.clientId">
         <a mat-tab-link [routerLink]="['./standing-instruction']" routerLinkActive
           #standingInstruction="routerLinkActive" [active]="standingInstruction.isActive">
-          Standing Instruction
+          {{"labels.inputs.Standing Instruction"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
         <a mat-tab-link [routerLink]="['./external-asset-owner']" routerLinkActive #externalAssetOwner="routerLinkActive"
           [active]="externalAssetOwner.isActive">
-          External Asset Owner
+          {{"labels.inputs.External Asset Owner"  |translate}}
         </a>
       </ng-container>
       <ng-container *ngFor="let loanDatatable of loanDatatables">
diff --git a/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html b/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html
index f2c9588b1..29e732239 100644
--- a/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html
+++ b/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html
@@ -3,43 +3,43 @@
   <table mat-table [dataSource]="originalScheduleDetails.periods" matSort>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Date"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> Total</b> </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{"labels.inputs.Total"  |translate}}</b> </td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Principal Due </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Principal Due"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
       <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPrincipalExpected | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance Of Loan </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Balance Of Loan"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
       <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Interest </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Interest"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
       <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalInterestCharged | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Fees </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Fees"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
       <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalFeeChargesCharged | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Penalties </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Penalties"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.penaltyChargesDue | formatNumber}} </td>
       <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPenaltyChargesCharged | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Outstanding"  |translate}} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
       <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalRepaymentExpected | formatNumber }} </b> </td>
     </ng-container>
@@ -51,15 +51,15 @@
 
     <!-- Header row second group -->
     <ng-container matColumnDef="header-amount">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Loan Amount and Balance </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> {{"labels.inputs.Loan Amount and Balance"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-total-cost">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Total Cost of Loan </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> {{"labels.inputs.Total Cost of Loan"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-installment-totals">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> Installment Totals </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Installment Totals"  |translate}} </th>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"></tr>
diff --git a/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html b/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html
index e77e40464..22ab5c6f0 100644
--- a/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html
+++ b/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html
@@ -3,22 +3,22 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Name"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
     </ng-container>
 
     <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Amount"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="collectedon">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Collected On"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
diff --git a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
index 77a5395f3..4a108af65 100644
--- a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
+++ b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
@@ -9,19 +9,19 @@
     </ng-container>
 
     <ng-container matColumnDef="days">
-      <th mat-header-cell class="center" *matHeaderCellDef> Days </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Days"  |translate}} </th>
       <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.daysInPeriod }} </td>
       <td mat-footer-cell class="center" *matFooterCellDef> <b> Total</b> </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell class="center" *matHeaderCellDef> Date </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
       <td mat-cell class="m-r-5" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.dueDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef>  </td>
     </ng-container>
 
     <ng-container matColumnDef="paiddate">
-      <th mat-header-cell class="center" *matHeaderCellDef> Paid Date </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Paid Date"  |translate}} </th>
       <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.obligationsMetOnDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef>  </td>
     </ng-container>
@@ -35,62 +35,62 @@
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance Of Loan </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due"  |translate}} </th>
       <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue | formatNumber }} </td>
       <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b>  </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Penalties </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Penalties"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Due"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Paid </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="inadvance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> In advance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.In advance"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidInAdvanceForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="late">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Late </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Late"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidLateForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container *ngIf="isWaived">
       <ng-container matColumnDef="waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalWaivedForPeriod | formatNumber}} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
@@ -105,7 +105,7 @@
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding"  |translate}} </th>
       <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
@@ -115,15 +115,15 @@
     </ng-container>
 
     <ng-container matColumnDef="header-amount">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> Loan Amount and Balance </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> {{"labels.inputs.Loan Amount and Balance"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-total-cost">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> Total Cost of Loan </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> {{"labels.inputs.Total Cost of Loan"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-installment-totals">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6"> Installment Totals </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6"> {{"labels.inputs.Installment Totals"  |translate}} </th>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"></tr>
@@ -145,37 +145,37 @@
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell class="center" *matHeaderCellDef> Date </th>
+        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
         <td mat-cell class="m-r-10" *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
         <td mat-footer-cell *matFooterCellDef>  </td>
       </ng-container>
 
       <ng-container matColumnDef="balanceOfLoan">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance Of Loan </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
       </ng-container>
 
       <ng-container matColumnDef="principalDue">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due"  |translate}} </th>
         <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
         <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b>  </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
 
       <ng-container matColumnDef="fees">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Installment Amount </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Installment Amount"  |translate}} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele">
           <span *ngIf="!ele.changed">
             {{ ele.totalDueForPeriod | formatNumber}}
@@ -188,9 +188,9 @@
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
         <td mat-cell class="center" *matCellDef="let ele">
-          <button *ngIf="ele.period" type="button" color="primary" mat-icon-button matTooltip="Edit" matTooltipPosition="above" (click)="editPeriod(ele)">
+          <button *ngIf="ele.period" type="button" color="primary" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate }}" matTooltipPosition="above" (click)="editPeriod(ele)">
             <fa-icon icon="edit" size="lg"></fa-icon>
           </button>
         </td>
diff --git a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
index e58a052a1..aa2d6dc06 100644
--- a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
+++ b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
@@ -2,7 +2,7 @@
 
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
     <button mat-raised-button color="primary" [routerLink]="['../actions/Reschedule']">
-      Reschedule
+      {{"labels.buttons.Reschedule"  |translate}}
     </button>
   </div>
 
@@ -15,7 +15,7 @@
 
     <!-- Status Column -->
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <div [ngClass]="item.statusEnum.code | statusLookup">
           <fa-icon icon="stop"></fa-icon>
@@ -27,28 +27,28 @@
     </ng-container>
 
     <ng-container matColumnDef="rescheduleFromDate">
-      <th mat-header-cell *matHeaderCellDef> From Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Date"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         {{ item.rescheduleFromDate | dateFormat }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="reason">
-      <th mat-header-cell *matHeaderCellDef> Reason </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Reason"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         {{ item.rescheduleReasonCodeValue.name }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.statusEnum.pendingApproval">
-          <button class="action-button" mat-raised-button color="warn" matTooltip="Reject Reschedule" matTooltipPosition="left"
+          <button class="action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Reject Reschedule' | translate }}" matTooltipPosition="left"
           (click)="manageRequest(item, 'Reject')">
           <fa-icon icon="trash"></fa-icon>
         </button>
-          <button class="action-button" mat-raised-button color="primary" matTooltip="Approve Reschedule" matTooltipPosition="right"
+          <button class="action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Approve Reschedule' | translate }}" matTooltipPosition="right"
             (click)="manageRequest(item, 'Approve')">
             <fa-icon icon="check"></fa-icon>
           </button>
diff --git a/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html b/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html
index a56cdd147..b9bd1893f 100644
--- a/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html
+++ b/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html
@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Standing Instructions</h3>
+    <h3>{{"labels.heading.All Standing Instructions"  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,58 +9,58 @@
     <table mat-table #instructionsTable [dataSource]="dataSource">
 
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> Client </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> From Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}}
           ({{instruction.fromAccountType.value}})</td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> Beneficiary </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Beneficiary"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">
           <span *ngIf="instruction.fromClient.id != instruction.toClient.id"> {{instruction.toClient.displayName}} </span>
-          <span *ngIf="instruction.fromClient.id == instruction.toClient.id">Own Account</span>
+          <span *ngIf="instruction.fromClient.id == instruction.toClient.id">{{"labels.inputs.Own Account"  |translate}}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> To Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}}
           ({{instruction.toAccountType.value}})</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> Validity </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
         <td mat-cell *matCellDef="let instruction">
           <span *ngIf="instruction.status.value!=='Deleted'">
             <button class="account-action-button" mat-raised-button color="primary"
-              matTooltip="Edit Standing Instruction" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
               <i class="fa fa-edit"></i>
             </button>
           </span>
           <span *ngIf="instruction.status.value!=='Deleted'">
             <button class="account-action-button" mat-raised-button color="warn"
-              matTooltip="Delete Standing Instruction" *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}" *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Standing Instruction"
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
             *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
             <i class="fa fa-eye"></i>
           </button>
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
index 42aec7183..fb708b31e 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
@@ -1,56 +1,56 @@
 <div class="container">
 
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
-    <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">Hide
-      Accruals</mat-checkbox>
+    <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
+      {{"labels.inputs.Hide Accruals"  |translate}}</mat-checkbox>
     <button mat-raised-button color="primary" class="transaction-button" [routerLink]="['export']">
-      Export
+      {{"labels.buttons.Export"  |translate}}
     </button>
     <button mat-raised-button color="primary" class="transaction-button">
-      View Journal Entries
+      {{"labels.buttons.View Journal Entries"  |translate}}
     </button>
   </div>
 
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id"  |translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.id }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="office">
-      <th mat-header-cell *matHeaderCellDef> Office </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office"  |translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
         transaction.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
-      <th mat-header-cell *matHeaderCellDef> External Id </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id"  |translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">
         <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date"  |translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionType">
-      <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type"  |translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
         transaction.type.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell class="center" *matHeaderCellDef> Amount </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="principal">
-      <th mat-header-cell class="center" *matHeaderCellDef> Breakdown </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Breakdown"  |translate}} </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | formatNumber }} </td>
     </ng-container>
@@ -74,23 +74,23 @@
     </ng-container>
 
     <ng-container matColumnDef="loanBalance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> Loan Balance </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance"  |translate}} </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell *matCellDef="let transaction" class="center td-min-space">
-        <button class="account-action-button" *ngIf="allowUndoTransaction(transaction)" mat-raised-button color="primary" matTooltip="Undo Transaction"
+        <button class="account-action-button" *ngIf="allowUndoTransaction(transaction)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Undo Transaction' | translate }}"
           matTooltipPosition="left" (click)="undoTransaction(transaction, $event)">
           <i class="fa fa-undo"></i>
         </button>
         <button class="account-action-button" *ngIf="!transaction.manuallyReversed" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']" matTooltip="View Receipts">
+          (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']" matTooltip="{{ 'tooltips.View Receipts' | translate }}">
           <i class="fa fa-file-text"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate }}"
           matTooltipPosition="left" (click)="routeEdit($event)"
           [routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
           <i class="fa fa-arrow-circle-right"></i>
@@ -104,19 +104,19 @@
     </ng-container>
 
     <ng-container matColumnDef="header-principal">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Principal </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Principal"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Interest </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Interest"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Fees </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Fees"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-penalties">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Penalties </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Penalties"  |translate}} </th>
     </ng-container>
 
     <ng-container matColumnDef="header-action">
diff --git a/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html b/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html
index e0e740bbe..df88fe9f9 100644
--- a/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html
+++ b/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html
@@ -7,31 +7,31 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>Transaction Date</mat-label>
+          <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
             formControlName="transactionDate" required>
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            Transaction Date is <strong>required</strong>
+            {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong> {{ "labels.commons.required"  |translate}} </strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
+          <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
           <input type="number" formControlName="transactionAmount" required matInput />
           <mat-error *ngIf="editTransactionForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
+            {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong> {{ "labels.commons.required"  |translate}} </strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>External Id</mat-label>
+          <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
           <input matInput formControlName="externalId">
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Payment Type</mat-label>
+          <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
           <mat-select formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -43,40 +43,40 @@
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                <span class="m-l-10">Show Payment Details</span>
+                <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>Account Number</mat-label>
+          <mat-label>{{"labels.inputs.Account Number"  |translate}}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>Cheque</mat-label>
+          <mat-label>{{"labels.inputs.Cheque"  |translate}}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>Routing Code</mat-label>
+          <mat-label>{{"labels.inputs.Routing Code"  |translate}}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>Receipt Number</mat-label>
+          <mat-label>{{"labels.inputs.Receipt Number"  |translate}}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>Bank</mat-label>
+          <mat-label>{{"labels.inputs.Bank"  |translate}}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{"labels.buttons.Submit"  |translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>
diff --git a/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html b/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
index 19ff665e7..d010bda7a 100644
--- a/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
+++ b/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
@@ -3,31 +3,31 @@
   <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
 
     <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
-      <mat-label>From Date</mat-label>
+      <mat-label>{{"labels.inputs.From Date"  |translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #fromDatePicker></mat-datepicker>
       <mat-error>
-        From date is <strong>required</strong>
+        {{"labels.inputs.From date"  |translate}}  {{ "labels.commons.is"  |translate}}  <strong> {{ "labels.commons.required"  |translate}} </strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
-      <mat-label>To Date</mat-label>
+      <mat-label>{{"labels.inputs.To Date"  |translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #toDatePicker></mat-datepicker>
       <mat-error>
-        To date is <strong>required</strong>
+        {{"labels.inputs.To date"  |translate}}  {{ "labels.commons.is"  |translate}}  <strong> {{ "labels.commons.required"  |translate}} </strong>
       </mat-error>
     </mat-form-field>
 
   </div>
 
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
-    <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+    <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel"  |translate}}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs" class="m-r-10"></fa-icon>Generate Report &nbsp;</button>
+    <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{"labels.buttons.Generate Report"  |translate}} &nbsp;</button>
   </div>
 
 </form>
diff --git a/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html b/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html
index b9935883d..72da1ce2a 100644
--- a/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html
+++ b/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html
@@ -2,7 +2,7 @@
 
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../../general']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back"  |translate}}</button>
   </div>
 
   <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
diff --git a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
index 18f2544fb..7dec3e6fc 100644
--- a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
+++ b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
@@ -92,14 +92,14 @@
 
           <table mat-table [dataSource]="transactionRelations">
               <ng-container matColumnDef="relationType">
-                <th mat-header-cell *matHeaderCellDef> Relation Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Relation Type"  |translate}} </th>
                 <td mat-cell *matCellDef="let transactionRel" [matTooltip]="transactionRel.paymentType">
                   {{ transactionRel.relationType | translate }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="toTransaction">
-                <th mat-header-cell *matHeaderCellDef> Transaction </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction"  |translate}} </th>
                 <td mat-cell *matCellDef="let transactionRel">
                   <a [href]="loanTransactionRelatedLink(transactionRel.toLoanTransaction)">
                     {{ transactionRel.toLoanTransaction }}
@@ -108,7 +108,7 @@
               </ng-container>
 
               <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef> Amount </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
                 <td mat-cell *matCellDef="let transactionRel">
                   {{ transactionRel.amount | currency }} {{ transactionData.currency.code }}
                 </td>
diff --git a/src/app/loans/loans-view/view-charge/view-charge.component.html b/src/app/loans/loans-view/view-charge/view-charge.component.html
index 159c62206..ea8a0edcb 100644
--- a/src/app/loans/loans-view/view-charge/view-charge.component.html
+++ b/src/app/loans/loans-view/view-charge/view-charge.component.html
@@ -2,26 +2,26 @@
   fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="flag" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit"  |translate}}
   </button>
   <span *ngIf="allowPayCharge">
     <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
       <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-      Pay
+      {{"labels.buttons.Pay"  |translate}}
     </button>
   </span>
   <span *ngIf="allowWaive">
     <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
       (click)="waiveCharge()">
       <fa-icon icon="flag" class="m-r-10"></fa-icon>
-      Waive
+      {{"labels.buttons.Waive"  |translate}}
     </button>
   </span>
   <span>
     <button mat-raised-button color="accent" *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'"
       (click)="adjustmentCharge()">
       <fa-icon icon="pen" class="m-r-10"></fa-icon>
-      Adjustment
+      {{"labels.buttons.Adjustment"  |translate}}
     </button>
   </span>
 </div>
@@ -30,11 +30,11 @@
   fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit"  |translate}}
   </button>
   <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete"  |translate}}
   </button>
 </div>
 
@@ -49,7 +49,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Name
+          {{"labels.inputs.name"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +57,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Charge Type
+          {{"labels.inputs.Charge Type"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -65,7 +65,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{"labels.inputs.Currency"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -73,7 +73,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Payment due at
+          {{"labels.inputs.Payment due at"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -81,7 +81,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Payment due as of
+          {{"labels.inputs.Payment due as of"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -89,7 +89,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Calculation Type
+          {{"labels.inputs.Calculation Type"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -97,7 +97,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Due
+          {{"labels.inputs.Due"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -105,7 +105,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Paid
+          {{"labels.inputs.Paid"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -113,7 +113,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Waived
+          {{"labels.inputs.Waived"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -121,7 +121,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Outstanding
+          {{"labels.inputs.Outstanding"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -129,7 +129,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Submitted On Date
+          {{"labels.inputs.Submitted On Date"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -139,7 +139,7 @@
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{"labels.buttons.Back" | translate }}</button>
       </div>
     </mat-card-content>
 
diff --git a/src/app/search/search-page/search-page.component.html b/src/app/search/search-page/search-page.component.html
index 1339e8b24..a35f6ecfc 100644
--- a/src/app/search/search-page/search-page.component.html
+++ b/src/app/search/search-page/search-page.component.html
@@ -2,48 +2,48 @@
 
   <mat-card fxLayout="column" fxLayoutGap="2%" *ngIf="hasResults">
 
-    <mat-error *ngIf="overload">Searched query resulted more than 200 records, showing first 200 records.</mat-error>
+    <mat-error *ngIf="overload">{{ 'error.Searched query resulted more than 200 records'  |translate}}</mat-error>
 
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="entityType">
-        <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Entity Type'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityType}} </td>
       </ng-container>
 
       <ng-container matColumnDef="entityName">
-        <th mat-header-cell *matHeaderCellDef> Entity Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Entity Name'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="entityAccount">
-        <th mat-header-cell *matHeaderCellDef> Account No </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Account No'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details">
           <mifosx-account-number display="left" accountNo="{{entity.entityAccountNo}}"></mifosx-account-number>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef> External Id </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.External Id'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details">
           <mifosx-external-identifier externalId="{{entity.entityExternalId}}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="parentType">
-        <th mat-header-cell *matHeaderCellDef> Parent Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Parent Type'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details"> {{ ['CLIENT','GROUP', 'CENTER'].includes(entity.entityType) ? 'Office' : 'Client' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="parentName">
-        <th mat-header-cell *matHeaderCellDef> Parent Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Parent Name'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.parentName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="details">
-        <th mat-header-cell *matHeaderCellDef> Details </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Details'  |translate}} </th>
         <td mat-cell *matCellDef="let entity" class="view-details">
-          <button mat-icon-button matTooltip="View Entity" (click)="navigate(entity)" matTooltipPosition="right">
+          <button mat-icon-button matTooltip="{{ 'tooltips.View Entity' | translate }}" (click)="navigate(entity)" matTooltipPosition="right">
             <fa-icon icon="eye" size="lg"></fa-icon>
           </button>
         </td>
@@ -63,7 +63,7 @@
 
       <div class="message">
         <i class="fa fa-exclamation-circle alert-check"></i>
-        No data found
+        {{ 'labels.text.No data found'  |translate}}
       </div>
 
     </div>
diff --git a/src/assets/translations/en-US.json b/src/assets/translations/en-US.json
index 105fb0c7e..f39db88e2 100644
--- a/src/assets/translations/en-US.json
+++ b/src/assets/translations/en-US.json
@@ -2192,4 +2192,4 @@
     "To calculate interest": "The setting for number of days in year to use to calculate interest",
     "Track and report on share accounts": "The number of decimal places to be used to track and report on share accounts"
   }
-}
+}
\ No newline at end of file