diff --git a/src/components/BaseCheckbox.vue b/src/components/BaseCheckbox.vue
new file mode 100644
index 0000000..d9006df
--- /dev/null
+++ b/src/components/BaseCheckbox.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="form-check"
+       :class="[{disabled: disabled}, inlineClass]">
+    <label :for="cbId" class="form-check-label">
+      <input :id="cbId"
+             class="form-check-input"
+             type="checkbox"
+             :disabled="disabled"
+             v-model="model"/>
+      <span class="form-check-sign"></span>
+      <slot>
+        <span v-if="inline">&nbsp;</span>
+      </slot>
+    </label>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'base-checkbox',
+    model: {
+      prop: 'checked'
+    },
+    props: {
+      checked: [Array, Boolean],
+      disabled: Boolean,
+      inline: Boolean,
+      hasError: Boolean
+    },
+    data() {
+      return {
+        cbId: '',
+        touched: false
+      }
+    },
+    computed: {
+      model: {
+        get() {
+          return this.checked
+        },
+        set(check) {
+          if (!this.touched) {
+            this.touched = true
+          }
+          this.$emit('input', check)
+        }
+      },
+      inlineClass() {
+        if (this.inline) {
+          return `form-check-inline`
+        }
+      }
+    },
+    created() {
+      this.cbId = Math.random().toString(16).slice(2)
+    }
+  }
+</script>
diff --git a/src/components/index.js b/src/components/index.js
index 2b22499..445f29a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,6 @@
 import FormGroupInput from "./Inputs/formGroupInput.vue";
 
+import BaseCheckbox from "./BaseCheckbox.vue";
 import BaseDropdown from "./BaseDropdown.vue";
 import BaseTable from "./BaseTable.vue";
 import BaseButton from "./BaseButton";
@@ -15,6 +16,7 @@ export {
   Card,
   StatsCard,
   BaseTable,
+  BaseCheckbox,
   BaseDropdown,
   BaseButton,
   BaseAlert,
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 7ed858c..f55d4bb 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -62,11 +62,11 @@
             <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 style="height: 100%"
+                       :chart-data="blueBarChart.chartData"
+                       :gradient-color="blueBarChart.gradientColors"
+                       :gradient-stops="blueBarChart.gradientStops"
+                       :extra-options="blueBarChart.extraOptions">
             </bar-chart>
           </div>
         </card>
@@ -90,8 +90,8 @@
     </div>
     <div class="row">
       <div class="col-lg-6 col-md-12">
-        <div class="card card-tasks">
-          <div class="card-header ">
+        <card type="tasks">
+          <template slot="header">
             <h6 class="title d-inline">Tasks(5)</h6>
             <p class="card-category d-inline">today</p>
             <div class="dropdown">
@@ -104,145 +104,11 @@
                 <a class="dropdown-item" href="#pablo">Something else</a>
               </div>
             </div>
+          </template>
+          <div class="table-full-width table-responsive">
+            <task-list></task-list>
           </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>
+        </card>
       </div>
       <div class="col-lg-6 col-md-12">
         <div class="card ">
@@ -251,122 +117,7 @@
           </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>
+              <user-table></user-table>
             </div>
           </div>
         </div>
@@ -378,11 +129,15 @@
   import LineChart from '@/components/Charts/LineChart';
   import BarChart from '@/components/Charts/BarChart';
   import * as chartConfigs from '@/components/Charts/config';
+  import TaskList from './Dashboard/TaskList';
+  import UserTable from './Dashboard/UserTable';
 
   export default {
     components: {
       LineChart,
-      BarChart
+      BarChart,
+      TaskList,
+      UserTable
     },
     data() {
       return {
diff --git a/src/pages/Dashboard/TaskList.vue b/src/pages/Dashboard/TaskList.vue
new file mode 100644
index 0000000..e553d85
--- /dev/null
+++ b/src/pages/Dashboard/TaskList.vue
@@ -0,0 +1,66 @@
+<template>
+    <base-table :data="tableData"
+                thead-classes="text-primary">
+      <template slot-scope="{row}">
+        <td>
+          <base-checkbox v-model="row.done">
+          </base-checkbox>
+        </td>
+        <td>
+          <p class="title">{{row.title}}</p>
+          <p class="text-muted">{{row.description}}</p>
+        </td>
+        <td class="td-actions text-right">
+          <base-button type="link">
+            <i class="tim-icons icon-pencil"></i>
+          </base-button>
+        </td>
+      </template>
+    </base-table>
+</template>
+<script>
+  import {BaseTable} from '@/components'
+  export default {
+    components: {
+      BaseTable
+    },
+    data() {
+      return {
+        tableData: [
+          {
+            title: 'Update the Documentation',
+            description: 'Dwuamish Head, Seattle, WA 8:47 AM',
+            done: false
+          },
+          {
+            title: 'GDPR Compliance',
+            description: '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.',
+            done: true
+          },
+          {
+            title: 'Solve the issues',
+            description: 'Fifty percent of all respondents said they would be more likely to shop at a company',
+            done: false
+          },
+          {
+            title: 'Release v2.0.0',
+            description: 'Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM',
+            done: false
+          },
+          {
+            title: 'Export the processed files',
+            description: 'The report also shows that consumers will not easily forgive a company once a breach exposing their personal data occurs.',
+            done: false
+          },
+          {
+            title: 'Arival at export process',
+            description: 'Capitol Hill, Seattle, WA 12:34 AM',
+            done: false
+          }
+        ]
+      }
+    }
+  }
+</script>
+<style>
+</style>
diff --git a/src/pages/Dashboard/UserTable.vue b/src/pages/Dashboard/UserTable.vue
new file mode 100644
index 0000000..f32df01
--- /dev/null
+++ b/src/pages/Dashboard/UserTable.vue
@@ -0,0 +1,77 @@
+<template>
+  <base-table :data="table.data"
+              :columns="table.columns"
+              thead-classes="text-primary">
+  </base-table>
+</template>
+<script>
+  import { BaseTable } from "@/components";
+  const tableColumns = ["Name", "Country", "City", "Salary"];
+  let tableData = [
+    {
+      id: 1,
+      name: "Dakota Rice",
+      salary: "$36.738",
+      country: "Niger",
+      city: "Oud-Turnhout",
+    },
+    {
+      id: 2,
+      name: "Minerva Hooper",
+      salary: "$23,789",
+      country: "Curaçao",
+      city: "Sinaai-Waas"
+    },
+    {
+      id: 3,
+      name: "Sage Rodriguez",
+      salary: "$56,142",
+      country: "Netherlands",
+      city: "Baileux"
+    },
+    {
+      id: 4,
+      name: "Philip Chaney",
+      salary: "$38,735",
+      country: "Korea, South",
+      city: "Overland Park"
+    },
+    {
+      id: 5,
+      name: "Doris Greene",
+      salary: "$63,542",
+      country: "Malawi",
+      city: "Feldkirchen in Kärnten"
+    },
+    {
+      id: 6,
+      name: 'Mason Porter',
+      salary: '$98,615',
+      country: 'Chile',
+      city: 'Gloucester'
+    },
+    {
+      id: 7,
+      name: 'Jon Porter',
+      salary: '$78,615',
+      country: 'Portugal',
+      city: 'Gloucester'
+    }
+  ]
+  export default {
+    components: {
+      BaseTable
+    },
+    data() {
+      return {
+        table: {
+          title: "Simple Table",
+          columns: [...tableColumns],
+          data: [...tableData]
+        },
+      }
+    }
+  }
+</script>
+<style>
+</style>
diff --git a/src/plugins/globalComponents.js b/src/plugins/globalComponents.js
index fc15200..3ddcf8d 100644
--- a/src/plugins/globalComponents.js
+++ b/src/plugins/globalComponents.js
@@ -1,4 +1,4 @@
-import { FormGroupInput, Card, BaseDropdown, BaseButton } from "../components/index";
+import { FormGroupInput, Card, BaseDropdown, BaseButton, BaseCheckbox } from "../components/index";
 /**
  * You can register global components here and use them as a plugin in your main Vue instance
  */
@@ -9,6 +9,7 @@ const GlobalComponents = {
     Vue.component(Card.name, Card);
     Vue.component(BaseDropdown.name, BaseDropdown);
     Vue.component(BaseButton.name, BaseButton);
+    Vue.component(BaseCheckbox.name, BaseCheckbox);
   }
 };