diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
index e1660cfd..448cff93 100644
--- a/src/app/pages/dashboard/dashboard.html
+++ b/src/app/pages/dashboard/dashboard.html
@@ -1,12 +1,12 @@
 <div class="row">
-  <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12">
+  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
     <pie-chart></pie-chart>
   </div>
 </div>
 
 <div class="row">
-  <ba-card class="col-lg-6 col-md-12 col-sm-12"
-                     title="Acquisition Channels" baCardClass="popular-app medium-card">
+  <ba-card class="col-xl-6 col-lg-12 col-md-12 col-sm-12"
+                     title="Acquisition Channels" baCardClass="traffic-panel medium-card">
   <traffic-chart></traffic-chart>
 </ba-card>
 </div>
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.scss b/src/app/pages/dashboard/trafficChart/trafficChart.scss
index 66b0a877..b84c796e 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.scss
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.scss
@@ -12,10 +12,11 @@
 
 .channels-info {
   display: inline-block;
-  width: calc(100% - 400px);
+  width: calc(100% - 370px);
   margin-left: 70px;
   margin-top: -20px;
 }
+
 .small-container {
   .channels-info {
     display: none;
@@ -28,7 +29,7 @@
     font-size: 18px;
     opacity: 0.9;
   }
-  .channel-number{
+  .channel-number {
     display: inline-block;
     float: right;
   }
@@ -109,28 +110,28 @@
   width: 100%;
   margin-bottom: 0;
   background-color: rgba(0, 0, 0, 0.25);
-  .progress-bar{
+  .progress-bar {
     height: 4px;
     background-color: white;
   }
 }
 
-.legend-color{
+.legend-color {
   width: 30px;
   height: 30px;
-  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
   position: relative;
   top: 27px;
   border-radius: 15px;
   left: -45px;
 }
 
-.traffic-chart canvas{
-  border: 10px solid rgba(0,0,0,0.0);
+.traffic-chart canvas {
+  border: 10px solid rgba(0, 0, 0, 0.0);
   border-radius: 150px;
 }
 
-.chart-bg{
+.chart-bg {
   background-color: $view-total;
   position: absolute;
   border-radius: 100px;
@@ -141,47 +142,46 @@
 }
 
 @media (max-width: $resM) {
-  div.channels-info{
+  div.channels-info {
     display: block;
     width: calc(100% - 88px);
     margin-top: -65px;
     margin-bottom: 10px;
   }
-  .panel.medium-panel.traffic-panel{
+  .card.medium-card.traffic-panel {
     height: auto;
   }
-  .traffic-chart{
+  .traffic-chart {
     position: inherit;
     float: none;
     margin: 0 auto;
   }
-  .chart-bg{
+  .chart-bg {
     left: calc(50% - 90px);
   }
 }
 
-@media (max-width: 1465px) and (min-width: 1199px){
-  .channels-info{
+@media (max-width: 1465px) and (min-width: 1199px) {
+  .channels-info {
     display: none;
   }
-  .traffic-chart{
+  .traffic-chart {
     position: inherit;
     float: none;
     margin: 0 auto;
   }
-  .chart-bg{
+  .chart-bg {
     left: calc(50% - 90px);
   }
 }
 
+@media (max-width: 380px) {
 
-@media (max-width: 380px){
-
-  .traffic-chart{
+  .traffic-chart {
     width: 240px;
   }
 
-  .canvas-holder{
+  .canvas-holder {
     width: 240px;
     height: 240px;
   }
@@ -190,7 +190,8 @@
     top: 30px;
   }
 }
-@media (max-width: 320px){
+
+@media (max-width: 320px) {
   .chart-bg {
     left: 50px;
     top: 50px;
@@ -199,10 +200,9 @@
   }
 }
 
-
-body.badmin-transparent{
-  .traffic-chart canvas{
-    border: 10px solid rgba(0,0,0,0.35);
+body.badmin-transparent {
+  .traffic-chart canvas {
+    border: 10px solid rgba(0, 0, 0, 0.35);
     box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
     border-radius: 150px;
   }