diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index 2a807659..e4a29877 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -2,13 +2,13 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 
 import {PopularApp} from './popularApp';
 import {PieChart} from './pieChart';
+import {TrafficChart} from './trafficChart';
 import {BaCard} from '../../theme/components';
 
-
 @Component({
   selector: 'dashboard',
   pipes: [],
-  directives: [PopularApp, PieChart, BaCard],
+  directives: [PopularApp, PieChart, TrafficChart, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')
diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
index 30f4982d..e1660cfd 100644
--- a/src/app/pages/dashboard/dashboard.html
+++ b/src/app/pages/dashboard/dashboard.html
@@ -1,9 +1,16 @@
 <div class="row">
-  <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
+  <div class="col-xlg-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">
+  <traffic-chart></traffic-chart>
+</ba-card>
+</div>
+
 <div class="row">
     <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <div class="row">
diff --git a/src/app/pages/dashboard/trafficChart/index.ts b/src/app/pages/dashboard/trafficChart/index.ts
new file mode 100644
index 00000000..b791a763
--- /dev/null
+++ b/src/app/pages/dashboard/trafficChart/index.ts
@@ -0,0 +1 @@
+export * from './trafficChart.component';
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
new file mode 100644
index 00000000..01bf67bb
--- /dev/null
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
@@ -0,0 +1,70 @@
+import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
+import {layoutColors} from "../../../theme";
+import {DOM} from "angular2/src/platform/dom/dom_adapter";
+
+@Component({
+  selector: 'traffic-chart',
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('./trafficChart.scss')],
+  template: require('./trafficChart.html')
+})
+export class TrafficChart {
+
+  palette = layoutColors.bgColorPalette;
+  doughnutData = [
+    {
+      value: 2000,
+      color: this.palette.white,
+      highlight: this.palette.whiteDark,
+      label: 'Ad Campaigns',
+      percentage: 87,
+      order: 0,
+    },
+    {
+      value: 400,
+      color: this.palette.gossip,
+      highlight: this.palette.gossipDark,
+      label: 'Other',
+      percentage: 17,
+      order: 1,
+    },
+    {
+      value: 1200,
+      color: this.palette.silverTree,
+      highlight: this.palette.silverTreeDark,
+      label: 'Direct Traffic',
+      percentage: 38,
+      order: 2,
+    },
+    {
+      value: 1000,
+      color: this.palette.surfieGreen,
+      highlight: this.palette.surfieGreenDark,
+      label: 'Referral Traffic',
+      percentage: 70,
+      order: 3,
+    },
+    {
+      value: 1500,
+      color: this.palette.blueStone,
+      highlight: this.palette.blueStoneDark,
+      label: 'Search engines',
+      percentage: 22,
+      order: 4,
+    }
+  ];
+
+
+  constructor(private _elementRef:ElementRef) {
+  }
+
+  ngAfterViewInit() {
+    let el = DOM.querySelector(this._elementRef.nativeElement, '.chart-area');
+    new Chart(el.getContext('2d')).Doughnut(this.doughnutData, {
+      segmentShowStroke: false,
+      percentageInnerCutout : 64,
+      responsive: true
+    });
+  }
+
+}
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html
new file mode 100644
index 00000000..64a88001
--- /dev/null
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.html
@@ -0,0 +1,29 @@
+<div class="channels-block">
+
+  <div class="chart-bg"></div>
+  <div class="traffic-chart" id="trafficChart">
+    <div class="canvas-holder">
+      <canvas class="chart-area" width="300px" height="300px"></canvas>
+      <div class="traffic-text">
+        1,900,128
+        <span>Views Total</span>
+      </div>
+    </div>
+    <div class="traffic-legend"></div>
+  </div>
+
+  <div class="channels-info">
+    <div>
+      <div class="channels-info-item" *ngFor="#item of doughnutData">
+        <div class="legend-color" style="background-color: {{ item.color }}"></div>
+        <p>{{ item.label }}<span class="channel-number">+{{ item.percentage }}%</span></p>
+        <div class="progress progress-sm channel-progress">
+          <div class="progress-bar" role="progressbar"
+               [attr.aria-valuenow]="item.percentage" aria-valuemin="0" aria-valuemax="100" style="width: {{ item.percentage }}%">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.scss b/src/app/pages/dashboard/trafficChart/trafficChart.scss
new file mode 100644
index 00000000..66b0a877
--- /dev/null
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.scss
@@ -0,0 +1,209 @@
+@import '../../../theme/sass/conf/conf';
+
+.chart-area {
+  width: 300px;
+  height: 300px;
+}
+
+.channels-block {
+  width: 100%;
+  position: relative;
+}
+
+.channels-info {
+  display: inline-block;
+  width: calc(100% - 400px);
+  margin-left: 70px;
+  margin-top: -20px;
+}
+.small-container {
+  .channels-info {
+    display: none;
+  }
+}
+
+.channels-info-item {
+  p {
+    margin-bottom: 9px;
+    font-size: 18px;
+    opacity: 0.9;
+  }
+  .channel-number{
+    display: inline-block;
+    float: right;
+  }
+}
+
+.traffic-chart {
+  width: 300px;
+  position: relative;
+  min-height: 300px;
+  float: left;
+}
+
+.traffic-legend {
+  display: inline-block;
+  padding: 70px 0 0 0px;
+  width: 160px;
+}
+
+.traffic-legend ul.doughnut-legend {
+  li {
+    list-style: none;
+    font-size: 12px;
+    margin-bottom: 12px;
+    line-height: 16px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 120px;
+    span {
+      float: left;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
+    }
+  }
+}
+
+.canvas-holder {
+  display: inline-block;
+  width: 300px;
+  height: 300px;
+  position: relative;
+  float: left;
+  //canvas{
+  //  border: 10px solid rgba(0, 0, 0, 0.34902);
+  //  border-radius: 180px;
+  //}
+}
+
+.traffic-text {
+  width: 100%;
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: -24px;
+  line-height: 24px;
+  text-align: center;
+  font-size: 18px;
+  //color: $danger;
+  span {
+    display: block;
+    font-size: 18px;
+    color: $default-text;
+  }
+}
+
+.channel-change {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.channel-progress {
+  height: 4px;
+  border-radius: 0;
+  width: 100%;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.25);
+  .progress-bar{
+    height: 4px;
+    background-color: white;
+  }
+}
+
+.legend-color{
+  width: 30px;
+  height: 30px;
+  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);
+  border-radius: 150px;
+}
+
+.chart-bg{
+  background-color: $view-total;
+  position: absolute;
+  border-radius: 100px;
+  width: 180px;
+  height: 180px;
+  left: 60px;
+  top: 60px;
+}
+
+@media (max-width: $resM) {
+  div.channels-info{
+    display: block;
+    width: calc(100% - 88px);
+    margin-top: -65px;
+    margin-bottom: 10px;
+  }
+  .panel.medium-panel.traffic-panel{
+    height: auto;
+  }
+  .traffic-chart{
+    position: inherit;
+    float: none;
+    margin: 0 auto;
+  }
+  .chart-bg{
+    left: calc(50% - 90px);
+  }
+}
+
+@media (max-width: 1465px) and (min-width: 1199px){
+  .channels-info{
+    display: none;
+  }
+  .traffic-chart{
+    position: inherit;
+    float: none;
+    margin: 0 auto;
+  }
+  .chart-bg{
+    left: calc(50% - 90px);
+  }
+}
+
+
+@media (max-width: 380px){
+
+  .traffic-chart{
+    width: 240px;
+  }
+
+  .canvas-holder{
+    width: 240px;
+    height: 240px;
+  }
+
+  .chart-bg {
+    top: 30px;
+  }
+}
+@media (max-width: 320px){
+  .chart-bg {
+    left: 50px;
+    top: 50px;
+    width: 142px;
+    height: 142px;
+  }
+}
+
+
+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;
+  }
+}