diff --git a/src/app/pages/dashboard/pieChart/pieChart.html b/src/app/pages/dashboard/pieChart/pieChart.html
index ae8ac3a9..d11485f4 100644
--- a/src/app/pages/dashboard/pieChart/pieChart.html
+++ b/src/app/pages/dashboard/pieChart/pieChart.html
@@ -1,6 +1,6 @@
 <div class="row pie-charts">
 
-  <ba-card *ngFor="#chart of charts" class="pie-chart-item-container col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
+  <ba-card *ngFor="#chart of charts" class="pie-chart-item-container col-xlg-3 col-lg-3 col-md-6 col-sm-12 col-xs-12">
 
     <div class="pie-chart-item">
       <div class="chart" [attr.data-rel]="chart.color" data-percent="60">
diff --git a/src/app/pages/dashboard/pieChart/pieChart.scss b/src/app/pages/dashboard/pieChart/pieChart.scss
index dd58af99..e44dfe8c 100644
--- a/src/app/pages/dashboard/pieChart/pieChart.scss
+++ b/src/app/pages/dashboard/pieChart/pieChart.scss
@@ -14,6 +14,25 @@
     }
   }
 
+  @media screen and (min-width: 1325px) {
+    .pie-chart-item-container {
+      width: 25%;
+      flex: 0 0 25%
+    }
+  }
+  @media screen and (min-width: 700px) and (max-width: 1325px)  {
+    .pie-chart-item-container {
+      width: 50%;
+      flex: 0 0 50%
+    }
+  }
+  @media screen and (max-width: 700px)  {
+    .pie-chart-item-container {
+      width: 100%;
+      flex: 0 0 100%
+    }
+  }
+
   .pie-chart-item {
     position: relative;
     .chart-icon {