diff --git a/.eslintrc.js b/.eslintrc.js
index 20034fd2..1c6179f3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,4 +14,4 @@ module.exports = {
   parserOptions: {
     parser: 'babel-eslint'
   }
-}
\ No newline at end of file
+}
diff --git a/babel.config.js b/babel.config.js
index b89d655b..9fb4a004 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,12 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    ['@vue/app', {
+      polyfills: [
+        'es6.promise', // already default included now
+        'es6.array.iterator', // already default included now
+        'es6.symbol',
+        'es6.object.assign'
+      ]
+    }]
   ]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 3070256a..5aa6474e 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,13 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.14",
+    "@coreui/coreui": "^2.0.20",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/vue": "^2.0.2",
+    "@coreui/vue": "github:coreui/coreui-vue#vue_cli3",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "chart.js": "^2.7.2",
+    "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.11.1",
     "flag-icon-css": "^3.2.0",
@@ -33,17 +33,17 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-plugin-unit-jest": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-plugin-unit-jest": "^3.0.5",
+    "@vue/cli-service": "^3.0.5",
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.9.4",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.17"
   },
diff --git a/src/containers/DefaultAside.vue b/src/containers/DefaultAside.vue
index b8b781f9..b60ead63 100644
--- a/src/containers/DefaultAside.vue
+++ b/src/containers/DefaultAside.vue
@@ -102,7 +102,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="success" class="avatar-status"></b-badge>
+              <CBadge variant="success" class="avatar-status"/>
             </div>
           </div>
           <div>
@@ -117,7 +117,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="danger" class="avatar-status"></b-badge>
+              <c-badge variant="danger" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
@@ -132,7 +132,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="info" class="avatar-status"></b-badge>
+              <c-badge variant="info" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
@@ -147,7 +147,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="warning" class="avatar-status"></b-badge>
+              <c-badge variant="warning" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
@@ -162,7 +162,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="dark" class="avatar-status"></b-badge>
+              <c-badge variant="dark" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index 3579dfb0..4eac3b06 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -37,7 +37,7 @@
         <SidebarMinimizer/>
       </AppSidebar>
       <main class="main">
-        <Breadcrumb :list="list"/>
+        <CBreadcrumbRouter/>
         <div class="container-fluid">
           <router-view></router-view>
         </div>
@@ -63,7 +63,7 @@
 
 <script>
 import nav from '@/_nav'
-import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
+import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter,SidebarNav, SidebarForm, SidebarHeader, SidebarMinimizer, Aside as AppAside, AsideToggler, Footer as TheFooter } from '@coreui/vue'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
 
@@ -75,7 +75,6 @@ export default {
     AppSidebar,
     AppAside,
     TheFooter,
-    Breadcrumb,
     DefaultAside,
     DefaultHeaderDropdownAccnt,
     SidebarForm,
@@ -89,14 +88,6 @@ export default {
     return {
       nav: nav.items
     }
-  },
-  computed: {
-    name () {
-      return this.$route.name
-    },
-    list () {
-      return this.$route.matched.filter((route) => route.name || route.meta.label )
-    }
   }
 }
 </script>
diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index ecd5e3cc..a56b3d17 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -1,54 +1,50 @@
 <template>
-  <AppHeaderDropdown right no-caret>
-    <template slot="header">
+  <c-nav-item-dropdown no-caret right>
+    <template slot="button-content">
       <img
         src="img/avatars/6.jpg"
         class="img-avatar"
         alt="admin@bootstrapmaster.com" />
-    </template>\
-    <template slot="dropdown">
-      <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
-      <b-dropdown-item><i class="fa fa-bell-o" /> Updates
-        <b-badge variant="info">{{ itemsCount }}</b-badge>
-      </b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-envelope-o" /> Messages
-        <b-badge variant="success">{{ itemsCount }}</b-badge>
-      </b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-tasks" /> Tasks
-        <b-badge variant="danger">{{ itemsCount }}</b-badge>
-      </b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-comments" /> Comments
-        <b-badge variant="warning">{{ itemsCount }}</b-badge>
-      </b-dropdown-item>
-      <b-dropdown-header
-        tag="div"
-        class="text-center">
-        <strong>Settings</strong>
-      </b-dropdown-header>
-      <b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-usd" /> Payments
-        <b-badge variant="secondary">{{ itemsCount }}</b-badge>
-      </b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-file" /> Projects
-        <b-badge variant="primary">{{ itemsCount }}</b-badge>
-      </b-dropdown-item>
-      <b-dropdown-divider />
-      <b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
-      <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
     </template>
-  </AppHeaderDropdown>
+    
+    <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
+    <b-dropdown-item><i class="fa fa-bell-o" /> Updates
+      <c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
+    </b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-envelope-o" /> Messages
+      <c-badge variant="success">{{ itemsCount }}</c-badge>
+    </b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-tasks" /> Tasks
+      <c-badge variant="danger">{{ itemsCount }}</c-badge>
+    </b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-comments" /> Comments
+      <c-badge variant="warning">{{ itemsCount }}</c-badge>
+    </b-dropdown-item>
+    <b-dropdown-header
+      tag="div"
+      class="text-center">
+      <strong>Settings</strong>
+    </b-dropdown-header>
+    <b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-usd" /> Payments
+      <c-badge variant="secondary">{{ itemsCount }}</c-badge>
+    </b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-file" /> Projects
+      <c-badge variant="primary">{{ itemsCount }}</c-badge>
+    </b-dropdown-item>
+    <b-dropdown-divider />
+    <b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
+    <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
+  </c-nav-item-dropdown>
 </template>
 
 <script>
-import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
+
 export default {
   name: 'DefaultHeaderDropdownAccnt',
-  components: {
-    AppHeaderDropdown
-  },
   data: () => {
     return { itemsCount: 42 }
-  }
+  },
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 136252c4..04eeec82 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,23 +3,28 @@
 import 'core-js/es6/promise'
 import 'core-js/es6/string'
 import 'core-js/es7/array'
+
 // import cssVars from 'css-vars-ponyfill'
 import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
+import CoreuiVue from '@coreui/vue'
+
+Vue.config.performance = true
 
 // todo
 // cssVars()
-
 Vue.use(BootstrapVue)
+Vue.use(CoreuiVue)
+
 
 /* eslint-disable no-new */
-new Vue({
+var vm = new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: {
     App
-  }
+  },
 })
diff --git a/src/mixins/charts/chartMixins.js b/src/mixins/charts/chartMixins.js
deleted file mode 100644
index 468c0918..00000000
--- a/src/mixins/charts/chartMixins.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { deepObjectsMerge, getColor } from '@coreui/coreui/dist/js/coreui-utilities'
-
-const generatedLabels = {
-  computed:{
-    generatedLabels() {
-      if(this.labels !== undefined)
-        return this.labels
-      let labels = [];
-      for(let i=1; i<=this.data.length; i++)
-        labels.push('')
-      return labels
-    },
-  },
-}
-const generatedBackgroundColor = {
-  computed:{
-    generatedBackgroundColor(){
-      return getColor(this.backgroundColor)
-    },
-  },
-}
-const generatedBorderColor = {
-  computed:{
-    generatedBorderColor(){
-      return getColor(this.borderColor)
-    },
-  },
-}
-const generatedPointHoverBackgroundColor = {
-  computed:{
-    generatedPointHoverBackgroundColor () {
-     if(this.$options.propsData.pointHoverBackgroundColor === undefined)
-       return this.generatedBorderColor
-     return getColor(this.pointHoverBackgroundColor)
-    },
-  },
-}
-const generatedOptions = {
-  computed:{
-    generatedOptions () {
-     if(this.$options.propsData.options !== undefined)
-       deepObjectsMerge(this.finalOptions, this.options)
-     return this.finalOptions
-    },
-  },
-}
-export{
-  generatedLabels,
-  generatedBackgroundColor,
-  generatedBorderColor,
-  generatedPointHoverBackgroundColor,
-  generatedOptions
-}
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index bcea281d..fa4800e6 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -2,34 +2,35 @@
   <div class="animated fadeIn">
     <b-card-group columns class="card-columns">
       <b-card header="Line Chart">
-        <div class="chart-wrapper">
-          <line-example chartId="chart-line-01"/>
-        </div>
+        <line-example/>
       </b-card>
       <b-card header="Bar Chart">
-        <div class="chart-wrapper">
-          <bar-example chartId="chart-bar-01"/>
-        </div>
+        <bar-example/>
       </b-card>
       <b-card header="Doughnut Chart">
-        <div class="chart-wrapper">
-          <doughnut-example chartId="chart-doughnut-01"/>
-        </div>
+        <doughnut-example/>
       </b-card>
       <b-card header="Radar Chart">
-        <div class="chart-wrapper">
-          <radar-example chartId="chart-radar-01"/>
-        </div>
+        <radar-example/>
       </b-card>
       <b-card header="Pie Chart">
-        <div class="chart-wrapper">
-          <pie-example chartId="chart-pie-01"/>
-        </div>
+        <pie-example/>
       </b-card>
       <b-card header="Polar Area Chart">
-        <div class="chart-wrapper">
-          <polar-area-example chartId="chart-polar-area-01"/>
-        </div>
+        <polar-area-example/>
+      </b-card>
+      <b-card header="Simple line chart">
+        <c-simple-line-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                     label='Sales' borderColor='success'/>
+      </b-card>
+      <b-card header="Simple pointed chart">
+        <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+                     :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+                     style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
+      </b-card>
+      <b-card header="Simple bar chart">
+        <c-simple-bar-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                    label='Sales' color='danger'/>
       </b-card>
     </b-card-group>
   </div>
@@ -43,7 +44,7 @@ import PieExample from './charts/PieExample'
 import PolarAreaExample from './charts/PolarAreaExample'
 
 export default {
-  name: 'charts',
+  name: 'Charts',
   components: {
     BarExample,
     LineExample,
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index aafac39f..a9d361fb 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -2,9 +2,8 @@
   <div class="animated fadeIn">
     <b-row>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
-          <template slot='dropdown'>
-            <b-dropdown class="float-right" variant="transparent p-0" right>
+        <c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
+            <b-dropdown slot='dropdown' class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
               </template>
@@ -13,16 +12,14 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
-          </template>
-          <template slot='chart'>
-            <line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
-          </template>
-        </widget06>
+          <c-simple-pointed-chart  class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+                       style='height:70px' label='Members' pointHoverColor='primary'/>
+
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
+        <c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
               <template slot="button-content">
@@ -34,16 +31,14 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
-            <line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
+            <c-simple-pointed-chart class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                          style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
-                         pointHoverBackgroundColor='info'/>
-          </template>
-        </widget06>
+                         pointHoverColor='info'/>
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+        <c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
@@ -55,17 +50,15 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
-            <line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
+            <c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
-          </template>
-        </widget06>
+                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
+                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
-          <template name='dropdown'>
+        <c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
+          <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -76,11 +69,9 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template name='chart'>
-            <bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                        label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
-          </template>
-        </widget06>
+            <c-simple-bar-chart :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
+        </c-widget06>
       </b-col>
     </b-row>
     <b-card>
@@ -100,7 +91,7 @@
           </b-button-toolbar>
         </b-col>
       </b-row>
-      <main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
+      <main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example>
       <div slot="footer">
         <b-row class="text-center">
           <b-col class="mb-sm-2 mb-0">
@@ -133,32 +124,32 @@
     </b-card>
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
+          <c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px' color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
+          <c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+          <c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
+        <c-widget04  variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
+          <c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px' color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-row>
@@ -171,9 +162,9 @@
                   <Callout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
+                    <div :style="{ top: '-10px'}">
                       <!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
-                      <callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -181,8 +172,8 @@
                   <Callout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
+                    <div :style="{ top: '-10px'}">
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -281,8 +272,8 @@
                   <Callout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
+                    <div :style="{ top: '-10px'}">
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
                   </Callout>
                 </b-col>
@@ -290,8 +281,8 @@
                   <Callout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
+                    <div :style="{ top: '-10px'}">
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -408,27 +399,13 @@
 import MainChartExample from './dashboard/MainChartExample'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
-import { Callout } from '@coreui/vue'
-import Widget04 from './widgets/Widget04'
-import Widget06 from './widgets/Widget06'
-import LineChart1 from './dashboard/LineChart1'
-import LineChart2 from './dashboard/LineChart2'
-
-import BarChart1 from './dashboard/BarChart1'
-
 
 export default {
-  name: 'dashboard',
+  name: 'Dashboard',
   components: {
-    Callout,
     MainChartExample,
     SocialBoxChartExample,
     CalloutChartExample,
-    Widget04,
-    Widget06,
-    LineChart1,
-    LineChart2,
-    BarChart1
   },
   data: function () {
     return {
diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index 5649582f..f858701e 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -1,189 +1,207 @@
 <template>
-  <div class="animated fadeIn" @dblclick="copyTry($event)">
+  <div class="animated fadeIn">
     <b-row>
       <b-col sm="6" lg="3">
-        <widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="success" :value="25"/>
+        <c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
+          <CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
+        </c-widget01>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="info" :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="warning" :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-          <widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+          <c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                     variant="danger" :value="25"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col sm="6" lg="3">
-        <widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-success" :value="25"/>
+        <c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+                  variant="success" inverse :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-info" :value="25"/>
+        <c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+                  variant="info" inverse :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-warning" :value="25"/>
+        <c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+                  variant="warning" inverse :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-danger" :value="25"/>
+        <c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+                  variant="danger" inverse :value="25"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="4">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
       </b-col>
       <b-col cols="12" sm="6" lg="4">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
       </b-col>
       <b-col cols="12" sm="6" lg="4">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
       </b-col>
 
     </b-row><!--/.row-->
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
        </b-col>
-       <b-col md="3" sm="6" class="codeContainer" data-code="<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>">
-        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>
+       <b-col md="3" sm="6" class="codeContainer">
+        <c-widget04  variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
+          <i slot="icon" class="fa fa-battery-1"></i>
+        </c-widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
+          <c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px' color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
+          <c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+          <c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
-        </widget04>
+        <c-widget04 variant='google-plus'
+                    rightHeader='894'
+                    rightFooter='followers'
+                    leftHeader='92' leftFooter='circles'>
+          <c-simple-line-chart chartId="google-plus"
+                               :data='[35, 23, 56, 22, 97, 23, 64]'
+                               label='Followers'
+                               :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+                               style='height:100px'
+                               color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-card-group class="mb-4">
-      <widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+      <c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
+      <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+    </b-card-group>
+    <b-card-group class="mb-4">
+      <c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
+      <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+      <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+      <c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
+      <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
     </b-card-group>
     <b-row>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
+        <c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+        <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+        <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+        <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+        <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
+          <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
+        </c-widget05>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
+        <c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
+        <c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
+        <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
+        <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
+        <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
+        <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
+        <c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
+        <c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
@@ -195,36 +213,34 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
-            <line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+          <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
-          </template>
-        </widget06>
+                         style='height:70px' label='Members' pointHoverColor='primary'/>
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
-          <template slot='dropdown'>
-            <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
-              <template slot="button-content">
-                <i class="icon-location-pin"></i>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <b-dropdown-item>Something else here...</b-dropdown-item>
-              <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-            </b-dropdown>
-          </template>
-          <template slot='chart'>
-            <line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
-                         pointHoverBackgroundColor='info'/>
-          </template>
-        </widget06>
+        <c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
+          <b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
+            <i slot="button-content"
+               class="icon-location-pin"
+            ></i>
+            <b-dropdown-item>Action</b-dropdown-item>
+            <b-dropdown-item>Another action</b-dropdown-item>
+            <b-dropdown-item>Something else here...</b-dropdown-item>
+            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
+          </b-dropdown>
+          <CSimplePointedChart class="px-3"
+                               :data="[1, 18, 9, 17, 34, 22, 11]"
+                               :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
+                               style="height:70px"
+                               label="Members"
+                               :options="{elements: {line: {tension: 0.00001}}}"
+                               pointHoverColor="info"
+          />
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+        <c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
@@ -236,17 +252,15 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
-            <line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
+          <c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
-          </template>
-        </widget06>
+                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
+                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
-          <template name='dropdown'>
+        <c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
+          <template slot="dropdown">
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -257,122 +271,86 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template name='chart'>
-            <bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                        label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
-          </template>
-        </widget06>
+          <c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
+        </c-widget06>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" lg="3">
-        <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        <c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px"
+                           :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
+                           label="Sales"
+          />
+        </c-widget07>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        <c-widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </c-widget07>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        <c-widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </c-widget07>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        <c-widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </c-widget07>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="4" lg="2">
-        <widget08 header='title' text='1,123'>
-          <line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <c-widget08 header='title' text='1,123'>
+          <c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='danger'/>
-        </widget08>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08 header='title' text='1,123'>
-          <line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <c-widget08 header='title' text='1,123'>
+          <c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='primary'/>
-        </widget08>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08 header='title' text='1,123'>
-          <line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                       label='Sales' borderColor='success'/>
-        </widget08>
+        <c-widget08 header='title' text='1,123'>
+                       <CSimpleLineChart style="height:40px"
+                                        :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
+                                        label="Sales"
+                                        borderColor="success"
+                       />
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08  header='title' text='1,123'>
-          <bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' backgroundColor='danger'/>
-        </widget08>
+        <c-widget08  header='title' text='1,123'>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                      label='Sales' color='danger'/>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08  header='title' text='1,123'>
-          <bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' backgroundColor='primary'/>
-        </widget08>
+        <c-widget08  header='title' text='1,123'>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                      label='Sales' color='primary'/>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08  header='title' text='1,123'>
-          <bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' backgroundColor='success'/>
-        </widget08>
+        <c-widget08  header='title' text='1,123'>
+          <c-simple-bar-chart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                      label='Sales' color='success'/>
+        </c-widget08>
       </b-col>
     </b-row>
   </div>
 </template>
 
 <script>
-import Widget01 from './widgets/Widget01'
-import Widget02 from './widgets/Widget02'
-import Widget03 from './widgets/Widget03'
-import Widget04 from './widgets/Widget04'
-import Widget05 from './widgets/Widget05'
-import Widget06 from './widgets/Widget06'
-import Widget07 from './widgets/Widget07'
-import Widget08 from './widgets/Widget08'
-import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
-import LineChart1 from './dashboard/LineChart1'
-import LineChart2 from './dashboard/LineChart2'
-import BarChart1 from './dashboard/BarChart1'
-
 export default {
-  name: 'Widgets',
-  components: {
-    Widget01,
-    Widget02,
-    Widget03,
-    Widget04,
-    Widget05,
-    Widget06,
-    Widget07,
-    Widget08,
-    SocialBoxChartExample,
-    LineChart1,
-    LineChart2,
-    BarChart1,
-  },
-  methods:{
-    copyTry:function($event){
-      var componentCode = $event.target.closest('.col-md-3').getAttribute('data-code')
-      if(componentCode)
-        console.log(componentCode)
-        const el = document.createElement('textarea');
-        el.value = componentCode;
-        document.body.appendChild(el);
-        el.select();
-        document.execCommand('copy');
-        document.body.removeChild(el);
-    },
-  }
+  name: 'Widgets'
 }
 </script>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 1747e542..aea7acea 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -14,7 +14,11 @@
                 </a>
               </div>
             </div>
-            <b-breadcrumb :items="items"/>
+            <CBreadcrumb :items="items"/>
+            <CBreadcrumb :items="items2"/>
+            <CBreadcrumb :items="items3"/>
+            <Breadcrumb :list="items3"/>
+
           </b-card>
         </b-col>
       </b-row>
@@ -23,8 +27,12 @@
 </template>
 
 <script>
+// import CBreadcrumb from './CBreadcrumb'
 export default {
   name: 'breadcrumbs',
+  // components: {
+  //   CBreadcrumb
+  // },
   data () {
     return {
       items: [{
@@ -34,8 +42,33 @@ export default {
         text: 'Manage',
         href: '#'
       }, {
-        text: 'Library',
-        active: true
+        text: 'Library'
+      }],
+      items2: [{
+        text: 'Go to dashboard',
+        to: '/dashboard'
+      }, {
+        text: 'Go to widgets',
+        to: '/Widgets'
+      }, {
+        text: 'Go to Google',
+        href: 'http://google.com'
+      },{
+        text: 'Current page'
+      }],
+      items3: ['sd', {
+        text: 'Link',
+        to: '#2',
+        activeClass: 'bg-info p-1'
+      }, {
+        text: 'Active',
+        to: '#3',
+        activeClass: 'bg-warning p-1'
+      },{
+        text: 'Classes',
+        to: '#4',
+        activeClass: 'bg-danger p-1',
+        current: false
       }]
     }
   }
diff --git a/src/views/base/CLink.js b/src/views/base/CLink.js
new file mode 100644
index 00000000..90fdf3db
--- /dev/null
+++ b/src/views/base/CLink.js
@@ -0,0 +1,170 @@
+import { mergeData } from 'vue-functional-data-merge'
+
+/**
+ * The Link component is used in many other BV components.
+ * As such, sharing its props makes supporting all its features easier.
+ * However, some components need to modify the defaults for their own purpose.
+ * Prefer sharing a fresh copy of the props to ensure mutations
+ * do not affect other component references to the props.
+ *
+ * https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
+ * @return {{}}
+ */
+export function propsFactory () {
+  return {
+    href: {
+      type: String,
+      default: null
+    },
+    rel: {
+      type: String,
+      default: null
+    },
+    target: {
+      type: String,
+      default: '_self'
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    activeClass: {
+      type: String,
+      default: 'active'
+    },
+    append: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    event: {
+      type: [String, Array],
+      default: 'click'
+    },
+    exact: {
+      type: Boolean,
+      default: false
+    },
+    exactActiveClass: {
+      type: String,
+      default: 'active'
+    },
+    replace: {
+      type: Boolean,
+      default: false
+    },
+    routerTag: {
+      type: String,
+      default: 'a'
+    },
+    to: {
+      type: [String, Object],
+      default: null
+    }
+  }
+}
+
+export const props = propsFactory()
+
+
+function computeTag (props, parent) {
+  return Boolean(parent.$router) && props.to && !props.disabled ? 'router-link' : 'a'
+}
+
+/*eslint no-unused-vars: ["error", {"args": "none"}]*/
+function computeHref ({ disabled, href, to }, tag) {
+  // We've already checked the parent.$router in computeTag,
+  // so router-link means live router.
+  // When deferring to Vue Router's router-link,
+  // don't use the href attr at all.
+  // Must return undefined for router-link to populate href.
+  if (tag === 'router-link') return void 0
+  // If href explicitly provided
+  if (href) return href
+  // Reconstruct href when `to` used, but no router
+  if (to) {
+    // Fallback to `to` prop (if `to` is a string)
+    if (typeof to === 'string') return to
+    // Fallback to `to.path` prop (if `to` is an object)
+    if (typeof to === 'object' && typeof to.path === 'string') return to.path
+  }
+  // If nothing is provided use '#'
+  return '#'
+}
+
+function computeRel ({ target, rel }) {
+  if (target === '_blank' && rel === null) {
+    return 'noopener'
+  }
+  return rel || null
+}
+
+function clickHandlerFactory ({ disabled, tag, href, suppliedHandler, parent }) {
+  const isRouterLink = tag === 'router-link'
+
+  return function onClick (e) {
+    if (disabled && e instanceof Event) {
+      // Stop event from bubbling up.
+      e.stopPropagation()
+      // Kill the event loop attached to this specific EventTarget.
+      e.stopImmediatePropagation()
+    } else {
+      parent.$root.$emit('clicked::link', e)
+
+      if (isRouterLink && e.target.__vue__) {
+        e.target.__vue__.$emit('click', e)
+      }
+      if (typeof suppliedHandler === 'function') {
+        suppliedHandler(...arguments)
+      }
+    }
+
+    if ((!isRouterLink && href === '#') || disabled) {
+      // Stop scroll-to-top behavior or navigation.
+      e.preventDefault()
+    }
+  }
+}
+
+export default {
+  functional: true,
+  name: 'CLink',
+  props: propsFactory(),
+  render (h, { props, data, parent, children }) {
+    const tag = computeTag(props, parent)
+    const rel = computeRel(props)
+    const href = computeHref(props, tag)
+    const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
+    const suppliedHandler = (data[eventType] || {}).click
+    const handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) }
+
+    const componentData = mergeData(data, {
+      class: [
+        props.active ? (props.exact ? props.exactActiveClass : props.activeClass) : null,
+        { disabled: props.disabled }
+      ],
+      attrs: {
+        rel,
+        href,
+        target: props.target,
+        tabindex: props.disabled ? '-1' : (data.attrs ? data.attrs.tabindex : null),
+        'aria-disabled': (tag === 'a' && props.disabled) ? 'true' : null
+      },
+      props: Object.assign(props, { tag: props.routerTag })
+    })
+
+    // If href prop exists on router-link (even undefined or null) it fails working on SSR
+    if (!componentData.attrs.href) {
+      delete componentData.attrs.href
+    }
+
+    // We want to overwrite any click handler since our callback
+    // will invoke the supplied handler if !props.disabled
+    componentData[eventType] = Object.assign(componentData[eventType] || {}, handlers)
+
+    return h(tag, componentData, children)
+  }
+}
diff --git a/src/views/base/CNavItemDropdown.vue b/src/views/base/CNavItemDropdown.vue
new file mode 100644
index 00000000..388064be
--- /dev/null
+++ b/src/views/base/CNavItemDropdown.vue
@@ -0,0 +1,90 @@
+<template>
+  <li :class='dropdownClasses' :id="safeId">
+    <a href="#" :id="'C-' + safeId"  aria-haspopup="true" :aria-expanded="visible"
+       :class="toggleClasses" @click="toggle(!visible)" @blur="toggle(false)">
+      <slot name="button-content">{{text}}</slot>
+    </a>
+    <div :class='menuClasses' :aria-labbeledby="'C-' + safeId">
+      <slot></slot>
+      <slot name="dropdown"></slot>
+    </div>
+  </li>
+</template>
+<script>
+
+export default {
+  name: 'CNavItemDropdown',
+  data () {
+    return {
+      visible: this.show
+    }
+  },
+  props: {
+    noCaret: {
+      type: Boolean,
+      default: false
+    },
+    extraToggleClasses: {
+      type: String,
+      default: ''
+    },
+    extraMenuClasses: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: 'Dropdown'
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    dropup: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    right: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods:{
+    toggle (visible) {
+      if(this.disabled)
+        return
+      this.visible = visible
+    }
+  },
+  computed: {
+    dropdownClasses () {
+      return [
+        'nav-item',
+        'dropdown',
+        this.dropup ? 'dropup' : '',
+        this.visible ? 'show' : ''
+      ]
+    },
+    toggleClasses () {
+      return [
+        'nav-link',
+        this.noCaret ? '' : 'dropdown-toggle',
+        this.disabled ? 'disabled' : '',
+        this.extraToggleClasses ? this.extraToggleClasses : ''
+      ]
+    },
+    menuClasses () {
+      return [
+        'dropdown-menu',
+        this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
+        this.visible ? 'show' : '',
+        this.extraMenuClasses ? this.extraMenuClasses : ''
+      ]
+    }
+  },
+}
+</script>
diff --git a/src/views/base/CSwitch.vue b/src/views/base/CSwitch.vue
new file mode 100644
index 00000000..357378dd
--- /dev/null
+++ b/src/views/base/CSwitch.vue
@@ -0,0 +1,116 @@
+<template>
+  <label :class="classList">
+    <input
+      :id="id"
+      :name="name"
+      :type="type"
+      :checked="isChecked"
+      :disabled="disabled"
+      :required="required"
+      :value="value"
+      class="switch-input form-check-input"
+      @change="toggle"
+    >
+    <span
+      :data-checked="dataOn"
+      :data-unchecked="dataOff"
+      class="switch-slider"
+    >
+    </span>
+  </label>
+</template>
+
+<script>
+export default {
+  name:'CSwitch',
+  model: {
+    prop: 'passedValue',
+    event: 'change'
+  },
+  data: function () {
+    return {
+      isChecked: null,
+      passedValue: null
+    }
+  },
+  props: {
+    variant: {
+      type: String,
+      default: 'secondary'
+    },
+    outline: {
+      type: [Boolean, String],
+      default: null,
+      validator: value => [false, true, '', 'alt'].indexOf(value) !== -1
+    },
+    size: {
+      type: String,
+      default: null,
+      validator: value => ['', 'lg', 'sm'].indexOf(value) !== -1
+    },
+    shape: {
+      type: String,
+      default: null,
+      validator: value => [null, '3d', 'pill'].indexOf(value) !== -1
+    },
+    id: String,
+    name: String,
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    disabled: Boolean,
+    required: Boolean,
+    value: String,
+    trueValue: [String, Number, Array, Object],
+    falseValue: [String, Number, Array, Object],
+    dataOn: String,
+    dataOff: String,
+    type: {
+      type: String,
+      default: 'checkbox'
+    }
+  },
+  computed: {
+    classList () {
+      return [
+        'switch',
+        this.dataOn || this.dataOff ? 'switch-label' : '',
+        this.size ? `switch-${this.size}` : '',
+        this.shape ? `switch-${this.shape}` : '',
+        `switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
+        'form-check-label'
+      ]
+    }
+  },
+  methods: {
+    toggle (event) {
+      this.setValues(event.target.checked)
+      this.$emit('change', this.passedValue, event);
+    },
+    setValues (checked) {
+      this.isChecked = checked
+      if(checked)
+        this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
+      else
+        this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
+    },
+    detectPassedCheck (modelValue) {
+      if(typeof modelValue === 'boolean')
+        this.isChecked = modelValue
+      else if (modelValue === this.falseValue)
+        this.isChecked = false
+      else if (modelValue === this.trueValue)
+        this.isChecked = true
+      else if (this.type === 'checkbox')
+        console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
+    }
+  },
+  created () {
+    if(this.$vnode.data.model)
+      this.detectPassedCheck(this.$vnode.data.model.value)
+    else
+      this.isChecked = this.checked
+  }
+}
+</script>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 83e629c2..6b67791c 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -33,12 +33,20 @@
                 <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
               </b-nav-form>
 
-              <b-nav-item-dropdown text="Lang" right>
-                <b-dropdown-item href="#">EN</b-dropdown-item>
-                <b-dropdown-item href="#">ES</b-dropdown-item>
-                <b-dropdown-item href="#">RU</b-dropdown-item>
-                <b-dropdown-item href="#">FA</b-dropdown-item>
-              </b-nav-item-dropdown>
+              <c-nav-item-dropdown text="Lang">
+                <!-- <template slot="button-content">
+                  <img
+                    src="img/avatars/6.jpg"
+                    class="img-avatar"
+                    alt="admin@bootstrapmaster.com" />
+                </template> -->
+                <template slot="dropdown">
+                  <a href="#" class='dropdown-item'>EN</a>
+                  <a href="#" class='dropdown-item'>ES</a>
+                  <a href="#" class='dropdown-item'>RU</a>
+                  <a href="#" class='dropdown-item'>FA</a>
+                </template>
+              </c-nav-item-dropdown>
 
               <b-nav-item-dropdown right>
                 <!-- Using button-content slot -->
@@ -157,8 +165,12 @@
 </template>
 
 <script>
+import CNavItemDropdown from './CNavItemDropdown'
+
 export default {
-  name: 'navbars'
+  name: 'navbars',
+  components:{
+    CNavItemDropdown
+  }
 }
 </script>
-
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index a3858341..f5ad395c 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -13,12 +13,12 @@
           </div>
         </div>
         <div>
-          <b-progress :value="counter" :max="max" show-progress animated></b-progress>
-          <b-progress class="mt-1" :max="max" show-value>
-            <b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
-            <b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
-            <b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
-          </b-progress>
+          <c-progress :value="counter" :max="max" show-progress animated></c-progress>
+          <CProgress class="mt-1" :max="max" show-value>
+            <CProgressBar :value="counter*(6/10)" color="success"/>
+            <CProgressBar :value="counter*(2.5/10)" color="warning"/>
+            <CProgressBar :value="counter*(1.5/10)" color="danger"/>
+          </CProgress>
           <b-btn class="mt-4" @click="clicked">Click me</b-btn>
         </div>
       </b-card>
@@ -200,4 +200,3 @@ export default {
   }
 }
 </script>
-
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 32888775..7f273a33 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -1,5 +1,36 @@
 <template>
   <div class="animated fadeIn">
+    <!-- <p>myFlag1: {{radio}}</p>
+    <p>myFlag1: {{myFlag1}}</p>
+    <p>myFlag2: {{myFlag2}}</p>
+    <CSwitch v-model="myFlag1"/>
+    <CSwitch v-model="myFlag2" checked @change="test" /> -->
+    <b-row>
+      <b-col xs="12" md="6">
+        <b-card>
+          <div slot="header">
+            <h5>
+               Radio switches
+              <b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
+              <b-badge variant="danger" class="float-right">NEW</b-badge>
+            </h5>
+          </div>
+          <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/>
+          <CSwitch class="mx-1"
+                   :key="key"
+                   :variant="variant"
+                   shape="3d"
+                   outline="alt"
+                   v-bind="labelIcon"
+                   type="radio"
+                   name="radio"
+                   v-model="radio"
+                   :trueValue="variant"
+                   v-for="(variant, key) in ['secondary','warning','success','info','danger','light','dark']"
+          />
+        </b-card>
+      </b-col>
+    </b-row>
     <b-row>
       <b-col xs="12" md="6">
         <b-card>
@@ -7,15 +38,22 @@
             Switch default
             <b-badge variant="primary">{{checker}}</b-badge>
           </div>
-          <c-switch class="mx-1" color="primary" checked name="switch1" v-model="checker" value="yes" uncheckedValue="no"/>
-          <c-switch class="mx-1" color="secondary" checked />
-          <c-switch class="mx-1" color="success" checked />
-          <c-switch class="mx-1" color="warning" checked />
-          <c-switch class="mx-1" color="info" checked />
-          <c-switch class="mx-1" color="danger" checked />
-          <c-switch class="mx-1" color="light" checked />
-          <c-switch class="mx-1" color="dark" checked />
-          <c-switch class="mx-1" color="primary" disabled />
+          <CSwitch class="mx-1"
+            variant="primary"
+            checked
+            name="switch1"
+            v-model="checker"
+            value="someValue"
+            trueValue="yes"
+            falseValue="no"
+          />
+          <CSwitch class="mx-1"
+                   :variant="variant"
+                   checked
+                   :key="key"
+                   v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
+          />
+          <CSwitch class="mx-1" variant="primary" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -23,15 +61,15 @@
           <div slot="header">
             Switch pills
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="pill" />
-          <c-switch class="mx-1" color="secondary" checked variant="pill" />
-          <c-switch class="mx-1" color="success" checked variant="pill" />
-          <c-switch class="mx-1" color="warning" checked variant="pill" />
-          <c-switch class="mx-1" color="info" checked variant="pill" />
-          <c-switch class="mx-1" color="danger" checked variant="pill" />
-          <c-switch class="mx-1" color="light" checked variant="pill" />
-          <c-switch class="mx-1" color="dark" checked variant="pill" />
-          <c-switch class="mx-1" color="primary" disabled variant="pill" />
+          <c-switch class="mx-1" variant="primary" checked  shape="pill"/>
+          <c-switch class="mx-1" variant="secondary" checked  shape="pill" />
+          <c-switch class="mx-1" variant="success" checked  shape="pill" />
+          <c-switch class="mx-1" variant="warning" checked  shape="pill" />
+          <c-switch class="mx-1" variant="info" checked  shape="pill" />
+          <c-switch class="mx-1" variant="danger" checked  shape="pill" />
+          <c-switch class="mx-1" variant="light" checked  shape="pill" />
+          <c-switch class="mx-1" variant="dark" checked  shape="pill" />
+          <c-switch class="mx-1" variant="primary" disabled  shape="pill" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -39,15 +77,15 @@
           <div slot="header">
             3d Switch
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="3d" />
-          <c-switch class="mx-1" color="secondary" checked variant="3d" />
-          <c-switch class="mx-1" color="success" checked variant="3d" />
-          <c-switch class="mx-1" color="warning" checked variant="3d" />
-          <c-switch class="mx-1" color="info" checked variant="3d" />
-          <c-switch class="mx-1" color="danger" checked variant="3d" />
-          <c-switch class="mx-1" color="light" checked variant="3d" />
-          <c-switch class="mx-1" color="dark" checked variant="3d" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -55,15 +93,15 @@
           <div slot="header">
             3d Switch <small><code>disabled</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="secondary" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="success" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="warning" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="info" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="danger" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="light" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="dark" checked variant="3d" disabled />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" />
+          <c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="success" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="info" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="light" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
+          <c-switch class="mx-1" variant="primary" disabled shape="3d" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -71,15 +109,15 @@
           <div slot="header">
             3d Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="secondary" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="success" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="warning" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="info" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="danger" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="light" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="dark" checked variant="3d" outline="alt" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -87,47 +125,47 @@
           <div slot="header">
             3d Switch <small><code>label</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" defaultChecked variant="3d" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
+          <c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            3d Switch <small><code>outline="alt" label</code></small>
+            3d Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            3d Switch <small><code>outline="alt" label</code></small>
+            3d Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -135,31 +173,31 @@
           <div slot="header">
             Switch <small><code>outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline />
-          <c-switch class="mx-1" color="secondary" checked outline />
-          <c-switch class="mx-1" color="success" checked outline />
-          <c-switch class="mx-1" color="warning" checked outline />
-          <c-switch class="mx-1" color="info" checked outline />
-          <c-switch class="mx-1" color="danger" checked outline />
-          <c-switch class="mx-1" color="light" checked outline />
-          <c-switch class="mx-1" color="dark" checked outline />
-          <c-switch class="mx-1" color="primary" outline disabled />
+          <c-switch class="mx-1" variant="primary" checked outline />
+          <c-switch class="mx-1" variant="secondary" checked outline />
+          <c-switch class="mx-1" variant="success" checked outline />
+          <c-switch class="mx-1" variant="warning" checked outline />
+          <c-switch class="mx-1" variant="info" checked outline />
+          <c-switch class="mx-1" variant="danger" checked outline />
+          <c-switch class="mx-1" variant="light" checked outline />
+          <c-switch class="mx-1" variant="dark" checked outline />
+          <c-switch class="mx-1" variant="primary" outline disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>outline variant="pill"</code></small>
+            Switch <small><code>outline  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline variant="pill"/>
-          <c-switch class="mx-1" color="secondary" checked outline variant="pill" />
-          <c-switch class="mx-1" color="success" checked outline variant="pill" />
-          <c-switch class="mx-1" color="warning" checked outline variant="pill" />
-          <c-switch class="mx-1" color="info" checked outline variant="pill" />
-          <c-switch class="mx-1" color="danger" checked outline variant="pill" />
-          <c-switch class="mx-1" color="light" checked outline variant="pill" />
-          <c-switch class="mx-1" color="dark" checked outline variant="pill" />
-          <c-switch class="mx-1" color="primary" outline variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" checked outline  shape="pill"/>
+          <c-switch class="mx-1" variant="secondary" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="success" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="info" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="light" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline  shape="pill" />
+          <c-switch class="mx-1" variant="primary" outline  shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -167,31 +205,31 @@
           <div slot="header">
             Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline="alt" />
-          <c-switch class="mx-1" color="secondary" checked outline="alt" />
-          <c-switch class="mx-1" color="success" checked outline="alt" />
-          <c-switch class="mx-1" color="warning" checked outline="alt" />
-          <c-switch class="mx-1" color="info" checked outline="alt" />
-          <c-switch class="mx-1" color="danger" checked outline="alt" />
-          <c-switch class="mx-1" color="light" checked outline="alt" />
-          <c-switch class="mx-1" color="dark" checked outline="alt" />
-          <c-switch class="mx-1" color="primary" outline="alt" disabled />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" />
+          <c-switch class="mx-1" variant="primary" outline="alt" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>outline="alt" variant="pill"</code></small>
+            Switch <small><code>outline="alt"  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline="alt" variant="pill"/>
-          <c-switch class="mx-1" color="secondary" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="success" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="warning" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="info" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="danger" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="light" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="dark" checked outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="primary" outline="alt" variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -199,31 +237,31 @@
           <div slot="header">
             Switch <small><code>label</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label />
-          <c-switch class="mx-1" color="secondary" checked label />
-          <c-switch class="mx-1" color="success" checked label />
-          <c-switch class="mx-1" color="warning" checked label />
-          <c-switch class="mx-1" color="info" checked label />
-          <c-switch class="mx-1" color="danger" checked label />
-          <c-switch class="mx-1" color="light" checked label />
-          <c-switch class="mx-1" color="dark" checked label />
-          <c-switch class="mx-1" color="primary" label disabled />
+          <c-switch class="mx-1" variant="primary" checked />
+          <c-switch class="mx-1" variant="secondary" checked />
+          <c-switch class="mx-1" variant="success" checked />
+          <c-switch class="mx-1" variant="warning" checked />
+          <c-switch class="mx-1" variant="info" checked />
+          <c-switch class="mx-1" variant="danger" checked />
+          <c-switch class="mx-1" variant="light" checked />
+          <c-switch class="mx-1" variant="dark" checked />
+          <c-switch class="mx-1" variant="primary" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>label variant="pill"</code></small>
+            Switch <small><code>label  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label variant="pill" />
-          <c-switch class="mx-1" color="secondary" checked label variant="pill" />
-          <c-switch class="mx-1" color="success" checked label variant="pill" />
-          <c-switch class="mx-1" color="warning" checked label variant="pill" />
-          <c-switch class="mx-1" color="info" checked label variant="pill" />
-          <c-switch class="mx-1" color="danger" checked label variant="pill" />
-          <c-switch class="mx-1" color="light" checked label variant="pill" />
-          <c-switch class="mx-1" color="dark" checked label variant="pill" />
-          <c-switch class="mx-1" color="primary" label variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" checked shape="pill" />
+          <c-switch class="mx-1" variant="secondary" checked shape="pill" />
+          <c-switch class="mx-1" variant="success" checked shape="pill" />
+          <c-switch class="mx-1" variant="warning" checked shape="pill" />
+          <c-switch class="mx-1" variant="info" checked shape="pill" />
+          <c-switch class="mx-1" variant="danger" checked shape="pill" />
+          <c-switch class="mx-1" variant="light" checked shape="pill" />
+          <c-switch class="mx-1" variant="dark" checked shape="pill" />
+          <c-switch class="mx-1" variant="primary" shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -231,15 +269,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline />
-          <c-switch class="mx-1" color="secondary" checked label outline />
-          <c-switch class="mx-1" color="success" checked label outline />
-          <c-switch class="mx-1" color="warning" checked label outline />
-          <c-switch class="mx-1" color="info" checked label outline />
-          <c-switch class="mx-1" color="danger" checked label outline />
-          <c-switch class="mx-1" color="light" checked label outline />
-          <c-switch class="mx-1" color="dark" checked label outline />
-          <c-switch class="mx-1" color="primary" label outline disabled />
+          <c-switch class="mx-1" variant="primary" checked outline />
+          <c-switch class="mx-1" variant="secondary" checked outline />
+          <c-switch class="mx-1" variant="success" checked outline />
+          <c-switch class="mx-1" variant="warning" checked outline />
+          <c-switch class="mx-1" variant="info" checked outline />
+          <c-switch class="mx-1" variant="danger" checked outline />
+          <c-switch class="mx-1" variant="light" checked outline />
+          <c-switch class="mx-1" variant="dark" checked outline />
+          <c-switch class="mx-1" variant="primary" outline disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -247,15 +285,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="secondary" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="success" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="warning" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="info" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="danger" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="light" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="dark" checked label outline variant="pill" />
-          <c-switch class="mx-1" color="primary" label outline variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="success" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="info" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="light" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline shape="pill" />
+          <c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -263,15 +301,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" />
-          <c-switch class="mx-1" color="primary" label outline="alt" disabled />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" />
+          <c-switch class="mx-1" variant="primary" outline="alt" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -279,15 +317,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" />
-          <c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
         </b-card>
       </b-col>
 
@@ -296,31 +334,31 @@
           <div slot="header">
             Switch <small><code>label</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label dataOn="yes" dataOff="no"/>
-          <c-switch class="mx-1" color="secondary" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label disabled v-bind="labelIcon" />
-        </b-card>
+          <c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
+          <c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
+        </b-card>shape
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>label variant="pill"</code></small>
+            Switch <small><code>label  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label variant="pill" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -328,15 +366,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -344,15 +382,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline variant="pill" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -360,15 +398,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline="alt" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -376,15 +414,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" v-bind="labelTxt" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
 
@@ -410,18 +448,18 @@
 </template>
 
 <script>
-import { Switch as cSwitch } from '@coreui/vue'
+// import CSwitch from './CSwitch'
 
 export default {
   name: 'switches',
-  components: {
-    cSwitch
-  },
   computed: {
     icon (icon) {
       return icon
     }
   },
+  // components: {
+  //   CSwitch
+  // },
   data: () => {
     return {
       fields: [
@@ -435,6 +473,9 @@ export default {
         {size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
       ],
       checker: 'yes',
+      radio: 'primary',
+      myFlag1: true,
+      myFlag2: false,
       picker: '',
       labelIcon: {
         dataOn: '\u2713',
@@ -445,6 +486,13 @@ export default {
         dataOff: 'no'
       }
     }
+  },
+  methods: {
+    test (a, event) {
+      console.log(a)
+      console.log(typeof a)
+      console.log(event)
+    }
   }
 }
 </script>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 96cdea52..06884cf9 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -3,7 +3,7 @@
 
     <b-row>
       <b-col lg="6">
-        <c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
+        <c-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></c-table>
       </b-col><!--/.col-->
 
       <b-col lg="6">
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index b00ee89b..598d0086 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -233,6 +233,6 @@
 
 <script>
 export default {
-  name: 'dropdowns'
+  name: 'Dropdowns'
 }
 </script>
diff --git a/src/views/charts/BarExample.vue b/src/views/charts/BarExample.vue
index 5845d175..6d471115 100644
--- a/src/views/charts/BarExample.vue
+++ b/src/views/charts/BarExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Bar } from 'vue-chartjs'
+import { Bar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
diff --git a/src/views/charts/DoughnutExample.vue b/src/views/charts/DoughnutExample.vue
index d45434a7..dc5cac6e 100644
--- a/src/views/charts/DoughnutExample.vue
+++ b/src/views/charts/DoughnutExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Doughnut } from 'vue-chartjs'
+import { Doughnut } from '@coreui/vue/src/extends/BaseCharts'
 
 export default {
   name: 'DoughnutExample',
diff --git a/src/views/charts/LineExample.vue b/src/views/charts/LineExample.vue
index 6e1e3d0e..c4046930 100644
--- a/src/views/charts/LineExample.vue
+++ b/src/views/charts/LineExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 
diff --git a/src/views/charts/PieExample.vue b/src/views/charts/PieExample.vue
index 3e7d1273..67a5ee57 100644
--- a/src/views/charts/PieExample.vue
+++ b/src/views/charts/PieExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Pie } from 'vue-chartjs'
+import { Pie } from '@coreui/vue/src/extends/BaseCharts'
 
 export default {
   extends: Pie,
diff --git a/src/views/charts/PolarAreaExample.vue b/src/views/charts/PolarAreaExample.vue
index 027d9330..aed2e8f4 100644
--- a/src/views/charts/PolarAreaExample.vue
+++ b/src/views/charts/PolarAreaExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { PolarArea } from 'vue-chartjs'
+import { PolarArea } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
diff --git a/src/views/charts/RadarExample.vue b/src/views/charts/RadarExample.vue
index 94671868..533247c2 100644
--- a/src/views/charts/RadarExample.vue
+++ b/src/views/charts/RadarExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Radar } from 'vue-chartjs'
+import { Radar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
diff --git a/src/views/dashboard/BarChart1.vue b/src/views/dashboard/BarChart1.vue
deleted file mode 100644
index f1fe86b6..00000000
--- a/src/views/dashboard/BarChart1.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-import { Bar } from 'vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { generatedLabels, generatedBackgroundColor,generatedBorderColor, generatedOptions } from '@/mixins/charts/chartMixins'
-
-export default {
-  name: 'BarChart',
-  extends: Bar,
-  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedOptions],
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: Number,
-      default: 40
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    borderColor:{
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    backgroundColor:{
-      type: String,
-      default: 'rgba(0,0,0,.2)'
-    },
-    labels: Array,
-    options:Object,
-    finalOptions:{
-      type: Object,
-      default: () => ({
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false,
-            categoryPercentage: 1,
-            barPercentage: 0.5
-          }],
-          yAxes: [{
-            display: false
-          }]
-        }
-      })
-    }
-  },
-  mounted () {
-    const dataset = [
-      {
-        label: this.label,
-        backgroundColor: this.generatedBackgroundColor,
-        borderColor: this.generatedBorderColor,
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.generatedLabels,
-        datasets: dataset
-      },
-      this.generatedOptions
-    )
-  }
-}
-</script>
diff --git a/src/views/dashboard/CalloutChartExample.vue b/src/views/dashboard/CalloutChartExample.vue
index b813ecf1..c8212bde 100644
--- a/src/views/dashboard/CalloutChartExample.vue
+++ b/src/views/dashboard/CalloutChartExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
diff --git a/src/views/dashboard/CardBarChartExample.vue b/src/views/dashboard/CardBarChartExample.vue
index 6b99888b..408fe2ad 100644
--- a/src/views/dashboard/CardBarChartExample.vue
+++ b/src/views/dashboard/CardBarChartExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Bar } from 'vue-chartjs'
+import { Bar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
diff --git a/src/views/dashboard/CardLine1ChartExample.vue b/src/views/dashboard/CardLine1ChartExample.vue
index 3314b923..d1d45359 100644
--- a/src/views/dashboard/CardLine1ChartExample.vue
+++ b/src/views/dashboard/CardLine1ChartExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
diff --git a/src/views/dashboard/CardLine2ChartExample.vue b/src/views/dashboard/CardLine2ChartExample.vue
index 11718c76..f83268df 100644
--- a/src/views/dashboard/CardLine2ChartExample.vue
+++ b/src/views/dashboard/CardLine2ChartExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
diff --git a/src/views/dashboard/CardLine3ChartExample.vue b/src/views/dashboard/CardLine3ChartExample.vue
index 266f7b8b..a080fade 100644
--- a/src/views/dashboard/CardLine3ChartExample.vue
+++ b/src/views/dashboard/CardLine3ChartExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
diff --git a/src/views/dashboard/LineChart1.vue b/src/views/dashboard/LineChart1.vue
deleted file mode 100644
index 28175b1e..00000000
--- a/src/views/dashboard/LineChart1.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script>
-import { Line } from 'vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
-
-export default {
-  name: 'LineChart1',
-  extends: Line,
-  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: Number,
-      default: 40
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    borderColor:{
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    labels: Array,
-    backgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    pointHoverBackgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    options:Object,
-    finalOptions:{
-      type: Object,
-      default: () => ({
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false
-          }],
-          yAxes: [{
-            display: false
-          }]
-        },
-        elements: {
-          line: {
-            borderWidth: 2
-          },
-          point: {
-            radius: 0,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      })
-    }
-  },
-  mounted () {
-    const datasets = [
-      {
-        label: this.label,
-        borderColor: this.generatedBorderColor,
-        backgroundColor: this.generatedBackgroundColor,
-        pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.generatedLabels,
-        datasets: datasets
-      },
-      this.generatedOptions
-    )
-  },
-}
-</script>
diff --git a/src/views/dashboard/LineChart2.vue b/src/views/dashboard/LineChart2.vue
deleted file mode 100644
index 0e783a2d..00000000
--- a/src/views/dashboard/LineChart2.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script>
-import { Line } from 'vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
-
-export default {
-  name: 'LineChart2',
-  extends: Line,
-  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: Number,
-      default: 40
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    borderColor:{
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    labels: Array,
-    backgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    pointHoverBackgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    options:Object,
-  },
-  computed:{
-    finalOptions () {
-      return{
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                color: 'transparent',
-                zeroLineColor: 'transparent'
-              },
-              ticks: {
-                fontSize: 2,
-                fontColor: 'transparent'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: false,
-              ticks: {
-                display: false,
-                min: Math.min.apply(Math, this.data) - 5,
-                max: Math.max.apply(Math, this.data) + 5
-              }
-            }
-          ]
-        },
-        elements: {
-          line: {
-            borderWidth: 1
-          },
-          point: {
-            radius: 4,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    }
-  },
-  mounted () {
-    const datasets1 = [
-      {
-        label: this.label,
-        borderColor: this.generatedBorderColor,
-        backgroundColor: this.generatedBackgroundColor,
-        pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.generatedLabels,
-        datasets: datasets1
-      },
-      this.generatedOptions
-    )
-  }
-}
-</script>
diff --git a/src/views/dashboard/MainChartExample.vue b/src/views/dashboard/MainChartExample.vue
index 6cc712a2..b801d4e9 100644
--- a/src/views/dashboard/MainChartExample.vue
+++ b/src/views/dashboard/MainChartExample.vue
@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
diff --git a/src/views/dashboard/SocialBoxChartExample.vue b/src/views/dashboard/SocialBoxChartExample.vue
index 717b8db0..bc699467 100644
--- a/src/views/dashboard/SocialBoxChartExample.vue
+++ b/src/views/dashboard/SocialBoxChartExample.vue
@@ -1,8 +1,9 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
+  name: 'SocialBoxChartExample',
   extends: Line,
   props: {
     data: {
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index c12872b1..0fb82b9f 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -15,14 +15,15 @@
               </div>
             </div>
             <div>
-              <b-alert show variant="primary">Primary Alert</b-alert>
-              <b-alert show variant="secondary">Secondary Alert</b-alert>
-              <b-alert show variant="success">Success Alert</b-alert>
-              <b-alert show variant="danger">Danger Alert</b-alert>
-              <b-alert show variant="warning">Warning Alert</b-alert>
-              <b-alert show variant="info">Info Alert</b-alert>
-              <b-alert show variant="light">Light Alert</b-alert>
-              <b-alert show variant="dark">Dark Alert</b-alert>
+              <p></p>
+              <CAlert show variant="primary">Primary Alert</CAlert>
+              <CAlert show variant="secondary">Secondary Alert</CAlert>
+              <CAlert show variant="success">Success Alert</CAlert>
+              <CAlert show variant="danger">Danger Alert</CAlert>
+              <CAlert show variant="warning">Warning Alert</CAlert>
+              <CAlert show variant="info">Info Alert</CAlert>
+              <CAlert show variant="light">Light Alert</CAlert>
+              <CAlert show variant="dark">Dark Alert</CAlert>
             </div>
           </b-card>
         </b-col>
@@ -35,32 +36,32 @@
               <small> use <code>.alert-link</code> to provide links</small>
             </div>
             <div>
-              <b-alert show variant="primary">
+              <CAlert show variant="primary">
                 Primary Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="secondary">
+              </CAlert>
+              <CAlert show variant="secondary">
                 Secondary Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="success">
+              </CAlert>
+              <CAlert show variant="success">
                 Success Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="danger">
+              </CAlert>
+              <CAlert show variant="danger">
                 Danger Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="warning">
+              </CAlert>
+              <CAlert show variant="warning">
                 Warning Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="info">
+              </CAlert>
+              <CAlert show variant="info">
                 Info Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="light">
+              </CAlert>
+              <CAlert show variant="light">
                 Light Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="dark">
+              </CAlert>
+              <CAlert show variant="dark">
                 Dark Alert with
                 <b-link href="#" class="alert-link">an example link</b-link>
                 .
-              </b-alert>
+              </CAlert>
             </div>
           </b-card>
         </b-col>
@@ -71,7 +72,7 @@
             <div slot="header">
               <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
             </div>
-            <b-alert show variant="success">
+            <CAlert show variant="success">
               <h4 class="alert-heading">Well done!</h4>
               <p>
                 Aww yeah, you successfully read this important alert message.
@@ -82,7 +83,7 @@
               <p class="mb-0">
                 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
               </p>
-            </b-alert>
+            </CAlert>
           </b-card>
         </b-col>
         <b-col cols="12" md="6">
@@ -93,15 +94,30 @@
               <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
             </div>
             <div>
-              <b-alert show dismissible>
+              <CAlert :show="true" dismissible disabled>
                 Dismissible Alert!
-              </b-alert>
-            <b-alert variant="danger"
+              </CAlert>
+              <!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
+              <CAlert :show="true"
+                      dismissible>
+                Dismissible Alert!
+                <CButtonClose slot-scope="{ dismiss }"
+                              @click="dismiss"
+                              aria-label="close it"
+                              style="color:red">
+                  ok
+                </CButtonClose>
+              </CAlert>
+              <CAlert show dismissible>
+                Dismissible Alert!
+              </CAlert>
+            <CAlert variant="danger"
                      dismissible
+                     fade
                      :show="showDismissibleAlert"
                      @dismissed="showDismissibleAlert=false">
               Dismissible Alert!
-            </b-alert>
+            </CAlert>
             <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
               Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
             </b-btn>
@@ -114,14 +130,15 @@
               <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
             </div>
             <div>
-              <b-alert :show="dismissCountDown"
+              <CAlert :show="dismissCountDown"
                        dismissible
                        variant="warning"
                        @dismissed="dismissCountdown=0"
                        @dismiss-count-down="countDownChanged">
                 Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
-              </b-alert>
-              <b-alert :show="dismissCountDown"
+              </CAlert>
+
+              <CAlert :show="dismissCountDown"
                        dismissible
                        variant="info"
                        @dismissed="dismissCountdown=0"
@@ -132,7 +149,7 @@
                             :value="dismissCountDown"
                             height="4px">
                 </b-progress>
-              </b-alert>
+              </CAlert>
               <b-btn @click="showAlert" variant="info" class="m-1">
                 Show alert with timer
               </b-btn>
@@ -145,8 +162,14 @@
 </template>
 
 <script>
+// import CAlert from './CAlert'
+// import CButtonClose from './CButtonClose'
 export default {
   name: 'alerts',
+  // components: {
+  //   CAlert,
+  //   CButtonClose
+  // },
   data () {
     return {
       dismissSecs: 10,
diff --git a/src/views/notifications/CAlert.js b/src/views/notifications/CAlert.js
new file mode 100644
index 00000000..1ca9bf31
--- /dev/null
+++ b/src/views/notifications/CAlert.js
@@ -0,0 +1,120 @@
+import CButtonClose from './CButtonClose'
+
+export default {
+  name: 'CAlert',
+  components: {CButtonClose},
+  render (h) {
+    if (!this.localShow) {
+      // If not showing, render placeholder
+      return h(false)
+    }
+    let dismissBtn = h(false)
+    if (this.dismissible) {
+      dismissBtn = this.$scopedSlots.default ?
+                   this.$scopedSlots.default({dismiss: this.dismiss}) :
+                    h(
+                      'CButtonClose',
+                      { on: { click: this.dismiss }},
+                      [ this.$slots.dismiss ]
+                    )
+    }
+    const alert = h(
+      'div',
+      {class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
+      [dismissBtn, this.$slots.default]
+    )
+    return !this.fade ? alert : h(
+      'transition',
+      { props: { name: 'fade', appear: true } },
+      [ alert ]
+    )
+  },
+  model: {
+    prop: 'show',
+    event: 'input'
+  },
+  data () {
+    return {
+      countDownTimerId: null,
+      dismissed: false
+    }
+  },
+  computed: {
+    classObject () {
+      return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
+    },
+    localShow () {
+      return !this.dismissed && (this.countDownTimerId || this.show)
+    }
+  },
+  props: {
+    variant: {
+      type: String,
+      default: 'info'
+    },
+    dismissible: {
+      type: [Boolean, Object],
+      default: false
+    },
+    show: {
+      type: [Boolean, Number],
+      default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    show () {
+      this.showChanged()
+    }
+  },
+  mounted () {
+    this.showChanged()
+  },
+  destroyed /* istanbul ignore next */ () {
+    this.clearCounter()
+  },
+  methods: {
+    dismiss () {
+      this.clearCounter()
+      this.dismissed = true
+      this.$emit('dismissed')
+      this.$emit('input', false)
+      if (typeof this.show === 'number') {
+        this.$emit('dismiss-count-down', 0)
+        this.$emit('input', 0)
+      } else {
+        this.$emit('input', false)
+      }
+    },
+    clearCounter () {
+      if (this.countDownTimerId) {
+        clearInterval(this.countDownTimerId)
+        this.countDownTimerId = null
+      }
+    },
+    showChanged () {
+      // Reset counter status
+      this.clearCounter()
+      // Reset dismiss status
+      this.dismissed = false
+      // No timer for boolean values
+      if (this.show === true || this.show === false || this.show === null || this.show === 0) {
+        return
+      }
+      // Start counter (ensure we have an integer value)
+      let dismissCountDown = parseInt(this.show, 10) || 1
+      this.countDownTimerId = setInterval(() => {
+        if (dismissCountDown < 1) {
+          this.dismiss()
+          return
+        }
+        dismissCountDown--
+        this.$emit('dismiss-count-down', dismissCountDown)
+        this.$emit('input', dismissCountDown)
+      }, 1000)
+    }
+  }
+}
diff --git a/src/views/notifications/CButtonClose.js b/src/views/notifications/CButtonClose.js
new file mode 100644
index 00000000..00bbfbbb
--- /dev/null
+++ b/src/views/notifications/CButtonClose.js
@@ -0,0 +1,17 @@
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  name: 'CButtonClose',
+  functional: true,
+  render (h, { data, props, slots }) {
+    const componentData = {
+      staticClass: 'close',
+      attrs: {
+        type: props.type || 'button',
+        'aria-label': props.ariaLabel || 'Close'
+      }
+    }
+    if (!slots().default)
+      componentData.domProps = { innerHTML: '&times;' }
+    return h('button', mergeData(data, componentData), slots().default)
+  }
+}
diff --git a/src/views/widgets/Widget01.md b/src/views/widgets/Widget01.md
deleted file mode 100644
index 8bd62255..00000000
--- a/src/views/widgets/Widget01.md
+++ /dev/null
@@ -1,17 +0,0 @@
-### Widget01
-
-This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
-
-Value is the procentage value of displayed progress-bar.
-
-prop | default
---- | ---
-variant  | `''`
-value | `25`
-header| `'header:string'`
-text   | `'text:string'`
-footer    | `'footer:string'`
-
-#### Example:
->        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
->                  variant="info" :value="30"/>
diff --git a/src/views/widgets/Widget01.vue b/src/views/widgets/Widget01.vue
deleted file mode 100644
index ca72a0c8..00000000
--- a/src/views/widgets/Widget01.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <b-card :class="styleClasses">
-    <div class="h4 m-0">{{header}}</div>
-    <div>{{text}}</div>
-    <b-progress height={} :variant="variant" :value="value"
-                :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-    <small class="text-muted">{{footer}}</small>
-  </b-card>
-</template>
-
-<script>
-export default {
-  name: 'Widget01',
-  data () {
-    return{
-      backgroundColor: '',
-      styleClasses: '',
-    }
-  },
-  created ()  {
-    if(this.variant.includes('background')){
-      this.backgroundColor = this.variant.replace('background-','');
-      this.styleClasses = 'text-white bg-' + this.backgroundColor
-    }
-  },
-  props: {
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-    variant: {
-      type: String,
-      default: ''
-    },
-    footer: {
-      type: String,
-      default: 'footer:string'
-    },
-    value: {
-      type: Number,
-      default: 25
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget02.md b/src/views/widgets/Widget02.md
deleted file mode 100644
index 0e900249..00000000
--- a/src/views/widgets/Widget02.md
+++ /dev/null
@@ -1,14 +0,0 @@
-### Widget02
-This widget can be display with or without link. If you want to display link set showLink property to true.
-
-prop | default
---- | ---
-iconClasses  | `'fa fa-cogs bg-primary'`
-showLink | `true`
-header| `'header:string'`
-text   | `'text:string'`
-link    | `'#'`
-
-#### Example:
->     <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
-              :showLink="true" link="#"/>
diff --git a/src/views/widgets/Widget02.vue b/src/views/widgets/Widget02.vue
deleted file mode 100644
index d9625548..00000000
--- a/src/views/widgets/Widget02.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <b-card :no-body="true" footer-class="px-3 py-2">
-    <b-card-body class="p-3 clearfix">
-      <i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
-      <div class="h5 text-primary mb-0 mt-2">{{header}}</div>
-      <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
-    </b-card-body>
-    <div slot="footer" v-if="showLink">
-      <b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
-    </div>
-  </b-card>
-</template>
-
-<script>
-export default {
-  name: 'Widget02',
-  props: {
-    iconClasses: {
-      type: String,
-      default: 'fa fa-cogs bg-primary'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-    showLink: {
-      type: Boolean,
-      default: false
-    },
-    link: {
-      type: String,
-      default: '#'
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget03.md b/src/views/widgets/Widget03.md
deleted file mode 100644
index 395f98f0..00000000
--- a/src/views/widgets/Widget03.md
+++ /dev/null
@@ -1,11 +0,0 @@
-### Widget03
-This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
-
-prop | default
---- | ---
-iconClasses  | `'fa fa-cogs bg-primary'`
-header| `'header:string'`
-text   | `'text:string'`
-
-#### Example:
->     <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
diff --git a/src/views/widgets/Widget03.vue b/src/views/widgets/Widget03.vue
deleted file mode 100644
index 41c57b4b..00000000
--- a/src/views/widgets/Widget03.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <b-card :no-body="true">
-    <b-card-body class="p-0 clearfix">
-      <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
-      <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
-      <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
-    </b-card-body>
-  </b-card>
-</template>
-
-<script>
-export default {
-  name: 'Widget03',
-  props: {
-    iconClasses: {
-      type: String,
-      default: 'fa fa-cogs bg-primary'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget04.md b/src/views/widgets/Widget04.md
deleted file mode 100644
index eb592c40..00000000
--- a/src/views/widgets/Widget04.md
+++ /dev/null
@@ -1,15 +0,0 @@
-### Widget04
-This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is default slot for placing data chart.
-
-prop | default
---- | ---
-type  | `facebook`
-rightHeader   | `'rightHeader:string'`
-rightFooter   | `'rightFooter:string'`
-leftHeader   | `'leftHeader:string'`
-leftFooter   | `'leftFooter:string'`
-
-
-#### Example:
->             <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts"
->                       leftHeader="292" leftFooter="feeds"/>
diff --git a/src/views/widgets/Widget04.vue b/src/views/widgets/Widget04.vue
deleted file mode 100644
index 716612b3..00000000
--- a/src/views/widgets/Widget04.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="brand-card">
-    <div :class="'bg-' + type" class="brand-card-header">
-      <i  class="fa" :class="'fa-'+ type"></i>
-      <div class="chart-wrapper">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="brand-card-body">
-      <div>
-        <div class="text-value">{{rightHeader}}</div>
-        <div class="text-uppercase text-muted small">{{rightFooter}}</div>
-      </div>
-      <div>
-        <div class="text-value">{{leftHeader}}</div>
-        <div class="text-uppercase text-muted small">{{leftFooter}}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Widget04',
-  props: {
-    type: {
-      type: String,
-      default: 'facebook'
-    },
-    rightHeader: {
-      type: String,
-      default: 'rightHeader:string'
-    },
-    rightFooter: {
-      type: String,
-      default: 'rightFooter:string'
-    },
-    leftHeader: {
-      type: String,
-      default: 'leftHeader:string'
-    },
-    leftFooter: {
-      type: String,
-      default: 'leftFooter:string'
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget05.md b/src/views/widgets/Widget05.md
deleted file mode 100644
index 3da0dba2..00000000
--- a/src/views/widgets/Widget05.md
+++ /dev/null
@@ -1,15 +0,0 @@
-### Widget05
-
-This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
-
-Value is the procentage value of displayed progress-bar.
-
-prop | default
---- | ---
-variant  | `success`
-value | `30`
-iconClasses  |  `icon-people`
-header| `header:string`
-text   | `text:string`
-
->     <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
diff --git a/src/views/widgets/Widget05.vue b/src/views/widgets/Widget05.vue
deleted file mode 100644
index 6fa2652b..00000000
--- a/src/views/widgets/Widget05.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <b-card :class="styleClasses">
-    <div class="h1 text-muted text-right mb-4">
-      <i :class="iconClasses"></i>
-    </div>
-    <div class="h4 mb-0">{{header}}</div>
-    <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
-    <b-progress height={} :variant="variant" :value="value"
-                :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-  </b-card>
-</template>
-
-<script>
-export default {
-  name: 'Widget05',
-  data () {
-    return{
-      backgroundColor: '',
-      styleClasses: '',
-    }
-  },
-  created ()  {
-    if(this.variant.includes('background')){
-      this.backgroundColor = this.variant.replace('background-','');
-      this.styleClasses = 'text-white bg-' + this.backgroundColor
-    }
-  },
-  props: {
-    iconClasses: {
-      type: String,
-      default: 'icon-people'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-    variant: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: Number,
-      default: 25
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget06.md b/src/views/widgets/Widget06.md
deleted file mode 100644
index 1f6415d4..00000000
--- a/src/views/widgets/Widget06.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### Widget06
-
-This widget can style is defined by cardClasses. Inside component there is additional slot for chart (name="chart").
-
-prop | default
---- | ---
-cardClasses  | `''`
-header| `header:string`
-text   | `text:string`
-
->     <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
-      <b-dropdown class="float-right" variant="transparent p-0" right>
-        <template slot="button-content">
-          <i class="icon-settings"></i>
-        </template>
-        <b-dropdown-item>Action</b-dropdown-item>
-        <b-dropdown-item>Another action</b-dropdown-item>
-        <b-dropdown-item>Something else here...</b-dropdown-item>
-        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-      </b-dropdown>
-    </widget06>
diff --git a/src/views/widgets/Widget06.vue b/src/views/widgets/Widget06.vue
deleted file mode 100644
index 5ec8ef4d..00000000
--- a/src/views/widgets/Widget06.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <b-card no-body :class="cardClasses">
-    <b-card-body class="pb-0">
-      <slot name='dropdown'></slot>
-      <h4 class="mb-0">{{header}}</h4>
-      <p>{{text}}</p>
-    </b-card-body>
-    <div class="chart-wrapper">
-      <slot name='chart'></slot>
-    </div>
-  </b-card>
-</template>
-
-<script>
-export default {
-  name: 'Widget06',
-  data () {
-    return{
-      backgroundColor: '',
-    }
-  },
-  created ()  {
-  },
-  props: {
-    cardClasses: {
-      type: String,
-      default: ''
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget07.md b/src/views/widgets/Widget07.md
deleted file mode 100644
index 836b7d17..00000000
--- a/src/views/widgets/Widget07.md
+++ /dev/null
@@ -1,19 +0,0 @@
-### Widget07
-
-This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
-
-prop | default
---- | ---
-cardClasses | `'bg-primary'`
-rightHeader | `'rightHeader:string'`
-rightFooter | `'rightFooter:string'`
-leftHeader  | `'leftHeader:string'`
-leftFooter  | `'leftFooter:string'`
-
->       <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
-                leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-        <line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
-        <bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
-      </widget07>
diff --git a/src/views/widgets/Widget07.vue b/src/views/widgets/Widget07.vue
deleted file mode 100644
index 52864d04..00000000
--- a/src/views/widgets/Widget07.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="card">
-    <div :class="cardClasses" class="card-header">
-      <div class="font-weight-bold">
-        <span>{{rightHeader}}</span>
-        <span class="float-right">{{leftHeader}}</span>
-      </div>
-      <div>
-        <span>
-          <small>{{rightFooter}}</small>
-        </span>
-        <span class="float-right">
-          <small>{{leftFooter}}</small>
-        </span>
-      </div>
-      <div class="chart-wrapper">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Widget07',
-  props: {
-    cardClasses: {
-      type: String,
-      default: 'bg-primary'
-    },
-    rightHeader: {
-      type: String,
-      default: 'rightHeader:string'
-    },
-    rightFooter: {
-      type: String,
-      default: 'rightFooter:string'
-    },
-    leftHeader: {
-      type: String,
-      default: 'leftHeader:string'
-    },
-    leftFooter: {
-      type: String,
-      default: 'leftFooter:string'
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget08.md b/src/views/widgets/Widget08.md
deleted file mode 100644
index 85c222c3..00000000
--- a/src/views/widgets/Widget08.md
+++ /dev/null
@@ -1,19 +0,0 @@
-### Widget08
-
-This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
-
-prop | default
---- | ---
-cardClasses | `'bg-primary'`
-rightHeader | `'rightHeader:string'`
-rightFooter | `'rightFooter:string'`
-leftHeader  | `'leftHeader:string'`
-leftFooter  | `'leftFooter:string'`
-
->       <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
-                leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-        <line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
-        <bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
-      </widget07>
diff --git a/src/views/widgets/Widget08.vue b/src/views/widgets/Widget08.vue
deleted file mode 100644
index 16f965de..00000000
--- a/src/views/widgets/Widget08.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="card">
-    <div class="card-body text-center">
-      <div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
-        <div class="h2 py-3">{{text}}</div>
-          <div class="chart-wrapper">
-            <slot></slot>
-          </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Widget08',
-  props: {
-    cardClasses: {
-      type: String,
-      default: 'bg-primary'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-  }
-}
-</script>
diff --git a/tests/unit/Plugin.spec.js b/tests/unit/Plugin.spec.js
new file mode 100644
index 00000000..6af2a120
--- /dev/null
+++ b/tests/unit/Plugin.spec.js
@@ -0,0 +1,38 @@
+// import Vue from 'vue'
+import CoreuiVueModule from '@coreui/vue'
+// Vue.use(CoreuiVueModule)
+
+test("Should register all components when installed", () => {
+
+  const component = jest.fn();
+  const Vue = { component };
+
+  CoreuiVueModule.install(Vue);
+
+  // Test if a particular component was registered
+  expect(component).toBeCalledWith("Aside", expect.any(Object));
+  expect(component).toBeCalledWith("AsideToggler", expect.any(Object));
+  expect(component).toBeCalledWith("Breadcrumb", expect.any(Object));
+  expect(component).toBeCalledWith("Callout", expect.any(Object));
+  expect(component).toBeCalledWith("Footer", expect.any(Object));
+  expect(component).toBeCalledWith("Header", expect.any(Object));
+  expect(component).toBeCalledWith("HeaderDropdown", expect.any(Object));
+  expect(component).toBeCalledWith("Sidebar", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarFooter", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarForm", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarHeader", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarMinimizer", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNav", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavDivider", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavItem", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavDropdown", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavLabel", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavLink", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavTitle", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarToggler", expect.any(Object));
+  expect(component).toBeCalledWith("Switch", expect.any(Object));
+
+  // Test how many times component got registered
+  // const totalOfComponents = 21;
+  // expect(component).toHaveBeenCalledTimes(totalOfComponents);
+});
diff --git a/tests/unit/widgets/Widget01.spec.js b/tests/unit/widgets/Widget01.spec.js
deleted file mode 100644
index a7033491..00000000
--- a/tests/unit/widgets/Widget01.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget01'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget01'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('has a created hook', () => {
-    expect(typeof Component.data).toMatch('function')
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props and data when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.backgroundColor).toBe('')
-    expect(vm.styleClasses).toBe('')
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.variant).toBe('')
-    expect(vm.footer).toBe('footer:string')
-    expect(vm.value == 25).toBe(true)
-  })
-  it('correctly sets variant when background is not white', () => {
-    const Constructor = Vue.extend(Component)
-    const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
-    expect(vm.backgroundColor).toBe('success')
-    expect(vm.styleClasses).toBe('text-white bg-success')
-  })
-})
diff --git a/tests/unit/widgets/Widget02.spec.js b/tests/unit/widgets/Widget02.spec.js
deleted file mode 100644
index 39874048..00000000
--- a/tests/unit/widgets/Widget02.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget02'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget02'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.link).toBe('#')
-    expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
-    expect(vm.showLink).toBe(false)
-  })
-})
diff --git a/tests/unit/widgets/Widget03.spec.js b/tests/unit/widgets/Widget03.spec.js
deleted file mode 100644
index 6f79ca39..00000000
--- a/tests/unit/widgets/Widget03.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget03'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget03'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
-  })
-})
diff --git a/tests/unit/widgets/Widget04.spec.js b/tests/unit/widgets/Widget04.spec.js
deleted file mode 100644
index 03abe542..00000000
--- a/tests/unit/widgets/Widget04.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget04'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget04'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props and data when created', () => {
-    expect(wrapper.props().rightHeader).toBe('rightHeader:string')
-    expect(wrapper.props().rightFooter).toBe('rightFooter:string')
-    expect(wrapper.props().leftHeader).toBe('leftHeader:string')
-    expect(wrapper.props().leftFooter).toBe('leftFooter:string')
-  })
-})
diff --git a/tests/unit/widgets/Widget05.spec.js b/tests/unit/widgets/Widget05.spec.js
deleted file mode 100644
index 3d163d9b..00000000
--- a/tests/unit/widgets/Widget05.spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget05'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget05'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('has a created hook', () => {
-    expect(typeof Component.data).toMatch('function')
-  })
-  it('correctly sets default props and data when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.backgroundColor).toBe('')
-    expect(vm.styleClasses).toBe('')
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.variant).toBe('')
-    expect(vm.value == 25).toBe(true)
-  })
-  it('correctly sets variant when background is not white', () => {
-    const Constructor = Vue.extend(Component)
-    const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
-    expect(vm.backgroundColor).toBe('success')
-    expect(vm.styleClasses).toBe('text-white bg-success')
-  })
-})
diff --git a/tests/unit/widgets/Widget06.spec.js b/tests/unit/widgets/Widget06.spec.js
deleted file mode 100644
index 52d6b03a..00000000
--- a/tests/unit/widgets/Widget06.spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget06'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget06'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props and data when created', () => {
-    expect(wrapper.props().cardClasses).toBe('')
-    expect(wrapper.props().header).toBe('header:string')
-    expect(wrapper.props().text).toBe('text:string')
-  })
-})
diff --git a/tests/unit/widgets/Widget07.spec.js b/tests/unit/widgets/Widget07.spec.js
deleted file mode 100644
index d430d0c6..00000000
--- a/tests/unit/widgets/Widget07.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget07'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget07'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-})
diff --git a/tests/unit/widgets/Widget08.spec.js b/tests/unit/widgets/Widget08.spec.js
deleted file mode 100644
index 4796706a..00000000
--- a/tests/unit/widgets/Widget08.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget08'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget08'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-})