diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
index 81a6b8ec8..a06f19229 100644
--- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
+++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
@@ -16,7 +16,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Legal Form</mat-label>
-      <mat-select formControlName="legalFormId">
+      <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
           {{ legalForm.value }}
         </mat-option>
diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts b/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts
index 9777df8be..77b819f43 100644
--- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts
+++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts
@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
@@ -51,10 +52,12 @@ export class ClientGeneralStepComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Setting service
+   * @param {ClientsService} clientService Client service
    */
   constructor(private formBuilder: FormBuilder,
               private dateUtils: Dates,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private clientService: ClientsService) {
     this.setClientForm();
   }
 
@@ -71,7 +74,7 @@ export class ClientGeneralStepComponent implements OnInit {
     this.createClientForm = this.formBuilder.group({
       'officeId': ['', Validators.required],
       'staffId': [''],
-      'legalFormId': [''],
+      'legalFormId': ['', Validators.required],
       'isStaff': [false],
       'active': [false],
       'addSavings': [false],
@@ -143,6 +146,11 @@ export class ClientGeneralStepComponent implements OnInit {
         this.createClientForm.removeControl('savingsProductId');
       }
     });
+    this.createClientForm.get('officeId').valueChanges.subscribe((officeId: number) => {
+      this.clientService.getClientWithOfficeTemplate(officeId).subscribe((clientTemplate: any) => {
+        this.staffOptions = clientTemplate.staffOptions;
+      });
+    });
   }
 
   /**
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index 6885e33b0..459130d22 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -29,20 +29,23 @@
         <mat-card-title>
           <h3>
             <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup" [matTooltip]="clientViewData.status.value"></i>
-            Client Name : {{clientViewData.displayName}}
+            <b>Client Name :</b> {{clientViewData.displayName}}
           </h3>
         </mat-card-title>
 
         <mat-card-subtitle>
           <p>
-            Client #:{{clientViewData.accountNo}} | External
-            Id: {{clientViewData.externalId}} | Staff:{{clientViewData.staffName || 'Unassigned'}}<br />
-            Activation Date : {{(clientViewData.activationDate) ? (clientViewData.activationDate | dateFormat) :'Not Activated'}}<br />
-            Member Of :
-            <span *ngFor="let group of clientViewData.groups">
-              <a>{{group.name}}</a>&nbsp;
+            <b>Office :</b> {{clientViewData.officeName}}<br />
+            <b>Client :</b> {{clientViewData.accountNo}}<br />
+            <b>External Id:</b> {{clientViewData.externalId}}<br />
+            <span *ngIf="clientViewData.staffName"><b>Staff :</b> {{clientViewData.staffName || 'Unassigned'}}<br /></span>
+            <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate | dateFormat}}<br /></span>
+            <span *ngIf="clientViewData.groups.length > 0">
+              Member Of :
+              <span *ngFor="let group of clientViewData.groups">
+                <a>{{group.name}}</a>&nbsp;
+              </span>
             </span>
-            <span *ngIf="!clientViewData.groups">Unassigned</span>
             <br/>
           </p>
         </mat-card-subtitle>
diff --git a/src/app/clients/clients-view/clients-view.component.ts b/src/app/clients/clients-view/clients-view.component.ts
index 3a32de974..f49391819 100644
--- a/src/app/clients/clients-view/clients-view.component.ts
+++ b/src/app/clients/clients-view/clients-view.component.ts
@@ -112,7 +112,6 @@ export class ClientsViewComponent implements OnInit {
     }
   }
 
-
   /**
    * Refetches data for the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.
diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index eae9e01fb..2f503caae 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -34,7 +34,9 @@
       <!-- External ID Column -->
       <ng-container matColumnDef="externalid">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> ExternalID </th>
-        <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
+        <td mat-cell *matCellDef="let row">
+          <mifosx-external-identifier externalId="{{row.externalId}}"></mifosx-external-identifier>
+        </td>
       </ng-container>
 
       <!-- Status Column -->
diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts
index ea004235f..6abd9fd99 100644
--- a/src/app/clients/clients.service.ts
+++ b/src/app/clients/clients.service.ts
@@ -41,6 +41,10 @@ export class ClientsService {
     return this.http.get('/clients/template');
   }
 
+  getClientWithOfficeTemplate(officeId: number): Observable<any> {
+    return this.http.get(`/clients/template?officeId=${officeId}&staffInSelectedOfficeOnly=true`);
+  }
+
   getClientData(clientId: string) {
     return this.http.get(`/clients/${clientId}`);
   }
diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts
index d78d4128f..25fadd7e2 100644
--- a/src/app/clients/create-client/create-client.component.ts
+++ b/src/app/clients/create-client/create-client.component.ts
@@ -104,11 +104,13 @@ export class CreateClientComponent {
     if (this.legalFormType === 2) {
       legalFormTypeVal = 'entity';
     }
-    this.clientTemplate.datatables.forEach((datatable: any) => {
-      if (datatable.entitySubType.toLowerCase() === legalFormTypeVal) {
-        this.datatables.push(datatable);
-      }
-    });
+    if (this.clientTemplate.datatables) {
+      this.clientTemplate.datatables.forEach((datatable: any) => {
+        if (datatable.entitySubType.toLowerCase() === legalFormTypeVal) {
+          this.datatables.push(datatable);
+        }
+      });
+    }
   }
 
   legalFormChange(eventData: { legalForm: number }) {
diff --git a/src/app/pipes/external-identifier.pipe.spec.ts b/src/app/pipes/external-identifier.pipe.spec.ts
new file mode 100644
index 000000000..561a9f9b1
--- /dev/null
+++ b/src/app/pipes/external-identifier.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ExternalIdentifierPipe } from './external-identifier.pipe';
+
+describe('ExternalIdentifierPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ExternalIdentifierPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/pipes/external-identifier.pipe.ts b/src/app/pipes/external-identifier.pipe.ts
new file mode 100644
index 000000000..0eb1e8766
--- /dev/null
+++ b/src/app/pipes/external-identifier.pipe.ts
@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'externalIdentifier'
+})
+export class ExternalIdentifierPipe implements PipeTransform {
+
+  transform(externalId: string): string {
+    const limit = 20;
+    if (!externalId) {
+      return '';
+    } else {
+      const regexExp = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi;
+
+      if (regexExp.test(externalId)) {
+        const values = externalId.split('-');
+        return values[4];
+      } else {
+        const inputLen = externalId.length;
+        return inputLen > limit ? externalId.substring((inputLen - limit), inputLen) : externalId;
+      }
+    }
+  }
+
+}
diff --git a/src/app/pipes/pipes.module.ts b/src/app/pipes/pipes.module.ts
index 87a8fa818..cb736bdb5 100644
--- a/src/app/pipes/pipes.module.ts
+++ b/src/app/pipes/pipes.module.ts
@@ -8,13 +8,14 @@ import { FindPipe } from './find.pipe';
 import { UrlToStringPipe } from './url-to-string.pipe';
 import { DateFormatPipe } from './date-format.pipe';
 import { DatetimeFormatPipe } from './datetime-format.pipe';
+import { ExternalIdentifierPipe } from './external-identifier.pipe';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe],
-  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe],
-  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe]
+  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe],
+  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe],
+  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe]
 })
 export class PipesModule { }
diff --git a/src/app/search/search-page/search-page.component.html b/src/app/search/search-page/search-page.component.html
index c7e08b8be..0e1c9f34a 100644
--- a/src/app/search/search-page/search-page.component.html
+++ b/src/app/search/search-page/search-page.component.html
@@ -23,7 +23,9 @@
 
       <ng-container matColumnDef="externalId">
         <th mat-header-cell *matHeaderCellDef> External Id </th>
-        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityExternalId | externalIdentifier}} </td>
+        <td mat-cell *matCellDef="let entity" class="view-details">
+          <mifosx-external-identifier externalId="{{entity.entityExternalId}}"></mifosx-external-identifier>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="parentType">
diff --git a/src/app/shared/external-identifier/external-identifier.component.html b/src/app/shared/external-identifier/external-identifier.component.html
new file mode 100644
index 000000000..9ffc63f65
--- /dev/null
+++ b/src/app/shared/external-identifier/external-identifier.component.html
@@ -0,0 +1,4 @@
+<div>
+  <span *ngIf="isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  {{ externalId | externalIdentifier }}
+</div>
diff --git a/src/app/shared/external-identifier/external-identifier.component.scss b/src/app/shared/external-identifier/external-identifier.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/external-identifier/external-identifier.component.spec.ts b/src/app/shared/external-identifier/external-identifier.component.spec.ts
new file mode 100644
index 000000000..0ab285649
--- /dev/null
+++ b/src/app/shared/external-identifier/external-identifier.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExternalIdentifierComponent } from './external-identifier.component';
+
+describe('ExternalIdentifierComponent', () => {
+  let component: ExternalIdentifierComponent;
+  let fixture: ComponentFixture<ExternalIdentifierComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExternalIdentifierComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExternalIdentifierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/external-identifier/external-identifier.component.ts b/src/app/shared/external-identifier/external-identifier.component.ts
new file mode 100644
index 000000000..315a2d1de
--- /dev/null
+++ b/src/app/shared/external-identifier/external-identifier.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-external-identifier',
+  templateUrl: './external-identifier.component.html',
+  styleUrls: ['./external-identifier.component.scss']
+})
+export class ExternalIdentifierComponent implements OnInit {
+  @Input() externalId: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  isLongValue(): boolean {
+    if (this.externalId == null) {
+      return false;
+    }
+    return (this.externalId.length > 15);
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index e2080b092..b17559b44 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -27,6 +27,8 @@ import { TenantSelectorComponent } from './tenant-selector/tenant-selector.compo
 import { IconsModule } from './icons.module';
 import { MaterialModule } from './material.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { ExternalIdentifierComponent } from './external-identifier/external-identifier.component';
+import { PipesModule } from 'app/pipes/pipes.module';
 
 /**
  * Shared Module
@@ -40,6 +42,7 @@ import { TranslateModule } from '@ngx-translate/core';
     MaterialModule,
     ReactiveFormsModule,
     TranslateModule.forRoot(),
+    PipesModule
   ],
   declarations: [
     FormfieldComponent,
@@ -59,7 +62,8 @@ import { TranslateModule } from '@ngx-translate/core';
     NotificationsTrayComponent,
     SearchToolComponent,
     ServerSelectorComponent,
-    TenantSelectorComponent
+    TenantSelectorComponent,
+    ExternalIdentifierComponent
   ],
   exports: [
     FileUploadComponent,
@@ -76,7 +80,8 @@ import { TranslateModule } from '@ngx-translate/core';
     FormsModule,
     ReactiveFormsModule,
     TranslateModule,
-    TenantSelectorComponent
+    TenantSelectorComponent,
+    ExternalIdentifierComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.scss b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.scss
index afdbc42a4..9d6a1c24c 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.scss
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.scss
@@ -24,28 +24,6 @@
   }
 }
 
-.alert {
-  background-color: #E8F4FD;
-  padding: 6px 16px;
-  font-size: 0.875rem;
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  font-weight: 400;
-  line-height: 1.43;
-  border-radius: 4px;
-  letter-spacing: 0.01071em;
-  margin: 10px;
-
-  .message {
-    padding: 8px 0;
-    font-size: 18px;
-  }
-  .alert-check {
-    color:#359FF4;
-    margin-right: 2px;
-    font-size: 1.4rem;
-  }
-}
-
 .error-log {
   color: #ffa726;
 }
diff --git a/src/assets/styles/_misc.scss b/src/assets/styles/_misc.scss
index 93340f1c9..84db36102 100644
--- a/src/assets/styles/_misc.scss
+++ b/src/assets/styles/_misc.scss
@@ -22,3 +22,27 @@ div {
 .nolist {
   list-style: none;
 }
+
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}
+