diff --git a/src/app/charts/device-chart/device-chart.component.html b/src/app/charts/device-chart/device-chart.component.html
index dea3ad5f2..4f8165b37 100644
--- a/src/app/charts/device-chart/device-chart.component.html
+++ b/src/app/charts/device-chart/device-chart.component.html
@@ -1,6 +1,6 @@
-<mat-card class="{{elevation}}">
-    <mat-card-title>Devices</mat-card-title>
-    <mat-card-content>
+<div class="{{elevation}} tui-card">
+    <div class="tui-card-title">Devices</div>
+    <div class="tui-card-content">
         <div fxLayout="row" fxLayoutAlign="space-between start">
             <app-donut-chart [elementID]="chartID"></app-donut-chart>
             <div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
@@ -8,5 +8,5 @@
                 </app-chart-item>
             </div>
         </div>
-    </mat-card-content>
-</mat-card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/charts/folder-chart/folder-chart.component.html b/src/app/charts/folder-chart/folder-chart.component.html
index dd0c0dcd7..afbf6959e 100644
--- a/src/app/charts/folder-chart/folder-chart.component.html
+++ b/src/app/charts/folder-chart/folder-chart.component.html
@@ -1,6 +1,6 @@
-<mat-card class="{{elevation}}">
-    <mat-card-title>Folders</mat-card-title>
-    <mat-card-content>
+<div class="{{elevation}} tui-card">
+    <div class="tui-card-title">Folders</div>
+    <div class="tui-card-content">
         <div fxLayout="row" fxLayoutAlign="space-between start">
             <app-donut-chart [elementID]="chartID"></app-donut-chart>
             <div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
@@ -8,5 +8,5 @@
                 </app-chart-item>
             </div>
         </div>
-    </mat-card-content>
-</mat-card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/lists/status-list/status-list.component.html b/src/app/lists/status-list/status-list.component.html
index 0ac37624e..35a3a0d8e 100644
--- a/src/app/lists/status-list/status-list.component.html
+++ b/src/app/lists/status-list/status-list.component.html
@@ -1,10 +1,10 @@
-<mat-card class="{{elevation}}">
+<div class="{{elevation}} tui-card">
     <div fxLayout="row" fxLayoutAlign="space-between start">
-        <mat-card-title>Status</mat-card-title>
-        <app-list-toggle (listTypeEvent)="onToggle($event)"></app-list-toggle>
+        <div class="tui-card-title">Status</div>
+        <app-list-toggle (listTypeEvent)="onToggle($event)" class="tui-card-content"></app-list-toggle>
     </div>
-    <mat-card-content>
+    <div class="tui-card-content">
         <app-folder-list *ngIf="currentListType===listType.Folders"></app-folder-list>
         <app-device-list *ngIf="currentListType===listType.Devices"></app-device-list>
-    </mat-card-content>
-</mat-card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index ac9d610ad..8ab16a842 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -78,6 +78,18 @@ html, body {
     font-family: mat-font-family($tech-ui-typography);
     line-height: mat-line-height($tech-ui-typography, body-1);
 }
-.mat-card-title {
+
+.tui-card {
+    background-color: white;
+    border-radius: 4px;
+    height: 100%;
+}
+
+.tui-card-title {
+    padding: 16px 16px 0 16px;
     font-size: mat-font-size($tech-ui-typography, subheading-2)
+}
+
+.tui-card-content {
+    padding: 16px;
 }
\ No newline at end of file