diff --git a/src/app/navigation/center-navigation/center-navigation.component.html b/src/app/navigation/center-navigation/center-navigation.component.html
index 0a83bef3d..0dd9ed1eb 100644
--- a/src/app/navigation/center-navigation/center-navigation.component.html
+++ b/src/app/navigation/center-navigation/center-navigation.component.html
@@ -12,11 +12,11 @@
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          Account No:
+          {{"labels.inputs.Account No"  |translate}}:
           <mifosx-account-number accountNo="{{centerData.accountNo}}"></mifosx-account-number>
         </p>
         <p *ngIf="centerData.externalId">
-          External Id:
+          {{"labels.inputs.External Id"  |translate}}:
           <mifosx-external-identifier externalId="{{centerData.externalId}}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
@@ -31,7 +31,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Activation Date
+          {{"labels.inputs.Activation Date"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -39,7 +39,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Associated Officer
+          {{"labels.inputs.Associated Officer"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -47,7 +47,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          Number of Active Clients
+          {{"labels.inputs.Number of Active Clients"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          Number of Active Client Loans
+          {{"labels.inputs.Number of Active Client Loans"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -63,7 +63,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          Number of Active Client Borrowers
+          {{"labels.inputs.Number of Active Client Borrowers"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -71,7 +71,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          Number of Active Overdue Group Loans
+          {{"labels.inputs.Number of Active Overdue Group Loans"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -79,7 +79,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          Number of Active Overdue Client Loans
+          {{"labels.inputs.Number of Active Overdue Client Loans"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -87,7 +87,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-          Next Meeting Date
+          {{"labels.inputs.Next Meeting Date"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]">
@@ -95,7 +95,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable">
-          Meeting Frequency
+          {{"labels.inputs.Meeting Frequency"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable">
@@ -103,7 +103,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Number of Groups
+          {{"labels.inputs.Number of Groups"  |translate}}
         </div>
 
         <div fxFlex="50%">
diff --git a/src/app/navigation/client-navigation/client-navigation.component.html b/src/app/navigation/client-navigation/client-navigation.component.html
index 2b3778495..00845319c 100644
--- a/src/app/navigation/client-navigation/client-navigation.component.html
+++ b/src/app/navigation/client-navigation/client-navigation.component.html
@@ -12,7 +12,7 @@
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          Account No: {{ clientData.accountNo }} {{ clientData.externalId ? '| External ID: ' + clientData.externalId : '' }}
+          {{"labels.inputs.Account No"  |translate}}: {{ clientData.accountNo }} {{ clientData.externalId ? '| External ID: ' + clientData.externalId : '' }}
         </p>
       </mat-card-subtitle>
     </div>
@@ -27,7 +27,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.firstName">
-          First Name
+          {{"labels.inputs.First Name"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.firstName">
@@ -35,7 +35,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.middleName">
-          Middle Name
+          {{"labels.inputs.Middle Name"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.middleName">
@@ -43,7 +43,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.lastName">
-          Last Name
+          {{"labels.inputs.Last Name"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.lastName">
@@ -51,7 +51,7 @@
         </div>
         
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.dateOfBirth">
-          Date of Birth
+          {{"labels.inputs.Date of Birth"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.dateOfBirth">
@@ -59,7 +59,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.mobileNo">
-          Mobile Number
+          {{"labels.inputs.Mobile Number"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.mobileNo">
@@ -67,7 +67,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Activation Date
+          {{"labels.inputs.Activation Date"  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -75,7 +75,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.officeName">
-          Associated Office
+          {{"labels.inputs.Associated Office"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.officeName">
@@ -83,7 +83,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.staffName">
-          Associated Staff
+          {{"labels.inputs.Associated Staff"  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.staffName">
diff --git a/src/app/navigation/group-navigation/group-navigation.component.html b/src/app/navigation/group-navigation/group-navigation.component.html
index 8602fd08b..cf80a9073 100644
--- a/src/app/navigation/group-navigation/group-navigation.component.html
+++ b/src/app/navigation/group-navigation/group-navigation.component.html
@@ -12,7 +12,7 @@
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          Account No: {{ groupData.accountNo }} {{ groupData.externalId ? '| External ID: ' + groupData.externalId : '' }}
+          {{"labels.inputs.Account No"  |translate}}: {{ groupData.accountNo }} {{ groupData.externalId ? '| External ID: ' + groupData.externalId : '' }}
         </p>
       </mat-card-subtitle>
     </div>
@@ -25,7 +25,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="50%" class="mat-body-strong">
-            Activation Date
+            {{"labels.inputs.Activation Date"  |translate}}
           </div>
   
           <div fxFlex="50%">
@@ -33,7 +33,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Associated Officer
+            {{"labels.inputs.Associated Officer"  |translate}}
           </div>
   
           <div fxFlex="50%">
@@ -41,7 +41,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.centerName">
-            Associated Center
+            {{"labels.inputs.Associated Center"  |translate}}
           </div>
   
           <div fxFlex="50%" *ngIf="groupData.centerName">
@@ -49,7 +49,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-            Next Meeting Date
+            {{"labels.inputs.Next Meeting Date"  |translate}}
           </div>
   
           <div fxFlex="50%" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]">
@@ -57,7 +57,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable">
-            Meeting Frequency
+            {{"labels.inputs.Meeting Frequency"  |translate}}
           </div>
   
           <div fxFlex="50%" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable">
@@ -65,7 +65,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Number of Clients
+            {{"labels.inputs.Number of Clients"  |translate}}
           </div>
   
           <div fxFlex="50%">
diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.html b/src/app/navigation/loan-account-table/loan-account-table.component.html
index a5d8c675a..e5db66901 100644
--- a/src/app/navigation/loan-account-table/loan-account-table.component.html
+++ b/src/app/navigation/loan-account-table/loan-account-table.component.html
@@ -11,24 +11,24 @@
 <table mat-table [dataSource]="dataSource" matSort>
 
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number"  |translate}} </th>
     <td mat-cell *matCellDef="let loanAccount">{{ loanAccount.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="productName">
-    <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 loanAccount">{{ loanAccount.productName }}</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 loanAccount">
       <fa-icon matTooltip="{{ loanAccount.loanType.value }}" matTooltipPosition="right" [icon]="(loanAccount.loanType.code === 'accountType.individual') ? 'user' : 'users'" size="lg"></fa-icon>
     </td>
   </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 loanAccount">
       <span [className]="loanAccount.inArrears?'status-active-overdue' : (loanAccount.status.code | statusLookup)">
         <fa-icon matTooltip="{{ loanAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
diff --git a/src/app/navigation/member-groups/member-groups.component.html b/src/app/navigation/member-groups/member-groups.component.html
index ed87d5744..6267abcd4 100644
--- a/src/app/navigation/member-groups/member-groups.component.html
+++ b/src/app/navigation/member-groups/member-groups.component.html
@@ -8,12 +8,12 @@
 <table mat-table [dataSource]="dataSource" matSort>
 
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number"  |translate}} </th>
     <td mat-cell *matCellDef="let memberGroup"> {{ memberGroup.accountNo }} </td>
   </ng-container>
 
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Group Name </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Group Name"  |translate}} </th>
     <td mat-cell *matCellDef="let memberGroup"> {{ memberGroup.name }} </td>
   </ng-container>
 
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
index f5da2eb67..bf046a4e4 100644
--- a/src/app/navigation/navigation.component.html
+++ b/src/app/navigation/navigation.component.html
@@ -9,7 +9,7 @@
         <mat-card-content fxLayout="column">
 
           <mat-form-field *ngIf="!(officeData === undefined || officeData === null)">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office"  |translate}}</mat-label>
             <mat-select [formControl]="officeSelector">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
diff --git a/src/app/navigation/office-navigation/office-navigation.component.html b/src/app/navigation/office-navigation/office-navigation.component.html
index 9185a0d79..771f33da6 100644
--- a/src/app/navigation/office-navigation/office-navigation.component.html
+++ b/src/app/navigation/office-navigation/office-navigation.component.html
@@ -9,7 +9,7 @@
       </mat-card-title>
       <mat-card-subtitle>
         <p *ngIf="officeData.externalId">
-          External Id:<mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
+          {{"labels.inputs.External Id"  |translate}}:<mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
@@ -20,7 +20,7 @@
   <div fxLayout="row wrap" class="content">
 
     <div fxFlex="50%" class="mat-body-strong">
-      Opened On
+      {{"labels.inputs.Opened On"  |translate}}
     </div>
 
     <div fxFlex="50%">
@@ -28,7 +28,7 @@
     </div>
 
     <div fxFlex="50%" class="mat-body-strong" *ngIf="officeData.parentName">
-      Parent officeData
+      {{"labels.inputs.Parent officeData"  |translate}}
     </div>
 
     <div fxFlex="50%" *ngIf="officeData.parentName">
@@ -36,7 +36,7 @@
     </div>
 
     <div fxFlex="50%" class="mat-body-strong">
-      Number of Staff
+      {{"labels.inputs.Number of Staff"  |translate}}
     </div>
 
     <div fxFlex="50%">
diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.html b/src/app/navigation/savings-account-table/savings-account-table.component.html
index 24cd39d8d..3df24a8e9 100644
--- a/src/app/navigation/savings-account-table/savings-account-table.component.html
+++ b/src/app/navigation/savings-account-table/savings-account-table.component.html
@@ -11,22 +11,22 @@
 <table mat-table [dataSource]="dataSource" matSort>
 
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number"  |translate}} </th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="productName">
-    <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 savingsAccount">{{ savingsAccount.productName }}</td>
   </ng-container>
 
   <ng-container matColumnDef="accountBalance">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Balance"  |translate}} </th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.accountBalance }}</td>
   </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 savingsAccount">
       <span [className]="savingsAccount.status.code | statusLookup">
         <fa-icon matTooltip="{{ savingsAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
diff --git a/src/app/navigation/share-account-table/share-account-table.component.html b/src/app/navigation/share-account-table/share-account-table.component.html
index 76a8dc8a8..5d5d189ee 100644
--- a/src/app/navigation/share-account-table/share-account-table.component.html
+++ b/src/app/navigation/share-account-table/share-account-table.component.html
@@ -11,22 +11,22 @@
 <table mat-table [dataSource]="dataSource" matSort>
 
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number"  |translate}} </th>
     <td mat-cell *matCellDef="let shareAccount">{{ shareAccount.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="productName">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Share Account </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Share Account"  |translate}} </th>
     <td mat-cell *matCellDef="let shareAccount">{{ shareAccount.productName }}</td>
   </ng-container>
 
   <ng-container matColumnDef="totalApprovedShares">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> Approved Shares </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Approved Shares"  |translate}} </th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.totalApprovedShares }}</td>
   </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 shareAccount">
       <span [className]="shareAccount.status.code | statusLookup">
         <fa-icon matTooltip="{{ shareAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
diff --git a/src/app/navigation/staff-navigation/staff-navigation.component.html b/src/app/navigation/staff-navigation/staff-navigation.component.html
index 2f5838753..c73be5696 100644
--- a/src/app/navigation/staff-navigation/staff-navigation.component.html
+++ b/src/app/navigation/staff-navigation/staff-navigation.component.html
@@ -12,7 +12,7 @@
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          Associated Office: {{ employeeData.officeName }}
+          {{"labels.inputs.Associated Office"  |translate}}: {{ employeeData.officeName }}
         </p>
       </mat-card-subtitle>
     </div>
@@ -23,7 +23,7 @@
   <div fxLayout="row wrap" class="content">
 
     <div fxFlex="50%" class="mat-body-strong">
-      Joined On
+      {{"labels.inputs.Joined On"  |translate}}
     </div>
 
     <div fxFlex="50%">
@@ -31,7 +31,7 @@
     </div>
 
     <div fxFlex="50%" class="mat-body-strong">
-      Loan Officer
+      {{"labels.inputs.Loan Officer"  |translate}}
     </div>
 
     <div fxFlex="50%">
@@ -39,7 +39,7 @@
     </div>
 
     <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">
-      Mobile Number
+      {{"labels.inputs.Mobile Number"  |translate}}
     </div>
 
     <div fxFlex="50%" *ngIf="employeeData.mobileNo">
@@ -47,7 +47,7 @@
     </div>
 
     <div fxFlex="50%" class="mat-body-strong">
-      Number of Centers
+      {{"labels.inputs.Number of Centers"  |translate}}
     </div>
 
     <div fxFlex="50%">