diff --git a/src/app/accounting/add-journal-entry/add-journal-entry.component.html b/src/app/accounting/add-journal-entry/add-journal-entry.component.html
new file mode 100644
index 0000000..b9b7ccd
--- /dev/null
+++ b/src/app/accounting/add-journal-entry/add-journal-entry.component.html
@@ -0,0 +1,53 @@
+<div class="page-space mat-elevation-z2">
+  <p>
+  <a [routerLink]="['/navbar/accounting']">Accounting</a>
+  <span class="current-page">/ Add Journal Entry</span>
+</p>
+
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Journal Entry</h3>
+  <form class="fineract-form">
+  <mat-form-field>
+    <input matInput [matDatepicker]="picker" placeholder="Transaction date">
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Transaction Type">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Note(optional)">
+  </mat-form-field>
+<br/>
+  <mat-form-field class="input">
+    <textarea matInput placeholder="Leave a comment"></textarea>
+  </mat-form-field>
+  </form>
+
+  <span>Affected Accounts</span>
+  <mat-card>
+    <span>Debit</span>
+    <mat-form-field>
+      <input matInput placeholder="Account">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Amount">
+    </mat-form-field>
+    <button mat-raised-button color="warn"><mat-icon>clear</mat-icon></button>
+    <button mat-raised-button color="primary">Add Debit</button>
+  </mat-card>
+  <mat-card>
+    <span>Credit</span>
+    <mat-form-field>
+      <input matInput placeholder="Account">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Amount">
+    </mat-form-field>
+    <button mat-raised-button color="warn"><mat-icon>clear</mat-icon></button>
+    <button mat-raised-button color="primary">Add Credit</button>
+  </mat-card>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/accounting/add-journal-entry/add-journal-entry.component.scss b/src/app/accounting/add-journal-entry/add-journal-entry.component.scss
new file mode 100644
index 0000000..73bd8bc
--- /dev/null
+++ b/src/app/accounting/add-journal-entry/add-journal-entry.component.scss
@@ -0,0 +1,11 @@
+
+.fineract-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .input {
+    width: 100%;
+  }
+  
\ No newline at end of file
diff --git a/src/app/accounting/add-journal-entry/add-journal-entry.component.spec.ts b/src/app/accounting/add-journal-entry/add-journal-entry.component.spec.ts
new file mode 100644
index 0000000..081bd33
--- /dev/null
+++ b/src/app/accounting/add-journal-entry/add-journal-entry.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddJournalEntryComponent } from './add-journal-entry.component';
+
+describe('AddJournalEntryComponent', () => {
+  let component: AddJournalEntryComponent;
+  let fixture: ComponentFixture<AddJournalEntryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddJournalEntryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddJournalEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/add-journal-entry/add-journal-entry.component.ts b/src/app/accounting/add-journal-entry/add-journal-entry.component.ts
new file mode 100644
index 0000000..37a73b0
--- /dev/null
+++ b/src/app/accounting/add-journal-entry/add-journal-entry.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms'
+import {FormControl, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-add-journal-entry',
+  templateUrl: './add-journal-entry.component.html',
+  styleUrls: ['./add-journal-entry.component.scss']
+})
+export class AddJournalEntryComponent implements OnInit {
+
+  startDate = new Date(1990, 0, 1);
+  show=false;
+
+  myControl: FormControl = new FormControl();
+  
+  options = [
+    {value: 'mor', viewValue: 'Morogoro branch'},
+    {value: 'kat', viewValue: 'Katuba'},
+    {value:'loan',viewValue:'Loan Officer'}
+  ];
+
+  currencies = [
+    {value:'afgh',viewValue:'Afghanistan Afghani()'},
+    {value:'alba',viewValue:'Albanian lek()'},
+    {value:'alg',viewValue:'Algerian Dinar()'}
+  ]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/accounting/add-transaction-type/add-transaction-type.component.html b/src/app/accounting/add-transaction-type/add-transaction-type.component.html
new file mode 100644
index 0000000..c11dfe2
--- /dev/null
+++ b/src/app/accounting/add-transaction-type/add-transaction-type.component.html
@@ -0,0 +1,19 @@
+<div class="my-div mat-elevation-z2">
+  <h3 class="heading">General Ledger</h3>
+  <mat-divider></mat-divider>
+  <span>Transaction Type</span>
+
+  <mat-form-field>
+    <input matInput placeholder="Code">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Name">
+  </mat-form-field>
+
+  <mat-form-field>
+    <textarea matInput placeholder="Description(optional)"></textarea>
+  </mat-form-field>
+  
+  <button mat-raise-button>Submit</button>
+  <button mat-raise-button>Cancel</button>
diff --git a/src/app/accounting/add-transaction-type/add-transaction-type.component.scss b/src/app/accounting/add-transaction-type/add-transaction-type.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/accounting/add-transaction-type/add-transaction-type.component.scss
diff --git a/src/app/accounting/add-transaction-type/add-transaction-type.component.spec.ts b/src/app/accounting/add-transaction-type/add-transaction-type.component.spec.ts
new file mode 100644
index 0000000..001163c
--- /dev/null
+++ b/src/app/accounting/add-transaction-type/add-transaction-type.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddTransactionTypeComponent } from './add-transaction-type.component';
+
+describe('AddTransactionTypeComponent', () => {
+  let component: AddTransactionTypeComponent;
+  let fixture: ComponentFixture<AddTransactionTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddTransactionTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddTransactionTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/add-transaction-type/add-transaction-type.component.ts b/src/app/accounting/add-transaction-type/add-transaction-type.component.ts
new file mode 100644
index 0000000..ce80310
--- /dev/null
+++ b/src/app/accounting/add-transaction-type/add-transaction-type.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-transaction-type',
+  templateUrl: './add-transaction-type.component.html',
+  styleUrls: ['./add-transaction-type.component.scss']
+})
+export class AddTransactionTypeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
new file mode 100644
index 0000000..e1dc266
--- /dev/null
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
@@ -0,0 +1,47 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Chart of Accounts</h3>
+  <mat-divider></mat-divider>
+  <div class="fineract-button">
+  <a mat-raised-button  color="primary" >
+    Download</a>
+    </div>
+  <mat-form-field >
+    <input matInput class="filter" (keyup)="applyFilter($event.target.value)" placeholder="Filter by name/code">
+  </mat-form-field>
+  
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="code">
+    <mat-header-cell *matHeaderCellDef>Code </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.code}}">{{element.code}}</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>
+
+    <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.type} </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/chart-of-accounts/chart-of-accounts.component.scss b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.scss
new file mode 100644
index 0000000..345f7a3
--- /dev/null
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.scss
@@ -0,0 +1,11 @@
+
+  table {
+      width: 100%;
+    }
+    
+    .mat-form-field {
+      font-size: 14px;
+      width: 100%;
+    }
+    
+    
\ No newline at end of file
diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.spec.ts b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.spec.ts
new file mode 100644
index 0000000..226cb27
--- /dev/null
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartOfAccountsComponent } from './chart-of-accounts.component';
+
+describe('ChartOfAccountsComponent', () => {
+  let component: ChartOfAccountsComponent;
+  let fixture: ComponentFixture<ChartOfAccountsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChartOfAccountsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartOfAccountsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts
new file mode 100644
index 0000000..bb3a3d2
--- /dev/null
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+
+@Component({
+  selector: 'app-chart-of-accounts',
+  templateUrl: './chart-of-accounts.component.html',
+  styleUrls: ['./chart-of-accounts.component.scss']
+})
+export class ChartOfAccountsComponent implements OnInit {
+  displayedColumns = ['code','name','description','type'];
+  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 {
+  code: string;
+  name: string;
+  description: string;
+  type: string;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
+ 
\ No newline at end of file
diff --git a/src/app/accounting/cheque-clearing/cheque-clearing.component.html b/src/app/accounting/cheque-clearing/cheque-clearing.component.html
new file mode 100644
index 0000000..f623c55
--- /dev/null
+++ b/src/app/accounting/cheque-clearing/cheque-clearing.component.html
@@ -0,0 +1,70 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Cheque Clearing</h3>
+  <mat-divider></mat-divider>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by identifier">
+  </mat-form-field>
+  
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="identifier">
+    <mat-header-cell *matHeaderCellDef>Identifier </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.identifier}}">{{element.identifier}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="drawee">
+    <mat-header-cell *matHeaderCellDef>Drawee</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.drawee}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="drawer">
+      <mat-header-cell *matHeaderCellDef>Drawer</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.drawer}} </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="amount">
+        <mat-header-cell *matHeaderCellDef>Amount</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.amount} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="dateissued">
+        <mat-header-cell *matHeaderCellDef>Date Issued</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.dateisued} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="state">
+        <mat-header-cell *matHeaderCellDef>state</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.state} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="approve">
+        <mat-header-cell *matHeaderCellDef>Approve</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.approve} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="cancel">
+        <mat-header-cell *matHeaderCellDef>Cancel</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.cancel} </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/cheque-clearing/cheque-clearing.component.scss b/src/app/accounting/cheque-clearing/cheque-clearing.component.scss
new file mode 100644
index 0000000..0961a8e
--- /dev/null
+++ b/src/app/accounting/cheque-clearing/cheque-clearing.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/cheque-clearing/cheque-clearing.component.spec.ts b/src/app/accounting/cheque-clearing/cheque-clearing.component.spec.ts
new file mode 100644
index 0000000..ecb3d3f
--- /dev/null
+++ b/src/app/accounting/cheque-clearing/cheque-clearing.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChequeClearingComponent } from './cheque-clearing.component';
+
+describe('ChequeClearingComponent', () => {
+  let component: ChequeClearingComponent;
+  let fixture: ComponentFixture<ChequeClearingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChequeClearingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChequeClearingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/cheque-clearing/cheque-clearing.component.ts b/src/app/accounting/cheque-clearing/cheque-clearing.component.ts
new file mode 100644
index 0000000..6eec557
--- /dev/null
+++ b/src/app/accounting/cheque-clearing/cheque-clearing.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+@Component({
+  selector: 'app-cheque-clearing',
+  templateUrl: './cheque-clearing.component.html',
+  styleUrls: ['./cheque-clearing.component.scss']
+})
+export class ChequeClearingComponent implements OnInit {
+
+  displayedColumns = ['identifier','drawer','drawee','payee','amount','dateissued','state','approve','cancel'];
+  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 {
+  identifier: number;
+  drawee:string;
+  drawer: string;
+  payee:string;
+  amount: number;
+  dateissued:Date;
+  state:string;
+  approve:boolean;
+  cancel:boolean;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
diff --git a/src/app/accounting/general-ledger/general-ledger.component.html b/src/app/accounting/general-ledger/general-ledger.component.html
index 23f3357..f65ec3d 100644
--- a/src/app/accounting/general-ledger/general-ledger.component.html
+++ b/src/app/accounting/general-ledger/general-ledger.component.html
@@ -1,52 +1,42 @@
-<div class="my-div mat-elevation-z2">
+<div class="main-div mat-elevation-z2">
   <h3 class="heading">General Ledger</h3>
   <mat-divider></mat-divider>
-  <button>Add Ledger</button>
+  <div class="fineract-button">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add-ledger']">
+    <mat-icon>add</mat-icon>Add Ledger</a>
+    </div>
   <mat-form-field>
-    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name/short name">
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name">
   </mat-form-field>
-  <a mat-raised-button class="fineract-button" color="primary" [routerLink]="['/navbar/managereport/create']">
-    <mat-icon>add</mat-icon>Create Report</a>
-
+  
 <br>
 <mat-divider></mat-divider>
 
 <mat-table #table [dataSource]="dataSource">
 
   <!-- Position Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef>Report Name </mat-header-cell>
+  <ng-container matColumnDef="id">
+    <mat-header-cell *matHeaderCellDef>Id </mat-header-cell>
     <mat-cell *matCellDef="let element">
-      <a routerLink="{{element.name}}">{{element.name}}</a>
+      <a routerLink="{{element.id}}">{{element.id}}</a>
     </mat-cell>
   </ng-container>
 
   <!-- Name Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef> Report Type</mat-header-cell>
-    <mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
+  <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="subtype">
-      <mat-header-cell *matHeaderCellDef>Report Subtype</mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.subtype}} </mat-cell>
+  <ng-container matColumnDef="description">
+      <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
     </ng-container>
 
-    <ng-container matColumnDef="category">
-        <mat-header-cell *matHeaderCellDef> Report Category</mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.category} </mat-cell>
+    <ng-container matColumnDef="balance">
+        <mat-header-cell *matHeaderCellDef>Balance</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.balance} </mat-cell>
       </ng-container>
-      <ng-container matColumnDef="core">
-          <mat-header-cell *matHeaderCellDef>Core Report</mat-header-cell>
-          <mat-cell *matCellDef="let element"> {{element.core}} </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="user">
-            <mat-header-cell *matHeaderCellDef> User Report</mat-header-cell>
-            <mat-cell *matCellDef="let element"> {{element.user}} </mat-cell>
-          </ng-container>
-
-
-    
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
diff --git a/src/app/accounting/general-ledger/general-ledger.component.scss b/src/app/accounting/general-ledger/general-ledger.component.scss
index 82cb099..b03d650 100644
--- a/src/app/accounting/general-ledger/general-ledger.component.scss
+++ b/src/app/accounting/general-ledger/general-ledger.component.scss
@@ -1,13 +1,6 @@
-.my-div{
-  margin-left: 2%;
-  margin-right:2%;
-  border-radius: 5px 5px 5px 5px;
-  background-color: #e6e6ff;
-  min-height: 100%;
- 
-}
+
 table {
-    width: 100%;
+    width: 80%;
   }
   
   .mat-form-field {
diff --git a/src/app/accounting/general-ledger/general-ledger.component.ts b/src/app/accounting/general-ledger/general-ledger.component.ts
index 4612e79..460769d 100644
--- a/src/app/accounting/general-ledger/general-ledger.component.ts
+++ b/src/app/accounting/general-ledger/general-ledger.component.ts
@@ -7,7 +7,7 @@
   styleUrls: ['./general-ledger.component.scss']
 })
 export class GeneralLedgerComponent implements OnInit {
-  displayedColumns = ['name','type','subtype','category','core', 'user'];
+  displayedColumns = ['id','name','description','balance'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
   applyFilter(filterValue: string) {
@@ -23,14 +23,11 @@
 
 }
 export interface Element {
-  name: string;
-  type:string;
-  subtype: string;
-  category:string;
-  core: string;
-  user:string;
-
- 
+  id: number;
+  name:string;
+  description: string;
+  balance:string;
+  
 }
 
 const ELEMENT_DATA: Element[] = [
diff --git a/src/app/accounting/payrolls/payrolls.component.html b/src/app/accounting/payrolls/payrolls.component.html
new file mode 100644
index 0000000..8edcd56
--- /dev/null
+++ b/src/app/accounting/payrolls/payrolls.component.html
@@ -0,0 +1,42 @@
+<div class="my-div mat-elevation-z2">
+  <h3 class="heading">Payrolls</h3>
+  <mat-divider></mat-divider>
+  <div class="fineract-button">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/managereport/create']">
+    <mat-icon>add</mat-icon>Add Payroll</a>
+    </div>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name/short name">
+  </mat-form-field>
+  
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="createdby">
+    <mat-header-cell *matHeaderCellDef>Created by</mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.id}}">{{element.createdby}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="createdon">
+    <mat-header-cell *matHeaderCellDef>Created on</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.createdon}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="accountno">
+      <mat-header-cell *matHeaderCellDef>Account number</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.accountno}} </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/payrolls/payrolls.component.scss b/src/app/accounting/payrolls/payrolls.component.scss
new file mode 100644
index 0000000..0961a8e
--- /dev/null
+++ b/src/app/accounting/payrolls/payrolls.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/payrolls/payrolls.component.spec.ts b/src/app/accounting/payrolls/payrolls.component.spec.ts
new file mode 100644
index 0000000..c5a27ea
--- /dev/null
+++ b/src/app/accounting/payrolls/payrolls.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PayrollsComponent } from './payrolls.component';
+
+describe('PayrollsComponent', () => {
+  let component: PayrollsComponent;
+  let fixture: ComponentFixture<PayrollsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PayrollsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PayrollsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/payrolls/payrolls.component.ts b/src/app/accounting/payrolls/payrolls.component.ts
new file mode 100644
index 0000000..0049e46
--- /dev/null
+++ b/src/app/accounting/payrolls/payrolls.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+@Component({
+  selector: 'app-payrolls',
+  templateUrl: './payrolls.component.html',
+  styleUrls: ['./payrolls.component.scss']
+})
+export class PayrollsComponent implements OnInit {
+  displayedColumns = ['createdby','createdon','accountno'];
+  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 {
+  createdby: string;
+  createdon: Date;
+  accountno: number;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
diff --git a/src/app/accounting/trial-balance/trial-balance.component.html b/src/app/accounting/trial-balance/trial-balance.component.html
new file mode 100644
index 0000000..103b96c
--- /dev/null
+++ b/src/app/accounting/trial-balance/trial-balance.component.html
@@ -0,0 +1,42 @@
+<div class="my-div mat-elevation-z2">
+  <h3 class="heading">Trial Balance</h3>
+  <mat-divider></mat-divider>
+  <div  class="fineract-button">
+  <a mat-raised-button color="primary" [routerLink]="['/navbar/managereport/create']">
+    <mat-icon>add</mat-icon>Add</a>
+    </div>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name/short name">
+  </mat-form-field>
+  
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="ledger">
+    <mat-header-cell *matHeaderCellDef>Ledger </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.ledger}}">{{element.ledger}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="debit">
+    <mat-header-cell *matHeaderCellDef>Dedit</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.debit}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="credit">
+      <mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.credit}} </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/accounting/trial-balance/trial-balance.component.scss b/src/app/accounting/trial-balance/trial-balance.component.scss
new file mode 100644
index 0000000..0961a8e
--- /dev/null
+++ b/src/app/accounting/trial-balance/trial-balance.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/trial-balance/trial-balance.component.spec.ts b/src/app/accounting/trial-balance/trial-balance.component.spec.ts
new file mode 100644
index 0000000..23f92c1
--- /dev/null
+++ b/src/app/accounting/trial-balance/trial-balance.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrialBalanceComponent } from './trial-balance.component';
+
+describe('TrialBalanceComponent', () => {
+  let component: TrialBalanceComponent;
+  let fixture: ComponentFixture<TrialBalanceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TrialBalanceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrialBalanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/trial-balance/trial-balance.component.ts b/src/app/accounting/trial-balance/trial-balance.component.ts
new file mode 100644
index 0000000..fb15451
--- /dev/null
+++ b/src/app/accounting/trial-balance/trial-balance.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+@Component({
+  selector: 'app-trial-balance',
+  templateUrl: './trial-balance.component.html',
+  styleUrls: ['./trial-balance.component.scss']
+})
+export class TrialBalanceComponent implements OnInit {
+  displayedColumns = ['ledger','debit','credit'];
+  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 {
+  ledger: string;
+  debit: number;
+  credit: number;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 36d04ea..7481e16 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule, Routes} from '@angular/router';
 import {
   MatAutocompleteModule,
@@ -45,10 +46,18 @@
 import { NavbarComponent } from './navbar/navbar.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AccountingComponent } from './accounting/accounting.component';
-import { GeneralLedgerComponent } from './accounting/general-ledger/general-ledger.component'
+import { GeneralLedgerComponent } from './accounting/general-ledger/general-ledger.component';
+import { AddJournalEntryComponent } from './accounting/add-journal-entry/add-journal-entry.component';
+
+import { PayrollsComponent } from './accounting/payrolls/payrolls.component';
+import { ChartOfAccountsComponent } from './accounting/chart-of-accounts/chart-of-accounts.component';
+import { AddTransactionTypeComponent } from './accounting/add-transaction-type/add-transaction-type.component';
+import { TrialBalanceComponent } from './accounting/trial-balance/trial-balance.component';
+import { ChequeClearingComponent } from './accounting/cheque-clearing/cheque-clearing.component'
 
 const appRoutes: Routes = [
   { path: 'login', component: LoginComponent },
+  { path: '', redirectTo: 'login', pathMatch:'full'  },
   
   {
     path: 'navbar', component: NavbarComponent, children: [
@@ -56,6 +65,12 @@
         { path: 'dashboard', component: DashboardComponent },
         { path: 'accounting', component: AccountingComponent },
         { path: 'GL', component: GeneralLedgerComponent },
+        { path: 'add_journal_entry', component: AddJournalEntryComponent },
+        { path: 'payroll', component: PayrollsComponent },
+        { path: 'chart_of_accounts', component: ChartOfAccountsComponent },
+        { path: 'add_transaction_type', component: AddTransactionTypeComponent },
+        { path: 'trial_balance', component: TrialBalanceComponent },
+        { path: 'cheque_clearing', component: ChequeClearingComponent },
   ]
 }
 ];
@@ -63,7 +78,9 @@
 
 @NgModule({
   declarations: [
-    AppComponent,LoginComponent, NavbarComponent, DashboardComponent, AccountingComponent, GeneralLedgerComponent
+    AppComponent,LoginComponent, NavbarComponent, DashboardComponent,
+     AccountingComponent, GeneralLedgerComponent, AddJournalEntryComponent, 
+     PayrollsComponent, ChartOfAccountsComponent, AddTransactionTypeComponent, TrialBalanceComponent, ChequeClearingComponent
   ],
   imports: [RouterModule.forRoot(appRoutes),
     BrowserModule, BrowserAnimationsModule,
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index b3f8ca3..8f280fd 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,9 +1,9 @@
 <mat-card class="clients">
-  <span>Client</span>
+  <span>Clients</span>
   <mat-list>
     <mat-list-item>
-      <span>View Members</span>|
-      <span>View Groups</span>
+      <span>View Members</span> &nbsp;|
+      &nbsp;<span>View Groups</span>
     </mat-list-item>
   </mat-list>
 </mat-card>
@@ -11,8 +11,8 @@
   <span>Accounting</span>
   <mat-list>
     <mat-list-item>
-      <span>View General Ledger</span>|
-      <span>View chart of Account</span>
+      <a [routerLink]="['/navbar/GL']">View General Ledger</a>|
+      &nbsp;<a [routerLink]="['/navbar/chart_of_accounts']">View chart of Account</a>
     </mat-list-item>
   </mat-list>
 </mat-card>
@@ -20,8 +20,8 @@
   <span>Organisation</span>
   <mat-list>
     <mat-list-item>
-      <span>View Offices</span>|
-      <span>View Employees</span>
+      <span>View Offices</span>&nbsp;|
+      &nbsp;<span>View Employees</span>
     </mat-list-item>
   </mat-list>
 </mat-card>
@@ -30,7 +30,7 @@
   <mat-list>
     <mat-list-item>
       <span>View Loan Products</span>|
-      <span>View Savings Product</span>
+      &nbsp;<span>View Savings Product</span>
     </mat-list-item>
   </mat-list>
 </mat-card>
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index d02c897..dcfd98d 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -2,22 +2,22 @@
     display: flex;
     display: inline-block;
     vertical-align: top;
-    margin-left: 10%;
+    margin-left: 5%;
     margin-bottom: 5%;
-    width: 30%;
-    height:200px;
+    width: 35%;
+    height:120px;
 
 }
 .organisation,.products{
     display: flex;
     display: inline-block;
     vertical-align:top;
-    margin-left: 10%;
-    width: 30%;
-    height:200px;
+    margin-left: 5%;
+    width: 35%;
+    height:120px;
 }
 
 mat-list-item{
-    padding-top:100px;
+    padding-top:50px;
     
 }
\ No newline at end of file
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 618b704..ecce890 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -5,7 +5,7 @@
     <div class="search2">
   <ul id="menu" class="menu1">
     <li>
-      <button mat-button (click)="sidenav.toggle()" class="dropdown-button">
+      <button mat-icon-button (click)="sidenav.toggle()" class="dropdown-button">
         <mat-icon class="fineract-toolicon">menu</mat-icon>
       </button>
     </li>
@@ -68,8 +68,9 @@
     </li>
    
     <li class="dropdown-button">
-      <button mat-button [routerLink]="['/navbar/notification']">
-        <mat-icon>notifications</mat-icon></button>
+      <button mat-icon-button [routerLink]="['/navbar/notification']">
+        <mat-icon>notifications</mat-icon>
+      </button>
     </li>
     <li>
       <button mat-button [matMenuTriggerFor]="mifos" class="dropdown-button">Fineract CN
@@ -91,6 +92,9 @@
 
 <mat-sidenav-container class="app-container" style="background-image:url('assets/Background.png');">
   <mat-sidenav #sidenav class="app-sidenav mat-elevation-z2" mode="side" opened="true">
+    <mat-toolbar>
+      <button mat-button [routerLink]="['/navbar/dashboard']">Quick Access</button>
+    </mat-toolbar>
     <mat-list>
      
       <a mat-list-item href="badges.html">
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index c2e2ce6..1f920b3 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -52,7 +52,7 @@
 }
 .search1{
     
-    margin-left:3%;
+    margin-left:8%;
     
 }
 .fineract-toolsearch{
@@ -78,4 +78,9 @@
   
 .menu1{
     padding:0;
+}
+
+.test{
+    padding-left:0;
+    padding-right: 0;
 }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 5f69d4f..94c9bb7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,2 +1,33 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+body{
+    margin:0;
+}
+.heading{
+    margin-left:2%;
+    padding-top:5px;
+    padding-bottom: 5px;
+    height:15px;
+  }
+
+.fineract-button{
+    margin-top:5px;
+    margin-left:80%;
+    width:150px;
+}
+
+.main-div {
+    display:flex;
+    flex-direction: column;
+    margin-left: 2%;
+    margin-right:2%;
+    border-radius: 5px 5px 5px 5px;
+    background-color: white;
+    min-height: 100%;
+
+  }
+
+  .filter{
+      width: 50%;
+  }
\ No newline at end of file