diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html
index 41571f05e..9e26b4bbd 100644
--- a/src/app/centers/centers-view/centers-view.component.html
+++ b/src/app/centers/centers-view/centers-view.component.html
@@ -28,7 +28,8 @@
                 Account #:{{centerViewData.accountNo}} <br />
                 Office: {{centerViewData.officeName}} <br />
                 <span *ngIf="centerViewData.externalId">
-                  External Id: {{centerViewData.externalId}} <br />
+                  External Id:
+                  <mifosx-external-identifier externalId="{{centerViewData.externalId}}"></mifosx-external-identifier><br />
                 </span>
                 <span *ngIf="centerViewData.staffName">
                   Staff: {{centerViewData.staffName}} <br />
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 bfa6df462..d6acccece 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
@@ -32,7 +32,9 @@
 
   <div fxFlexFill *ngIf="client.externalId">
     <span fxFlex="40%">External Id</span>
-    <span fxFlex="60%">{{ client.externalId }}</span>
+    <span fxFlex="60%">
+      <mifosx-external-identifier externalId="{{client.externalId}}"></mifosx-external-identifier>
+    </span>
   </div>
 
   <div fxFlexFill *ngIf="client.mobileNo">
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index 79352a8ac..aad54bc78 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -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> {{clientViewData.displayName}}
+            <b>Client Name :</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,9 +46,9 @@
 
         <mat-card-subtitle>
           <p>
-            <b>Office :</b> {{clientViewData.officeName}}<br />
-            <b>Client :</b> {{clientViewData.accountNo}}<br />
-            <b>External Id:</b> {{clientViewData.externalId}}<br />
+            <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 ||
               'Unassigned'}}<br /></span>
             <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate |
diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index c22844eff..f9d81d7ab 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -26,20 +26,22 @@
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
+        <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>
-        <td mat-cell *matCellDef="let row"> {{row.accountNumber}} </td>
+        <td mat-cell *matCellDef="let row">
+          <mifosx-account-number display="left" accountNo="{{row.accountNumber}}"></mifosx-account-number>
+        </td>
       </ng-container>
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalId">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-external-identifier externalId="{{row.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier display="left" externalId="{{row.externalId}}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
@@ -56,15 +58,14 @@
         </td>
       </ng-container>
 
-      <!-- Color Column -->
       <ng-container matColumnDef="officeName">
         <th mat-header-cell *matHeaderCellDef> Office Name </th>
         <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']" class="select-row">
-      </tr> 
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row">
+      </tr>
     </table>
 
     <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 50, 100]" [length]="totalRows" (page)="pageChanged($event)"
diff --git a/src/app/loans/external-asset-owner.service.ts b/src/app/loans/external-asset-owner.service.ts
index a7d72dd5e..9e1f86770 100644
--- a/src/app/loans/external-asset-owner.service.ts
+++ b/src/app/loans/external-asset-owner.service.ts
@@ -20,6 +20,17 @@ export class ExternalAssetOwnerService {
     return this.http.post(`/external-asset-owners/transfers/loans/${loanId}`, data, { params: httpParams });
   }
 
+  /**
+   * @param {string} transferId Transfer Id
+   * @param {string} command Command
+   * @param {any} data Data
+   * @returns {Observable<any>}
+   */
+  executeExternalAssetOwnerTransferCommand(transferId: string, data: any, command: string): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/external-asset-owners/transfers/${transferId}`, data, { params: httpParams });
+  }
+
   /**
    * @param {string} loanId Loan Id
    * @returns {Observable<any>}
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 2227b4468..9b104af1d 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
@@ -38,7 +38,9 @@
 
     <div fxFlexFill *ngIf="loansAccount.externalId">
       <span fxFlex="40%">External id:</span>
-      <span fxFlex="60%">{{ loansAccount.externalId }}</span>
+      <span fxFlex="60%">
+        <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
+      </span>
     </div>
 
     <h3 class="mat-h3" fxFlexFill>Terms</h3>
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 52b9c8015..ba46ec8e4 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
@@ -36,7 +36,9 @@
 
   <div fxFlexFill *ngIf="loansAccount.externalId">
     <span fxFlex="40%">External id:</span>
-    <span fxFlex="60%">{{ loansAccount.externalId }}</span>
+    <span fxFlex="60%">
+      <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
+    </span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>Terms</h3>
diff --git a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts b/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts
index 418686391..17253d9ed 100644
--- a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts
+++ b/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts
@@ -23,7 +23,6 @@ export class DatatableTabComponent {
     this.entityDatatable = null;
     this.route.data.subscribe((data: { loanDatatable: any }) => {
       this.entityDatatable = data.loanDatatable;
-      console.log(this.entityDatatable);
       this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
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 a9c85ff16..839e78b15 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
@@ -18,7 +18,7 @@
               <b>Owner External Id :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{activeTransferData.owner.externalId}}
+              <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
             </td>
           </tr>
           <tr>
@@ -44,27 +44,27 @@
                 <tbody>
                   <tr>
                     <td fxFlex="50%"><b>Principal Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
                     <td fxFlex="50%"><b>Interest Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
                     <td fxFlex="50%"><b>Fees Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
                     <td fxFlex="50%"><b>Penalties Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
                     <td fxFlex="50%"><b>Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
                     <td fxFlex="50%"><b>Overpaid :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | number}}</td>
+                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
                   </tr>
                 </tbody>
               </table>
@@ -144,7 +144,7 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let item" class="center td-min-space">
-        <button class="account-action-button" *ngIf="!isPending(item)" mat-raised-button color="primary" matTooltip="View Journal Entries"
+        <button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="View Journal Entries"
           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/external-asset-owner-tab/external-asset-owner-tab.component.ts b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts
index 3ee3bc753..8ee7ab32b 100644
--- a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts
@@ -11,6 +11,7 @@ import { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.co
 })
 export class ExternalAssetOwnerTabComponent implements OnInit {
 
+  defaultDate = '9999-12-31';
   loanTransfersData: any[] = [];
   activeTransferData: any;
   loanTransferColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'actions'];
@@ -27,8 +28,6 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
       this.loanTransfersData =  data.loanTransfersData.empty ? [] : data.loanTransfersData.content;
       this.activeTransferData = data.activeTransferData || null;
       this.existActiveTransfer = (data.activeTransferData && data.activeTransferData.transferId != null);
-      console.log(this.existActiveTransfer);
-      console.log(this.activeTransferData);
     });
   }
 
@@ -40,7 +39,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   }
 
   itemCurrentStatus(item: any): string {
-    if (item.status === 'BUYBACK' && item.effectiveTo === '9999-12-31') {
+    if (this.isBuyBackPending(item)) {
       return item.status + ' PENDING';
     }
     return item.status;
@@ -54,6 +53,14 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     return (item.status === 'PENDING');
   }
 
+  isPendingOrCanceled(item: any): boolean {
+    return ((item.status === 'PENDING') || (item.status === 'CANCELLED') || this.isBuyBackPending(item));
+  }
+
+  isBuyBackPending(item: any): boolean {
+    return (item.status === 'BUYBACK' && item.effectiveTo === this.defaultDate);
+  }
+
   canBeCancelled(): boolean {
     return this.validateStatus('PENDING');
   }
@@ -62,7 +69,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     if (this.currentItem == null) {
       return true;
     }
-    return ['', 'BUYBACK'].includes(this.currentItem.status);
+    return ['', 'CANCELLED'].includes(this.currentItem.status) || (this.currentItem.status === 'BUYBACK' && this.currentItem.effectiveTo !== this.defaultDate);
   }
 
   canBeBuyed(): boolean {
@@ -89,9 +96,9 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
         const payload: any = {
           transferExternalId: this.currentItem.transferExternalId
         };
-        this.externalAssetOwnerService.executeExternalAssetOwnerLoanCommand(this.currentItem.loan.loanId, payload, 'cancel')
+        this.externalAssetOwnerService.executeExternalAssetOwnerTransferCommand(this.currentItem.transferId, payload, 'cancel')
           .subscribe((result: any) => {
-            console.log(result);
+            this.reload();
         });
       }
     });
@@ -105,4 +112,9 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
     ev.stopPropagation();
   }
 
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/`, {skipLocationChange: true})
+      .then(() => this.router.navigate([url]));
+  }
 }
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 6d1ba4069..a6e162a99 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
@@ -113,7 +113,9 @@
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
-            <span *ngIf="loanDetails.externalId"> {{loanDetails.externalId}} </span>
+            <span *ngIf="loanDetails.externalId">
+              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+            </span>
             <span *ngIf="!loanDetails.externalId"> Not Available </span>
           </ng-container>
 
@@ -159,11 +161,13 @@
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Currency'">
-            <span> {{loanDetails.currency.name }} </span>
+            <span> {{loanDetails.currency.name }} {{loanDetails.currency.code}} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
-            <span *ngIf="loanDetails.externalId"> {{loanDetails.externalId}} </span>
+            <span *ngIf="loanDetails.externalId">
+              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+            </span>
             <span *ngIf="!loanDetails.externalId"> Not Available </span>
           </ng-container>
 
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 67b9c4276..c41336aea 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
@@ -25,7 +25,9 @@
             </tr>
             <tr>
               <td>External Id</td>
-              <td>{{dataObject.externalId}}</td>
+              <td>
+                <mifosx-external-identifier externalId="{{dataObject.externalId}}"></mifosx-external-identifier>
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index 8a31e9c8d..962d2f419 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -20,8 +20,7 @@
               <h3>
                 <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}"
                   [ngClass]="loanDetailsData.inArrears?'status-active-overdue':( iconLoanStatusColor() | statusLookup)"></i>
-                Loan Product: {{loanDetailsData.loanProductName}}<span
-                  class="m-l-10">({{loanDetailsData.accountNo}})</span>
+                Loan Product: {{loanDetailsData.loanProductName}} <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}"></mifosx-account-number>
               </h3>
               <span class="loans-overview">
                 {{entityType}} Name: {{loanDetailsData.clientName ||
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 e02dd7bd6..4efdd2198 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
@@ -81,7 +81,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.externalId">
-          {{ transactionData.externalId }}
+          <mifosx-external-identifier externalId="{{transactionData.externalId}}" completed="true"></mifosx-external-identifier>
         </div>
 
         <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>
diff --git a/src/app/navigation/center-navigation/center-navigation.component.html b/src/app/navigation/center-navigation/center-navigation.component.html
index 26bfce818..0a83bef3d 100644
--- a/src/app/navigation/center-navigation/center-navigation.component.html
+++ b/src/app/navigation/center-navigation/center-navigation.component.html
@@ -4,7 +4,7 @@
     <div class="mat-typography">
       <mat-card-title>
         <h2>
-          {{ centerData.name }} 
+          {{ centerData.name }}
           <span [className]="centerData.status.code | statusLookup">
             <fa-icon matTooltip="{{ centerData.status.value }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
           </span>
@@ -12,7 +12,12 @@
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          Account No: {{ centerData.accountNo }} | {{ centerData.externalId ? '| External ID: ' + centerData.externalId : '' }}
+          Account No:
+          <mifosx-account-number accountNo="{{centerData.accountNo}}"></mifosx-account-number>
+        </p>
+        <p *ngIf="centerData.externalId">
+          External Id:
+          <mifosx-external-identifier externalId="{{centerData.externalId}}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
@@ -105,7 +110,7 @@
           {{ groupData ? groupData.length : '' }}
         </div>
 
-      </div>    
+      </div>
     </mat-tab>
 
     <mat-tab label="Loan Accounts" *ngIf="centerAccountsData && centerAccountsData.loanAccounts">
@@ -115,7 +120,7 @@
     <mat-tab label="Savings Accounts" *ngIf="centerAccountsData && centerAccountsData.savingsAccounts">
       <mifosx-savings-account-table [savingsAccountData]="centerAccountsData.savingsAccounts"></mifosx-savings-account-table>
     </mat-tab>
-    
+
   </mat-tab-group>
 
 </mat-card-content>
diff --git a/src/app/navigation/office-navigation/office-navigation.component.html b/src/app/navigation/office-navigation/office-navigation.component.html
index b09310f40..9185a0d79 100644
--- a/src/app/navigation/office-navigation/office-navigation.component.html
+++ b/src/app/navigation/office-navigation/office-navigation.component.html
@@ -4,16 +4,16 @@
     <div class="mat-typography">
       <mat-card-title>
         <h2>
-          {{ officeData.name }} 
+          {{ officeData.name }}
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
-        <p>
-          {{ officeData.externalId ? 'External ID: ' + officeData.externalId : '' }}
+        <p *ngIf="officeData.externalId">
+          External Id:<mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
-  </mat-card-title-group>      
+  </mat-card-title-group>
 </mat-card-header>
 
 <mat-card-content>
diff --git a/src/app/organization/manage-funds/manage-funds.component.html b/src/app/organization/manage-funds/manage-funds.component.html
index 3ea6780f6..9b5d457ec 100644
--- a/src/app/organization/manage-funds/manage-funds.component.html
+++ b/src/app/organization/manage-funds/manage-funds.component.html
@@ -27,7 +27,9 @@
 
       <ng-container matColumnDef="externalId">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.externalId }} </td>
+        <td mat-cell *matCellDef="let charge">
+          <mifosx-external-identifier externalId="{{charge.externalId}}"></mifosx-external-identifier>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/organization/manage-funds/view-fund/view-fund.component.html b/src/app/organization/manage-funds/view-fund/view-fund.component.html
index 56bd361ab..32272659b 100644
--- a/src/app/organization/manage-funds/view-fund/view-fund.component.html
+++ b/src/app/organization/manage-funds/view-fund/view-fund.component.html
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ fundData.externalId }}
+          <mifosx-external-identifier externalId="{{fundData.externalId}}" completed="true"></mifosx-external-identifier>
         </div>
 
       </div>
diff --git a/src/app/organization/offices/offices.component.html b/src/app/organization/offices/offices.component.html
index 85e2f40c8..c20716a8d 100644
--- a/src/app/organization/offices/offices.component.html
+++ b/src/app/organization/offices/offices.component.html
@@ -170,11 +170,11 @@
                 </div>
 
                 <div fxFlex="50%" class="mat-body-strong" *ngIf="office.externalId">
-                  {{'External ID'|translate}}
+                  {{'External Id'|translate}}
                 </div>
 
                 <div fxFlex="50%" *ngIf="office.externalId">
-                  {{ office.externalId }}
+                  <mifosx-external-identifier externalId="{{office.externalId}}"></mifosx-external-identifier>
                 </div>
 
               </div>
diff --git a/src/app/organization/offices/view-office/general-tab/general-tab.component.html b/src/app/organization/offices/view-office/general-tab/general-tab.component.html
index 2ab1a4ccd..31f3bda36 100644
--- a/src/app/organization/offices/view-office/general-tab/general-tab.component.html
+++ b/src/app/organization/offices/view-office/general-tab/general-tab.component.html
@@ -34,8 +34,11 @@
     <div fxFlex="45%" class="mat-body-strong left">
       External Id
     </div>
-    <div fxFlex="50%" class="right">
-      {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
+    <div fxFlex="50%" class="right" *ngIf="officeData.externalId">
+      <mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
+    </div>
+    <div fxFlex="50%" class="right" *ngIf="!officeData.externalId">
+      Unassigned
     </div>
   </div>
 
diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
index c166d8713..4517f2a28 100644
--- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
@@ -16,7 +16,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">External Id</span>
-    <span fxFlex="60%">{{ savingsAccount.externalId || 'Unassigned' }}</span>
+    <span fxFlex="60%" *ngIf="savingsAccount.externalId">
+      <mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
+    </span>
+    <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
+      Unassigned
+    </span>
   </div>
 
   <div fxFlexFill>
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html
index 9a65ae47a..07557a80f 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.html
+++ b/src/app/savings/savings-account-view/savings-account-view.component.html
@@ -18,7 +18,8 @@
               [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
             <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
               [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-            Savings Product : {{savingsAccountData.savingsProductName}}<span class="m-l-10">({{savingsAccountData.accountNo}})</span>
+            Savings Product : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
@@ -213,7 +214,10 @@
               </tr>
               <tr>
                 <td>External Id</td>
-                <td>{{savingsAccountData.externalId ? savingsAccountData.externalId : 'Not Provided'}}</td>
+                <td *ngIf="savingsAccountData.externalId">
+                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+                </td>
+                <td *ngIf="!savingsAccountData.externalId">Not Provided</td>
               </tr>
             </tbody>
           </table>
@@ -238,8 +242,10 @@
               </tr>
               <tr>
                 <td>External Id</td>
-                <td>{{savingsAccountData.externalId ? savingsAccountData.externalId : 'Not Provided'}}</td>
-              </tr>
+                <td *ngIf="savingsAccountData.externalId">
+                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+                </td>
+                <td *ngIf="!savingsAccountData.externalId">Not Provided</td>              </tr>
               <tr>
                 <td>Currency</td>
                 <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
diff --git a/src/app/shared/account-number/account-number.component.html b/src/app/shared/account-number/account-number.component.html
new file mode 100644
index 000000000..59eb3cdaa
--- /dev/null
+++ b/src/app/shared/account-number/account-number.component.html
@@ -0,0 +1,5 @@
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5">{{ accountNo }}</span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+</span>
diff --git a/src/app/shared/account-number/account-number.component.scss b/src/app/shared/account-number/account-number.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/account-number/account-number.component.spec.ts b/src/app/shared/account-number/account-number.component.spec.ts
new file mode 100644
index 000000000..c43c833ff
--- /dev/null
+++ b/src/app/shared/account-number/account-number.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountNumberComponent } from './account-number.component';
+
+describe('AccountNumberComponent', () => {
+  let component: AccountNumberComponent;
+  let fixture: ComponentFixture<AccountNumberComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AccountNumberComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountNumberComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/account-number/account-number.component.ts b/src/app/shared/account-number/account-number.component.ts
new file mode 100644
index 000000000..a1b7e47df
--- /dev/null
+++ b/src/app/shared/account-number/account-number.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+  selector: 'mifosx-account-number',
+  templateUrl: './account-number.component.html',
+  styleUrls: ['./account-number.component.scss']
+})
+export class AccountNumberComponent implements OnInit {
+  @Input() accountNo: string;
+  @Input() display = 'right';
+
+  iconVisible = false;
+  displayL = false;
+  displayR = true;
+
+  constructor(private clipboard: Clipboard) { }
+
+  ngOnInit(): void {
+    this.displayL = (this.display === 'left');
+    this.displayR = (this.display === 'right');
+  }
+
+  copyValue(): void {
+    this.clipboard.copy(this.accountNo);
+  }
+
+  mouseEnter() {
+    this.iconVisible = true;
+  }
+
+  mouseLeave() {
+    this.iconVisible = false;
+  }
+}
diff --git a/src/app/shared/entity-name/entity-name.component.html b/src/app/shared/entity-name/entity-name.component.html
new file mode 100644
index 000000000..abe9f322f
--- /dev/null
+++ b/src/app/shared/entity-name/entity-name.component.html
@@ -0,0 +1,5 @@
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5"><b>{{ entityName }}</b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+</span>
diff --git a/src/app/shared/entity-name/entity-name.component.scss b/src/app/shared/entity-name/entity-name.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/entity-name/entity-name.component.spec.ts b/src/app/shared/entity-name/entity-name.component.spec.ts
new file mode 100644
index 000000000..70491c14d
--- /dev/null
+++ b/src/app/shared/entity-name/entity-name.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntityNameComponent } from './entity-name.component';
+
+describe('EntityNameComponent', () => {
+  let component: EntityNameComponent;
+  let fixture: ComponentFixture<EntityNameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EntityNameComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EntityNameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/entity-name/entity-name.component.ts b/src/app/shared/entity-name/entity-name.component.ts
new file mode 100644
index 000000000..129ed323d
--- /dev/null
+++ b/src/app/shared/entity-name/entity-name.component.ts
@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+  selector: 'mifosx-entity-name',
+  templateUrl: './entity-name.component.html',
+  styleUrls: ['./entity-name.component.scss']
+})
+export class EntityNameComponent implements OnInit {
+
+  @Input() entityName: string;
+  @Input() display = 'right';
+
+  iconVisible = false;
+  displayL = false;
+  displayR = true;
+
+  constructor(private clipboard: Clipboard) { }
+
+  ngOnInit(): void {
+    this.displayL = (this.display === 'left');
+    this.displayR = (this.display === 'right');
+  }
+
+  copyValue(): void {
+    this.clipboard.copy(this.entityName);
+  }
+
+  mouseEnter() {
+    this.iconVisible = true;
+  }
+
+  mouseLeave() {
+    this.iconVisible = false;
+  }
+}
diff --git a/src/app/shared/external-identifier/external-identifier.component.html b/src/app/shared/external-identifier/external-identifier.component.html
index c9f2ac7d2..9f6aa167d 100644
--- a/src/app/shared/external-identifier/external-identifier.component.html
+++ b/src/app/shared/external-identifier/external-identifier.component.html
@@ -1,5 +1,8 @@
-<div>
-  <span matTooltip="{{externalId}}" (mouseenter)="$event.stopImmediatePropagation()" (mouseleave)="$event.stopImmediatePropagation()" #tooltip="matTooltip"></span>
-  <span *ngIf="isLongValue()" (click)="tooltip.toggle()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
-  {{ externalId | externalIdentifier }}
-</div>
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+  <span (click)="copyValue()" *ngIf="displayL && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
+  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  <span class="m-l-5" *ngIf="!completed">{{ externalId | externalIdentifier }}</span>
+  <span class="m-l-5" *ngIf="completed">{{ externalId }}</span>
+  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
+</span>
diff --git a/src/app/shared/external-identifier/external-identifier.component.ts b/src/app/shared/external-identifier/external-identifier.component.ts
index 315a2d1de..af2f0d69a 100644
--- a/src/app/shared/external-identifier/external-identifier.component.ts
+++ b/src/app/shared/external-identifier/external-identifier.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Component({
   selector: 'mifosx-external-identifier',
@@ -7,10 +8,18 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class ExternalIdentifierComponent implements OnInit {
   @Input() externalId: string;
+  @Input() completed = false;
+  @Input() display = 'right';
 
-  constructor() { }
+  iconVisible = false;
+  displayL = false;
+  displayR = true;
+
+  constructor(private clipboard: Clipboard) { }
 
   ngOnInit(): void {
+    this.displayL = (this.display === 'left');
+    this.displayR = (this.display === 'right');
   }
 
   isLongValue(): boolean {
@@ -20,4 +29,15 @@ export class ExternalIdentifierComponent implements OnInit {
     return (this.externalId.length > 15);
   }
 
+  copyValue(): void {
+    this.clipboard.copy(this.externalId);
+  }
+
+  mouseEnter() {
+    this.iconVisible = true;
+  }
+
+  mouseLeave() {
+    this.iconVisible = false;
+  }
 }
diff --git a/src/app/shared/icons.module.ts b/src/app/shared/icons.module.ts
index c1f660841..3ee9de569 100644
--- a/src/app/shared/icons.module.ts
+++ b/src/app/shared/icons.module.ts
@@ -28,6 +28,7 @@ import {
   faCog,
   faCogs,
   faCommentAlt,
+  faCopy,
   faDollarSign,
   faEdit,
   faEnvelope,
@@ -141,6 +142,7 @@ export class IconsModule {
       faCog,
       faCogs,
       faCommentAlt,
+      faCopy,
       faDollarSign,
       faEdit,
       faEnvelope,
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 4ff8b1034..342259bfe 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -39,6 +39,8 @@ import { SvgIconComponent } from './svg-icon/svg-icon.component';
 import { NgxMatDatetimePickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { ViewJournalEntryComponent } from './accounting/view-journal-entry/view-journal-entry.component';
 import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-entry-transaction/view-journal-entry-transaction.component';
+import { AccountNumberComponent } from './account-number/account-number.component';
+import { EntityNameComponent } from './entity-name/entity-name.component';
 
 /**
  * Shared Module
@@ -84,7 +86,9 @@ import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-
     DatatableMultiRowComponent,
     SvgIconComponent,
     ViewJournalEntryComponent,
-    ViewJournalEntryTransactionComponent
+    ViewJournalEntryTransactionComponent,
+    AccountNumberComponent,
+    EntityNameComponent
   ],
   exports: [
     FileUploadComponent,
@@ -103,12 +107,14 @@ import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-
     TranslateModule,
     TenantSelectorComponent,
     ExternalIdentifierComponent,
+    AccountNumberComponent,
     EntityNotesTabComponent,
     EntityDocumentsTabComponent,
     EntityDatatableTabComponent,
     ViewJournalEntryComponent,
     ViewJournalEntryTransactionComponent,
-    SvgIconComponent
+    SvgIconComponent,
+    EntityNameComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
index 93aff2144..b8f9e74e6 100644
--- a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
@@ -16,7 +16,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">External Id</span>
-    <span fxFlex="60%">{{ sharesAccount.externalId || 'Unassigned' }}</span>
+    <span fxFlex="60%" *ngIf="sharesAccount.externalId">
+      <mifosx-external-identifier externalId="{{sharesAccount.externalId}}"></mifosx-external-identifier>
+    </span>
+    <span fxFlex="60%" *ngIf="!sharesAccount.externalId">
+      Unassigned
+    </span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>Terms</h3>
diff --git a/src/app/shares/shares-account-view/shares-account-view.component.html b/src/app/shares/shares-account-view/shares-account-view.component.html
index 0bf2e2c79..d2804b973 100644
--- a/src/app/shares/shares-account-view/shares-account-view.component.html
+++ b/src/app/shares/shares-account-view/shares-account-view.component.html
@@ -23,8 +23,8 @@
           <p>
             Account #: {{sharesAccountData.accountNo}} | Client Name: {{sharesAccountData.clientName}}<br/>
             Current Market Price: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
-            Lockin Period: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}} 
-            {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}} 
+            Lockin Period: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
+            {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}}
           </p>
         </mat-card-subtitle>
       </div>
@@ -37,7 +37,7 @@
         <button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
           <i class="{{button.icon}}"></i> {{button.name}}</button>
       </ng-container>
-  
+
       <ng-container *ngIf="buttonConfig.options.length">
         <button mat-raised-button [matMenuTriggerFor]="More">More</button>
         <mat-menu #More="matMenu">
@@ -46,7 +46,7 @@
         </span>
         </mat-menu>
       </ng-container>
-  
+
     </mat-card-actions>
 
   </mat-card-header>
@@ -69,11 +69,21 @@
             </tr>
             <tr>
               <td>External Id</td>
-              <td>{{sharesAccountData.externalId ? sharesAccountData.externalId : 'Not Provided'}}</td>
+              <td *ngIf="sharesAccountData.externalId">
+                <mifosx-external-identifier externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
+              </td>
+              <td *ngIf="!sharesAccountData.externalId">
+                Unassigned
+              </td>
             </tr>
             <tr>
               <td>Linked Savings Account(Dividend Posting)</td>
-              <td>{{sharesAccountData.savingsAccountNumber ? sharesAccountData.savingsAccountNumber : 'Unassigned'}}</td>
+              <td *ngIf="sharesAccountData.savingsAccountNumber">
+                <mifosx-account-number accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
+              </td>
+              <td *ngIf="!sharesAccountData.savingsAccountNumber">
+                Unassigned
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
index 2efc9dd8e..2789e86a5 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
@@ -24,7 +24,7 @@
   </div>
 
   <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
-    <button mat-raised-button color="primary" (click)="runSelectedJobs()">
+    <button mat-raised-button color="primary" (click)="runSelectedJobs()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
       Run Selected Jobs
     </button>
@@ -119,7 +119,7 @@
 </div>
 
 <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" (click)="runSelectedJobs()">
+  <button mat-raised-button color="primary" (click)="runSelectedJobs()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
     Run Selected Jobs<ng-template #templateSchedulerJobs let-data let-popover="popover">
       <h2>Template</h2>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts
index c6d20ea67..bd9df1ba2 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts
+++ b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts
@@ -156,6 +156,10 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
       });
   }
 
+  isAnyJobSelected(): boolean {
+    return (this.selection.selected.length > 0);
+  }
+
   runSelectedJobs(): void {
     this.selection.selected.forEach((job) => {
       this.systemService.runSelectedJob(job.jobId);