diff --git a/src/app/chart/chart-item/chart-item.component.html b/src/app/chart/chart-item/chart-item.component.html
index 5e286db10..ecd881fa1 100644
--- a/src/app/chart/chart-item/chart-item.component.html
+++ b/src/app/chart/chart-item/chart-item.component.html
@@ -1,4 +1,5 @@
 <div fxLayout="row" fxLayoutAlign="space-between start">
     <div></div>
-    <div>{{state}}</div>
+    <div>{{state}}: &nbsp;</div>
+    <div>{{count}}</div>
 </div>
\ No newline at end of file
diff --git a/src/app/chart/chart-item/chart-item.component.ts b/src/app/chart/chart-item/chart-item.component.ts
index 5c5aabc10..601ba8626 100644
--- a/src/app/chart/chart-item/chart-item.component.ts
+++ b/src/app/chart/chart-item/chart-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
   selector: 'app-chart-item',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./chart-item.component.scss']
 })
 export class ChartItemComponent implements OnInit {
-  state: string = "test"
+  @Input() state: string;
+  @Input() count: number;
   constructor() { }
 
   ngOnInit(): void {
diff --git a/src/app/chart/folder-chart/folder-chart.component.html b/src/app/chart/folder-chart/folder-chart.component.html
index 967d8de06..286280c98 100644
--- a/src/app/chart/folder-chart/folder-chart.component.html
+++ b/src/app/chart/folder-chart/folder-chart.component.html
@@ -3,10 +3,9 @@
     <mat-card-content>
         <div fxLayout="row" fxLayoutAlign="space-between start">
             <app-donut-chart [elementID]="chartID"></app-donut-chart>
-            <div fxLayout="column" fxLayoutAlign="space-evenly end">
-                <app-chart-item></app-chart-item>
-                <app-chart-item></app-chart-item>
-                <app-chart-item></app-chart-item>
+            <div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
+                <app-chart-item *ngFor="let state of states | keyvalue" [state]="state.key" [count]="state.value">
+                </app-chart-item>
             </div>
         </div>
     </mat-card-content>
diff --git a/src/app/chart/folder-chart/folder-chart.component.ts b/src/app/chart/folder-chart/folder-chart.component.ts
index f77006ec6..3b3689d0c 100644
--- a/src/app/chart/folder-chart/folder-chart.component.ts
+++ b/src/app/chart/folder-chart/folder-chart.component.ts
@@ -12,9 +12,12 @@ import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 export class FolderChartComponent implements OnInit {
   @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
   chartID: string = 'foldersChart';
+  states: Map<string, number>;
   elevation: string = cardElevation;
 
-  constructor(private folderService: FolderService) { }
+  constructor(private folderService: FolderService) {
+    this.states = new Map();
+  }
 
   ngOnInit(): void {
     for (let state in Folder.StateType) {
@@ -32,7 +35,13 @@ export class FolderChartComponent implements OnInit {
         // Get StateType and convert to string 
         const stateType: Folder.StateType = Folder.getStateType(folder);
         const state: string = Folder.stateTypeToString(stateType);
-        console.log("folder state?", state, folder);
+
+        // Instantiate empty count states
+        if (!this.states.has(state)) {
+          this.states.set(state, 0);
+        }
+        const count: number = this.states.get(state) + 1;
+        this.states.set(state, count);
       }
     );