diff --git a/src/app/centers/centers-routing.module.ts b/src/app/centers/centers-routing.module.ts
index 1ae65bc31..bbf2feb4a 100644
--- a/src/app/centers/centers-routing.module.ts
+++ b/src/app/centers/centers-routing.module.ts
@@ -7,15 +7,20 @@ import { Route } from '../core/route/route.service';
 /** Translation Imports */
 import { extract } from '../core/i18n/i18n.service';
 
+/** Custom Components */
 import { CentersComponent } from './centers.component';
 import { CreateCenterComponent } from './create-center/create-center.component';
-import { OfficesResolver } from 'app/accounting/common-resolvers/offices.resolver';
 import { CentersViewComponent } from './centers-view/centers-view.component';
 import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component';
+import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component';
+
+/** Custom Resolvers */
+import { OfficesResolver } from 'app/accounting/common-resolvers/offices.resolver';
 import { CenterViewResolver } from './common-resolvers/center-view.resolver';
 import { SavingsAccountResolver } from './common-resolvers/savings-account.resolver';
 import { CenterResourceResolver } from './common-resolvers/center-resource.resolver';
 import { CenterSummaryResolver } from './common-resolvers/center-summary.resolver';
+import { CenterNotesResolver } from './common-resolvers/center-notes.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -53,6 +58,14 @@ const routes: Routes = [
                 centerViewData: CenterResourceResolver,
                 savingsAccountData: SavingsAccountResolver
               }
+            },
+            {
+              path: 'notes',
+              component: NotesTabComponent,
+              data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+              resolve: {
+                centerNotes: CenterNotesResolver
+              }
             }
           ]
         }
@@ -69,7 +82,8 @@ const routes: Routes = [
     CenterViewResolver,
     SavingsAccountResolver,
     CenterResourceResolver,
-    CenterSummaryResolver
+    CenterSummaryResolver,
+    CenterNotesResolver
   ]
 })
 export class CentersRoutingModule { }
diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html
index 7b442adfd..dff623dff 100644
--- a/src/app/centers/centers-view/centers-view.component.html
+++ b/src/app/centers/centers-view/centers-view.component.html
@@ -87,6 +87,10 @@
         [active]="general.isActive">
         General
       </a>
+      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
+        [active]="notes.isActive">
+        Notes
+      </a>
     </nav>
     <router-outlet></router-outlet>
   </mat-card-content>
diff --git a/src/app/centers/centers-view/notes-tab/notes-tab.component.html b/src/app/centers/centers-view/notes-tab/notes-tab.component.html
new file mode 100644
index 000000000..27af57d3b
--- /dev/null
+++ b/src/app/centers/centers-view/notes-tab/notes-tab.component.html
@@ -0,0 +1,32 @@
+<div class="tab-container mat-typography">
+  <h3>Notes</h3>
+  <div>
+    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
+      (ngSubmit)="submit()">
+      <mat-form-field fxFlex="calc(90%-20px)">
+        <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
+      </mat-form-field>
+      <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid" *mifosxHasPermission="'CREATE_GROUPNOTE'">
+        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
+      </button>
+    </form>
+  </div>
+  <mat-list>
+    <mat-list-item *ngFor="let centerNote of centerNotes; let i=index;">
+      <fa-icon icon="sticky-note" matListIcon></fa-icon>
+      <h3 matLine>{{centerNote.note}} </h3>
+      <p matLine>
+        <span>Created by: {{centerNote.createdByUsername}}</span><br />
+        <span>Date: {{centerNote.createdOn | date}}</span>
+      </p>
+      <div fxLayout="row" fxLayoutAlign="flex-start">
+        <button mat-button color="primary" (click)="editNote(centerNote.id,centerNote.note,i)">
+          <fa-icon icon="edit"></fa-icon>
+        </button>
+        <button mat-button color="warn" (click)="deleteNote(centerNote.id,i)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </div>
+    </mat-list-item>
+  </mat-list>
+</div>
diff --git a/src/app/centers/centers-view/notes-tab/notes-tab.component.scss b/src/app/centers/centers-view/notes-tab/notes-tab.component.scss
new file mode 100644
index 000000000..b40728956
--- /dev/null
+++ b/src/app/centers/centers-view/notes-tab/notes-tab.component.scss
@@ -0,0 +1,4 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+}
diff --git a/src/app/centers/centers-view/notes-tab/notes-tab.component.spec.ts b/src/app/centers/centers-view/notes-tab/notes-tab.component.spec.ts
new file mode 100644
index 000000000..add42af72
--- /dev/null
+++ b/src/app/centers/centers-view/notes-tab/notes-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotesTabComponent } from './notes-tab.component';
+
+describe('NotesTabComponent', () => {
+  let component: NotesTabComponent;
+  let fixture: ComponentFixture<NotesTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotesTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotesTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/centers/centers-view/notes-tab/notes-tab.component.ts b/src/app/centers/centers-view/notes-tab/notes-tab.component.ts
new file mode 100644
index 000000000..524d8990e
--- /dev/null
+++ b/src/app/centers/centers-view/notes-tab/notes-tab.component.ts
@@ -0,0 +1,100 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Components */
+import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+
+/** Custom Services */
+import { CentersService } from '../../centers.service';
+import { AuthenticationService } from '../../../core/authentication/authentication.service';
+
+@Component({
+  selector: 'mifosx-notes-tab',
+  templateUrl: './notes-tab.component.html',
+  styleUrls: ['./notes-tab.component.scss']
+})
+export class NotesTabComponent implements OnInit {
+  centerId: string;
+  username: string;
+  centerNotes: any;
+  noteForm: FormGroup;
+  @ViewChild('formRef') formRef: any;
+
+
+  constructor(private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private centersService: CentersService,
+    private authenticationService: AuthenticationService,
+    private dialog: MatDialog) {
+    const savedCredentials = this.authenticationService.getCredentials();
+    this.username = savedCredentials.username;
+    this.centerId = this.route.parent.snapshot.params['centerId'];
+    this.route.data.subscribe((data: { centerNotes: any }) => {
+      this.centerNotes = data.centerNotes;
+    });
+  }
+
+  ngOnInit() {
+    this.createNoteForm();
+  }
+
+  createNoteForm() {
+    this.noteForm = this.formBuilder.group({
+      'note': ['', Validators.required]
+    });
+  }
+
+  submit() {
+    this.centersService.createCenterNote(this.centerId, this.noteForm.value).subscribe((response: any) => {
+      this.centerNotes.push({
+        id: response.resourceId,
+        createdByUsername: this.username,
+        createdOn: new Date(),
+        note: this.noteForm.value.note
+      });
+      this.formRef.resetForm();
+    });
+  }
+
+  editNote(noteId: string, noteContent: string, index: number) {
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, {
+      data: { formfields: [{
+                controlName: 'note',
+                required: true,
+                value: noteContent,
+                controlType: 'input',
+                label: 'Note'
+              }],
+              layout: {
+                columns: 1,
+                addButtonText: 'Confirm'
+              },
+              title: 'Edit Note'
+            }
+    });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        this.centersService.editCenterNote(this.centerId, noteId, response.data.value).subscribe(() => {
+          this.centerNotes[index].note = response.data.value.note;
+        });
+      }
+    });
+  }
+
+  deleteNote(noteId: string, index: number) {
+    const deleteNoteDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `Note id:${noteId}` }
+    });
+    deleteNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.centersService.deleteCenterNote(this.centerId, noteId)
+          .subscribe(() => {
+            this.centerNotes.splice(index, 1);
+          });
+      }
+    });
+  }
+}
diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts
index 8d20ee980..9affae153 100644
--- a/src/app/centers/centers.module.ts
+++ b/src/app/centers/centers.module.ts
@@ -12,6 +12,7 @@ import { CentersComponent } from './centers.component';
 import { CreateCenterComponent } from './create-center/create-center.component';
 import { CentersViewComponent } from './centers-view/centers-view.component';
 import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component';
+import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component';
 
 /**
  * Centers Module
@@ -29,7 +30,8 @@ import { GeneralTabComponent } from './centers-view/general-tab/general-tab.comp
     CentersComponent,
     CreateCenterComponent,
     CentersViewComponent,
-    GeneralTabComponent
+    GeneralTabComponent,
+    NotesTabComponent
   ]
 })
 export class CentersModule { }
diff --git a/src/app/centers/centers.service.ts b/src/app/centers/centers.service.ts
index 17c884287..be3da70e2 100644
--- a/src/app/centers/centers.service.ts
+++ b/src/app/centers/centers.service.ts
@@ -88,4 +88,42 @@ export class CentersService {
     getSavingsAccountDetails(centerId: string): Observable<any> {
       return this.http.get(`/centers/${centerId}/accounts`);
     }
+
+    /**
+     * @param centerId Center Id
+     * @returns The notes for particular center
+     */
+    getCenterNotes(centerId: string): Observable<any> {
+      return this.http.get(`/groups/${centerId}/notes`);
+    }
+
+    /**
+     * Adds a note to the particular Center Id
+     * @param centerId Center ID
+     * @param noteData Note Data to be added
+     * @returns {Observable<any>}
+     */
+    createCenterNote(centerId: string, noteData: any): Observable<any> {
+      return this.http.post(`/groups/${centerId}/notes`, noteData);
+    }
+
+    /**
+     * Edits the Center Note
+     * @param centerId Center ID
+     * @param noteId Note ID
+     * @param noteData Note Data
+     */
+    editCenterNote(centerId: string, noteId: string, noteData: any) {
+      return this.http.put(`/groups/${centerId}/notes/${noteId}`, noteData);
+    }
+
+    /**
+     * Deletes the particular Note
+     * @param centerId Center ID
+     * @param noteId Note ID
+     */
+    deleteCenterNote(centerId: string, noteId: string) {
+      return this.http.delete(`/groups/${centerId}/notes/${noteId}`);
+    }
+
 }
diff --git a/src/app/centers/common-resolvers/center-notes.resolver.ts b/src/app/centers/common-resolvers/center-notes.resolver.ts
new file mode 100644
index 000000000..215618b2a
--- /dev/null
+++ b/src/app/centers/common-resolvers/center-notes.resolver.ts
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { CentersService } from '../centers.service';
+
+/**
+ * Centers notes data resolver.
+ */
+@Injectable()
+export class CenterNotesResolver implements Resolve<Object> {
+
+    /**
+     * @param {CentersService} CentersService Centers service.
+     */
+    constructor(private centersService: CentersService) { }
+
+    /**
+     * Returns the Centers Notes Data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const centerId = route.parent.paramMap.get('centerId');
+        return this.centersService.getCenterNotes(centerId);
+    }
+
+}