diff --git a/src/components/Charts/BarChart.js b/src/components/Charts/BarChart.js
index a7851df..62e0c6d 100644
--- a/src/components/Charts/BarChart.js
+++ b/src/components/Charts/BarChart.js
@@ -1,57 +1,57 @@
-import { Bar } from 'vue-chartjs';
+import { Bar, mixins } from 'vue-chartjs';
 
 export default {
   name: 'bar-chart',
   extends: Bar,
+  mixins: [mixins.reactiveProp],
   props: {
-    labels: Array,
-    datasets: Array,
-    data: [Array, Object],
-    color: {
-      type: String,
-      default: ''
-    },
     extraOptions: Object,
-    title: {
-      type: String,
-      default: ''
-    },
     gradientColors: {
       type: Array,
-      deafault: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+      default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
       validator: val =>{
         return val.length > 2;
       }
     },
+    gradientStops: {
+      type: Array,
+      default: () => [1, 0.4, 0],
+      validator: val =>{
+        return val.length > 2;
+      }
+    }
+  },
+  methods: {
+    updateGradients() {
+      const ctx = document.getElementById(this.chartId).getContext('2d');
+      const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+
+      gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
+      gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
+      gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
+      if(this.chartData){
+        this.chartData.datasets.forEach(set => {
+          set.backgroundColor = gradientStroke;
+        });
+      }
+    }
   },
   mounted() {
-    let fallBackColor = '#d048b6';
-    let color = this.color || fallBackColor;
-    const ctx = document.getElementById(this.chartId).getContext('2d');
-    const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke.addColorStop(1, this.gradientColors[0]);
-    gradientStroke.addColorStop(0.2, this.gradientColors[1]);
-    gradientStroke.addColorStop(0, this.gradientColors[2]); //purple colors
-
+    this.updateGradients();
     this.renderChart(
-      {
-        labels: this.labels || [],
-        datasets: this.datasets
-          ? this.datasets
-          : [{
-              label: this.title || '',
-              fill: true,
-              backgroundColor: gradientStroke,
-              hoverBackgroundColor: gradientStroke,
-              borderColor: color,
-              borderWidth: 2,
-              borderDash: [],
-              borderDashOffset: 0.0,
-              data: this.data || []
-            }]
-      },
+      this.chartData,
       this.extraOptions
     );
+  },
+  watch: {
+    chartData(newVal, oldVal) {
+      this.updateGradients();
+      if(oldVal === null) {
+        this.renderChart(
+          this.chartData,
+          this.extraOptions
+        );
+      }
+    }
   }
 };
diff --git a/src/components/Charts/LineChart.js b/src/components/Charts/LineChart.js
index 90d89f3..04761f6 100644
--- a/src/components/Charts/LineChart.js
+++ b/src/components/Charts/LineChart.js
@@ -1,65 +1,57 @@
-import { Line } from 'vue-chartjs';
+import { Line, mixins } from 'vue-chartjs';
 
 export default {
   name: 'line-chart',
   extends: Line,
+  mixins: [mixins.reactiveProp],
   props: {
-    labels: Array,
-    datasets: Array,
-    data: [Array, Object],
-    color: {
-      type: String,
-      default: ''
-    },
     extraOptions: Object,
-    title: {
-      type: String,
-      default: ''
-    },
     gradientColors: {
       type: Array,
-      deafault: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+      default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
       validator: val =>{
         return val.length > 2;
       }
     },
+    gradientStops: {
+      type: Array,
+      default: () => [1, 0.4, 0],
+      validator: val =>{
+        return val.length > 2;
+      }
+    }
+  },
+  methods: {
+    updateGradients() {
+      const ctx = document.getElementById(this.chartId).getContext('2d');
+      const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+
+      gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
+      gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
+      gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
+      if(this.chartData){
+        this.chartData.datasets.forEach(set => {
+          set.backgroundColor = gradientStroke;
+        });
+      }
+    }
   },
   mounted() {
-    let fallBackColor = '#d048b6';
-    let color = this.color || fallBackColor;
-    const ctx = document.getElementById(this.chartId).getContext('2d');
-    const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke.addColorStop(1, this.gradientColors[0]);
-    gradientStroke.addColorStop(0.2, this.gradientColors[1]);
-    gradientStroke.addColorStop(0, this.gradientColors[2]); //purple colors
-
+    this.updateGradients();
     this.renderChart(
-      {
-        labels: this.labels || [],
-        datasets: this.datasets
-          ? this.datasets
-          : [
-              {
-                label: this.title || '',
-                fill: true,
-                backgroundColor: gradientStroke,
-                borderColor: color,
-                borderWidth: 2,
-                borderDash: [],
-                borderDashOffset: 0.0,
-                pointBackgroundColor: color,
-                pointBorderColor: 'rgba(255,255,255,0)',
-                pointHoverBackgroundColor: color,
-                pointBorderWidth: 20,
-                pointHoverRadius: 4,
-                pointHoverBorderWidth: 15,
-                pointRadius: 4,
-                data: this.data || []
-              }
-            ]
-      },
+      this.chartData,
       this.extraOptions
     );
+  },
+  watch: {
+    chartData(newVal, oldVal) {
+      this.updateGradients();
+      if(oldVal === null) {
+        this.renderChart(
+          this.chartData,
+          this.extraOptions
+        );
+      }
+    }
   }
 };
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 0dd34c2..7ed858c 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -1,10 +1,499 @@
 <template>
   <div>
-    Dashboard page
+
+    <div class="row">
+      <div class="col-12">
+        <card type="chart">
+          <template slot="header">
+            <div class="row">
+              <div class="col-sm-6 text-left">
+                <h5 class="card-category">Total Shipments</h5>
+                <h2 class="card-title">Performance</h2>
+              </div>
+              <div class="col-sm-6">
+                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
+                  <label v-for="(option, index) in bigLineChart.categories"
+                         :key="option"
+                         class="btn btn-sm btn-primary btn-simple"
+                         :class="{active: bigLineChart.activeIndex === index}"
+                         :id="index">
+                    <input type="radio"
+                           @click="initBigChart(index)"
+                           name="options" autocomplete="off"
+                           :checked="bigLineChart.activeIndex === index">
+                    {{option}}
+                  </label>
+                </div>
+              </div>
+            </div>
+          </template>
+          <div class="chart-area">
+            <line-chart style="height: 100%"
+                        :chart-data="bigLineChart.chartData"
+                        :gradient-color="bigLineChart.gradientColors"
+                        :gradient-stops="bigLineChart.gradientStops"
+                        :extra-options="bigLineChart.extraOptions">
+            </line-chart>
+          </div>
+        </card>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-4">
+        <card type="chart">
+          <template slot="header">
+            <h5 class="card-category">Total Shipments</h5>
+            <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary "></i> 763,215</h3>
+          </template>
+          <div class="chart-area">
+            <line-chart style="height: 100%"
+                        :chart-data="purpleLineChart.chartData"
+                        :gradient-color="purpleLineChart.gradientColors"
+                        :gradient-stops="purpleLineChart.gradientStops"
+                        :extra-options="purpleLineChart.extraOptions">
+            </line-chart>
+          </div>
+        </card>
+      </div>
+      <div class="col-lg-4">
+        <card type="chart">
+          <template slot="header">
+            <h5 class="card-category">Daily Sales</h5>
+            <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
+          </template>
+          <div class="chart-area">
+            <bar-chart  style="height: 100%"
+                        :chart-data="blueBarChart.chartData"
+                        :gradient-color="blueBarChart.gradientColors"
+                        :gradient-stops="blueBarChart.gradientStops"
+                        :extra-options="blueBarChart.extraOptions">
+            </bar-chart>
+          </div>
+        </card>
+      </div>
+      <div class="col-lg-4">
+        <card type="chart">
+          <template slot="header">
+            <h5 class="card-category">Completed Tasks</h5>
+            <h3 class="card-title"><i class="tim-icons icon-send text-success "></i> 12,100K</h3>
+          </template>
+          <div class="chart-area">
+            <line-chart style="height: 100%"
+                        :chart-data="greenLineChart.chartData"
+                        :gradient-color="greenLineChart.gradientColors"
+                        :gradient-stops="greenLineChart.gradientStops"
+                        :extra-options="greenLineChart.extraOptions">
+            </line-chart>
+          </div>
+        </card>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-6 col-md-12">
+        <div class="card card-tasks">
+          <div class="card-header ">
+            <h6 class="title d-inline">Tasks(5)</h6>
+            <p class="card-category d-inline">today</p>
+            <div class="dropdown">
+              <button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
+                <i class="tim-icons icon-settings-gear-63"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+                <a class="dropdown-item" href="#pablo">Action</a>
+                <a class="dropdown-item" href="#pablo">Another action</a>
+                <a class="dropdown-item" href="#pablo">Something else</a>
+              </div>
+            </div>
+          </div>
+          <div class="card-body ">
+            <div class="table-full-width table-responsive">
+              <table class="table">
+                <tbody>
+                <tr>
+                  <td>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox" value="">
+                        <span class="form-check-sign">
+                                <span class="check"></span>
+                              </span>
+                      </label>
+                    </div>
+                  </td>
+                  <td>
+                    <p class="title">Update the Documentation</p>
+                    <p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
+                  </td>
+                  <td class="td-actions text-right">
+                    <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
+                      <i class="tim-icons icon-pencil"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox" value="" checked="">
+                        <span class="form-check-sign">
+                                <span class="check"></span>
+                              </span>
+                      </label>
+                    </div>
+                  </td>
+                  <td>
+                    <p class="title">GDPR Compliance</p>
+                    <p class="text-muted">The GDPR is a regulation that requires businesses to protect the personal data
+                      and privacy of Europe citizens for transactions that occur within EU member states.</p>
+                  </td>
+                  <td class="td-actions text-right">
+                    <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
+                      <i class="tim-icons icon-pencil"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox" value="">
+                        <span class="form-check-sign">
+                                <span class="check"></span>
+                              </span>
+                      </label>
+                    </div>
+                  </td>
+                  <td>
+                    <p class="title">Solve the issues</p>
+                    <p class="text-muted">Fifty percent of all respondents said they would be more likely to shop at a
+                      company </p>
+                  </td>
+                  <td class="td-actions text-right">
+                    <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
+                      <i class="tim-icons icon-pencil"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox" value="">
+                        <span class="form-check-sign">
+                                <span class="check"></span>
+                              </span>
+                      </label>
+                    </div>
+                  </td>
+                  <td>
+                    <p class="title">Release v2.0.0</p>
+                    <p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
+                  </td>
+                  <td class="td-actions text-right">
+                    <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
+                      <i class="tim-icons icon-pencil"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox" value="">
+                        <span class="form-check-sign">
+                                <span class="check"></span>
+                              </span>
+                      </label>
+                    </div>
+                  </td>
+                  <td>
+                    <p class="title">Export the processed files</p>
+                    <p class="text-muted">The report also shows that consumers will not easily forgive a company once a
+                      breach exposing their personal data occurs. </p>
+                  </td>
+                  <td class="td-actions text-right">
+                    <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
+                      <i class="tim-icons icon-pencil"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox" value="">
+                        <span class="form-check-sign">
+                                <span class="check"></span>
+                              </span>
+                      </label>
+                    </div>
+                  </td>
+                  <td>
+                    <p class="title">Arival at export process</p>
+                    <p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
+                  </td>
+                  <td class="td-actions text-right">
+                    <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
+                      <i class="tim-icons icon-pencil"></i>
+                    </button>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <div class="card ">
+          <div class="card-header">
+            <h4 class="card-title"> Simple Table</h4>
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table tablesorter " id="">
+                <thead class=" text-primary">
+                <th>
+                  Name
+                </th>
+                <th>
+                  Country
+                </th>
+                <th>
+                  City
+                </th>
+                <th class="text-center">
+                  Salary
+                </th>
+                </thead>
+                <tbody>
+                <tr>
+                  <td>
+                    Dakota Rice
+                  </td>
+                  <td>
+                    Niger
+                  </td>
+                  <td>
+                    Oud-Turnhout
+                  </td>
+                  <td class="text-center">
+                    $36,738
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Minerva Hooper
+                  </td>
+                  <td>
+                    Curaçao
+                  </td>
+                  <td>
+                    Sinaai-Waas
+                  </td>
+                  <td class="text-center">
+                    $23,789
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Sage Rodriguez
+                  </td>
+                  <td>
+                    Netherlands
+                  </td>
+                  <td>
+                    Baileux
+                  </td>
+                  <td class="text-center">
+                    $56,142
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Philip Chaney
+                  </td>
+                  <td>
+                    Korea, South
+                  </td>
+                  <td>
+                    Overland Park
+                  </td>
+                  <td class="text-center">
+                    $38,735
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Doris Greene
+                  </td>
+                  <td>
+                    Malawi
+                  </td>
+                  <td>
+                    Feldkirchen in Kärnten
+                  </td>
+                  <td class="text-center">
+                    $63,542
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Mason Porter
+                  </td>
+                  <td>
+                    Chile
+                  </td>
+                  <td>
+                    Gloucester
+                  </td>
+                  <td class="text-center">
+                    $78,615
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Jon Porter
+                  </td>
+                  <td>
+                    Portugal
+                  </td>
+                  <td>
+                    Gloucester
+                  </td>
+                  <td class="text-center">
+                    $98,615
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-export default {};
+  import LineChart from '@/components/Charts/LineChart';
+  import BarChart from '@/components/Charts/BarChart';
+  import * as chartConfigs from '@/components/Charts/config';
+
+  export default {
+    components: {
+      LineChart,
+      BarChart
+    },
+    data() {
+      return {
+        bigLineChart: {
+          allData: [
+            [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],
+            [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120],
+            [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130]
+          ],
+          activeIndex: 0,
+          chartData: null,
+          extraOptions: chartConfigs.purpleChartOptions,
+          gradientColors: ['rgba(72,72,176,0.1)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+          gradientStops: [1, 0.4, 0],
+          categories: ['Accounts', 'Purchases', 'Sessions']
+        },
+        purpleLineChart: {
+          extraOptions: chartConfigs.purpleChartOptions,
+          chartData: {
+            labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+            datasets: [{
+              label: "Data",
+              fill: true,
+              borderColor: '#d048b6',
+              borderWidth: 2,
+              borderDash: [],
+              borderDashOffset: 0.0,
+              pointBackgroundColor: '#d048b6',
+              pointBorderColor: 'rgba(255,255,255,0)',
+              pointHoverBackgroundColor: '#d048b6',
+              pointBorderWidth: 20,
+              pointHoverRadius: 4,
+              pointHoverBorderWidth: 15,
+              pointRadius: 4,
+              data: [80, 100, 70, 80, 120, 80],
+            }]
+          },
+          gradientColors: ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+          gradientStops: [1, 0.2, 0],
+        },
+        greenLineChart: {
+          extraOptions: chartConfigs.greenChartOptions,
+          chartData: {
+            labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
+            datasets: [{
+              label: "My First dataset",
+              fill: true,
+              borderColor: '#00d6b4',
+              borderWidth: 2,
+              borderDash: [],
+              borderDashOffset: 0.0,
+              pointBackgroundColor: '#00d6b4',
+              pointBorderColor: 'rgba(255,255,255,0)',
+              pointHoverBackgroundColor: '#00d6b4',
+              pointBorderWidth: 20,
+              pointHoverRadius: 4,
+              pointHoverBorderWidth: 15,
+              pointRadius: 4,
+              data: [90, 27, 60, 12, 80],
+            }]
+          },
+          gradientColors: ['rgba(66,134,121,0.15)', 'rgba(66,134,121,0.0)', 'rgba(66,134,121,0)'],
+          gradientStops: [1, 0.4, 0],
+        },
+        blueBarChart: {
+          extraOptions: chartConfigs.barChartOptions,
+          chartData: {
+            labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
+            datasets: [{
+              label: "Countries",
+              fill: true,
+              borderColor: '#1f8ef1',
+              borderWidth: 2,
+              borderDash: [],
+              borderDashOffset: 0.0,
+              data: [53, 20, 10, 80, 100, 45],
+            }]
+          },
+          gradientColors: ['rgba(29,140,248,0.2)', 'rgba(29,140,248,0.0)', 'rgba(29,140,248,0)'],
+          gradientStops: [1, 0.4, 0],
+        }
+      }
+    },
+    methods: {
+      initBigChart(index) {
+        this.bigLineChart.chartData = {
+          datasets: [{
+            label: "My First dataset",
+            fill: true,
+            borderColor: '#d346b1',
+            borderWidth: 2,
+            borderDash: [],
+            borderDashOffset: 0.0,
+            pointBackgroundColor: '#d346b1',
+            pointBorderColor: 'rgba(255,255,255,0)',
+            pointHoverBackgroundColor: '#d346b1',
+            pointBorderWidth: 20,
+            pointHoverRadius: 4,
+            pointHoverBorderWidth: 15,
+            pointRadius: 4,
+            data: this.bigLineChart.allData[index]
+          }],
+          labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+        }
+        this.bigLineChart.activeIndex = index;
+      }
+    },
+    mounted() {
+      this.initBigChart(0);
+    }
+  };
 </script>
 <style>
 </style>