diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 256ae1da6..3c26db7cd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,8 @@ import { LoginModule } from './login/login.module';
 import { ClientsModule} from './clients/clients.module';
 import { AccountingModule } from './accounting/accounting.module';
 import { SelfServiceModule } from './self-service/self-service.module';
+import { CentersModule } from './centers/centers.module';
+import { GroupsModule } from './groups/groups.module';
 
 import { AppRoutingModule } from './app-routing.module';
 import { SettingsModule } from './settings/settings.module';
@@ -44,6 +46,8 @@ import { SettingsModule } from './settings/settings.module';
     AccountingModule,
     SelfServiceModule,
     SettingsModule,
+    CentersModule,
+    GroupsModule,
     AppRoutingModule
   ],
   declarations: [WebAppComponent],
diff --git a/src/app/centers/centers-routing.module.ts b/src/app/centers/centers-routing.module.ts
new file mode 100644
index 000000000..a5cb3fdbf
--- /dev/null
+++ b/src/app/centers/centers-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { Route, extract } from '../core';
+import { CentersComponent } from './centers.component';
+
+const routes: Routes = [
+  Route.withShell([
+
+    {
+      path: 'centers',
+      component: CentersComponent,
+      data: { title: extract('Centers'),  breadcrumb: 'Centers' }
+    }
+  ])
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class CentersRoutingModule { }
diff --git a/src/app/centers/centers.component.html b/src/app/centers/centers.component.html
new file mode 100644
index 000000000..3da12bdc2
--- /dev/null
+++ b/src/app/centers/centers.component.html
@@ -0,0 +1,53 @@
+<div class="container m-t-40 m-b-40">
+
+  <mat-form-field class="filter">
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+  </mat-form-field>
+
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='name'> Name </th>
+        <td mat-cell *matCellDef="let row"> {{row?.name}} </td>
+      </ng-container>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="accountno">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='accountno'> Account # </th>
+        <td mat-cell *matCellDef="let row"> {{row?.accountNo}} </td>
+      </ng-container>
+
+      <!-- Account no 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>
+      </ng-container>
+
+      <!-- External ID Column -->
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='status'> Status </th>
+        <td mat-cell *matCellDef="let row"> <div [className]="row.active === true ? 'active' : 'inactive'">
+            <i class="fa fa-circle fa-2x"> </i>
+        </div> </td>
+        
+      </ng-container>
+
+
+
+      <!-- Status Column -->
+      <ng-container matColumnDef="office">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='office'> Office </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]="[ ]">
+         
+      </tr>
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+  </div>
\ No newline at end of file
diff --git a/src/app/centers/centers.component.scss b/src/app/centers/centers.component.scss
new file mode 100644
index 000000000..73124c9c0
--- /dev/null
+++ b/src/app/centers/centers.component.scss
@@ -0,0 +1,27 @@
+
+  table {
+    width: 100%;
+  }
+  
+  .mat-form-field {
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  td, th {
+    width: 15%;
+  }
+  
+  .filter{
+    width: 50%;
+  }
+  
+  .inactive {
+    color: red;
+  }
+  
+  .active {
+    color: green;
+  }
+  
+  
\ No newline at end of file
diff --git a/src/app/centers/centers.component.ts b/src/app/centers/centers.component.ts
new file mode 100644
index 000000000..8cd00b953
--- /dev/null
+++ b/src/app/centers/centers.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import { CentersService } from 'app/centers/centers.service';
+import {DataSource} from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'mifosx-app-centers',
+  templateUrl: './centers.component.html',
+  styleUrls: ['./centers.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CentersComponent implements OnInit {
+  private ELEMENT_DATA: any = undefined;
+  displayedColumns =  ['name', 'accountno', 'externalid', 'status', 'office'];
+  dataSource = new MatTableDataSource();
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  constructor(private centerService: CentersService) { }
+
+  ngOnInit() {
+      this.centerService.getCenters()
+      .subscribe(
+        (res => {
+         console.log(res);
+        // console.log(res.active);
+         res.active = !!res.active;
+         this.dataSource = new MatTableDataSource(res);
+         this.dataSource.paginator = this.paginator;
+         this.dataSource.sort = this.sort;
+        })
+      );
+  }
+
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}
diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts
new file mode 100644
index 000000000..070d18be8
--- /dev/null
+++ b/src/app/centers/centers.module.ts
@@ -0,0 +1,28 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpModule } from '@angular/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CoreModule } from '../core/core.module';
+import { MatTableModule } from '@angular/material/table';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { CentersComponent } from './centers.component';
+import { CentersRoutingModule } from 'app/centers/centers-routing.module';
+import { CentersService } from './centers.service';
+
+@NgModule({
+  imports: [
+    CoreModule,
+    CommonModule,
+    CentersRoutingModule,
+    FormsModule,
+    MatTableModule,
+    FlexLayoutModule
+
+  ],
+  declarations: [CentersComponent],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class CentersModule { }
diff --git a/src/app/centers/centers.service.ts b/src/app/centers/centers.service.ts
new file mode 100644
index 000000000..a9108efa5
--- /dev/null
+++ b/src/app/centers/centers.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+  })
+
+
+export class CentersService {
+    constructor(private http: HttpClient) { }
+
+    getCenters(): Observable<any> {
+        return  this.http.get('/centers');
+    }
+
+}
diff --git a/src/app/clients/view-client/view-client.service.ts b/src/app/clients/view-client/view-client.service.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index 984def726..956b998c3 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -71,8 +71,8 @@
 <mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
   <span>
     <button mat-menu-item routerLink="/clients">Clients</button>
-    <button mat-menu-item>Groups</button>
-    <button mat-menu-item>Centers</button>
+    <button mat-menu-item routerLink="/groups">Groups</button>
+    <button mat-menu-item routerLink="/centers">Centers</button>
     <span fxHide.lg>
       <button mat-menu-item>Accounting</button>
       <button mat-menu-item [matMenuTriggerFor]="reportsMenu">Reports</button>
diff --git a/src/app/groups/groups-routing.module.ts b/src/app/groups/groups-routing.module.ts
new file mode 100644
index 000000000..c2b0a0f05
--- /dev/null
+++ b/src/app/groups/groups-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { Route, extract } from '../core';
+import { GroupsComponent } from './groups.component';
+
+const routes: Routes = [
+  Route.withShell([
+
+    {
+      path: 'groups',
+      component: GroupsComponent,
+      data: { title: extract('Groups'), breadcrumb: 'Groups' }
+    }
+  ])
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class GroupsRoutingModule { }
diff --git a/src/app/groups/groups.component.html b/src/app/groups/groups.component.html
new file mode 100644
index 000000000..38023c258
--- /dev/null
+++ b/src/app/groups/groups.component.html
@@ -0,0 +1,51 @@
+<div class="container m-t-40 m-b-40">
+
+    <mat-form-field class="filter">
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+    </mat-form-field>
+  
+    <div class="mat-elevation-z8">
+      <table mat-table [dataSource]="dataSource" matSort>
+  
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header='name'> Name </th>
+          <td mat-cell *matCellDef="let row"> {{row?.name}} </td>
+        </ng-container>
+  
+        <!-- Name Column -->
+        <ng-container matColumnDef="accountno">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header='accountno'> Account # </th>
+          <td mat-cell *matCellDef="let row"> {{row?.accountNo}} </td>
+        </ng-container>
+  
+        <!-- Account no 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>
+        </ng-container>
+  
+        <!-- External ID Column -->
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header='status'> Status </th>
+          <td mat-cell *matCellDef="let row"> <div [className]="row.active === true ? 'active' : 'inactive'">
+              <i class="fa fa-circle fa-2x"> </i>
+          </div> </td>
+          
+        </ng-container>
+  
+        <!-- Status Column -->
+        <ng-container matColumnDef="office">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header='office'> Office </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]="[ ]">
+           
+        </tr>
+      </table>
+  
+      <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+    </div>
\ No newline at end of file
diff --git a/src/app/groups/groups.component.scss b/src/app/groups/groups.component.scss
new file mode 100644
index 000000000..73124c9c0
--- /dev/null
+++ b/src/app/groups/groups.component.scss
@@ -0,0 +1,27 @@
+
+  table {
+    width: 100%;
+  }
+  
+  .mat-form-field {
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  td, th {
+    width: 15%;
+  }
+  
+  .filter{
+    width: 50%;
+  }
+  
+  .inactive {
+    color: red;
+  }
+  
+  .active {
+    color: green;
+  }
+  
+  
\ No newline at end of file
diff --git a/src/app/groups/groups.component.ts b/src/app/groups/groups.component.ts
new file mode 100644
index 000000000..795acbff2
--- /dev/null
+++ b/src/app/groups/groups.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import { GroupsService } from './groups.service';
+import {DataSource} from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+@Component({
+  selector: 'mifosx-app-groups',
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.scss']
+})
+export class GroupsComponent implements OnInit {
+
+  private ELEMENT_DATA: any = undefined;
+  displayedColumns =  ['name', 'accountno', 'externalid', 'status', 'office'];
+  dataSource = new MatTableDataSource();
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  constructor(private groupService: GroupsService) { }
+
+  ngOnInit() {
+      this.groupService.getGroups()
+      .subscribe(
+        (res => {
+         console.log(res);
+        // console.log(res.active);
+         res.active = !!res.active;
+         this.dataSource = new MatTableDataSource(res);
+         this.dataSource.paginator = this.paginator;
+         this.dataSource.sort = this.sort;
+        })
+      );
+  }
+
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}
diff --git a/src/app/groups/groups.module.ts b/src/app/groups/groups.module.ts
new file mode 100644
index 000000000..6c2a9d0b3
--- /dev/null
+++ b/src/app/groups/groups.module.ts
@@ -0,0 +1,23 @@
+import { NgModule,  CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '../core/core.module';
+import { MatTableModule } from '@angular/material/table';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { GroupsComponent } from './groups.component';
+import { GroupsRoutingModule } from 'app/groups/groups-routing.module';
+import { GroupsService } from './groups.service';
+@NgModule({
+  imports: [
+    CommonModule,
+    GroupsRoutingModule,
+    CoreModule,
+    MatTableModule,
+    FlexLayoutModule
+  ],
+  declarations: [GroupsComponent],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class GroupsModule { }
diff --git a/src/app/groups/groups.service.ts b/src/app/groups/groups.service.ts
new file mode 100644
index 000000000..6d777eeae
--- /dev/null
+++ b/src/app/groups/groups.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+  })
+
+
+export class GroupsService {
+    constructor(private http: HttpClient) { }
+
+    getGroups(): Observable<any> {
+        return  this.http.get('/groups');
+    }
+
+}