diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 975a112..e4ff375 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,6 +14,7 @@ import {BrokerProfileComponent} from './broker-profile/broker-profile.component'
 import {ClientLoanListComponent} from './client-loan-list/client-loan-list.component';
 import {ClientProfileComponent} from './client-profile/client-profile.component';
 import {E403Component} from './e403/e403.component';
+import {ListAllRewardsComponent} from './list-all-rewards/list-all-rewards.component';
 
 
 const routes: Routes = [
@@ -32,6 +33,7 @@ const routes: Routes = [
   {path : 'broker-profile', component: BrokerProfileComponent,  canActivate: [AuthGuard]},
   {path : 'client-loan-list', component: ClientLoanListComponent, canActivate: [AuthGuard] },
   {path : 'client-profile', component: ClientProfileComponent, canActivate: [AuthGuard] },
+  {path : 'list-all-rewards', component: ListAllRewardsComponent, canActivate: [AuthGuard] },
   {path : 'e403', component: E403Component, },
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8ae82ad..aa670dc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -71,6 +71,7 @@ import { ClientLoanListComponent } from './client-loan-list/client-loan-list.com
 import { ClientProfileComponent } from './client-profile/client-profile.component';
 import { E403Component } from './e403/e403.component';
 import {FileSelectModule, UploadModule} from '@progress/kendo-angular-upload';
+import { ListAllRewardsComponent } from './list-all-rewards/list-all-rewards.component';
 
 
 
@@ -112,7 +113,8 @@ import {FileSelectModule, UploadModule} from '@progress/kendo-angular-upload';
     BrokerProfileComponent,
     ClientLoanListComponent,
     ClientProfileComponent,
-    E403Component
+    E403Component,
+    ListAllRewardsComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html
index 29e4acf..070cf72 100644
--- a/src/app/auth/auth.component.html
+++ b/src/app/auth/auth.component.html
@@ -1,5 +1,6 @@
 <div class='parent'>
     <div class="form_login">
+        <img src="../../assets/img/logo.png">
         <form *ngIf='!loading' class="k-form " [formGroup]="userForm" (ngSubmit)="submitForm()">
             <fieldset class="k-form-fieldset">
                 <legend class="k-form-legend">Login to Supercredit</legend>
diff --git a/src/app/broker-profile/broker-profile.component.html b/src/app/broker-profile/broker-profile.component.html
index 09dcd25..ab32465 100644
--- a/src/app/broker-profile/broker-profile.component.html
+++ b/src/app/broker-profile/broker-profile.component.html
@@ -1,6 +1,7 @@
+<div class="container outer">
 <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
 <div class="vertical-spacer"></div>
-<div class="container">
+<div class="container inner">
   <div class="row justify-content-center">
     <div class="col-sm-12">
       <h5> Edit : {{broker.First + ' ' + broker.Last}} </h5>
@@ -137,3 +138,4 @@
        <button kendoButton (click)="close('Ok, I got it')" primary="true">Yes</button>
   </kendo-dialog-actions>
 </kendo-dialog>
+</div>
diff --git a/src/app/broker-profile/broker-profile.component.scss b/src/app/broker-profile/broker-profile.component.scss
index 7d990e4..401b1f7 100644
--- a/src/app/broker-profile/broker-profile.component.scss
+++ b/src/app/broker-profile/broker-profile.component.scss
@@ -1,5 +1,17 @@
-div.container {
+.container.outer{
+  width:100%;
+  max-width:100vw;
+  background: url('/assets/img/body_bg.jpg') no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  opacity:0.98;
+}
+.container.inner {
   max-width: 500px;
+  min-height: calc(100vh - 48px);
+  /* background-color:chartreuse; */
 }
 
 div.vertical-spacer {
diff --git a/src/app/client-loan-list/client-loan-list.component.html b/src/app/client-loan-list/client-loan-list.component.html
index e682603..22c602b 100644
--- a/src/app/client-loan-list/client-loan-list.component.html
+++ b/src/app/client-loan-list/client-loan-list.component.html
@@ -1 +1,23 @@
-<p>client-loan-list works!</p>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-sm-4 loans" *ngFor="let loan of Loans">
+      <kendo-card [width]="'260px'">
+        <kendo-card-header class="k-hbox">
+          <kendo-avatar width="40px" height="40px" [shape]="'circle'" [icon]="'attachment'">  </kendo-avatar>
+          <div>
+            <h1 kendoCardTitle> {{ loan.Amount | currency }} </h1>
+            <span *ngIf="loan.Status != 'none'" class="badge badge-success">{{loan .Status}}</span>
+          </div>
+        </kendo-card-header>
+        <kendo-card-body>
+        <b> Address: </b> <p> {{ loan.Item }} </p>
+        </kendo-card-body>
+        <kendo-card-actions>
+          <comment-actions>
+            <p *ngIf="goodDate(loan.Settlement) " ><b> Settlement </b> {{ loan.Settlement  | date }} </p>
+          </comment-actions>
+        </kendo-card-actions>
+      </kendo-card>
+    </div>
+  </div>
+</div>
diff --git a/src/app/client-loan-list/client-loan-list.component.scss b/src/app/client-loan-list/client-loan-list.component.scss
index e69de29..a4d918d 100644
--- a/src/app/client-loan-list/client-loan-list.component.scss
+++ b/src/app/client-loan-list/client-loan-list.component.scss
@@ -0,0 +1,10 @@
+.loans {
+  margin-top: 10px;
+  height: 220px;
+  margin-bottom:20px;
+}
+
+kendo-card {
+  height:220px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
diff --git a/src/app/client-loan-list/client-loan-list.component.ts b/src/app/client-loan-list/client-loan-list.component.ts
index ed7aee5..f068ade 100644
--- a/src/app/client-loan-list/client-loan-list.component.ts
+++ b/src/app/client-loan-list/client-loan-list.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import {LoanModel} from '../models/loan.model';
+import {LoanSingleService} from '../service/loan.single.service';
+import {AuthService} from '../service/auth.service';
 
 @Component({
   selector: 'app-client-loan-list',
@@ -7,9 +10,25 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ClientLoanListComponent implements OnInit {
 
-  constructor() { }
+  public Loans: LoanModel[] =[];
+
+  constructor(private ls: LoanSingleService, private auth: AuthService) { }
 
   ngOnInit(): void {
+    this.ls.getLoanByClient(this.auth.loggedIn.user.Id).subscribe(
+      resp => {
+        this.Loans = [];
+        resp.forEach( v => {
+           const l = new LoanModel(v.Id);
+           l.Response = v;
+           this.Loans.push(l);
+        });
+      }
+    );
   }
 
+  public goodDate(d: Date): boolean {
+    const n = new Date();
+    return d.getFullYear() + 10 > n.getFullYear(); // shouldn't be 10 years old.
+  }
 }
diff --git a/src/app/list-all-rewards/list-all-rewards.component.html b/src/app/list-all-rewards/list-all-rewards.component.html
new file mode 100644
index 0000000..81a6f83
--- /dev/null
+++ b/src/app/list-all-rewards/list-all-rewards.component.html
@@ -0,0 +1,19 @@
+<kendo-chart [legend]="seriesLabels" >
+  <kendo-chart-axis-defaults>
+    <kendo-chart-axis-defaults-labels format="c0">
+    </kendo-chart-axis-defaults-labels>
+  </kendo-chart-axis-defaults>
+  <kendo-chart-title text="Reward vs Income (AUD) "></kendo-chart-title>
+  <kendo-chart-category-axis>
+    <kendo-chart-category-axis-item [categories]="rvi.Categories">
+    </kendo-chart-category-axis-item>
+  </kendo-chart-category-axis>
+  <kendo-chart-series >
+    <kendo-chart-series-item *ngFor="let d of rvi.Data; let idx=index"
+                             type="bar"
+                             [gap]="1" [spacing]="0.05" [data]="rvi.Data[idx]"
+                             [labels]="seriesLabels"
+    >
+    </kendo-chart-series-item>
+  </kendo-chart-series>
+</kendo-chart>
diff --git a/src/app/list-all-rewards/list-all-rewards.component.scss b/src/app/list-all-rewards/list-all-rewards.component.scss
new file mode 100644
index 0000000..f1f735b
--- /dev/null
+++ b/src/app/list-all-rewards/list-all-rewards.component.scss
@@ -0,0 +1,3 @@
+kendo-chart {
+  height: 600px;
+}
diff --git a/src/app/list-all-rewards/list-all-rewards.component.spec.ts b/src/app/list-all-rewards/list-all-rewards.component.spec.ts
new file mode 100644
index 0000000..2b6a7d6
--- /dev/null
+++ b/src/app/list-all-rewards/list-all-rewards.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListAllRewardsComponent } from './list-all-rewards.component';
+
+describe('ListAllRewardsComponent', () => {
+  let component: ListAllRewardsComponent;
+  let fixture: ComponentFixture<ListAllRewardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ListAllRewardsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListAllRewardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/list-all-rewards/list-all-rewards.component.ts b/src/app/list-all-rewards/list-all-rewards.component.ts
new file mode 100644
index 0000000..f4db5fc
--- /dev/null
+++ b/src/app/list-all-rewards/list-all-rewards.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import {AuthService} from '../service/auth.service';
+import {HttpClient} from '@angular/common/http';
+import {RewardVsIncomeModel} from '../models/reward-vs-incom.model';
+import {SeriesLabels} from '@progress/kendo-angular-charts';
+
+@Component({
+  selector: 'app-list-all-rewards',
+  templateUrl: './list-all-rewards.component.html',
+  styleUrls: ['./list-all-rewards.component.scss']
+})
+export class ListAllRewardsComponent implements OnInit {
+
+  public rvi: RewardVsIncomeModel = new RewardVsIncomeModel();
+  public seriesLabels: SeriesLabels = {
+    visible: true, // Note that visible defaults to false
+    padding: 3,
+    font: 'bold 9px Arial, sans-serif',
+    format: 'c0'
+  };
+
+  constructor(private auth: AuthService, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.http.get<RewardVsIncomeModel>(this.auth.getUrl('chart/reward-vs-income-monthly')).subscribe(
+      resp => { console.log(resp); this.rvi = resp; }
+    );
+  }
+
+}
diff --git a/src/app/main-menu-items.ts b/src/app/main-menu-items.ts
index 2b297f0..e1fcb26 100644
--- a/src/app/main-menu-items.ts
+++ b/src/app/main-menu-items.ts
@@ -22,8 +22,8 @@ export const mainMenuItems: any[] = [
         text: 'Reward',
         icon: 'percent',
         items: [
-            { text: 'List All',  icon: 'table', url: '#' },
-            { text: 'By Broker', icon: 'table', url: '#' },
+            { text: 'Overview',  icon: 'table', url: './#list-all-rewards#' },
+            { text: 'By Broker', icon: 'table', url: './#list-reward-by-broker' },
             { text: '--', separator: 'true'  },
             { text: 'Lender Monthly Uploads', icon: 'attachment' , url: './#uploads'}
         ]
@@ -32,12 +32,10 @@ export const mainMenuItems: any[] = [
         text: 'Clients',
         icon: 'user',
         items: [
-            { text: 'Add ', icon: 'plus', url: '#' },
-            { text: 'List All', fa: faIdCard },
-            { text: '--', separator: 'true'  },
-            { text: 'Search' , icon: 'search'},
-            { text: '--', separator: 'true'  },
-            { text: 'Broadcast', icon: 'email' },
+            { text: 'Add ', icon: 'plus', url: './#add-client' },
+            { text: 'List All', fa: faIdCard , url: './#list-all-client'},
+            { text: '--', separator: 'true' },
+            { text: 'Broadcast', icon: 'email', url: './#send-to-all-client'},
         ]
     },
 
diff --git a/src/app/models/reward-vs-incom.model.ts b/src/app/models/reward-vs-incom.model.ts
new file mode 100644
index 0000000..9ed9ccb
--- /dev/null
+++ b/src/app/models/reward-vs-incom.model.ts
@@ -0,0 +1,6 @@
+
+
+export class RewardVsIncomeModel {
+  Categories: string[];
+  Data: number[][2];
+}
diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts
index 30e0909..564b49e 100644
--- a/src/app/service/auth.service.ts
+++ b/src/app/service/auth.service.ts
@@ -10,8 +10,8 @@ export class AuthService {
 
     public apiUrl = 'https://svr2021.lawipac.com:8080/api/v1/';
     public apiWsUrl = 'wss://svr2021.lawipac.com:8080/api/v1/ws';
-    // public apiUrl = 'https://c5016.biukop.com.au:8080/api/v1/';
-    // public apiWsUrl = 'wss://c5016.biukop.com.au:8080/api/v1/ws';
+    //public apiUrl = 'https://c5016.biukop.com.au:8080/api/v1/';
+    //public apiWsUrl = 'wss://c5016.biukop.com.au:8080/api/v1/ws';
     public loggedIn = ApiV1LoginResponse.EmptyNew();
     loginSuccess = new EventEmitter <ApiV1LoginResponse>();
 
diff --git a/src/app/service/loan.single.service.ts b/src/app/service/loan.single.service.ts
index e59171f..45054a0 100644
--- a/src/app/service/loan.single.service.ts
+++ b/src/app/service/loan.single.service.ts
@@ -54,4 +54,9 @@ export class LoanSingleService {
     return this.http.delete<string>(this.auth.getUrl('loan/' + id));
   }
 
+
+  public getLoanByClient(id: string): Observable<LoanModel[]> {
+    return this.http.get<LoanModel[]>(this.auth.getUrl('loan-by-client/' + id));
+  }
+
 }
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
new file mode 100644
index 0000000..9328168
Binary files /dev/null and b/src/assets/img/logo.png differ