diff --git a/src/app/charts/device-chart/device-chart.component.html b/src/app/charts/device-chart/device-chart.component.html
index 4f8165b37..8f74dd7e9 100644
--- a/src/app/charts/device-chart/device-chart.component.html
+++ b/src/app/charts/device-chart/device-chart.component.html
@@ -1,9 +1,9 @@
 <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">
+        <div fxLayout="row" fxLayoutAlign="space-between stretch">
+            <app-donut-chart [elementID]="chartID" fxFlex="30"></app-donut-chart>
+            <div class="items" fxLayout="column" fxLayoutAlign="start none" fxFlex="70">
                 <app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
                 </app-chart-item>
             </div>
diff --git a/src/app/charts/donut-chart/donut-chart.component.html b/src/app/charts/donut-chart/donut-chart.component.html
index 9decab29d..88e37515c 100644
--- a/src/app/charts/donut-chart/donut-chart.component.html
+++ b/src/app/charts/donut-chart/donut-chart.component.html
@@ -1,4 +1,4 @@
-<div class="chart-container">
-    <canvas id={{elementID}} width="100%" height="100%"></canvas>
+<div class="chart-container" fxLayout="column" fxLayoutAlign="space-around">
+    <canvas id={{elementID}} width="100px" height="100px"></canvas>
     <div class="center">{{count}}</div>
 </div>
\ No newline at end of file
diff --git a/src/app/charts/donut-chart/donut-chart.component.scss b/src/app/charts/donut-chart/donut-chart.component.scss
index 74bdf8cde..30348140f 100644
--- a/src/app/charts/donut-chart/donut-chart.component.scss
+++ b/src/app/charts/donut-chart/donut-chart.component.scss
@@ -1,6 +1,8 @@
 .chart-container {
     position: relative;
-  }
+    width: 100%;
+    height: 100%;
+ }
 
 .center {
     position: absolute;
@@ -8,5 +10,5 @@
     top: 40%;
     width: 100%;
     text-align: center;
-    font-size: 18px;
+    font-size:1.8rem;
 }
\ No newline at end of file
diff --git a/src/app/charts/donut-chart/donut-chart.component.ts b/src/app/charts/donut-chart/donut-chart.component.ts
index 8755bf1d4..4d7268feb 100644
--- a/src/app/charts/donut-chart/donut-chart.component.ts
+++ b/src/app/charts/donut-chart/donut-chart.component.ts
@@ -49,8 +49,8 @@ export class DonutChartComponent {
         }]
       },
       options: {
-        cutoutPercentage: 70,
-        responsive: false,
+        cutoutPercentage: 75,
+        responsive: true,
         legend: {
           display: false
         },
@@ -62,4 +62,4 @@ export class DonutChartComponent {
       }
     });
   }
-}
+}
\ 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 afbf6959e..3e0f7170f 100644
--- a/src/app/charts/folder-chart/folder-chart.component.html
+++ b/src/app/charts/folder-chart/folder-chart.component.html
@@ -1,9 +1,9 @@
 <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">
+        <div fxLayout="row" fxLayoutAlign="space-between stretch">
+            <app-donut-chart [elementID]="chartID" fxFlex="30"></app-donut-chart>
+            <div class="items" fxLayout="column" fxLayoutAlign="start none" fxFlex="70">
                 <app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
                 </app-chart-item>
             </div>