diff --git a/src/app/centers/centers-view/center-actions/center-actions.component.html b/src/app/centers/centers-view/center-actions/center-actions.component.html
index d34c569dd..1c2358737 100644
--- a/src/app/centers/centers-view/center-actions/center-actions.component.html
+++ b/src/app/centers/centers-view/center-actions/center-actions.component.html
@@ -5,3 +5,4 @@
 <mifosx-attach-center-meeting *ngIf="actions['Attach Meeting']"></mifosx-attach-center-meeting>
 <mifosx-edit-center-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-center-meeting>
 <mifosx-edit-center-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-center-meeting-schedule>
+<mifosx-manage-groups *ngIf="actions['Manage Groups']"></mifosx-manage-groups>
diff --git a/src/app/centers/centers-view/center-actions/center-actions.component.ts b/src/app/centers/centers-view/center-actions/center-actions.component.ts
index 4d4257607..747ed5cbf 100644
--- a/src/app/centers/centers-view/center-actions/center-actions.component.ts
+++ b/src/app/centers/centers-view/center-actions/center-actions.component.ts
@@ -20,7 +20,8 @@ export class CenterActionsComponent {
     'Attendance': boolean,
     'Attach Meeting': boolean,
     'Edit Meeting': boolean,
-    'Edit Meeting Schedule': boolean
+    'Edit Meeting Schedule': boolean,
+    'Manage Groups': boolean
   } = {
     'Activate': false,
     'Assign Staff': false,
@@ -28,7 +29,8 @@ export class CenterActionsComponent {
     'Attendance': false,
     'Attach Meeting': false,
     'Edit Meeting': false,
-    'Edit Meeting Schedule': false
+    'Edit Meeting Schedule': false,
+    'Manage Groups': false
   };
 
   /**
diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
new file mode 100644
index 000000000..e5f2292b9
--- /dev/null
+++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
@@ -0,0 +1,55 @@
+<div class="container" fxLayout="row" fxLayoutGap="3%">
+
+  <mat-card fxFlex class="group-card" fxLayout="column" fxLayoutGap="2%">
+
+    <mat-form-field fxFlex="30%">
+      <mat-label>Add Groups</mat-label>
+      <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete">
+    </mat-form-field>
+
+    <mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
+      <mat-option *ngFor="let group of groupsData" [value]="group">
+        {{ group.name }}
+      </mat-option>
+    </mat-autocomplete>
+
+    <div class="mat-table">
+      <div class="mat-header-row">
+        <div class="mat-header-cell">Group Details</div>
+        <button mat-icon-button (click)="addGroup()">
+          <fa-icon icon="plus"></fa-icon>
+        </button>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Name</div>
+        <div class="mat-cell">{{groupChoice.value.name}}</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Id</div>
+        <div class="mat-cell">{{groupChoice.value.id}}</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Office</div>
+        <div class="mat-cell">{{groupChoice.value.officeName}}</div>
+      </div>
+    </div>
+
+  </mat-card>
+
+  <mat-card fxFlex="40%">
+
+    <h3 matSubheader>Group Members</h3>
+
+    <mat-nav-list  *ngIf="groupMembers?.length">
+      <div mat-list-item *ngFor="let group of groupMembers index as i">
+        <span matLine class="p-t-10">{{group.name}}</span>
+        <div fxFlex></div>
+        <button mat-icon-button color="warn" (click)="removeGroup(i, group)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </div>
+    </mat-nav-list>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss
new file mode 100644
index 000000000..eac69372a
--- /dev/null
+++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss
@@ -0,0 +1,35 @@
+.container {
+	max-width: 50rem;
+
+	.mat-table {
+		display: block;
+		font-family: Tahoma, Verdana;
+		width: 100%;
+	}
+	
+	.mat-row,
+	.mat-header-row {
+		display: flex;
+		border-bottom-width: 1px;
+		border-bottom-style: solid;
+		align-items: center;
+		min-height: 48px;
+		padding: 0 24px;
+	}
+	
+	.mat-cell,
+	.mat-header-cell {
+		flex: 1;
+		overflow: hidden;
+		word-wrap: break-word;
+	}
+	
+	h3 {
+		padding-left: 0;
+		margin-bottom: 0;
+	}
+
+	.group-card {
+		max-height: 20rem;
+	}
+}
diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts
new file mode 100644
index 000000000..1b5dbdf38
--- /dev/null
+++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageGroupsComponent } from './manage-groups.component';
+
+describe('ManageGroupsComponent', () => {
+  let component: ManageGroupsComponent;
+  let fixture: ComponentFixture<ManageGroupsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManageGroupsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManageGroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts
new file mode 100644
index 000000000..b2bbe4ecd
--- /dev/null
+++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts
@@ -0,0 +1,103 @@
+/** Angular Imports */
+import { Component, AfterViewInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+/** Custom Dialogs */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+/** Custom Services */
+import { CentersService } from 'app/centers/centers.service';
+import { GroupsService } from 'app/groups/groups.service';
+import { MatDialog } from '@angular/material';
+
+
+@Component({
+  selector: 'mifosx-manage-groups',
+  templateUrl: './manage-groups.component.html',
+  styleUrls: ['./manage-groups.component.scss']
+})
+export class ManageGroupsComponent implements AfterViewInit {
+
+  /** Center Data */
+  centerData: any;
+  /** Group data. */
+  groupsData: any = [];
+  /** Group Members. */
+  groupMembers: any[] = [];
+  /** GroupChoice. */
+  groupChoice = new FormControl('');
+
+  /**
+   * Fetches center action data from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {CentersService} centersService Centers Service
+   * @param {GroupsService} groupsService Groups Service
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(private route: ActivatedRoute,
+              private centersService: CentersService,
+              private groupsService: GroupsService,
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { centersActionData: any }) => {
+      this.centerData = data.centersActionData;
+      this.groupMembers = data.centersActionData.groupMembers;
+    });
+  }
+
+
+  /**
+   * Subscribes to Groups search filter:
+   */
+  ngAfterViewInit() {
+    this.groupChoice.valueChanges.subscribe( (value: string) => {
+      if (value.length >= 2) {
+        this.groupsService.getFilteredGroups('name', 'ASC', value, this.centerData.officeId, 'true')
+          .subscribe((data: any) => {
+            this.groupsData = data;
+          });
+      }
+    });
+  }
+
+  /**
+   * Add group.
+   */
+  addGroup() {
+    if (this.groupMembers !== null && this.groupMembers !== undefined) {
+      if (!this.groupMembers.includes(this.groupChoice.value)) {
+        this.centersService.executeCenterActionCommand(this.centerData.id, 'associateGroups', {groupMembers: [this.groupChoice.value.id]})
+          .subscribe(() => { this.groupMembers.push(this.groupChoice.value); });
+      }
+    } else {
+      this.centersService.executeCenterActionCommand(this.centerData.id, 'associateGroups', {groupMembers: [this.groupChoice.value.id]})
+      .subscribe(() => { this.groupMembers.push(this.groupChoice.value); });
+    }
+  }
+
+  /**
+   * Remove group.
+   * @param index Group's array index.
+   */
+  removeGroup(index: number, group: any) {
+    const removeMemberDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `group member: ${group.name}` }
+    });
+    removeMemberDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.centersService.executeCenterActionCommand(this.centerData.id, 'disassociateGroups', {groupMembers: [group.id]})
+          .subscribe(() => { this.groupMembers.splice(index, 1); });
+      }
+    });
+  }
+
+  /**
+   * Displays Group name in form control input.
+   * @param {any} group Group data.
+   * @returns {string} Group name if valid otherwise undefined.
+   */
+  displayGroup(group: any): string | undefined {
+    return group ? group.name : undefined;
+  }
+
+}
diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html
index 89bf2ef69..4b16badd3 100644
--- a/src/app/centers/centers-view/centers-view.component.html
+++ b/src/app/centers/centers-view/centers-view.component.html
@@ -61,7 +61,7 @@
       </span>
       <button mat-raised-button *mifosxHasPermission="'UPDATE_CENTER'"><i class="fa fa-edit"></i> Edit </button>
       <button mat-raised-button *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
-      <button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'"> <i class="fa fa-edit"></i> Manage Groups </button>
+      <button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i class="fa fa-edit"></i> Manage Groups </button>
       <span  *ngIf="centerViewData.active">
       <button mat-raised-button *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"> <i class="fa fa-file"></i> Centers Saving Application</button>
       </span>
diff --git a/src/app/centers/centers-view/centers-view.component.ts b/src/app/centers/centers-view/centers-view.component.ts
index f1e7249ec..12054cdbe 100644
--- a/src/app/centers/centers-view/centers-view.component.ts
+++ b/src/app/centers/centers-view/centers-view.component.ts
@@ -74,6 +74,7 @@ export class CentersViewComponent implements OnInit {
       case 'Close':
       case 'Attendance':
       case 'Attach Meeting':
+      case 'Manage Groups':
         this.router.navigate([`actions/${name}`], { relativeTo: this.route });
         break;
       case 'Edit Meeting':
diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts
index 987bdd737..c86bc8c1f 100644
--- a/src/app/centers/centers.module.ts
+++ b/src/app/centers/centers.module.ts
@@ -24,6 +24,7 @@ import { CenterAttendanceComponent } from './centers-view/center-actions/center-
 import { AttachCenterMeetingComponent } from './centers-view/center-actions/attach-center-meeting/attach-center-meeting.component';
 import { EditCenterMeetingComponent } from './centers-view/center-actions/edit-center-meeting/edit-center-meeting.component';
 import { EditCenterMeetingScheduleComponent } from './centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component';
+import { ManageGroupsComponent } from './centers-view/center-actions/manage-groups/manage-groups.component';
 
 /**
  * Centers Module
@@ -53,7 +54,8 @@ import { EditCenterMeetingScheduleComponent } from './centers-view/center-action
     CenterAttendanceComponent,
     AttachCenterMeetingComponent,
     EditCenterMeetingComponent,
-    EditCenterMeetingScheduleComponent
+    EditCenterMeetingScheduleComponent,
+    ManageGroupsComponent
   ]
 })
 export class CentersModule { }
diff --git a/src/app/centers/centers.service.ts b/src/app/centers/centers.service.ts
index 1a2a82fca..e601a1f02 100644
--- a/src/app/centers/centers.service.ts
+++ b/src/app/centers/centers.service.ts
@@ -213,8 +213,9 @@ export class CentersService {
       return this.http.delete(`/centers/${centerId}`);
     }
 
-    getCentersData(centerId: string) {
-      const httpParams = new HttpParams().set('associations', 'groupMembers,collectionMeetingCalendar');
+    getCentersData(centerId: string, associations: string, template?: string) {
+      let httpParams = new HttpParams().set('associations', associations);
+      httpParams = template ? httpParams.set('template', template) : httpParams;
       return this.http.get(`/centers/${centerId}`, {params: httpParams});
     }
 
diff --git a/src/app/centers/common-resolvers/center-actions.resolver.ts b/src/app/centers/common-resolvers/center-actions.resolver.ts
index aa3dba49f..36005890f 100644
--- a/src/app/centers/common-resolvers/center-actions.resolver.ts
+++ b/src/app/centers/common-resolvers/center-actions.resolver.ts
@@ -31,7 +31,9 @@ export class CenterActionsResolver implements Resolve<Object> {
       case 'Assign Staff':
         return this.centersService.getGroupStaffData(centerId);
       case 'Attendance':
-        return this.centersService.getCentersData(centerId);
+        return this.centersService.getCentersData(centerId, 'groupMembers,collectionMeetingCalendar');
+      case 'Manage Groups':
+        return this.centersService.getCentersData(centerId, 'groupMembers', 'true');
       case 'Attach Meeting':
         return this.centersService.getCalendarTemplate(centerId);
       case 'Edit Meeting':
diff --git a/src/app/groups/groups.service.ts b/src/app/groups/groups.service.ts
index ea3a1f2e3..6986672bf 100644
--- a/src/app/groups/groups.service.ts
+++ b/src/app/groups/groups.service.ts
@@ -25,7 +25,7 @@ export class GroupsService {
    * @param {string} name Filter value for groups names.
    * @returns {Observable<any>} Groups.
    */
-  getFilteredGroups(orderBy: string, sortOrder: string, name: string, officeId?: any): Observable<any> {
+  getFilteredGroups(orderBy: string, sortOrder: string, name: string, officeId?: any, orphansOnly?: any): Observable<any> {
     let httpParams = new HttpParams()
       .set('name', name)
       .set('sortOrder', sortOrder)
@@ -33,6 +33,7 @@ export class GroupsService {
     if (officeId) {
       httpParams = httpParams.set('officeId', officeId);
     }
+    httpParams = orphansOnly ? httpParams.set('orphansOnly', orphansOnly) : httpParams;
     return this.http.get('/groups', { params: httpParams });
   }