diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.html b/src/app/core/shell/breadcrumb/breadcrumb.component.html
index 30fb015c1..7e55ec3ef 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.html
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.html
@@ -15,7 +15,7 @@
 
 <ng-template #templateBreadcrumb let-popover="popover">
   <h2>{{ 'labels.popovers.Breadcrumbs' | translate }}</h2>
-  <p class="mw300">This will show the user's current location in the app.</p>
+  <p class="mw300">{{"labels.text.User's current location" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
     <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html
index c83562b6e..6876ab6ca 100644
--- a/src/app/core/shell/sidenav/sidenav.component.html
+++ b/src/app/core/shell/sidenav/sidenav.component.html
@@ -51,61 +51,61 @@
       </div>
 
       <mat-nav-list>
-        <mat-list-item [routerLink]="['/dashboard']" matTooltip="Dashboard">
+        <mat-list-item [routerLink]="['/dashboard']" matTooltip="{{ 'tooltips.Dashboard' | translate }}">
           <mat-icon matListIcon >
             <fa-icon icon="tachometer-alt" size="sm"></fa-icon>
           </mat-icon>
           <a matLine #dashboard>{{ 'labels.menus.Dashboard' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/navigation']" matTooltip="Navigation">
+        <mat-list-item [routerLink]="['/navigation']" matTooltip="{{ 'tooltips.Navigation' | translate }}">
           <mat-icon matListIcon>
             <fa-icon icon="location-arrow" size="sm"></fa-icon>
           </mat-icon>
           <a matLine #navigation>{{ 'labels.menus.Navigation' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" matTooltip="Checker Inbox and Tasks">
+        <mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" matTooltip="{{ 'tooltips.Checker Inbox and Tasks' | translate }}">
           <mat-icon matListIcon>
             <i class="fa fa-check" ></i>
           </mat-icon>
           <a matLine>{{ 'labels.menus.Checker Inbox and Tasks' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/collections/individual-collection-sheet']" matTooltip="Individual Collection Sheet">
+        <mat-list-item [routerLink]="['/collections/individual-collection-sheet']" matTooltip="{{ 'tooltips.Individual Collection Sheet' | translate }}">
           <mat-icon matListIcon>
             <i class="fa fa-tasks "></i>
           </mat-icon>
           <a matLine>{{ 'labels.menus.Individual Collection Sheet' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/notifications']" matTooltip="Notifications">
+        <mat-list-item [routerLink]="['/notifications']" matTooltip="{{ 'tooltips.Notifications' | translate }}">
           <mat-icon matListIcon>
             <fa-icon icon="bell" size="sm"></fa-icon>
           </mat-icon>
           <a matLine>{{ 'labels.menus.Notifications' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/accounting/journal-entries/frequent-postings']" matTooltip="Frequent Postings">
+        <mat-list-item [routerLink]="['/accounting/journal-entries/frequent-postings']" matTooltip="{{ 'tooltips.Frequent Postings' | translate }}">
           <mat-icon matListIcon>
             <fa-icon icon="sync" size="sm"></fa-icon>
           </mat-icon>
           <a matLine #frequentPostings>{{ 'labels.menus.Frequent Postings' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/accounting/journal-entries/create']" matTooltip="Create Journal Entry">
+        <mat-list-item [routerLink]="['/accounting/journal-entries/create']" matTooltip="{{ 'tooltips.Create Journal Entry' | translate }}">
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>
           <a matLine #createJournalEntry>{{ 'labels.menus.Create Journal Entry' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/accounting/chart-of-accounts']" matTooltip="Chart Of Accounts">
+        <mat-list-item [routerLink]="['/accounting/chart-of-accounts']" matTooltip="{{ 'tooltips.Chart Of Accounts' | translate }}">
           <mat-icon matListIcon>
             <fa-icon icon="sitemap" size="sm"></fa-icon>
           </mat-icon>
           <a matLine #chartOfAccounts>{{ 'labels.menus.Chart of Accounts' | translate }}</a>
         </mat-list-item>
-        <mat-list-item (click)="showKeyboardShortcuts()" matTooltip="Keyboard Shortcuts">
+        <mat-list-item (click)="showKeyboardShortcuts()" matTooltip="{{ 'tooltips.Keyboard Shortcuts' | translate }}">
           <mat-icon matListIcon>
             <fa-icon icon="keyboard" size="sm"></fa-icon>
           </mat-icon>
           <a matLine>{{ 'labels.menus.Keyboard Shortcuts' | translate }}</a>
         </mat-list-item>
-        <mat-list-item matTooltip="Help">
+        <mat-list-item matTooltip="{{ 'tooltips.Help' | translate }}">
           <mat-icon matListIcon (click)="help()">
             <fa-icon icon="question-circle" size="sm"></fa-icon>
           </mat-icon>
@@ -121,80 +121,80 @@
 
 
 <ng-template #templateLogo let-popover="popover">
-  <p class="mw300">This logo will return the user to the welcome page from anywhere in the system..</p>
+  <p class="mw300">{{"labels.text.Welcome page logo from anywhere" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateUserPanel let-popover="popover">
   <h2>{{ 'labels.menus.User Panel' | translate }}</h2>
-  <p class="mw300">This section contains user name, user photograph, user settings and sign out button.</p>
+  <p class="mw300">{{"labels.text.Section Buttons" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLogo,logo,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLogo,logo,'bottom', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFrequentlyAccessed let-popover="popover">
   <h2>{{ 'labels.menus.Frequently Accessed' | translate }}</h2>
-  <p class="mw300">This contains shortcut to the frequently accessed components.</p>
+  <p class="mw300">{{"labels.text.Shortcut to the frequently accessed components" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateDashboard let-popover="popover">
   <h2>{{ 'labels.menus.Dashboard' | translate }}</h2>
-  <p class="mw300">This will navigate the user to dashboard component.</p>
+  <p class="mw300">{{"labels.text.User Dashboard Component" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateNavigation let-popover="popover">
   <h2>{{ 'labels.menus.Navigation' | translate }}</h2>
-  <p class="mw300">This will navigate the user to entity navigation screen.</p>
+  <p class="mw300">{{"labels.text.User Entity navigation screen" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'top', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'top', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFrequentPostings let-popover="popover">
   <h2>{{ 'labels.menus.Frequent Postings' | translate }}</h2>
-  <p class="mw300">Shortcut to Journal entry screen with accouting rules in place</p>
+  <p class="mw300">{{"labels.text.Shortcut accounting rules" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateCreateJournalEntry let-popover="popover">
   <h2>{{ 'labels.menus.Create Journal Entry' | translate }}</h2>
-  <p class="mw300">Shortcut to the create journal entry screen.</p>
+  <p class="mw300">{{"labels.text.Shortcut entry screen" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'top', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateChartOfAccounts,chartOfAccounts,'top', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'top', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateChartOfAccounts,chartOfAccounts,'top', true);">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateChartOfAccounts let-popover="popover">
   <h2>{{ 'labels.menus.Chart of Accounts' | translate }}</h2>
-  <p class="mw300">Shortcut to chart of accounts screen to add/modify the ledger accounts.</p>
+  <p class="mw300">{{"labels.text.Shortcut accounts screen" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index a97992f0c..fdb9a022b 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -1,10 +1,10 @@
 <mat-toolbar fxLayout="row" color="primary" id="mifosx-toolbar">
 
-  <button mat-icon-button *ngIf="!sidenavCollapsed" (click)="toggleSidenav()" matTooltip="Toggle Hide/Open">
+  <button mat-icon-button *ngIf="!sidenavCollapsed" (click)="toggleSidenav()" matTooltip="{{ 'tooltips.Toggle Hide/Open' | translate }}">
     <fa-icon icon="bars" size="lg"></fa-icon>
   </button>
 
-  <button mat-icon-button *ngIf="sidenav.opened" (click)="toggleSidenavCollapse()" matTooltip="Toggle Collapse" fxHide.lt-md="true">
+  <button mat-icon-button *ngIf="sidenav.opened" (click)="toggleSidenavCollapse()" matTooltip="{{ 'tooltips.Toggle Collapse' | translate }}" fxHide.lt-md="true">
     <fa-icon *ngIf="!sidenavCollapsed" icon="chevron-left"></fa-icon>
     <fa-icon *ngIf="sidenavCollapsed" icon="chevron-right"></fa-icon>
   </button>
@@ -133,109 +133,109 @@
 
 <ng-template #templateInstitution let-popover="popover">
   <h2>{{ 'labels.menus.Institution' | translate }}</h2>
-  <p class="mw300">This button will be used for individual accounts, groups and centers</p>
+  <p class="mw300">{{"labels.text.Button for individual account" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAccounting let-popover="popover">
   <h2>{{ 'labels.menus.Accounting' | translate }}</h2>
-  <p class="mw300">This button opens the menu to access the system tools required by the accounting department.</p>
+  <p class="mw300">{{"labels.text.Button for accounting department" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateInstitution, institution)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateInstitution, institution)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateReports let-popover="popover">
   <h2>{{ 'labels.menus.Reports' | translate }}</h2>
-  <p class="mw300">Dropdown provides access to all types of system reports including the defualt reports provided by the Mifos and system reports that will be developed by the organization.</p>
+  <p class="mw300">{{"labels.text.Dropdown system reports" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAdmin let-popover="popover">
   <h2>{{ 'labels.menus.Admin' | translate }}</h2>
-  <p class="mw300">This is where the system is setup according to your organization including users, organization, products and templates.</p>
+  <p class="mw300">{{"labels.text.Setup organization including users" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateSelfService let-popover="popover">
   <h2>{{ 'labels.menus.Self Service' | translate }}</h2>
-  <p class="mw300">Dropdown provides access to self service user administrative portal, app configuration and task management.</p>
+  <p class="mw300">{{"labels.text.Dropdown self service user administrative portal" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateConfigWizard let-popover="popover">
   <h2>{{ 'labels.menus.Configuration Wizard' | translate }}</h2>
-  <p class="mw300">This buttons opens up the configuration wizard to help the user in initial setup and application tour.</p>
+  <p class="mw300">{{"labels.text.Initial setup and application tour" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateGlobalSearch let-popover="popover">
   <h2>{{ 'labels.menus.Global Search' | translate }}</h2>
-  <p class="mw300">This will allow the user to quickly navigate the system selecting entity while searching makes the navigation more robust.</p>
+  <p class="mw300">{{"labels.text.Navigate system selecting entity" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateLanguageSelector let-popover="popover">
   <h2>{{ 'labels.menus.Language Selector' | translate }}</h2>
-  <p class="mw300">Organization can select a language here from the available languages here.</p>
+  <p class="mw300">{{"labels.text.Organization available languages" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateThemePicker let-popover="popover">
   <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
-  <p class="mw300">This will be used to choose a theme as per organization will.</p>
+  <p class="mw300">{{"labels.text.Choose a theme as per organization will" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateNotifications let-popover="popover">
   <h2>{{ 'labels.menus.Notifications' | translate }}</h2>
-  <p class="mw300">This shows all the notifications.</p>
+  <p class="mw300">{{"labels.text.This shows all the notifications." | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAppMenu, appMenu)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAppMenu, appMenu)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAppMenu let-popover="popover">
   <h2>{{ 'labels.menus.Application Menu' | translate }}</h2>
-  <p class="mw300">This will have logged in user settings and sign out button.</p>
+  <p class="mw300">{{"labels.text.User settings and sign out button" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">{{"labels.buttons.Back" | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>