diff --git a/src/app/chart/device-chart/device-chart.component.html b/src/app/chart/device-chart/device-chart.component.html
index d66130b49..01a9f9823 100644
--- a/src/app/chart/device-chart/device-chart.component.html
+++ b/src/app/chart/device-chart/device-chart.component.html
@@ -1 +1,7 @@
-<p>device-chart works!</p>
+<mat-card class="{{elevation}}">
+    <mat-card-title>Devices</mat-card-title>
+    <mat-card-content>
+        <app-donut-chart [elementID]=" chartID">
+        </app-donut-chart>
+    </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/chart/device-chart/device-chart.component.ts b/src/app/chart/device-chart/device-chart.component.ts
index d58849e79..5354dc3e3 100644
--- a/src/app/chart/device-chart/device-chart.component.ts
+++ b/src/app/chart/device-chart/device-chart.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { cardElevation } from '../../style';
 
 @Component({
   selector: 'app-device-chart',
@@ -6,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./device-chart.component.scss']
 })
 export class DeviceChartComponent implements OnInit {
+  chartID: string = 'devicesChart';
+  elevation: string = cardElevation;
 
   constructor() { }
 
diff --git a/src/app/chart/folder-chart/folder-chart.component.html b/src/app/chart/folder-chart/folder-chart.component.html
index f193f5720..a589a32aa 100644
--- a/src/app/chart/folder-chart/folder-chart.component.html
+++ b/src/app/chart/folder-chart/folder-chart.component.html
@@ -1 +1,6 @@
-<p>folder-chart works!</p>
+<mat-card class="{{elevation}}">
+    <mat-card-title>Folders</mat-card-title>
+    <mat-card-content>
+        <app-donut-chart [elementID]="chartID"></app-donut-chart>
+    </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/chart/folder-chart/folder-chart.component.ts b/src/app/chart/folder-chart/folder-chart.component.ts
index ab43ff1f0..11bd0beb6 100644
--- a/src/app/chart/folder-chart/folder-chart.component.ts
+++ b/src/app/chart/folder-chart/folder-chart.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { SystemConfigService } from 'src/app/system-config.service';
+import { cardElevation } from '../../style'
 
 @Component({
   selector: 'app-folder-chart',
@@ -6,10 +8,17 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./folder-chart.component.scss']
 })
 export class FolderChartComponent implements OnInit {
+  chartID: string = 'foldersChart';
+  elevation: string = cardElevation;
 
-  constructor() { }
+  constructor(private systemConfigService: SystemConfigService) { }
 
   ngOnInit(): void {
+    this.systemConfigService.getFolders().subscribe(
+      data => {
+        console.log("char folder data", data)
+      }
+    );
   }
 
 }
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index f5fbdf2ee..9b5a4a951 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -4,20 +4,10 @@
     <h1>Tech UI</h1>
   </div>
   <div gdArea="folders">
-    <mat-card>
-      <mat-card-title>Folders</mat-card-title>
-      <mat-card-content>
-        <app-donut-chart [elementID]="foldersChart"></app-donut-chart>
-      </mat-card-content>
-    </mat-card>
+    <app-folder-chart></app-folder-chart>
   </div>
   <div gdArea="devices">
-    <mat-card>
-      <mat-card-title>Devices</mat-card-title>
-      <mat-card-content>
-        <app-donut-chart [elementID]="devicesChart"></app-donut-chart>
-      </mat-card-content>
-    </mat-card>
+    <app-device-chart></app-device-chart>
   </div>
   <app-status-list gdArea="status-list"></app-status-list>
   <div gdArea="footer">
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index b0b544e68..9f03e0bf4 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -7,8 +7,7 @@ import { SystemConfigService } from '../system-config.service';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent {
-  foldersChart = 'foldersChart';
-  devicesChart = 'devicesChart';
+
 
   constructor(private systemConfigService: SystemConfigService) { }
 
diff --git a/src/app/list/device-list/device-list.component.html b/src/app/list/device-list/device-list.component.html
index 1cdaa5a28..495143a32 100644
--- a/src/app/list/device-list/device-list.component.html
+++ b/src/app/list/device-list/device-list.component.html
@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="{{elevation}}">
   <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
     <ng-container matColumnDef="id">
diff --git a/src/app/list/device-list/device-list.component.ts b/src/app/list/device-list/device-list.component.ts
index 8ee6edddd..77bfa4c43 100644
--- a/src/app/list/device-list/device-list.component.ts
+++ b/src/app/list/device-list/device-list.component.ts
@@ -6,6 +6,7 @@ import { MatTable } from '@angular/material/table';
 import { DeviceListDataSource } from './device-list-datasource';
 import { Device } from '../../device';
 import { SystemConfigService } from '../../system-config.service';
+import { cardElevation } from '../../style';
 
 
 @Component({
@@ -18,6 +19,7 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Device>;
   dataSource: DeviceListDataSource;
+  elevation: string = cardElevation;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'name'];
diff --git a/src/app/list/folder-list/folder-list.component.html b/src/app/list/folder-list/folder-list.component.html
index 167df11f1..90f3840a3 100644
--- a/src/app/list/folder-list/folder-list.component.html
+++ b/src/app/list/folder-list/folder-list.component.html
@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="{{elevation}}">
   <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
     <ng-container matColumnDef="id">
diff --git a/src/app/list/folder-list/folder-list.component.ts b/src/app/list/folder-list/folder-list.component.ts
index f0b446e20..1daeb4666 100644
--- a/src/app/list/folder-list/folder-list.component.ts
+++ b/src/app/list/folder-list/folder-list.component.ts
@@ -6,7 +6,7 @@ import { MatTable } from '@angular/material/table';
 import { FolderListDataSource } from './folder-list-datasource';
 import { Folder } from '../../folder';
 import { SystemConfigService } from '../../system-config.service';
-
+import { cardElevation } from '../../style';
 
 @Component({
   selector: 'app-folder-list',
@@ -18,6 +18,7 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Folder>;
   dataSource: FolderListDataSource;
+  elevation: string = cardElevation;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'label'];
diff --git a/src/app/style.ts b/src/app/style.ts
new file mode 100644
index 000000000..1bf2f3660
--- /dev/null
+++ b/src/app/style.ts
@@ -0,0 +1,2 @@
+// material design elevation for all dashboard components
+export const cardElevation: string = "mat-elevation-z2";
\ No newline at end of file