start working on office and accounting components
diff --git a/src/app/accounting/account-payable/account-payable.component.html b/src/app/accounting/account-payable/account-payable.component.html
new file mode 100644
index 0000000..a4bed29
--- /dev/null
+++ b/src/app/accounting/account-payable/account-payable.component.html
@@ -0,0 +1,60 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Account Payable</h3>
+  <mat-divider></mat-divider>
+  <div class="fineract-button">
+    <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_cheque']">
+      <mat-icon>add</mat-icon>Add cheque</a>
+      </div>
+
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by identifier">
+  </mat-form-field>
+  
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.name}}">{{element.name}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="branch">
+    <mat-header-cell *matHeaderCellDef>Branch</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.branch}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="bankAccount">
+      <mat-header-cell *matHeaderCellDef>Bank Account</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.bankAccount}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="payableAccount">
+        <mat-header-cell *matHeaderCellDef>Payable Account</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.payableAccount} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="payee">
+        <mat-header-cell *matHeaderCellDef>Payee</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.payee} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="currency">
+        <mat-header-cell *matHeaderCellDef>Currency</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.currency} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef>amount</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.amount} </mat-cell>
+      </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+  
+  
+</div>
+  
\ No newline at end of file
diff --git a/src/app/accounting/account-payable/account-payable.component.scss b/src/app/accounting/account-payable/account-payable.component.scss
new file mode 100644
index 0000000..0961a8e
--- /dev/null
+++ b/src/app/accounting/account-payable/account-payable.component.scss
@@ -0,0 +1,18 @@
+.my-div{
+    margin-left: 2%;
+    margin-right:2%;
+    border-radius: 5px 5px 5px 5px;
+    background-color: #e6e6ff;
+    min-height: 100%;
+   
+  }
+  table {
+      width: 100%;
+    }
+    
+    .mat-form-field {
+      font-size: 14px;
+      width: 100%;
+    }
+    
+    
\ No newline at end of file
diff --git a/src/app/accounting/account-payable/account-payable.component.spec.ts b/src/app/accounting/account-payable/account-payable.component.spec.ts
new file mode 100644
index 0000000..6e951ab
--- /dev/null
+++ b/src/app/accounting/account-payable/account-payable.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountPayableComponent } from './account-payable.component';
+
+describe('AccountPayableComponent', () => {
+  let component: AccountPayableComponent;
+  let fixture: ComponentFixture<AccountPayableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountPayableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountPayableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/account-payable/account-payable.component.ts b/src/app/accounting/account-payable/account-payable.component.ts
new file mode 100644
index 0000000..7e4bbc8
--- /dev/null
+++ b/src/app/accounting/account-payable/account-payable.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+
+@Component({
+  selector: 'app-account-payable',
+  templateUrl: './account-payable.component.html',
+  styleUrls: ['./account-payable.component.scss']
+})
+export class AccountPayableComponent implements OnInit {
+
+  displayedColumns = ['name','branch','bankAccount','payableAccount','payee','currency','amount'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+export interface Element {
+  name: string;
+  branch:string;
+  bankAccount: string;
+  payableAccount:string;
+  payee: number;
+  currency:Date;
+  amount:string;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
diff --git a/src/app/accounting/add-cheque/add-cheque.component.html b/src/app/accounting/add-cheque/add-cheque.component.html
new file mode 100644
index 0000000..5d5da0e
--- /dev/null
+++ b/src/app/accounting/add-cheque/add-cheque.component.html
@@ -0,0 +1,56 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Cheque</h3>
+  <div class="fin-button">
+    <a mat-raised-button  class="button1" color="primary" [routerLink]="['/navbar/add_cheque']">
+      Process cheque</a>
+        <a mat-raised-button  class="button2" color="primary" [routerLink]="['/navbar/add_cheque']">
+          Print cheque</a> 
+      </div>
+  <mat-divider></mat-divider>
+<form class="fineract-form">
+  <mat-form-field>
+    <mat-select placeholder="Template">
+      <mat-option *ngFor="let template of templates" [value]="template.value">
+        {{ template.viewValue }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Branch">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Bank account">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Payable account">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Payee">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Amount">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <mat-select placeholder="Currency">
+      <mat-option *ngFor="let currency of currencies" [value]="currency.value">
+        {{ currency.viewValue }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Cheque number">
+  </mat-form-field>
+  <br/>
+  </form>
+  
+  <div>
+  <button mat-raised-button class="button1" color="warn">Cancel</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/accounting/add-cheque/add-cheque.component.scss b/src/app/accounting/add-cheque/add-cheque.component.scss
new file mode 100644
index 0000000..3bf8f37
--- /dev/null
+++ b/src/app/accounting/add-cheque/add-cheque.component.scss
@@ -0,0 +1,17 @@
+.fineract-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  //changed
+  .button1{
+      margin-left: 60%;
+      
+      }
+  .button1, .button2{
+      width:150px;
+      display: inline-block;
+  }
+
+ 
\ No newline at end of file
diff --git a/src/app/accounting/add-cheque/add-cheque.component.spec.ts b/src/app/accounting/add-cheque/add-cheque.component.spec.ts
new file mode 100644
index 0000000..61af568
--- /dev/null
+++ b/src/app/accounting/add-cheque/add-cheque.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddChequeComponent } from './add-cheque.component';
+
+describe('AddChequeComponent', () => {
+  let component: AddChequeComponent;
+  let fixture: ComponentFixture<AddChequeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddChequeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddChequeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/add-cheque/add-cheque.component.ts b/src/app/accounting/add-cheque/add-cheque.component.ts
new file mode 100644
index 0000000..978a8cf
--- /dev/null
+++ b/src/app/accounting/add-cheque/add-cheque.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-cheque',
+  templateUrl: './add-cheque.component.html',
+  styleUrls: ['./add-cheque.component.scss']
+})
+export class AddChequeComponent implements OnInit {
+
+  templates = [
+    {value: '', viewValue: ''},
+   
+  ];
+
+  currencies = [
+    {value: '', viewValue: ''},
+   
+  ];
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/accounting/add-ledger/add-ledger.component.html b/src/app/accounting/add-ledger/add-ledger.component.html
new file mode 100644
index 0000000..992015e
--- /dev/null
+++ b/src/app/accounting/add-ledger/add-ledger.component.html
@@ -0,0 +1,94 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Ledger</h3>
+  <mat-divider></mat-divider>
+  <br/>
+  
+<form class="fineract-form">
+  <mat-form-field>
+    <input matInput placeholder="Ledger number">
+  </mat-form-field>
+</form>
+
+<mat-tab-group>
+  <mat-tab label="Asset">
+    <form class="fineract-form">
+      <mat-form-field>
+        <input matInput placeholder="Name">
+      </mat-form-field>
+      <br/>
+      <mat-form-field>
+        <input matInput placeholder="Description">
+      </mat-form-field>
+    </form>
+    <mat-checkbox>Show account in chart</mat-checkbox>
+    <div>
+      <button mat-raised-button class="button1" color="primary">Submit</button>
+      <button mat-raised-button class="button2" color="warn">Cancel</button>
+      </div>
+  </mat-tab>
+  <mat-tab label="Liability">
+    <form class="fineract-form">
+      <mat-form-field>
+        <input matInput placeholder="Name">
+      </mat-form-field>
+      <br/>
+      <mat-form-field>
+        <input matInput placeholder="Description">
+      </mat-form-field>
+    </form>
+    <mat-checkbox>Show account in chart</mat-checkbox>
+    <div>
+      <button mat-raised-button class="button1" color="primary">Submit</button>
+      <button mat-raised-button class="button2" color="warn">Cancel</button>
+      </div>
+  </mat-tab>
+  <mat-tab label="Equity">
+    <form class="fineract-form">
+      <mat-form-field>
+        <input matInput placeholder="Name">
+      </mat-form-field>
+      <br/>
+      <mat-form-field>
+        <input matInput placeholder="Description">
+      </mat-form-field>
+    </form>
+    <mat-checkbox>Show account in chart</mat-checkbox>
+    <div>
+      <button mat-raised-button class="button1" color="primary">Submit</button>
+      <button mat-raised-button class="button2" color="warn">Cancel</button>
+      </div>
+  </mat-tab>
+  <mat-tab label="Expense">
+    <form class="fineract-form">
+      <mat-form-field>
+        <input matInput placeholder="Name">
+      </mat-form-field>
+      <br/>
+      <mat-form-field>
+        <input matInput placeholder="Description">
+      </mat-form-field>
+    </form>
+    <mat-checkbox>Show account in chart</mat-checkbox>
+    <div>
+      <button mat-raised-button class="button1" color="primary">Submit</button>
+      <button mat-raised-button class="button2" color="warn">Cancel</button>
+      </div>
+  </mat-tab>
+  <mat-tab label="Revenue">
+    <form class="fineract-form">
+      <mat-form-field>
+        <input matInput placeholder="Name">
+      </mat-form-field>
+      <br/>
+      <mat-form-field>
+        <input matInput placeholder="Description">
+      </mat-form-field>
+    </form>
+    <mat-checkbox>Show account in chart</mat-checkbox>
+    <div>
+      <button mat-raised-button class="button1" color="primary">Submit</button>
+      <button mat-raised-button class="button2" color="warn">Cancel</button>
+      </div>
+  </mat-tab>
+</mat-tab-group>
+
diff --git a/src/app/accounting/add-ledger/add-ledger.component.scss b/src/app/accounting/add-ledger/add-ledger.component.scss
new file mode 100644
index 0000000..7109ed8
--- /dev/null
+++ b/src/app/accounting/add-ledger/add-ledger.component.scss
@@ -0,0 +1,13 @@
+.fineract-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  .button1{
+      margin-left: 50%;
+      
+      }
+  .button1, .button2{
+      width:20px;
+      display: inline-block;
+  }
\ No newline at end of file
diff --git a/src/app/accounting/add-ledger/add-ledger.component.spec.ts b/src/app/accounting/add-ledger/add-ledger.component.spec.ts
new file mode 100644
index 0000000..0e5555b
--- /dev/null
+++ b/src/app/accounting/add-ledger/add-ledger.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddLedgerComponent } from './add-ledger.component';
+
+describe('AddLedgerComponent', () => {
+  let component: AddLedgerComponent;
+  let fixture: ComponentFixture<AddLedgerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddLedgerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddLedgerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/add-ledger/add-ledger.component.ts b/src/app/accounting/add-ledger/add-ledger.component.ts
new file mode 100644
index 0000000..cc3126a
--- /dev/null
+++ b/src/app/accounting/add-ledger/add-ledger.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-ledger',
+  templateUrl: './add-ledger.component.html',
+  styleUrls: ['./add-ledger.component.scss']
+})
+export class AddLedgerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/accounting/add-payroll/add-payroll.component.html b/src/app/accounting/add-payroll/add-payroll.component.html
new file mode 100644
index 0000000..f5c0137
--- /dev/null
+++ b/src/app/accounting/add-payroll/add-payroll.component.html
@@ -0,0 +1,29 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Payroll</h3>
+  <mat-divider></mat-divider>
+  
+<form class="fineract-form">
+  <mat-form-field>
+    <input matInput placeholder="Account">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Member">
+  </mat-form-field>
+  <mat-form-field>
+    <input matInput placeholder="Employer">
+  </mat-form-field>
+  <mat-form-field>
+    <input matInput placeholder="Salary">
+  </mat-form-field>
+  <button mat-icon-button color="warn"><mat-icon>clear</mat-icon></button>
+</form>
+<div style="margin-left: 80%;">
+  <button mat-raised-button color="primary">Add Payment</button>
+</div>
+<div>
+  <button mat-raised-button class="button1" color="primary">Submit</button>
+  <button mat-raised-button class="button2" color="warn">Cancel</button>
+  </div>
+  </div>
+
diff --git a/src/app/accounting/add-payroll/add-payroll.component.scss b/src/app/accounting/add-payroll/add-payroll.component.scss
new file mode 100644
index 0000000..33ff61b
--- /dev/null
+++ b/src/app/accounting/add-payroll/add-payroll.component.scss
@@ -0,0 +1,13 @@
+.fineract-form {
+    min-width: 150px;
+    max-width: 1000px;
+    width: 100%;
+  }
+  .button1{
+      margin-left: 50%;
+      
+      }
+  .button1, .button2{
+      width:20px;
+      display: inline-block;
+  }
\ No newline at end of file
diff --git a/src/app/accounting/add-payroll/add-payroll.component.spec.ts b/src/app/accounting/add-payroll/add-payroll.component.spec.ts
new file mode 100644
index 0000000..1a31bd1
--- /dev/null
+++ b/src/app/accounting/add-payroll/add-payroll.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddPayrollComponent } from './add-payroll.component';
+
+describe('AddPayrollComponent', () => {
+  let component: AddPayrollComponent;
+  let fixture: ComponentFixture<AddPayrollComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddPayrollComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddPayrollComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/add-payroll/add-payroll.component.ts b/src/app/accounting/add-payroll/add-payroll.component.ts
new file mode 100644
index 0000000..bc72cb9
--- /dev/null
+++ b/src/app/accounting/add-payroll/add-payroll.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-payroll',
+  templateUrl: './add-payroll.component.html',
+  styleUrls: ['./add-payroll.component.scss']
+})
+export class AddPayrollComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/accounting/general-ledger/general-ledger.component.html b/src/app/accounting/general-ledger/general-ledger.component.html
index f65ec3d..6d76381 100644
--- a/src/app/accounting/general-ledger/general-ledger.component.html
+++ b/src/app/accounting/general-ledger/general-ledger.component.html
@@ -2,7 +2,7 @@
   <h3 class="heading">General Ledger</h3>
   <mat-divider></mat-divider>
   <div class="fineract-button">
-  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add-ledger']">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_ledger']">
     <mat-icon>add</mat-icon>Add Ledger</a>
     </div>
   <mat-form-field>
diff --git a/src/app/accounting/payrolls/payrolls.component.html b/src/app/accounting/payrolls/payrolls.component.html
index d361809..9f8be54 100644
--- a/src/app/accounting/payrolls/payrolls.component.html
+++ b/src/app/accounting/payrolls/payrolls.component.html
@@ -2,7 +2,7 @@
   <h3 class="heading">Payrolls</h3>
   <mat-divider></mat-divider>
   <div class="fineract-button">
-  <a mat-raised-button  color="primary" [routerLink]="['/navbar/managereport/create']">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_payroll']">
     <mat-icon>add</mat-icon>Add Payroll</a>
     </div>
   <mat-form-field>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 561d641..f257139 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -58,7 +58,13 @@
 import { AddMemberComponent } from './customer/add-member/add-member.component';
 import { ManageMembersComponent } from './customer/manage-members/manage-members.component';
 import { AddEmployeeComponent } from './employee/add-employee/add-employee.component';
-import { ManageEmployeeComponent } from './employee/manage-employee/manage-employee.component'
+import { ManageEmployeeComponent } from './employee/manage-employee/manage-employee.component';
+import { AddOfficeComponent } from './office/add-office/add-office.component';
+import { ViewOfficesComponent } from './office/view-offices/view-offices.component';
+import { AddLedgerComponent } from './accounting/add-ledger/add-ledger.component';
+import { AccountPayableComponent } from './accounting/account-payable/account-payable.component';
+import { AddChequeComponent } from './accounting/add-cheque/add-cheque.component';
+import { AddPayrollComponent } from './accounting/add-payroll/add-payroll.component'
 
 const appRoutes: Routes = [
   { path: 'login', component: LoginComponent },
@@ -81,6 +87,12 @@
         { path: 'manage_members', component: ManageMembersComponent },
         { path: 'add_employee', component: AddEmployeeComponent },
         { path: 'manage_employees', component: ManageEmployeeComponent },
+        { path: 'view_offices', component: ViewOfficesComponent },
+        { path: 'add_office', component: AddOfficeComponent },
+        { path: 'add_ledger', component: AddLedgerComponent },
+        { path: 'account_payable', component: AccountPayableComponent },
+        { path: 'add_cheque', component: AddChequeComponent },
+        { path: 'add_payroll', component: AddPayrollComponent },
   ]
 }
 ];
@@ -90,7 +102,7 @@
   declarations: [
     AppComponent,LoginComponent, NavbarComponent, DashboardComponent,
      AccountingComponent, GeneralLedgerComponent, AddJournalEntryComponent, 
-     PayrollsComponent, ChartOfAccountsComponent, AddTransactionTypeComponent, TrialBalanceComponent, ChequeClearingComponent, TransactionTypeComponent, AddMemberComponent, ManageMembersComponent, AddEmployeeComponent, ManageEmployeeComponent
+     PayrollsComponent, ChartOfAccountsComponent, AddTransactionTypeComponent, TrialBalanceComponent, ChequeClearingComponent, TransactionTypeComponent, AddMemberComponent, ManageMembersComponent, AddEmployeeComponent, ManageEmployeeComponent, AddOfficeComponent, ViewOfficesComponent, AddLedgerComponent, AccountPayableComponent, AddChequeComponent, AddPayrollComponent
   ],
   imports: [RouterModule.forRoot(appRoutes),
     BrowserModule, BrowserAnimationsModule,
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index e17d117..3a5c3c2 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -20,7 +20,7 @@
   <span>Organisation</span>
   <mat-list>
     <mat-list-item>
-      <span>View Offices</span>&nbsp;|
+      <a [routerLink]="['/navbar/view_offices']">View Offices</a>&nbsp;|
       &nbsp;<a [routerLink]="['/navbar/manage_employees']">View Employees</a>
     </mat-list-item>
   </mat-list>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 2a35c37..a793414 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -20,7 +20,7 @@
         <mat-icon>arrow_drop_down</mat-icon>
       </button>
       <mat-menu #client="matMenu">
-        <a mat-menu-item [routerLink]="['/navbar/client']">Client</a>
+        <a mat-menu-item [routerLink]="['/navbar/manage_members']">Client</a>
         <a mat-menu-item [routerLink]="['/navbar/group']">Group</a>
         <a mat-menu-item [routerLink]="['/navbar/center']">Center</a>
       </mat-menu>
diff --git a/src/app/office/add-office/add-office.component.html b/src/app/office/add-office/add-office.component.html
new file mode 100644
index 0000000..0a8ab41
--- /dev/null
+++ b/src/app/office/add-office/add-office.component.html
@@ -0,0 +1,44 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Office</h3>
+  <mat-divider></mat-divider>
+  <span>OFFICCE INFORMATION</span>
+<form class="fineract-form">
+  <mat-form-field>
+    <input matInput placeholder="Identifier">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Name">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Description">
+  </mat-form-field>
+</form>
+<span>ADDRESS</span>
+<form class="fineract-form">
+<mat-form-field>
+  <input matInput placeholder="Street">
+</mat-form-field>
+<br/>
+<mat-form-field>
+  <input matInput placeholder="City">
+</mat-form-field>
+<br/>
+<mat-form-field>
+  <input matInput placeholder="Postal code">
+</mat-form-field>
+<br/>
+<mat-form-field>
+  <input matInput placeholder="Country">
+</mat-form-field>
+<br/>
+<mat-form-field>
+  <input matInput placeholder="Region">
+</mat-form-field>
+</form>
+  <div>
+  <button mat-raised-button class="button1" color="primary">Submit</button>
+  <button mat-raised-button class="button2" color="warn">Cancel</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/office/add-office/add-office.component.scss b/src/app/office/add-office/add-office.component.scss
new file mode 100644
index 0000000..7109ed8
--- /dev/null
+++ b/src/app/office/add-office/add-office.component.scss
@@ -0,0 +1,13 @@
+.fineract-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  .button1{
+      margin-left: 50%;
+      
+      }
+  .button1, .button2{
+      width:20px;
+      display: inline-block;
+  }
\ No newline at end of file
diff --git a/src/app/office/add-office/add-office.component.spec.ts b/src/app/office/add-office/add-office.component.spec.ts
new file mode 100644
index 0000000..c45da18
--- /dev/null
+++ b/src/app/office/add-office/add-office.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddOfficeComponent } from './add-office.component';
+
+describe('AddOfficeComponent', () => {
+  let component: AddOfficeComponent;
+  let fixture: ComponentFixture<AddOfficeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddOfficeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddOfficeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/office/add-office/add-office.component.ts b/src/app/office/add-office/add-office.component.ts
new file mode 100644
index 0000000..79d64af
--- /dev/null
+++ b/src/app/office/add-office/add-office.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-office',
+  templateUrl: './add-office.component.html',
+  styleUrls: ['./add-office.component.scss']
+})
+export class AddOfficeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/office/view-offices/view-offices.component.html b/src/app/office/view-offices/view-offices.component.html
new file mode 100644
index 0000000..afb9f7f
--- /dev/null
+++ b/src/app/office/view-offices/view-offices.component.html
@@ -0,0 +1,43 @@
+<div class="main-div mat-elevation-z2">
+<h3 class="heading">View Offices</h3>
+<mat-divider></mat-divider>
+<div class="fineract-button">
+<a mat-raised-button  color="primary" [routerLink]="['/navbar/add_office']">
+  <mat-icon>add</mat-icon>Add Office</a>
+  </div>
+<mat-form-field>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name">
+</mat-form-field>
+
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+<!-- Position Column -->
+<ng-container matColumnDef="id">
+  <mat-header-cell *matHeaderCellDef>Code</mat-header-cell>
+  <mat-cell *matCellDef="let element">
+    <a routerLink="{{element.id}}">{{element.id}}</a>
+  </mat-cell>
+</ng-container>
+
+<!-- Name Column -->
+<ng-container matColumnDef="name">
+  <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
+  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+</ng-container>
+
+<ng-container matColumnDef="description">
+    <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
+  </ng-container>
+
+<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+
+
+</div>
+
+
diff --git a/src/app/office/view-offices/view-offices.component.scss b/src/app/office/view-offices/view-offices.component.scss
new file mode 100644
index 0000000..87b71f6
--- /dev/null
+++ b/src/app/office/view-offices/view-offices.component.scss
@@ -0,0 +1,16 @@
+.my-div{
+    margin-left: 2%;
+    margin-right:2%;
+    border-radius: 5px 5px 5px 5px;
+    background-color: #e6e6ff;
+    min-height: 100%;
+   
+  }
+  table {
+      width: 100%;
+    }
+    
+    .mat-form-field {
+      font-size: 14px;
+      width: 100%;
+    }
\ No newline at end of file
diff --git a/src/app/office/view-offices/view-offices.component.spec.ts b/src/app/office/view-offices/view-offices.component.spec.ts
new file mode 100644
index 0000000..2d0d3c7
--- /dev/null
+++ b/src/app/office/view-offices/view-offices.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewOfficesComponent } from './view-offices.component';
+
+describe('ViewOfficesComponent', () => {
+  let component: ViewOfficesComponent;
+  let fixture: ComponentFixture<ViewOfficesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewOfficesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewOfficesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/office/view-offices/view-offices.component.ts b/src/app/office/view-offices/view-offices.component.ts
new file mode 100644
index 0000000..aed8376
--- /dev/null
+++ b/src/app/office/view-offices/view-offices.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+@Component({
+  selector: 'app-view-offices',
+  templateUrl: './view-offices.component.html',
+  styleUrls: ['./view-offices.component.scss']
+})
+export class ViewOfficesComponent implements OnInit {
+
+  displayedColumns = ['id','name','description'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+export interface Element {
+  id: number;
+  name: string;
+  description: string;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];