diff --git a/src/app/dashboard/category-month.component.html b/src/app/dashboard/category-month.component.html
index e8c9dbc..a6ccc84 100644
--- a/src/app/dashboard/category-month.component.html
+++ b/src/app/dashboard/category-month.component.html
@@ -1,6 +1,6 @@
 <div class="animated fadeIn">
   <div class=row>
-    <div class="col-xl-3 col-md-6">
+    <div class="col-md-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -10,10 +10,10 @@
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
-              <li>
-                <span class="title">Placeholder Category</span>
-                <span class="value">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
-                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+              <li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;">
+                <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
+                  0</span></span>
                 <div class="bars">
                   <div class="progress" style="height: 6px;">
                     <div class="progress-bar bg-success" role="progressbar"
@@ -21,15 +21,17 @@
                   </div>
                 </div>
               </li>
-              <li *ngIf="categoryList.length > 10 && disableCategoryButtonFirst == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
-              </li>
+              <div *ngIf="weekList1 !== undefined">
+                <li *ngIf="weekList1.length > 6 && disableCategoryButton1 == false" class="divider text-center">
+                  <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore1()"><i class="icon-options"></i></button>
+                </li>
+              </div>
             </ul>
           </div>
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-xl-3 col-md-6">
+    <div class="col-md-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -39,9 +41,9 @@
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
-              <li>
-                <span class="title">Placeholder Category</span>
-                <span class="value">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
+              <li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;">
+                <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
                   ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
                 <div class="bars">
                   <div class="progress" style="height: 6px;">
@@ -50,15 +52,17 @@
                   </div>
                 </div>
               </li>
-              <li *ngIf="categoryList.length > 10 && disableCategoryButtonFirst == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
-              </li>
+              <div *ngIf="!weekList2 == null">
+                <li *ngIf="weekList2.length > 6 && disableCategoryButtonFirst == false" class="divider text-center">
+                  <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore2()"><i class="icon-options"></i></button>
+                </li>
+              </div>
             </ul>
           </div>
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-xl-3 col-md-6">
+    <div class="col-md-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -68,9 +72,9 @@
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
-              <li>
-                <span class="title">Placeholder Category</span>
-                <span class="value">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
+              <li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;">
+                <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
                   ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
                 <div class="bars">
                   <div class="progress" style="height: 6px;">
@@ -79,15 +83,17 @@
                   </div>
                 </div>
               </li>
-              <li *ngIf="categoryList.length > 10 && disableCategoryButtonFirst == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
-              </li>
+              <div *ngIf="weekList3 !== undefined">
+                <li *ngIf="weekList3.length > 6 && disableCategoryButtonFirst == false" class="divider text-center">
+                  <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore3()"><i class="icon-options"></i></button>
+                </li>
+              </div>
             </ul>
           </div>
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-xl-3 col-md-6">
+    <div class="col-md-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -97,9 +103,9 @@
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
-              <li>
-                <span class="title">Placeholder Category</span>
-                <span class="value">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
+              <li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;">
+                <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
                   ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
                 <div class="bars">
                   <div class="progress" style="height: 6px;">
@@ -108,9 +114,11 @@
                   </div>
                 </div>
               </li>
-              <li *ngIf="categoryList.length > 10 && disableCategoryButtonFirst == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
-              </li>
+              <div *ngIf="!weekList4 == null">
+                <li *ngIf="weekList4.length > 6 && disableCategoryButtonFirst == false" class="divider text-center">
+                  <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore4()"><i class="icon-options"></i></button>
+                </li>
+              </div>
             </ul>
           </div>
         </div>
diff --git a/src/app/dashboard/category-month.component.ts b/src/app/dashboard/category-month.component.ts
index 74f267f..40fbbdb 100644
--- a/src/app/dashboard/category-month.component.ts
+++ b/src/app/dashboard/category-month.component.ts
@@ -9,25 +9,47 @@ import 'rxjs/add/operator/map';
 })
 export class CategoryMonthComponent implements OnInit {
 
-  disableCategoryButtonFirst: boolean = false;
+  disableCategoryButton1: boolean = false;
+  disableCategoryButton2: boolean = false;
+  disableCategoryButton3: boolean = false;
+  disableCategoryButton4: boolean = false;
 
   weekPurchaseList = {
     first: 0,
   };
 
+  weekList1 = {};
+  weekList2 = {};
+  weekList3 = {};
+  weekList4 = {};
+
   categoryList: number[] = [];
   dayList: any[] = [];
   valueList: number[] = [];
-  categoryLimitFirst: number = 10;
   myWeek1: any;
   myWeek2: any;
   myWeek3: any;
   myWeek4: any;
+  categoryIdList: number[] = [];
+  categoryNameList: string[] = [];
+  categoryLimit1: number = 6;
+  categoryLimit2: number = 6;
+  categoryLimit3: number = 6;
+  categoryLimit4: number = 6;
 
   constructor(
   private api: ApiService,
   ) {
     this.setDate();
+    this.api.categoryList().subscribe(
+      result => {
+        this.setCategoryList(result.categories);
+      },
+      error => {
+        console.log('Retrieval Error');
+        console.log( error._body );
+      }
+    );
     this.api.categoryTransactionList().subscribe(
       result => {
         console.log(result);
@@ -40,13 +62,16 @@ export class CategoryMonthComponent implements OnInit {
     );
   }
 
-  private loadMore () {
-    this.disableCategoryButtonFirst = true;
-    this.categoryLimitFirst = 100;
+  ngOnInit(): void {
+  }
+
+  private setCategoryList(data: any) {
+    this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
+    this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
   }
 
   private setDate () {
-    this.myWeek1 = moment().format('YYYY-MM-DD');
+    this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
     this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');
     this.myWeek3 = moment(this.myWeek2).subtract(1, 'weeks').format('YYYY-MM-DD');
     this.myWeek4 = moment(this.myWeek3).subtract(1, 'weeks').format('YYYY-MM-DD');
@@ -57,11 +82,33 @@ export class CategoryMonthComponent implements OnInit {
   }
 
   private setData (data: any) {
-    // this.categoryList = Object.keys(data.data.category).map(key => data.data.category[key]);
-    // this.dayList = Object.keys(data.data.days).map(key => data.data.days[key]);
-    // this.valueList = Object.keys(data.data.value).map(key => data.data.value[key]);
+    function prop<T, K extends keyof T>(obj: T, key: K) {
+      return obj[key];
+    }
+    this.weekList1 = prop(data.data, this.myWeek1);
+    this.weekList2 = prop(data.data, this.myWeek2);
+    this.weekList3 = prop(data.data, this.myWeek3);
+    this.weekList4 = prop(data.data, this.myWeek4);
+    console.log(this.weekList1);
+    console.log(this.weekList2);
+    console.log(this.weekList3);
+    console.log(this.weekList4);
   }
 
-  ngOnInit(): void {
+  private loadMore1 () {
+    this.disableCategoryButton1 = true;
+    this.categoryLimit1 = 20;
+  }
+  private loadMore2 () {
+    this.disableCategoryButton2 = true;
+    this.categoryLimit2 = 20;
+  }
+  private loadMore3 () {
+    this.disableCategoryButton3 = true;
+    this.categoryLimit3 = 20;
+  }
+  private loadMore4 () {
+    this.disableCategoryButton4 = true;
+    this.categoryLimit4 = 20;
   }
 }