diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts
index aa3ffea9b..747460c49 100644
--- a/src/app/clients/clients.service.ts
+++ b/src/app/clients/clients.service.ts
@@ -106,4 +106,39 @@ export class ClientsService {
     )
   );
   }
+
+  getClientNote (clientId: number) {
+    const headers = new Headers();   // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.get
+    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+      + '/notes' + '?tenantIdentifier=default&pretty=true',
+    {headers: headers})
+    .pipe(
+    map(
+        (response: Response) => {  // tslint:disable-line
+          response = response.json();
+          return response;
+
+        }
+    )
+  );
+  }
+
+  postClientNote (clientId: number, notes: any) {
+    const headers = new Headers();   // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    const body = JSON.stringify(notes);
+    return this.http.post
+    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+      + '/notes' + '?tenantIdentifier=default&pretty=true', notes ,
+    {headers: headers})
+    .pipe(
+      map(
+          (response: Response) => {  // tslint:disable-line
+            response.json();
+          }
+      )
+    );
+  }
 }
diff --git a/src/app/clients/view-client/view-client.component.html b/src/app/clients/view-client/view-client.component.html
index bc8ea7c63..8603fc2d8 100644
--- a/src/app/clients/view-client/view-client.component.html
+++ b/src/app/clients/view-client/view-client.component.html
@@ -266,7 +266,29 @@
         </div>
       </div>
     </mat-tab>
-    <mat-tab label="First"> Content 1 </mat-tab>
+    <mat-tab label="Notes">
+      <div fxLayout="row" fxLayoutGap="20px" class="m-t-30" fxLayoutAlign="center center">
+        <div fxFlex="70%">
+          <form (ngSubmit)="onSubmit()" #f="ngForm">
+
+            <mat-form-field>
+              <input matInput name="clientnotes" placeholder="Textarea" ngModel>
+            </mat-form-field>
+            <mat-card-actions>
+              <button mat-raised-button>Create</button>
+            </mat-card-actions>
+
+          </form>
+          <div *ngFor="let item of allNotes">
+            <mat-card class="m-t-30">
+              {{item.note}}
+            </mat-card>
+          </div>
+
+        </div>
+      </div>
+
+    </mat-tab>
     <mat-tab label="Second"> Content 2 </mat-tab>
     <mat-tab label="Third"> Content 3 </mat-tab>
 
@@ -275,3 +297,4 @@
 
 </div>
 <p>User with ID {{ id }} loaded.</p>
+
diff --git a/src/app/clients/view-client/view-client.component.ts b/src/app/clients/view-client/view-client.component.ts
index 59aecd799..4471b9009 100644
--- a/src/app/clients/view-client/view-client.component.ts
+++ b/src/app/clients/view-client/view-client.component.ts
@@ -1,9 +1,10 @@
 import { ClientsService } from 'app/clients/clients.service';
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewEncapsulation, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'mifosx-view-client',
@@ -12,7 +13,8 @@ import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
   encapsulation: ViewEncapsulation.None
 })
 export class ViewClientComponent implements OnInit, OnDestroy {
-  public id: number = undefined;
+  notes: any = undefined;
+  id: number = undefined;
   loanAccounts: any = undefined;
   savingsAccounts: any = undefined;
   shareAccounts: any = undefined;
@@ -21,6 +23,7 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   paramsSubscription: Subscription;
   post: any = [];
   clientAddress: any = undefined;
+  allNotes: any = undefined;
   private LOAN_DATA: any = undefined;
   private SAVINGS_DATA: any = undefined;
   private SHARES_DATA: any = undefined;
@@ -32,6 +35,7 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   dataSourceSavings = new MatTableDataSource();
   dataSourceShares = new MatTableDataSource();
 
+  @ViewChild('f') noteForm: NgForm;
 
   constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
 
@@ -47,6 +51,7 @@ export class ViewClientComponent implements OnInit, OnDestroy {
     this.getClientAccounts(this.id);
     this.getClientCharges(this.id);
     this.getClientAddress(this.id);
+    this.getClientNotes(this.id);
   }
 
   getClientId(id: any) {
@@ -94,7 +99,7 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   }
 
   getClientAddress(id: any) {
-    this.clientService.getClientAddress(this.id)
+    this.clientService.getClientAddress(id)
       .subscribe(
         (res => {
           this.clientAddress = res;
@@ -103,8 +108,38 @@ export class ViewClientComponent implements OnInit, OnDestroy {
       );
   }
 
+  getClientNotes(id: any) {
+    this.clientService.getClientNote(id)
+      .subscribe(
+        (res => {
+          this.allNotes = res;
+          console.log(res);
+        })
+      );
+  }
+
+
+  onSubmit() {
+    //  this.submitted = true;
+    this.notes = {};
+  //  const d = new Date();
+    this.notes.note = this.noteForm.value.clientnotes;
+   // this.notes.createdOn =  d;
+    console.log(this.notes);
+    this.clientService.postClientNote(this.id, this.notes)
+      .subscribe(
+        (res => {
+          this.getClientNotes(this.id);
+          return true;
+        })
+      );
+    this.noteForm.reset();
+
+  }
+
   ngOnDestroy() {
     this.paramsSubscription.unsubscribe();
   }
+
 }