diff --git a/babel.config.js b/babel.config.js
index 9fb4a004..23ecf122 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,12 +1,7 @@
 module.exports = {
   presets: [
-    ['@vue/app', {
-      polyfills: [
-        'es6.promise', // already default included now
-        'es6.array.iterator', // already default included now
-        'es6.symbol',
-        'es6.object.assign'
-      ]
+    [ "@vue/app", {
+      "useBuiltIns": 'entry'
     }]
   ]
 }
diff --git a/package.json b/package.json
index 8e560c5c..16c83d3f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-alpha",
+  "version": "3.0.0-alpha.1",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e"
@@ -19,10 +19,10 @@
     "@coreui/icons": "0.3.0",
     "@coreui/vue": "github:coreui/coreui-vue#v3-bridge-alpha",
     "bootstrap": "^4.1.3",
-    "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.11.1",
+    "current-script-polyfill": "^1.0.0",
     "element-resize-detector": "^1.2.0",
     "flag-icon-css": "^3.2.0",
     "font-awesome": "^4.7.0",
@@ -41,7 +41,10 @@
     "@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-core": "^6.26.3",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-module-resolver": "^3.1.2",
+    "babel-preset-vue-app": "^2.0.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index c65a18eb..e8656d77 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -32,7 +32,13 @@
       <CSidebar fixed>
         <CSidebarHeader/>
         <CSidebarForm/>
-        <CSidebarNav :navItems="computedNav"></CSidebarNav>
+        <!-- <CSidebarNav :navItems="computedNav"/> -->
+        <nav class="sidebar-nav">
+          <VuePerfectScrollbar class="scroll-area" :settings="psSettings"
+                               @ps-scroll-y="scrollHandle">
+              <CSidebarNavItems :items="computedNav"/>
+          </VuePerfectScrollbar>
+        </nav>
         <CSidebarFooter/>
         <CSidebarMinimizer/>
       </CSidebar>
@@ -65,12 +71,14 @@
 import nav from '@/_nav'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 
 export default {
   name: 'full',
   components: {
     DefaultAside,
     DefaultHeaderDropdownAccnt,
+    VuePerfectScrollbar
   },
   data () {
     return {
@@ -80,7 +88,31 @@ export default {
   computed: {
     computedNav () {
       return this.nav.filter((item) => item.name !== 'Dashboard')
+    },
+    psSettings: () => {
+      // ToDo: find better rtl fix
+      return {
+        maxScrollbarLength: 200,
+        minScrollbarLength: 40,
+        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
+        wheelPropagation: false,
+        interceptRailY: styles => ({ ...styles, height: 0 })
+      }
+    }
+  },
+  methods: {
+    /*eslint no-unused-vars: ["error", { "argsIgnorePattern": "evt" }]*/
+    scrollHandle (evt) {
+      // console.log(evt)
     }
   }
 }
 </script>
+
+<style scoped lang="css">
+  .scroll-area {
+    position: absolute;
+    height: 100%;
+    margin: auto;
+  }
+</style>
diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index f269bf53..aefc2c8f 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -1,44 +1,64 @@
 <template>
-  <CDropdown right
-             nav
-             no-caret
-             no-popper
-             addMenuClasses="dropdown-menu-right"
+  <CDropdown
+    right
+    nav
+    noCaret
+    noPopper
+    addMenuClasses="dropdown-menu-right"
   >
-    <img slot="buttonContent"
-         src="img/avatars/6.jpg"
-         class="img-avatar"
-         alt="admin@bootstrapmaster.com"
-    />
-    <CDropdownHeader tag="div"  class="text-center"><strong>Account</strong></CDropdownHeader>
-    <CDropdownItem><i class="fa fa-bell-o" /> Updates
+    <template #buttonContent>
+      <img
+        src="img/avatars/6.jpg"
+        class="img-avatar"
+        alt="admin@bootstrapmaster.com"
+      />
+    </template>
+    <CDropdownHeader tag="div" class="text-center">
+      <strong>Account</strong>
+    </CDropdownHeader>
+    <CDropdownItem>
+      <i class="fa fa-bell-o" /> Updates
       <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-envelope-o" /> Messages
+    <CDropdownItem>
+      <i class="fa fa-envelope-o" /> Messages
       <CBadge variant="success">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-tasks" /> Tasks
+    <CDropdownItem>
+      <i class="fa fa-tasks" /> Tasks
       <CBadge variant="danger">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-comments" /> Comments
+    <CDropdownItem>
+      <i class="fa fa-comments" /> Comments
       <CBadge variant="warning">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
       tag="div"
-      class="text-center">
+      class="text-center"
+    >
       <strong>Settings</strong>
     </CDropdownHeader>
-    <CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
-    <CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
-    <CDropdownItem><i class="fa fa-usd" /> Payments
+    <CDropdownItem>
+      <i class="fa fa-user" /> Profile
+    </CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-wrench" /> Settings
+    </CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-usd" /> Payments
       <CBadge variant="secondary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-file" /> Projects
+    <CDropdownItem>
+      <i class="fa fa-file" /> Projects
       <CBadge variant="primary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
-    <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
-    <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-shield" /> Lock Account
+    </CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-lock" /> Logout
+    </CDropdownItem>
   </CDropdown>
 </template>
 
diff --git a/src/main.js b/src/main.js
index e6ee229d..8d413b08 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,21 +1,21 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+
 import 'core-js/es6/promise'
 import 'core-js/es6/string'
 import 'core-js/es7/array'
+import '@babel/polyfill'
 
 // import cssVars from 'css-vars-ponyfill'
 import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
 //Import built package
-import CoreuiVue from '@coreui/vue/src'
+import CoreuiVue from '@coreui/vue'
 
 Vue.config.performance = true
 // todo
 // cssVars()
-Vue.use(BootstrapVue)
 Vue.use(CoreuiVue)
 
 
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index 71d35b25..4bc6aacd 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,34 +1,34 @@
 <template>
   <div class="animated fadeIn">
     <CCardGroup columns class="card-columns">
-      <CCard header="Line Chart">
+      <CCard header="Line Chart" bodyWrapper>
         <LineExample/>
       </CCard>
-      <CCard header="Bar Chart">
+      <CCard header="Bar Chart" bodyWrapper>
         <BarExample/>
       </CCard>
-      <CCard header="Doughnut Chart">
+      <CCard header="Doughnut Chart" bodyWrapper>
         <DoughnutExample/>
       </CCard>
-      <CCard header="Radar Chart">
+      <CCard header="Radar Chart" bodyWrapper>
         <RadarExample/>
       </CCard>
-      <CCard header="Pie Chart">
+      <CCard header="Pie Chart" bodyWrapper>
         <PieExample/>
       </CCard>
-      <CCard header="Polar Area Chart">
+      <CCard header="Polar Area Chart" bodyWrapper>
         <PolarAreaExample/>
       </CCard>
-      <CCard header="Simple line chart">
+      <CCard header="Simple line chart" bodyWrapper>
         <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                      label='Sales' borderColor='success'/>
       </CCard>
-      <CCard header="Simple pointed chart">
+      <CCard header="Simple pointed chart" bodyWrapper>
         <CSimplePointedChart 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'/>
       </CCard>
-      <CCard header="Simple bar chart">
+      <CCard header="Simple bar chart" bodyWrapper>
         <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                     label='Sales' color='danger'/>
       </CCard>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 2b72b23e..c8073b2f 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -7,10 +7,10 @@
             <CDropdown class="float-right"
                        variant="transparent p-0"
                        right
-                       button-content="<i class='icon-settings'></i>"
+                       buttonContent="<i class='icon-settings'></i>"
                        tag="div"
             >
-              <!-- <template slot="button-content">
+              <!-- <template slot="buttonContent">
 
               </template> -->
               <CDropdownItem>Action</CDropdownItem>
@@ -31,10 +31,10 @@
                      variant="transparent p-0"
                      right
                      no-caret
-                     button-content="<i class='icon-location-pin'></i>"
+                     buttonContent="<i class='icon-location-pin'></i>"
                      tag="div"
           >
-            <!-- <i slot="button-content"
+            <!-- <i slot="buttonContent"
                class="icon-location-pin"
             ></i> -->
             <CDropdownItem>Action</CDropdownItem>
@@ -58,7 +58,7 @@
             <CDropdown class="float-right"
                        variant="transparent p-0"
                        right
-                       button-content="<i class='icon-settings'></i>"
+                       buttonContent="<i class='icon-settings'></i>"
                        tag="div"
              >
 
@@ -80,9 +80,9 @@
             <CDropdown class="float-right"
                        variant="transparent p-0"
                        right
-                       button-content="<i class='icon-settings'></i>"
+                       buttonContent="<i class='icon-settings'></i>"
             >
-              <!-- <template slot="button-content">
+              <!-- <template slot="buttonContent">
                 <i class="icon-settings"></i>
               </template> -->
               <CDropdownItem>Action</CDropdownItem>
@@ -98,28 +98,30 @@
     </CRow>
 
     <CCard>
-      <CRow>
-        <CCol sm="5">
-          <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-          <div class="small text-muted">November 2017</div>
-        </CCol>
-        <CCol sm="7" class="d-none d-md-block">
-          <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
-          <CButtonGroup class="float-right mr-3">
-            <CButton variant="outline-secondary"
-                     v-for="(value, key) in ['Day', 'Month', 'Year']"
-                     :key="key"
-                     class="mx-0"
-                     :pressed="value === selected ? true : false"
-                     @click="selected = value"
-            >
-              {{value}}
-            </CButton>
-          </CButtonGroup>
-        </CCol>
-      </CRow>
-      <MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
-      <CCardFooter slot="footer">
+      <CCardBody>
+        <CRow>
+          <CCol sm="5">
+            <h4 id="traffic" class="card-title mb-0">Traffic</h4>
+            <div class="small text-muted">November 2017</div>
+          </CCol>
+          <CCol sm="7" class="d-none d-md-block">
+            <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
+            <CButtonGroup class="float-right mr-3">
+              <CButton variant="outline-secondary"
+                       v-for="(value, key) in ['Day', 'Month', 'Year']"
+                       :key="key"
+                       class="mx-0"
+                       :pressed="value === selected ? true : false"
+                       @click="selected = value"
+              >
+                {{value}}
+              </CButton>
+            </CButtonGroup>
+          </CCol>
+        </CRow>
+        <MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
+      </CCardBody>
+      <CCardFooter>
         <CRow class="text-center">
           <CCol md sm="12" class="mb-sm-2 mb-0">
             <div class="text-muted">Visits</div>
@@ -181,28 +183,28 @@
     </CRow><!--/.row-->
     <CRow>
       <CCol md="12">
-        <CCard header="Traffic &amp; Sales">
+        <CCard header="Traffic &amp; Sales" bodyWrapper>
           <CRow>
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
-                  <Callout variant="info">
+                  <CCallout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
                     <div :style="{ top: '-10px'}">
                       <!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
                       <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
                 <CCol sm="6">
-                  <Callout variant="danger">
+                  <CCallout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
                     <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
               </CRow>
               <hr class="mt-0">
@@ -296,22 +298,22 @@
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
-                  <Callout variant="warning">
+                  <CCallout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
                     <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
                 <CCol sm="6">
-                  <Callout variant="success">
+                  <CCallout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
                     <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
               </CRow>
               <hr class="mt-0">
diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index 9ffb2531..c9f9c753 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -203,8 +203,8 @@
       <CCol sm="6" lg="3">
         <CWidget06 header="9.823" text="Members online">
           <template slot='dropdown'>
-            <CDropdownclass="float-right" variant="transparent p-0" right>
-              <template slot="button-content">
+            <CDropdown class="float-right" variant="transparent p-0" right>
+              <template slot="buttonContent">
                 <i class="icon-settings"></i>
               </template>
               <CDropdownItem>Action</CDropdownItem>
@@ -220,8 +220,8 @@
       </CCol>
       <CCol sm="6" lg="3">
         <CWidget06 variant="info" header="9.823" text="Members online">
-          <CDropdownslot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
-            <i slot="button-content"
+          <CDropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
+            <i slot="buttonContent"
                class="icon-location-pin"
             ></i>
             <CDropdownItem>Action</CDropdownItem>
@@ -242,8 +242,8 @@
       <CCol sm="6" lg="3">
         <CWidget06 variant="warning" header="9.823" text="Members online">
           <template slot='dropdown'>
-            <CDropdownclass="float-right" variant="transparent p-0" right>
-              <template slot="button-content">
+            <CDropdown class="float-right" variant="transparent p-0" right>
+              <template slot="buttonContent">
                 <i class="icon-settings"></i>
               </template>
               <CDropdownItem>Action</CDropdownItem>
@@ -261,8 +261,8 @@
       <CCol sm="6" lg="3">
         <CWidget06 variant="danger" header="9.823" text="Members online">
           <template slot="dropdown">
-            <CDropdownclass="float-right" variant="transparent p-0" right>
-              <template slot="button-content">
+            <CDropdown class="float-right" variant="transparent p-0" right>
+              <template slot="buttonContent">
                 <i class="icon-settings"></i>
               </template>
               <CDropdownItem>Action</CDropdownItem>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 964c8a87..13c6e02f 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -4,17 +4,19 @@
       <CRow>
         <CCol cols>
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
-              <div class="card-header-actions">
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
-            <CBreadcrumb :items="items2"/>
-            <CBreadcrumb :items="items3"/>
+            <CCardBody>
+              <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
+              <CBreadcrumb :items="items2"/>
+              <CBreadcrumb :items="items3"/>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 137eb107..8181fce9 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -2,80 +2,93 @@
   <div class="animated fadeIn">
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card title">
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </CCard>
+        <CCard header="Card title" :body="loremIpsum"/>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard footer="Card Footer">
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </CCard>
+        <CCard footer="Card Footer" :body="loremIpsum" />
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="<i class='fa fa-check'></i> Card with icon">
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </CCard>
+        <CCard
+          header="<i class='fa fa-check'></i> Card with icon"
+          :body="loremIpsum"
+        />
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Card with switch
-            <label class="switch switch-sm switch-text switch-info float-right mb-0">
-              <input type="checkbox" class="switch-input">
-              <span class="switch-label" data-on="On" data-off="Off"></span>
-              <span class="switch-handle"></span>
-            </label>
+            <CSwitch
+              class="float-right"
+              size="sm"
+              shape="pill"
+              variant="info"
+              dataOn="On"
+              dataOff="Off"
+              :checked="true"
+            />
           </CCardHeader>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          <CCardBody>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Card with label
             <CBadge variant="success" class="float-right">Success</CBadge>
           </CCardHeader>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          <CCardBody>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Card with label
             <CBadge pill variant="danger" class="float-right">42</CBadge>
           </CCardHeader>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          <CCardBody :body="loremIpsum"/>
         </CCard>
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card outline primary" border-variant="primary">
+        <CCard
+          header="Card outline primary"
+          borderVariant="primary"
+          :body="loremIpsum"
+        />
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard
+          header="Card outline secondary"
+          borderVariant="secondary"
+          :body="loremIpsum"
+        />
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard
+          header="Card outline success"
+          borderVariant="success"
+          bodyWrapper
+        >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline secondary" border-variant="secondary">
+        <CCard header="Card outline info" borderVariant="info" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline success" border-variant="success">
+        <CCard header="Card outline warning" borderVariant="warning" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline info" border-variant="info">
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </CCard>
-      </CCol>
-      <CCol sm="6" md="4">
-        <CCard header="Card outline warning" border-variant="warning">
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </CCard>
-      </CCol>
-      <CCol sm="6" md="4">
-        <CCard header="Card outline danger" border-variant="danger">
+        <CCard header="Card outline danger" borderVariant="danger" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
@@ -83,22 +96,22 @@
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-primary" header="Card with primary accent">
+        <CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-secondary" header="Card with secondary accent">
+        <CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-success" header="Card with success accent">
+        <CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-info" header="Card with info accent">
+        <CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
@@ -108,14 +121,14 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-danger" header="Card with danger accent">
+        <CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="bg-primary text-center">
+        <CCard class="bg-primary text-center" bodyWrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -125,7 +138,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-success text-center">
+        <CCard class="bg-success text-center" bodyWrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -135,7 +148,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-info text-center">
+        <CCard class="bg-info text-center" bodyWrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -145,7 +158,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-warning text-center">
+        <CCard class="bg-warning text-center" bodyWrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -155,7 +168,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-danger text-center">
+        <CCard class="bg-danger text-center" bodyWrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -165,7 +178,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-secondary text-center">
+        <CCard class="bg-secondary text-center" bodyWrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -177,34 +190,34 @@
     </CRow><!--/.row-->
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-primary">
+        <CCard header="Card title" class="bg-primary" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-success">
+        <CCard header="Card title" class="bg-success" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-info">
+        <CCard header="Card title" class="bg-info" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-warning">
+        <CCard header="Card title" class="bg-warning" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-danger">
+        <CCard header="Card title" class="bg-danger" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" no-body v-if="show" >
-            <CCardHeader slot="header">
+          <CCard class="bg-secondary" v-if="show" >
+            <CCardHeader>
               Card with header actions
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting" >
@@ -218,7 +231,7 @@
                 </CLink>
               </div>
             </CCardHeader>
-            <CCollapse slot="body" :show="isCollapsed" :duration="400">
+            <CCollapse :show="isCollapsed" :duration="400">
               <CCardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
               </CCardBody>
@@ -229,7 +242,7 @@
     </CRow>
     <!-- <CRow>
       <CCol sm="6" md="4">
-        <CCard noWrapper>
+        <CCard >
           <CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
           <CCardHeader header="Card title"/>
           <CCardBody style="max-height:200px;overflow-y:auto">
@@ -253,7 +266,8 @@ export default {
   data: function () {
     return {
       show: true,
-      isCollapsed: true
+      isCollapsed: true,
+      loremIpsum: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
     }
   }
 }
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 12489985..2a4b8199 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -4,10 +4,10 @@
       <CRow>
         <CCol md="12" lg="9" >
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Carousel</strong>
-              <div class="card-header-actions">
+              <!-- <div class="card-header-actions">
                 <a
                   href="https://bootstrap-vue.js.org/docs/components/carousel"
                   class="card-header-action"
@@ -16,22 +16,24 @@
                 >
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <CCarousel>
-              <CCarouselItem
-                caption="First Slide"
-                imgSrc="https://lorempixel.com/1024/480/technics/2/"
-                text="Nulla vitae elit libero, a pharetra augue mollis interdum."
-              />
-              <CCarouselItem
-                active
-                imgSrc="https://lorempixel.com/1024/480/technics/4/"
-              />
-              <CCarouselItem
-                imgSrc="https://lorempixel.com/1024/480/technics/8/"
-              />
-            </CCarousel>
+            <CCardBody>
+              <CCarousel>
+                <CCarouselItem
+                  caption="First Slide"
+                  imgSrc="https://lorempixel.com/1024/480/technics/2/"
+                  text="Nulla vitae elit libero, a pharetra augue mollis interdum."
+                />
+                <CCarouselItem
+                  active
+                  imgSrc="https://lorempixel.com/1024/480/technics/4/"
+                />
+                <CCarouselItem
+                  imgSrc="https://lorempixel.com/1024/480/technics/8/"
+                />
+              </CCarousel>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 7de09f2d..540d484b 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -4,41 +4,43 @@
       <CRow>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
-              <div class="Fcard-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Collapse </strong>
+              <!-- <div class="card-header-actions">
+                <CLink class="card-header-action">
                   <small class="text-muted">docs</small>
-                </a>
-              </div>
+                </CLink>
+              </div> -->
             </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
-              <CCollapse id="collapse1" class="mt-2">
-                <CCard>
+            <CCardBody>
+              <CButton id="collapse1" variant="primary">
+                Toggle Collapse
+              </CButton>
+              <CCollapse toggler="collapse1" class="mt-2">
+                <CCard bodyWrapper>
                   <p class="card-text">Collapse contents Here</p>
-                  <CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
-                  <CCollapse id=collapse1_inner class="mt-2">
+                  <CButton id="collapse2" size="sm">
+                    Toggle Inner Collapse
+                  </CButton>
+                  <CCollapse toggler="collapse2" class="mt-2">
                     <CCard>Hello!</CCard>
                   </CCollapse>
                 </CCard>
               </CCollapse>
-            </div>
+            </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <!-- <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
             </CCardHeader>
             <div>
-              <!-- Using modifiers -->
               <CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
 
-              <!-- Using value -->
               <CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
 
-              <!-- element to collapse -->
               <CCollapse id="collapse2">
                 <CCard>
                   I am collapsible content!
@@ -51,7 +53,7 @@
       <CRow>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
             </CCardHeader>
             <div>
@@ -66,7 +68,7 @@
         </CCol>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
             </CCardHeader>
             <div>
@@ -88,14 +90,12 @@
       <CRow>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
             </CCardHeader>
             <div>
-              <!-- Single button triggers two CCollapse components -->
               <CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
 
-              <!-- elements to collapse -->
               <CCollapse id="collapseA" class="mt-2">
                 <CCard>
                   I am collapsable content A!
@@ -111,16 +111,16 @@
         </CCol>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
             </CCardHeader>
             <div role="tablist">
-              <CCard noWrapper class="mb-1">
-                <CCardHeader slot="header"  class="p-1" role="tab">
+              <CCard  class="mb-1">
+                <CCardHeader  class="p-1" role="tab">
                   <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
                 </CCardHeader>
                 <CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
-                  <CCardBody slot="body">
+                  <CCardBody>
                     <p class="card-text">
                       I start opened because <code>visible</code> is <code>true</code>
                     </p>
@@ -130,24 +130,24 @@
                   </CCardBody>
                 </CCollapse>
               </CCard>
-              <CCard noWrapper class="mb-1">
-                <CCardHeader slot="header"  class="p-1" role="tab">
+              <CCard  class="mb-1">
+                <CCardHeader  class="p-1" role="tab">
                   <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
                 </CCardHeader>
                 <CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
-                  <CCardBody slot="body">
+                  <CCardBody>
                     <p class="card-text">
                       {{ text }}
                     </p>
                   </CCardBody>
                 </CCollapse>
               </CCard>
-              <CCard noWrapper class="mb-1">
-                <CCardHeader slot="header"  class="p-1" role="tab">
+              <CCard  class="mb-1">
+                <CCardHeader  class="p-1" role="tab">
                   <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
                 </CCardHeader>
                 <CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
-                  <CCardBody slot="body">
+                  <CCardBody>
                     <p class="card-text">
                       {{ text }}
                     </p>
@@ -156,7 +156,7 @@
               </CCard>
             </div>
           </CCard>
-        </CCol>
+        </CCol> -->
       </CRow>
     </div>
   </div>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 97ccf009..fa7884e4 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -3,226 +3,234 @@
     <CRow>
       <CCol sm="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Credit Card </strong> <small>Form</small>
           </CCardHeader>
-          <CRow>
-            <CCol sm="12">
-              <CFormInput
-                label="Name"
-                placeholder="Enter your name"
-              />
-            </CCol>
-          </CRow>
-          <CRow>
-            <CCol sm="12">
-              <CFormInput
-                label="Credit Card Number"
-                placeholder="0000 0000 0000 0000"
-              />
-            </CCol>
-          </CRow>
-          <CRow>
-            <CCol sm="4">
-              <CFormSelect
-                label="Month"
-                :options="[1,2,3,4,5,6,7,8,9,10,11,12]"
-              />
-            </CCol>
-            <CCol sm="4">
-              <CFormSelect
-                label="Year"
-                :options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
-              />
-            </CCol>
-            <CCol sm="4">
-              <CFormInput
-                label="CVV/CVC"
-                placeholder="123"
-              />
-            </CCol>
-          </CRow>
+          <CCardBody>
+            <CRow>
+              <CCol sm="12">
+                <CFormInput
+                  label="Name"
+                  placeholder="Enter your name"
+                />
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol sm="12">
+                <CFormInput
+                  label="Credit Card Number"
+                  placeholder="0000 0000 0000 0000"
+                />
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol sm="4">
+                <CFormSelect
+                  label="Month"
+                  :options="[1,2,3,4,5,6,7,8,9,10,11,12]"
+                />
+              </CCol>
+              <CCol sm="4">
+                <CFormSelect
+                  label="Year"
+                  :options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
+                />
+              </CCol>
+              <CCol sm="4">
+                <CFormInput
+                  label="CVV/CVC"
+                  placeholder="123"
+                />
+              </CCol>
+            </CRow>
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Company </strong><small>Form</small>
           </CCardHeader>
-          <CFormInput
-            label="Company"
-            placeholder="Enter your company name"
-          />
-          <CFormInput
-            label="VAT"
-            placeholder="PL1234567890"
-          />
-          <CFormInput
-            label="Street"
-            placeholder="Enter street name"
-          />
-          <CRow>
-            <CCol sm="8">
-              <CFormInput
-                label="City"
-                placeholder="Enter your city"
-              />
-            </CCol>
-            <CCol sm="4">
-              <CFormInput
-                label="Postal code"
-                placeholder="Postal code"
-              />
-            </CCol>
-          </CRow>
-          <CFormInput
-            label="Country"
-            placeholder="Country name"
-          />
+          <CCardBody>
+            <CFormInput
+              label="Company"
+              placeholder="Enter your company name"
+            />
+            <CFormInput
+              label="VAT"
+              placeholder="PL1234567890"
+            />
+            <CFormInput
+              label="Street"
+              placeholder="Enter street name"
+            />
+            <CRow>
+              <CCol sm="8">
+                <CFormInput
+                  label="City"
+                  placeholder="Enter your city"
+                />
+              </CCol>
+              <CCol sm="4">
+                <CFormInput
+                  label="Postal code"
+                  placeholder="Postal code"
+                />
+              </CCol>
+            </CRow>
+            <CFormInput
+              label="Country"
+              placeholder="Country name"
+            />
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Basic Form</strong> Elements
           </CCardHeader>
-          <CForm>
-            <CFormInput
-              description="Let us know your full name."
-              label="Enter your name"
-              horizontal
-              autocomplete="name"
-            />
-            <CFormInput
-              label="Static"
-              value="Username"
-              horizontal
-              plaintext
-            />
-            <CFormInput
-              label="Text input"
-              description="This is a help text"
-              placeholder="Text"
-              horizontal
-            />
-            <CFormInput
-              label="Date"
-              type="date"
-              horizontal
-            />
-            <CFormInput
-              label="Email input"
-              description="Please enter your email"
-              placeholder="Enter your email"
-              type="email"
-              horizontal
-              autocomplete="email"
-            />
-            <CFormInput
-              label="Password Input"
-              description="Please enter a complex password"
-              placeholder="Enter your password"
-              type="password"
-              horizontal
-              autocomplete="current-password"
-            />
-            <CFormInput
-              label="Disabled Input"
-              placeholder="Disabled"
-              horizontal
-              disabled
-            />
-            <CFormInput
-              label="Textarea"
-              placeholder="Content..."
-              horizontal
-              textarea="true"
-              rows="9"
-            />
-            <CFormSelect
-              label="Select"
-              horizontal
-              :options="options"
-              placeholder="Please select"
-            />
-            <CFormSelect
-              label="Select"
-              size="lg"
-              horizontal
-              :options="options"
-              placeholder="Please select"
-            />
-            <CFormSelect
-              label="Select"
-              size="sm"
-              horizontal
-              :options="options"
-              placeholder="Please select"
-            />
-            <CFormSelect
-              label="Select"
-              horizontal
-              :options="options"
-              placeholder="Please select"
-              disabled
-            />
-            <template v-for="(name, key) in checkboxNames">
-              <div class="form-row form-group" :key="name">
-                <CCol sm="3">
-                  {{name}}
-                </CCol>
-                <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
-                  <CFormCheckbox
-                    v-for="option in options"
-                    :key="option"
-                    :label="option"
-                    :type="[0,1,4,5].includes(key) ? 'radio' : 'checkbox'"
-                    :value="option"
-                    :custom="key > 3"
-                    :name="`Option 1${key}`"
-                    :checked="[0,1,4,5].includes(key) ?
-                      `Option 1` : Math.random() > 0.6"
-                    :class="key % 2 === 1 ? 'form-check-inline' : ''"
-                  />
-                </CCol>
-              </div>
-            </template>
-            <CFormFile
-              label="File input"
-              horizontal
-            />
-            <CFormFile
-              label="Multiple file input"
-              horizontal
-              multiple
-            />
-          </CForm>
-          <CCardFooter slot="footer">
+          <CCardBody>
+            <CForm>
+              <CFormInput
+                description="Let us know your full name."
+                label="Enter your name"
+                horizontal
+                autocomplete="name"
+              />
+              <CFormInput
+                label="Static"
+                value="Username"
+                horizontal
+                plaintext
+              />
+              <CFormInput
+                label="Text input"
+                description="This is a help text"
+                placeholder="Text"
+                horizontal
+              />
+              <CFormInput
+                label="Date"
+                type="date"
+                horizontal
+              />
+              <CFormInput
+                label="Email input"
+                description="Please enter your email"
+                placeholder="Enter your email"
+                type="email"
+                horizontal
+                autocomplete="email"
+              />
+              <CFormInput
+                label="Password Input"
+                description="Please enter a complex password"
+                placeholder="Enter your password"
+                type="password"
+                horizontal
+                autocomplete="current-password"
+              />
+              <CFormInput
+                label="Disabled Input"
+                placeholder="Disabled"
+                horizontal
+                disabled
+              />
+              <CFormInput
+                label="Textarea"
+                placeholder="Content..."
+                horizontal
+                textarea="true"
+                rows="9"
+              />
+              <CFormSelect
+                label="Select"
+                horizontal
+                :options="options"
+                placeholder="Please select"
+              />
+              <CFormSelect
+                label="Select"
+                size="lg"
+                horizontal
+                :options="options"
+                placeholder="Please select"
+              />
+              <CFormSelect
+                label="Select"
+                size="sm"
+                horizontal
+                :options="options"
+                placeholder="Please select"
+              />
+              <CFormSelect
+                label="Select"
+                horizontal
+                :options="options"
+                placeholder="Please select"
+                disabled
+              />
+              <template v-for="(name, key) in checkboxNames">
+                <div class="form-row form-group" :key="name">
+                  <CCol sm="3">
+                    {{name}}
+                  </CCol>
+                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
+                    <CFormCheckbox
+                      v-for="option in options"
+                      :key="option"
+                      :label="option"
+                      :type="[0,1,4,5].includes(key) ? 'radio' : 'checkbox'"
+                      :value="option"
+                      :custom="key > 3"
+                      :name="`Option 1${key}`"
+                      :checked="[0,1,4,5].includes(key) ?
+                        `Option 1` : Math.random() > 0.6"
+                      :class="key % 2 === 1 ? 'form-check-inline' : ''"
+                    />
+                  </CCol>
+                </div>
+              </template>
+              <CFormFile
+                label="File input"
+                horizontal
+              />
+              <CFormFile
+                label="Multiple file input"
+                horizontal
+                multiple
+              />
+            </CForm>
+          </CCardBody>
+          <CCardFooter>
             <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
             <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Inline</strong> Form
           </CCardHeader>
 
-          <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
-          <CForm inline>
-            <CFormInput
-              class="mr-2"
-              label="<small>Name:&nbsp;</small>"
-              placeholder="Jane Doe"
-            />
-            <CFormInput
-              label="<small>Email:&nbsp;</small>"
-              placeholder="jane.doe@example.com"
-              autocomplete="email"
-            />
-          </CForm>
-          <CCardFooter slot="footer">
+          <CCardBody>
+            <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
+            <CForm inline>
+              <CFormInput
+                class="mr-2"
+                label="<small>Name:&nbsp;</small>"
+                placeholder="Jane Doe"
+              />
+              <CFormInput
+                label="<small>Email:&nbsp;</small>"
+                placeholder="jane.doe@example.com"
+                autocomplete="email"
+              />
+            </CForm>
+          </CCardBody>
+          <CCardFooter>
             <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
             <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
           </CCardFooter>
@@ -230,142 +238,150 @@
       </CCol>
       <CCol md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Horizontal</strong> Form
           </CCardHeader>
-          <CForm>
-            <CFormInput
-              type="email"
-              description="Please enter your email."
-              autocomplete="email"
-              label="Email"
-              horizontal
-              placeholder="Enter Email..."
-            />
-            <CFormInput
-              type="password"
-              description="Please enter your password."
-              autocomplete="current-password"
-              label="Password"
-              horizontal
-              placeholder="Enter Password..."
-            />
-            <CCardFooter slot="footer">
+          <CCardBody>
+            <CForm>
+              <CFormInput
+                type="email"
+                description="Please enter your email."
+                autocomplete="email"
+                label="Email"
+                horizontal
+                placeholder="Enter Email..."
+              />
+              <CFormInput
+                type="password"
+                description="Please enter your password."
+                autocomplete="current-password"
+                label="Password"
+                horizontal
+                placeholder="Enter Password..."
+              />
+              <CCardFooter>
+                <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+                <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+              </CCardFooter>
+            </CForm>
+          </CCardBody>
+        </CCard>
+        <CCard>
+          <CCardHeader>
+            <strong>Normal</strong> Form
+          </CCardHeader>
+          <CForm novalidate>
+            <CCardBody>
+              <CFormInput
+                type="email"
+                description="Please enter your email."
+                autocomplete="email"
+                label="Email"
+                placeholder="Enter Email..."
+                required
+                wasValidated
+              />
+              <CFormInput
+                type="password"
+                description="Please enter your password."
+                autocomplete="current-password"
+                label="Password"
+                placeholder="Enter Password..."
+                required
+                wasValidated
+              />
+            </CCardBody>
+            <CCardFooter>
               <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
               <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
             </CCardFooter>
           </CForm>
         </CCard>
         <CCard>
-          <CCardHeader slot="header">
-            <strong>Normal</strong> Form
-          </CCardHeader>
-          <CForm novalidate>
-            <CFormInput
-              type="email"
-              description="Please enter your email."
-              autocomplete="email"
-              label="Email"
-              placeholder="Enter Email..."
-              required
-              was-validated
-            />
-            <CFormInput
-              type="password"
-              description="Please enter your password."
-              autocomplete="current-password"
-              label="Password"
-              placeholder="Enter Password..."
-              required
-              was-validated
-            />
-            <CCardFooter slot="footer">
-              <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-              <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
-            </CCardFooter>
-          </CForm>
-        </CCard>
-        <CCard :no-block="true">
-          <CCardHeader slot="header">
+          <CCardHeader>
             Input <strong>Grid</strong>
           </CCardHeader>
-          <CRow class="form-group">
-            <CCol sm="3">
-              <CFormInput class="mb-0" placeholder=".col-sm-3"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="4">
-              <CFormInput class="mb-0" placeholder=".col-sm-4"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="5">
-              <CFormInput class="mb-0" placeholder=".col-sm-5"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="6">
-              <CFormInput class="mb-0" placeholder=".col-sm-6"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="7">
-              <CFormInput class="mb-0" placeholder=".col-sm-7"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="8">
-              <CFormInput class="mb-0" placeholder=".col-sm-8"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="9">
-              <CFormInput class="mb-0" placeholder=".col-sm-9"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="10">
-              <CFormInput class="mb-0" placeholder=".col-sm-10"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="11">
-              <CFormInput class="mb-0" placeholder=".col-sm-11"/>
-            </CCol>
-          </CRow>
-          <CRow class="form-group">
-            <CCol sm="12">
-              <CFormInput class="mb-0" placeholder=".col-sm-12"/>
-            </CCol>
-          </CRow>
-          <CCardFooter slot="footer">
+          <CCardBody>
+            <CRow class="form-group">
+              <CCol sm="3">
+                <CFormInput class="mb-0" placeholder=".col-sm-3"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="4">
+                <CFormInput class="mb-0" placeholder=".col-sm-4"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="5">
+                <CFormInput class="mb-0" placeholder=".col-sm-5"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="6">
+                <CFormInput class="mb-0" placeholder=".col-sm-6"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="7">
+                <CFormInput class="mb-0" placeholder=".col-sm-7"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="8">
+                <CFormInput class="mb-0" placeholder=".col-sm-8"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="9">
+                <CFormInput class="mb-0" placeholder=".col-sm-9"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="10">
+                <CFormInput class="mb-0" placeholder=".col-sm-10"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="11">
+                <CFormInput class="mb-0" placeholder=".col-sm-11"/>
+              </CCol>
+            </CRow>
+            <CRow class="form-group">
+              <CCol sm="12">
+                <CFormInput class="mb-0" placeholder=".col-sm-12"/>
+              </CCol>
+            </CRow>
+          </CCardBody>
+          <CCardFooter>
             <CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
             <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Input <strong>Sizes</strong>
           </CCardHeader>
-          <CFormInput
-            label="Small input"
-            size="sm"
-            horizontal
-            placeholder="size='sm'"
-          />
-          <CFormInput
-            label="Default input"
-            horizontal
-            placeholder="normal"
-          />
-          <CFormInput
-            label="Large input"
-            size="lg"
-            horizontal
-            placeholder="size='lg'"
-          />
-          <CCardFooter slot="footer">
+          <CCardBody>
+            <CFormInput
+              label="Small input"
+              size="sm"
+              horizontal
+              placeholder="size='sm'"
+            />
+            <CFormInput
+              label="Default input"
+              horizontal
+              placeholder="normal"
+            />
+            <CFormInput
+              label="Large input"
+              size="lg"
+              horizontal
+              placeholder="size='lg'"
+            />
+          </CCardBody>
+          <CCardFooter>
             <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
             <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
           </CCardFooter>
@@ -375,11 +391,11 @@
     <CRow>
 
       <CCol sm="12" md="6">
-        <CCard noWrapper :no-block="true">
-          <CCardHeader slot="header">
+        <CCard>
+          <CCardHeader>
             <strong>Basic Validation</strong> Form
           </CCardHeader>
-          <CCardBody slot="body">
+          <CCardBody>
             <CForm validated novalidate>
               <CFormInput
                 label="Input is valid"
@@ -396,305 +412,327 @@
         </CCard>
       </CCol>
       <CCol sm="12" md="6">
-        <CCard header="<strong>Custom Validation</strong> Form">
-          <CForm>
-            <CFormInput
-              label="Input is valid"
-              valid-feedback="Input is valid."
-              invalid-feedback="Please provide at least 4 characters."
-              value="Valid value"
-              :isValid="validator"
-            />
-            <CFormInput
-              label="Input is invalid"
-              valid-feedback="Thank you :)"
-              invalid-feedback="Please provide at least 4 characters."
-              :isValid="validator"
-            />
-          </CForm>
+        <CCard>
+          <CCardHeader>
+            <strong>Custom Validation</strong> Form
+          </CCardHeader>
+          <CCardBody>
+            <CForm>
+              <CFormInput
+                label="Input is valid"
+                valid-feedback="Input is valid."
+                invalid-feedback="Please provide at least 4 characters."
+                value="Valid value"
+                :isValid="validator"
+              />
+              <CFormInput
+                label="Input is invalid"
+                valid-feedback="Thank you :)"
+                invalid-feedback="Please provide at least 4 characters."
+                :isValid="validator"
+              />
+            </CForm>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="4">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Icon/Text</strong> Groups
           </CCardHeader>
-          <CFormInput
-            placeholder="Username"
-            prepend="<i class='fa fa-user'></i>"
-          />
-          <CFormInput
-            type="email"
-            placeholder="Email"
-            autocomplete="email"
-            append="<i class='fa fa-envelope-o'></i>"
-          />
-          <CFormInput
-            prepend="<i class='fa fa-euro'></i>"
-            placeholder="ex. $1.000.000"
-            append=".00"
-          />
-          <CCardFooter slot="footer">
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol sm="4" >
-        <CCard header="<strong>Buttons</strong> Groups">
-          <CFormInput placeholder="Username">
-            <template #prepend>
-              <CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
-            </template>
-          </CFormInput>
-          <CFormInput
-            type="email"
-            placeholder="Email"
-            autocomplete="email"
-          >
-            <template #append>
-              <CButton type="submit" variant="primary">Submit</CButton>
-            </template>
-          </CFormInput>
-          <CFormInput
-            type="email"
-            placeholder="Email"
-            autocomplete="email"
-          >
-            <template #prepend>
-              <CButton variant="primary"><i class="fa fa-facebook"></i></CButton>
-            </template>
-            <template #append>
-              <CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
-            </template>
-          </CFormInput>
-          <CCardFooter slot="footer">
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol sm="4">
-        <CCard header="<strong>Dropdowns</strong> Groups">
-          <CFormInput placeholder="Username">
-            <template #prepend>
-              <CDropdown
-                button-content="Action"
-                variant="primary"
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdown>
-            </template>
-          </CFormInput>
-          <CFormInput
-            type="email"
-            placeholder="Email"
-            autocomplete="email"
-          >
-            <template #append>
-              <CDropdown
-                button-content="Action"
-                variant="primary"
-                right
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdown>
-            </template>
-          </CFormInput>
-          <CFormInput placeholder="...">
-
-            <template #prepend>
-              <CDropdown
-                button-content="Split"
-                variant="primary"
-                split
-              >
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdown>
-            </template>
-
-            <template #append>
-              <CDropdown
-                button-content="Action"
-                variant="primary"
-                right
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdown>
-            </template>
-
-          </CFormInput>
-
-
-          <CCardFooter slot="footer">
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-    </CRow>
-    <CRow>
-      <CCol md="6">
-        <CCard>
-          <CCardHeader slot="header">
-            Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
-          </CCardHeader>
-          <CRow
-            class="form-group"
-            v-for="(number, key) in [4,5,6,7,8]"
-            :key="key"
-          >
-            <CCol :cols="12 - number">
-              <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
-            </CCol>
-            <CCol :cols="number">
-              <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
-            </CCol>
-          </CRow>
-          <CCardFooter slot="footer">
-            <CButton size="sm" variant="primary">Action</CButton>
-            <CButton size="sm" variant="danger">Action</CButton>
-            <CButton size="sm" variant="warning">Action</CButton>
-            <CButton size="sm" variant="info">Action</CButton>
-            <CButton size="sm" variant="success">Action</CButton>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol md="6">
-        <CCard>
-          <CCardHeader slot="header">
-            Input Grid for small devices! <small> <code>.col-*</code></small>
-          </CCardHeader>
-          <CRow
-            class="form-group"
-            v-for="(number, key) in [4,5,6,7,8]"
-            :key="key"
-          >
-            <CCol :cols="number">
-              <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
-            </CCol>
-            <CCol :cols="12 - number">
-              <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
-            </CCol>
-          </CRow>
-          <CCardFooter slot="footer">
-            <CButton size="sm" variant="primary">Action</CButton>
-            <CButton size="sm" variant="danger">Action</CButton>
-            <CButton size="sm" variant="warning">Action</CButton>
-            <CButton size="sm" variant="info">Action</CButton>
-            <CButton size="sm" variant="success">Action</CButton>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-    </CRow>
-    <CRow>
-      <CCol sm="4">
-        <CCard>
-          <CCardHeader slot="header">
-            Example Form
-          </CCardHeader>
-          <CForm>
-            <CFormInput
-              prepend="Username"
-              append="<i class='fa fa-user'></i>"
-            />
-            <CFormInput
-              prepend="Email"
-              type="email"
-              autocomplete="email"
-              append="<i class='fa fa-envelope'></i>"
-            />
-            <CFormInput
-              prepend="Password"
-              type="password"
-              autocomplete="current-password"
-              append="<i class='fa fa-asterisk'></i>"
-            />
-            <div class="form-group form-actions">
-              <CButton type="submit" size="sm" variant="primary">Submit</CButton>
-            </div>
-          </CForm>
-        </CCard>
-      </CCol>
-      <CCol sm="4">
-        <CCard>
-          <CCardHeader slot="header">
-            Example Form
-          </CCardHeader>
-          <CForm>
-            <CFormInput
-              placeholder="Username"
-              append="<i class='fa fa-user'></i>"
-            />
-            <CFormInput
-              placeholder="Email"
-              type="email"
-              autocomplete="email"
-              append="<i class='fa fa-envelope'></i>"
-            />
-            <CFormInput
-              placeholder="Password"
-              type="password"
-              autocomplete="current-password"
-              append="<i class='fa fa-asterisk'></i>"
-            />
-            <div class="form-group form-actions">
-              <CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
-            </div>
-          </CForm>
-        </CCard>
-      </CCol>
-      <CCol sm="4">
-        <CCard>
-          <CCardHeader slot="header">
-            Example Form
-          </CCardHeader>
-          <CForm>
+          <CCardBody>
             <CFormInput
               placeholder="Username"
               prepend="<i class='fa fa-user'></i>"
             />
             <CFormInput
-              placeholder="Email"
               type="email"
+              placeholder="Email"
               autocomplete="email"
-              prepend="<i class='fa fa-envelope'></i>"
+              append="<i class='fa fa-envelope-o'></i>"
             />
             <CFormInput
-              placeholder="Password"
-              type="password"
-              autocomplete="current-password"
-              prepend="<i class='fa fa-asterisk'></i>"
+              prepend="<i class='fa fa-euro'></i>"
+              placeholder="ex. $1.000.000"
+              append=".00"
             />
-            <div class="form-group form-actions">
-              <CButton type="submit" size="sm" variant="success">Submit</CButton>
-            </div>
-          </CForm>
+          </CCardBody>
+          <CCardFooter>
+            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader>
+            <strong>Buttons</strong> Groups
+          </CCardHeader>
+          <CCardBody>
+            <CFormInput placeholder="Username">
+              <template #prepend>
+                <CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
+              </template>
+            </CFormInput>
+            <CFormInput
+              type="email"
+              placeholder="Email"
+              autocomplete="email"
+            >
+              <template #append>
+                <CButton type="submit" variant="primary">Submit</CButton>
+              </template>
+            </CFormInput>
+            <CFormInput
+              type="email"
+              placeholder="Email"
+              autocomplete="email"
+            >
+              <template #prepend>
+                <CButton variant="primary"><i class="fa fa-facebook"></i></CButton>
+              </template>
+              <template #append>
+                <CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
+              </template>
+            </CFormInput>
+          </CCardBody>
+          <CCardFooter>
+            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader>
+            <strong>Dropdowns</strong> Groups
+          </CCardHeader>
+          <CCardBody>
+            <CFormInput placeholder="Username">
+              <template #prepend>
+                <CDropdown
+                  buttonContent="Action"
+                  variant="primary"
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                  <CDropdownItem disabled>Disabled action</CDropdownItem>
+                </CDropdown>
+              </template>
+            </CFormInput>
+            <CFormInput
+              type="email"
+              placeholder="Email"
+              autocomplete="email"
+            >
+              <template #append>
+                <CDropdown
+                  buttonContent="Action"
+                  variant="primary"
+                  right
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                  <CDropdownItem disabled>Disabled action</CDropdownItem>
+                </CDropdown>
+              </template>
+            </CFormInput>
+            <CFormInput placeholder="...">
+
+              <template #prepend>
+                <CDropdown
+                  buttonContent="Split"
+                  variant="primary"
+                  split
+                >
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here...</CDropdownItem>
+                  <CDropdownItem disabled>Disabled action</CDropdownItem>
+                </CDropdown>
+              </template>
+
+              <template #append>
+                <CDropdown
+                  buttonContent="Action"
+                  variant="primary"
+                  right
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                  <CDropdownItem disabled>Disabled action</CDropdownItem>
+                </CDropdown>
+              </template>
+
+            </CFormInput>
+          </CCardBody>
+          <CCardFooter>
+            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader>
+            Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
+          </CCardHeader>
+          <CCardBody>
+            <CRow
+              class="form-group"
+              v-for="(number, key) in [4,5,6,7,8]"
+              :key="key"
+            >
+              <CCol :cols="12 - number">
+                <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
+              </CCol>
+              <CCol :cols="number">
+                <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
+              </CCol>
+            </CRow>
+          </CCardBody>
+          <CCardFooter>
+            <CButton size="sm" variant="primary">Action</CButton>
+            <CButton size="sm" variant="danger">Action</CButton>
+            <CButton size="sm" variant="warning">Action</CButton>
+            <CButton size="sm" variant="info">Action</CButton>
+            <CButton size="sm" variant="success">Action</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader>
+            Input Grid for small devices! <small> <code>.col-*</code></small>
+          </CCardHeader>
+          <CCardBody>
+            <CRow
+              class="form-group"
+              v-for="(number, key) in [4,5,6,7,8]"
+              :key="key"
+            >
+              <CCol :cols="number">
+                <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
+              </CCol>
+              <CCol :cols="12 - number">
+                <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
+              </CCol>
+            </CRow>
+          </CCardBody>
+          <CCardFooter>
+            <CButton size="sm" variant="primary">Action</CButton>
+            <CButton size="sm" variant="danger">Action</CButton>
+            <CButton size="sm" variant="warning">Action</CButton>
+            <CButton size="sm" variant="info">Action</CButton>
+            <CButton size="sm" variant="success">Action</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader>
+            Example Form
+          </CCardHeader>
+          <CCardBody>
+            <CForm>
+              <CFormInput
+                prepend="Username"
+                append="<i class='fa fa-user'></i>"
+              />
+              <CFormInput
+                prepend="Email"
+                type="email"
+                autocomplete="email"
+                append="<i class='fa fa-envelope'></i>"
+              />
+              <CFormInput
+                prepend="Password"
+                type="password"
+                autocomplete="current-password"
+                append="<i class='fa fa-asterisk'></i>"
+              />
+              <div class="form-group form-actions">
+                <CButton type="submit" size="sm" variant="primary">Submit</CButton>
+              </div>
+            </CForm>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader>
+            Example Form
+          </CCardHeader>
+          <CCardBody>
+            <CForm>
+              <CFormInput
+                placeholder="Username"
+                append="<i class='fa fa-user'></i>"
+              />
+              <CFormInput
+                placeholder="Email"
+                type="email"
+                autocomplete="email"
+                append="<i class='fa fa-envelope'></i>"
+              />
+              <CFormInput
+                placeholder="Password"
+                type="password"
+                autocomplete="current-password"
+                append="<i class='fa fa-asterisk'></i>"
+              />
+              <div class="form-group form-actions">
+                <CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
+              </div>
+            </CForm>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="4">
+        <CCard>
+          <CCardHeader>
+            Example Form
+          </CCardHeader>
+          <CCardBody>
+            <CForm>
+              <CFormInput
+                placeholder="Username"
+                prepend="<i class='fa fa-user'></i>"
+              />
+              <CFormInput
+                placeholder="Email"
+                type="email"
+                autocomplete="email"
+                prepend="<i class='fa fa-envelope'></i>"
+              />
+              <CFormInput
+                placeholder="Password"
+                type="password"
+                autocomplete="current-password"
+                prepend="<i class='fa fa-asterisk'></i>"
+              />
+              <div class="form-group form-actions">
+                <CButton type="submit" size="sm" variant="success">Submit</CButton>
+              </div>
+            </CForm>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol lg="12">
         <transition name="fade">
-          <CCard
-            v-if="show"
-            no-wrapper
-          >
-            <CCardHeader slot="header">
+          <CCard v-if="show">
+            <CCardHeader>
               <i class="fa fa-edit"></i> Form Elements
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
@@ -702,19 +740,16 @@
                 </CLink>
                 <CLink
                   class="card-header-action btn-minimize"
-                  @click="formElements=!formElements"
+                  @click="formCollapsed=!formCollapsed"
                 >
-                  <i :class="`icon-arrow-${formElements ? 'down' : 'up'}`"></i>
+                  <i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
                   <i class="icon-close"></i>
                 </CLink>
               </div>
             </CCardHeader>
-            <CCollapse
-              slot="body"
-              :show="formElements"
-            >
+            <CCollapse :show="formCollapsed">
               <CCardBody>
                 <CFormInput
                   label="Prepended text"
@@ -738,7 +773,7 @@
                   label="Append with button"
                   description="Here's some help text"
                 >
-                  <template v-slot:append>
+                  <template #append>
                     <CButton variant="primary">Go!</CButton>
                   </template>
                 </CFormInput>
@@ -756,152 +791,6 @@
             </CCollapse>
           </CCard>
         </transition>
-        <CCard>
-        <!-- <CForm :id="id">
-          <input type="text" :value="cInput"/>
-          <CFormInput type="email"
-                      label="CFormInput"
-                      placeholder="Email input"
-                      description="input description"
-                      size="lg"
-                      :readonly="false"
-                      :plaintext="false"
-                      :horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
-                      :disabled="false"
-                      validFeedback="valid feedback"
-                      invalidFeedback="invalid feedback"
-                      append=".00"
-                      prepend="$"
-                      required
-                      :tooltipFeedbacks="true"
-                      :isValid="validator"
-                      :was-validateds="true"
-                      addInputClasses="hehe"
-                      addLabelClasses="heh2"
-                      addWrapperClasses="heh2"
-                      v-model="cInput"
-                      lazys
-          />
-          <CFormTextarea label="Input label"
-                         placeholder="Placeholder for textarea"
-                         descriptiond="input description"
-                         size="lg"
-                         :readonly="false"
-                         :plaintext="false"
-                         :horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
-                         :disabled="false"
-                         validFeedback="valid feedback"
-                         invalidFeedback="invalid feedback"
-                         append=".00"
-                         prepends="$"
-                         required
-                         value="wsewrwed"
-                         :tooltipFeedbacks="true"
-                         :isValids="true"
-                         :was-validated="true"
-                         addInputClasses="fsad"
-                         addLabelClassesa="heh2"
-                         :rows="20"
-                         :cols="12"
-                         v-model="cInput"
-          >
-            <CButton slot="prepend" class="btn btn-success">asd</CButton>
-          </CFormTextarea>
-          <br>
-          <CFormSelect label="Input label"
-                      :options="['first', true,3,{value:'fourth', text:'Another text', disabled:'disabled'},
-                                {value:null, text:'boolean value'}]"
-                      placeholder="Placeholder test"
-                      description="input description"
-                      size="lg"
-                      customs
-                      plaintexts
-                      :horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
-                      disableds="disabled"
-                      validFeedback="valid feedback"
-                      invalidFeedback="invalid feedback"
-                      appenda=".00"
-                      prepends="$"
-                      required
-                      :tooltipFeedback="true"
-                      :isValidf="true"
-                      :was-validated="true"
-                      addInputClassess="form-control-plaintext"
-                      addLabelClasses="heh2"
-                      addWrapperClasses="hehe22"
-                      v-model="selected"
-          >
-            <CButton slot="prepends" class="btn btn-success">dssdf</CButton>
-          </CFormSelect>
-          {{String(selected)}}
-          <CFormFile label="Input label"
-                     description="input description"
-                     size="lg"
-                     :horizontals="{input: 'col-sm-8', label: 'col-sm-4'}"
-                     :disabled="false"
-                     validFeedback="valid feedback"
-                     invalidFeedback="invalid feedback"
-                     required
-                     :tooltipFeedback="true"
-                     :isValid="true"
-                     :was-validateds="true"
-                     addInputClassesa="hehe"
-                     addLabelClassesa="heh2"
-                     custom
-                     multiple
-                     accept="image/*"
-          />
-          <div class="my-radio-group row">
-            <div class="col-sm-4">
-              My radio group
-            </div>
-            <div class="col-sm-8" >
-              <CFormCheckbox type="radio"
-                             :label="String(value)"
-                             descriptions="input description"
-                             :disabled="false"
-                             validFeedback="valid feedback"
-                             invalidFeedback="invalid feedback"
-                             required
-                             :tooltipFeedbacks="true"
-                             :was-validateds="true"
-                             addLabelClassesa="heh2"
-                             custom
-                             name="someName"
-                             :value="value"
-                             v-model="checks[1]"
-                             :key="key"
-                             inline
-                             v-for="(value, key) in ['first', null, 3, false]"
-              />
-              <CFormCheckbox label="Input label"
-                             descriptions="input description"
-                             sizes="lg"
-                             :disabled="false"
-                             validFeedback="valid feedback"
-                             invalidFeedback="invalid feedback"
-                             required
-                             :tooltipFeedback="true"
-                             :was-validated="true"
-                             addInputClassesa="hehe"
-                             addLabelClassesa="heh2"
-                             :isValidss="true"
-                             value="hehes"
-                             custom="radio"
-                             v-model="checks[0]"
-
-              />
-            </div>
-        </div>
-
-        </CForm>
-        <CSpinner variant="success"/>
-        <CSpinner grow/>
-        <CSpinner small />
-        <CSpinner small grow/>
-        <CSpinner grow tag="span"/> -->
-
-        </CCard>
       </CCol>
     </CRow>
   </div>
@@ -925,7 +814,7 @@ export default {
       testkkk: 2,
       horizontal: { label:'col-3', input:'col-9' },
       options: ['Option 1', 'Option 2', 'Option 3'],
-      formElements: true,
+      formCollapsed: true,
       checkboxNames: ['Radios', 'Inline Radios',
                       'Checkboxes', 'Inline Checkboxes',
                       'Radios - custom', 'Inline Radios - custom',
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index e9318691..8adb9599 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -4,29 +4,30 @@
       <CRow>
         <CCol>
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
-              <div class="card-header-actions">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Jumbotron </strong>
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <div>
+            <CCardBody>
               <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
                 <p>For more information visit website</p>
                 <CButton variant="primary" href="#">More Info</CButton>
               </CJumbotron>
-            </div>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol>
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>with slots</small>
             </CCardHeader>
-            <div>
+            <CCardBody>
               <CJumbotron header="Bootstrap 4" lead="">
                 <p slot="lead" class="lead">
                   This is a simple hero unit, a simple jumbotron-style component for
@@ -40,21 +41,21 @@
                 <CButton variant="primary" href="#">Do Something</CButton>
                 <CButton variant="success" href="#">Do Something Else</CButton>
               </CJumbotron>
-            </div>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
       <CRow>
         <CCol>
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>variants</small>
             </CCardHeader>
-            <div>
+            <CCardBody>
               <CJumbotron variant="info"
-                           text-variant="white"
-                           border-variant="dark"
+                           textVariant="white"
+                           borderVariant="dark"
                            header="Bootstrap 4">
 
                 <p slot="lead" class="lead">
@@ -67,7 +68,7 @@
                   out within the larger container.
                 </p>
               </CJumbotron>
-            </div>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 21b0c892..96c0629c 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,238 +1,257 @@
 <template>
   <div class="wrapper">
     <div class="animated fadeIn">
-      <!-- <CRow>
-        <CCol>
-          <CCard>
-          <CMedia asideClasses="m-5 align-self-end" asideRight>
-            <img slot="aside" src="img/avatars/6.jpg">
-            <div class="text-center">
-              ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
-            </div>
-          </CMedia>
-          </CCard>
-        </CCol>
-      </CRow> -->
       <CRow>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
-              <div class="card-header-actions">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap list group </strong>
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem>Cras justo odio</CListGroupItem>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem>Cras justo odio</CListGroupItem>
+                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem>Morbi leo risus</CListGroupItem>
+                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+                <CListGroupItem>Vestibulum at eros</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem>Cras justo odio</CListGroupItem>
-              <CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem>Cras justo odio</CListGroupItem>
+                <CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem>Morbi leo risus</CListGroupItem>
+                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+                <CListGroupItem>Vestibulum at eros</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
       <CRow>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>disabled items</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem disabled>Cras justo odio</CListGroupItem>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem disabled>Cras justo odio</CListGroupItem>
+                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem>Morbi leo risus</CListGroupItem>
+                <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
+                <CListGroupItem>Vestibulum at eros</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>actionable items</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem href="#some-link">Awesome link</CListGroupItem>
-              <CListGroupItem href="#" active>Link with active state</CListGroupItem>
-              <CListGroupItem href="#">Action links are easy</CListGroupItem>
-              <CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem href="#some-link">Awesome link</CListGroupItem>
+                <CListGroupItem href="#" active>Link with active state</CListGroupItem>
+                <CListGroupItem href="#">Action links are easy</CListGroupItem>
+                <CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
       <CRow>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>buttons</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem tag="button">Button item</CListGroupItem>
-              <CListGroupItem tag="button">I am a button</CListGroupItem>
-              <CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
-              <CListGroupItem tag="button">This is a button too</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem tag="button">Button item</CListGroupItem>
+                <CListGroupItem tag="button">I am a button</CListGroupItem>
+                <CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
+                <CListGroupItem tag="button">This is a button too</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>with badges</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem class="d-flex justify-content-between align-items-center">
-                Cras justo odio
-                <CBadge variant="primary" pill>14</CBadge>
-              </CListGroupItem>
-              <CListGroupItem class="d-flex justify-content-between align-items-center">
-                Dapibus ac facilisis in
-                <CBadge variant="primary" pill>2</CBadge>
-              </CListGroupItem>
-              <CListGroupItem class="d-flex justify-content-between align-items-center">
-                Morbi leo risus
-                <CBadge variant="primary" pill>1</CBadge>
-              </CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                  Cras justo odio
+                  <CBadge variant="primary" pill>14</CBadge>
+                </CListGroupItem>
+                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                  Dapibus ac facilisis in
+                  <CBadge variant="primary" pill>2</CBadge>
+                </CListGroupItem>
+                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                  Morbi leo risus
+                  <CBadge variant="primary" pill>1</CBadge>
+                </CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
       <CRow>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> List group </strong>
               <small>variants</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem>This is a default list group item</CListGroupItem>
-              <CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
-              <CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
-              <CListGroupItem variant="success">This is a success list group item</CListGroupItem>
-              <CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
-              <CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
-              <CListGroupItem variant="info">This is a info list group item</CListGroupItem>
-              <CListGroupItem variant="light">This is a light list group item</CListGroupItem>
-              <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem>This is a default list group item</CListGroupItem>
+                <CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem variant="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem variant="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem variant="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> List group </strong>
               <small>variants active</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem href="#">This is a default list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem href="#">This is a default list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
       <CRow>
         <CCol cols="12">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> List group </strong>
+              <small>inside cards</small>
             </CCardHeader>
-            <CCardGroup deck>
-              <CCard header="<b>Card with list group</b>">
-                <CListGroup>
-                  <CListGroupItem href="#">Cras justo odio</CListGroupItem>
-                  <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
-                  <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
-                </CListGroup>
-                <p class="card-text mt-2">
-                  Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
-                  nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
-                  consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
-                  ad sit ipsum anim Lorem.
-                </p>
-              </CCard>
-              <CCard noWrapper header="<b>Card with flush list group</b>">
-                <CListGroup flush>
-                  <CListGroupItem href="#">Cras justo odio</CListGroupItem>
-                  <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
-                  <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
-                </CListGroup>
-                <CCardBody slot="body">
-                  Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
-                  nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
-                  consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
-                  ad sit ipsum anim Lorem.
-                </CCardBody>
-              </CCard>
-            </CCardGroup>
+            <CCardBody>
+              <CCardGroup deck>
+                <CCard header="<b>Card with list group</b>">
+                  <CListGroup>
+                    <CListGroupItem href="#">Cras justo odio</CListGroupItem>
+                    <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
+                    <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
+                  </CListGroup>
+                  <p class="card-text mt-2">
+                    Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                    nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                    consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                    ad sit ipsum anim Lorem.
+                  </p>
+                </CCard>
+                <CCard  header="<b>Card with flush list group</b>">
+                  <CListGroup flush>
+                    <CListGroupItem href="#">Cras justo odio</CListGroupItem>
+                    <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
+                    <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
+                  </CListGroup>
+                  <CCardBody>
+                    Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                    nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                    consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                    ad sit ipsum anim Lorem.
+                  </CCardBody>
+                </CCard>
+              </CCardGroup>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
       <CRow>
         <CCol md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
             </CCardHeader>
-            <CListGroup>
-              <CListGroupItem href="#" active class="flex-column align-items-start">
-                <div class="d-flex w-100 justify-content-between">
-                  <h5 class="mb-1">List group item heading</h5>
-                  <small>3 days ago</small>
-                </div>
-                <p class="mb-1">
-                  Donec id elit non mi porta gravida at eget metus. Maecenas
-                  sed diam eget risus varius blandit.
-                </p>
-                <small>Donec id elit non mi porta.</small>
-              </CListGroupItem>
-              <CListGroupItem href="#" class="flex-column align-items-start">
-                <div class="d-flex w-100 justify-content-between">
-                  <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-muted">3 days ago</small>
-                </div>
-                <p class="mb-1">
-                  Donec id elit non mi porta gravida at eget metus. Maecenas
-                  sed diam eget risus varius blandit.
-                </p>
-                <small class="text-muted">Donec id elit non mi porta.</small>
-              </CListGroupItem>
-              <CListGroupItem href="#" disabled class="flex-column align-items-start">
-                <div class="d-flex w-100 justify-content-between">
-                  <h5 class="mb-1">Disabled List group item</h5>
-                  <small class="text-muted">3 days ago</small>
-                </div>
-                <p class="mb-1">
-                  Donec id elit non mi porta gravida at eget metus. Maecenas
-                  sed diam eget risus varius blandit.
-                </p>
-                <small class="text-muted">Donec id elit non mi porta.</small>
-              </CListGroupItem>
-            </CListGroup>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem href="#" active class="flex-column align-items-start">
+                  <div class="d-flex w-100 justify-content-between">
+                    <h5 class="mb-1">List group item heading</h5>
+                    <small>3 days ago</small>
+                  </div>
+                  <p class="mb-1">
+                    Donec id elit non mi porta gravida at eget metus. Maecenas
+                    sed diam eget risus varius blandit.
+                  </p>
+                  <small>Donec id elit non mi porta.</small>
+                </CListGroupItem>
+                <CListGroupItem href="#" class="flex-column align-items-start">
+                  <div class="d-flex w-100 justify-content-between">
+                    <h5 class="mb-1">List group item heading</h5>
+                    <small class="text-muted">3 days ago</small>
+                  </div>
+                  <p class="mb-1">
+                    Donec id elit non mi porta gravida at eget metus. Maecenas
+                    sed diam eget risus varius blandit.
+                  </p>
+                  <small class="text-muted">Donec id elit non mi porta.</small>
+                </CListGroupItem>
+                <CListGroupItem href="#" disabled class="flex-column align-items-start">
+                  <div class="d-flex w-100 justify-content-between">
+                    <h5 class="mb-1">Disabled List group item</h5>
+                    <small class="text-muted">3 days ago</small>
+                  </div>
+                  <p class="mb-1">
+                    Donec id elit non mi porta gravida at eget metus. Maecenas
+                    sed diam eget risus varius blandit.
+                  </p>
+                  <small class="text-muted">Donec id elit non mi porta.</small>
+                </CListGroupItem>
+              </CListGroup>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 06bf9fe8..039fb6da 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -31,63 +31,66 @@
         </CNavbar>
       </CCard> -->
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
-          <div class="card-header-actions">
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navbar </strong>
+          <!-- <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
-          </div>
+          </div> -->
         </CCardHeader>
-        <CNavbar toggleable="md" type="dark" variant="info">
-          <CNavbarToggle @click="show=!show"/>
-          <CNavbarBrand href="#">NavBar</CNavbarBrand>
-          <CCollapse :show="show"
-                     navbar
-          >
-            <CNavbarNav>
-              <CNavItem href="#">Link</CNavItem>
-              <CNavItem href="#" disabled>Disabled</CNavItem>
-            </CNavbarNav>
+        <CCardBody>
+          <CNavbar toggleable="md" type="dark" variant="info">
+            <CNavbarToggle @click="show=!show"/>
+            <CNavbarBrand href="#">NavBar</CNavbarBrand>
+            <CCollapse :show="show"
+                       navbar
+            >
+              <CNavbarNav>
+                <CNavItem href="#">Link</CNavItem>
+                <CNavItem href="#" disabled>Disabled</CNavItem>
+              </CNavbarNav>
 
-            <!-- Right aligned nav items -->
-            <CNavbarNav class="ml-auto">
-              <CForm inline>
-                <CFormInput
-                  class="mr-sm-2"
-                  placeholder="Search"
-                  size="sm"
-                />
-                <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
-              </CForm>
+              <!-- Right aligned nav items -->
+              <CNavbarNav class="ml-auto">
+                <CForm inline>
+                  <CFormInput
+                    class="mr-sm-2"
+                    placeholder="Search"
+                    size="sm"
+                  />
+                  <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
+                </CForm>
 
-              <CDropdown button-content="Lang"
-                         nav
-                         placement="bottom-end"
-              >
-                  <CDropdownItem>EN</CDropdownItem>
-                  <CDropdownItem>ES</CDropdownItem>
-                  <CDropdownItem>RU</CDropdownItem>
-                  <CDropdownItem>FA</CDropdownItem>
-              </CDropdown>
+                <CDropdown buttonContent="Lang"
+                           nav
+                           placement="bottom-end"
+                >
+                    <CDropdownItem>EN</CDropdownItem>
+                    <CDropdownItem>ES</CDropdownItem>
+                    <CDropdownItem>RU</CDropdownItem>
+                    <CDropdownItem>FA</CDropdownItem>
+                </CDropdown>
 
-              <CDropdown nav
-                         button-content="<em>User</em>"
-                         placement="bottom-end"
-              >
-                <CDropdownItem>Profile</CDropdownItem>
-                <CDropdownItem>Signout</CDropdownItem>
-              </CDropdown>
-            </CNavbarNav>
-          </CCollapse>
-        </CNavbar>
+                <CDropdown nav
+                           buttonContent="<em>User</em>"
+                           placement="bottom-end"
+                >
+                  <CDropdownItem>Profile</CDropdownItem>
+                  <CDropdownItem>Signout</CDropdownItem>
+                </CDropdown>
+              </CNavbarNav>
+            </CCollapse>
+          </CNavbar>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>brand</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <!-- Image and text -->
           <CNavbar variant="faded" light>
             <CNavbarBrand href="#">
@@ -95,14 +98,14 @@
               BootstrapVue
             </CNavbarBrand>
           </CNavbar>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>text</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNavbar toggleable="sm" light variant="light">
             <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
             <CNavbarBrand>BootstrapVue</CNavbarBrand>
@@ -112,14 +115,14 @@
               </CNavbarNav>
             </CCollapse>
           </CNavbar>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>dropdown</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNavbar type="dark" variant="primary">
             <!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
             <CCollapse :show="navbarDropdown" navbar> -->
@@ -127,27 +130,27 @@
                 <CNavItem href="#">Home</CNavItem>
                 <CNavItem href="#">Link</CNavItem>
                 <!-- Navbar dropdowns -->
-                <CDropdown button-content="Lang" right nav>
+                <CDropdown buttonContent="Lang" right nav>
                   <CDropdownItem>EN</CDropdownItem>
                   <CDropdownItem>ES</CDropdownItem>
                   <CDropdownItem>RU</CDropdownItem>
                   <CDropdownItem>FA</CDropdownItem>
                 </CDropdown>
-                <CDropdown button-content="User" right nav>
+                <CDropdown buttonContent="User" right nav>
                   <CDropdownItem>Account</CDropdownItem>
                   <CDropdownItem>Settings</CDropdownItem>
                 </CDropdown>
               </CNavbarNav>
             <!-- </CCollapse> -->
           </CNavbar>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>form</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNavbar type="light" variant="light">
             <CForm inline>
               <CFormInput
@@ -158,14 +161,14 @@
               <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
             </CForm>
           </CNavbar>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>input group</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNavbar type="light" variant="light">
             <CForm inline>
               <CFormInput
@@ -174,7 +177,7 @@
               />
             </CForm>
           </CNavbar>
-        </div>
+        </CCardBody>
       </CCard>
     </div>
   </div>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index db6715a7..a7b40416 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -2,28 +2,33 @@
   <div class="wrapper">
     <div class="animated fadeIn">
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
-          <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
+          <!-- <div class="card-header-actions">
+            <CLink
+              href="#"
+              class="card-header-action"
+            >
               <small class="text-muted">docs</small>
-            </a>
-          </div>
+            </CLink>
+          </div> -->
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav>
             <CNavItem active>Active</CNavItem>
             <CNavItem title="Link"/>
             <CNavItem>Another Link</CNavItem>
             <CNavItem disabled>Disabled</CNavItem>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>icons</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav>
             <CNavItem active>
               <i class="icon-basket-loaded"></i>
@@ -36,13 +41,15 @@
             </CNavItem>
             <CNavItem disabled>Disabled</CNavItem>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>tab style</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav tabs>
             <CNavItem active>
               Active
@@ -55,61 +62,67 @@
             </CNavItem>
             <CNavItem disabled>Disabled</CNavItem>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header" @click="item++">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
+        <CCardHeader @click="item++">
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>pill style</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav pills>
             <CNavItem active>Active</CNavItem>
             <CNavItem>Link</CNavItem>
             <CNavItem>Another Link</CNavItem>
             <CNavItem disabled>Disabled</CNavItem>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>fill tabs</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav fill tabs>
             <CNavItem active>Active</CNavItem>
             <CNavItem>Link</CNavItem>
             <CNavItem>Link with a long name </CNavItem>
             <CNavItem disabled>Disabled</CNavItem>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Navs </strong>
+          <small>justified tabs</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav justified tabs>
             <CNavItem active>Active</CNavItem>
             <CNavItem>Link</CNavItem>
             <CNavItem>Link with a long name </CNavItem>
             <CNavItem disabled>Disabled</CNavItem>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Navs </strong>
           <small>dropdown support</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CNav pills>
             <CNavItem active>Active</CNavItem>
             <CNavItem>Link</CNavItem>
             <CDropdown id="nav7_ddown"
                        nav
                        placement="bottom-end"
-                       button-content="Dropdown"
+                       buttonContent="Dropdown"
             >
               <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
               <CDropdownItem>one</CDropdownItem>
@@ -118,24 +131,26 @@
               <CDropdownItem>three</CDropdownItem>
             </CDropdown>
           </CNav>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Navs </strong>
           <small>vertical variation</small>
         </CCardHeader>
-        <CRow>
-          <CCol cols="3" class="m-0">
-            <CNav vertical pills >
-              <CNavItem active>Active</CNavItem>
-              <CNavItem>Link</CNavItem>
-              <CNavItem>Another Link</CNavItem>
-              <CNavItem disabled>Disabled</CNavItem>
-            </CNav>
-          </CCol>
-        </CRow>
+        <CCardBody>
+          <CRow>
+            <CCol cols="3" class="m-0">
+              <CNav vertical pills >
+                <CNavItem active>Active</CNavItem>
+                <CNavItem>Link</CNavItem>
+                <CNavItem>Another Link</CNavItem>
+                <CNavItem disabled>Disabled</CNavItem>
+              </CNav>
+            </CCol>
+          </CRow>
+        </CCardBody>
       </CCard>
     </div>
   </div>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index c72eefa3..9d9fe189 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -2,15 +2,15 @@
   <div class="wrapper">
     <div class="animated fadeIn">
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
-          <div class="card-header-actions">
+          <!-- <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
-          </div>
+          </div> -->
         </CCardHeader>
-        <div>
+        <CCardBody>
           <h6>Default</h6>
           <CPagination v-model="currentPage" :pages="10"/>
           <br>
@@ -26,14 +26,14 @@
           </div>
 
           <div>currentPage: {{currentPage}}</div>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>alignment</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <h6>Left alignment (default)</h6>
           <CPagination v-model="currentPage" :pages="10"/>
           <br>
@@ -47,7 +47,7 @@
           <br>
 
           <div>currentPage: {{currentPage}}</div>
-        </div>
+        </CCardBody>
       </CCard>
     </div>
   </div>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 9ed1ef58..c9efb401 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -2,48 +2,67 @@
   <div class="wrapper">
     <div class="animated fadeIn">
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
-          <div class="card-header-actions">
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Popovers</strong>
+          <!-- <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
-          </div>
+          </div> -->
         </CCardHeader>
-        <CRow>
-          <CCol cols="6">
-            <div class="my-3 text-center">
-              <CButton
-                v-c-popover.hover="{
-                  header: 'Popover header',
-                  content: 'I am popover content!'
-                }"
-              >
-                Hover Me
-              </CButton>
-            </div>
-          </CCol>
-          <CCol cols="6">
-            <div class="my-3 text-center">
-              <CButton
-                variant="primary"
-                v-c-popover.hover.active="{
-                  header: 'Popover!',
-                  content: 'I start <strong>open</strong>'
-                }"
-              >
-                Button
-              </CButton>
-            </div>
-          </CCol>
-        </CRow>
+        <CCardBody>
+          <CRow>
+            <CCol cols="4">
+              <div class="my-3 text-center">
+                <CButton
+                  variant="primary"
+                  v-c-popover="{
+                    header: 'Popover header',
+                    content: 'I am popover content!'
+                  }"
+                >
+                  Hover Me
+                </CButton>
+              </div>
+            </CCol>
+            <CCol cols="4">
+              <div class="my-3 text-center">
+                <CButton
+                  variant="primary"
+                  v-c-popover="{
+                    header: 'Popover!',
+                    content: 'I start <strong>open</strong>',
+                    active: true
+                  }"
+                  text="Hover me"
+                />
+              </div>
+            </CCol>
+            <CCol cols="4">
+              <div class="my-3 text-center">
+                <CButton
+                  variant="primary"
+                  v-c-popover.click="{
+                    header: 'Popover!',
+                    content: 'I am showing on click and hiding on click outside tooltip!',
+                    placement: 'bottom'
+                  }"
+                >
+                  Click me
+                </CButton>
+              </div>
+            </CCol>
+          </CRow>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Popovers </strong>
           <small>placement</small>
         </CCardHeader>
-        <div class="my-3">
+        <CCardBody class="my-3">
           <CRow>
             <CCol
               md="4"
@@ -53,7 +72,7 @@
             >
               <CButton
                 variant="primary"
-                v-c-popover.hover.focus="{
+                v-c-popover="{
                   header: 'Popover!',
                   content: `Placement ${placement}`,
                   placement
@@ -63,116 +82,8 @@
               </CButton>
             </CCol>
           </CRow>
-        </div>
+        </CCardBody>
       </CCard>
-      <!-- <CCard class="d-sm-down-none">
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
-          <small>via properties or slots</small>
-        </CCardHeader>
-        <CRow>
-          <CCol md="6" class="py-4 text-center">
-            <CButton id="exPopover2" variant="primary">Using properties</CButton>
-            <b-popover target="exPopover2"
-                       title="Prop Examples"
-                       triggers="hover focus"
-                       content="Embedding content using properties is easy">
-            </b-popover>
-          </CCol>
-          <CCol md="6" class="py-4 text-center">
-            <CButton id="exPopover3" variant="primary">Using slots</CButton>
-            <b-popover target="exPopover3" triggers="hover focus">
-              <template slot="title">Content via Slots</template>
-              Embedding content <span class="text-danger">using slots</span>
-              affords you <em>greater <strong>control.</strong></em> and
-              basic HTML support.
-            </b-popover>
-          </CCol>
-        </CRow>
-      </CCard>
-      <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
-          <small>show</small>
-        </CCardHeader>
-        <div class="d-flex flex-column text-md-center">
-          <div class="p-2">
-            <CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
-          </div>
-          <div class="p-2">
-            <CButton class="px-1" @click="show = !show">Toggle Popover</CButton>
-
-            <b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
-              Hello <strong>World!</strong>
-            </b-popover>
-          </div>
-        </div>
-      </CCard>
-      <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Popover </strong>
-          <small>open/close events</small>
-        </CCardHeader>
-        <div class="d-flex flex-column text-md-center">
-          <div class="p-2">
-            <CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
-          </div>
-          <div class="p-2">
-            <CButton class="px-1" @click="onOpen">Open</CButton>
-            <CButton class="px-1" @click="onClose">Close</CButton>
-          </div>
-
-          <b-popover ref="popover1" target="popoverButton-event" title="Popover">
-            Hello <strong>World!</strong>
-          </b-popover>
-        </div>
-      </CCard>
-      <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Popover </strong>
-          <small>enable/disable events</small>
-        </CCardHeader>
-        <div class="d-flex flex-column text-md-center">
-          <div class="p-2">
-            <CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
-          </div>
-          <div class="p-2">
-            <CButton class="px-1" @click="onEnable">Enable</CButton>
-            <CButton class="px-1" @click="onDisable">Disable</CButton>
-          </div>
-
-          <b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
-            Hello <strong>World!</strong>
-          </b-popover>
-        </div>
-      </CCard> -->
-      <!-- <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
-        </CCardHeader>
-        <CRow>
-          <CCol md="3" class="py-3 text-center">
-            <CButton v-b-popover.hover.top="'I am Top'"
-                   title="Popover!"
-                   variant="primary">Top</CButton>
-          </CCol>
-          <CCol md="3" class="py-3 text-center">
-            <CButton v-b-popover.hover.left="'I am Left'"
-                   title="Popover!"
-                   variant="primary">Left</CButton>
-          </CCol>
-          <CCol md="3" class="py-3 text-center">
-            <CButton v-b-popover.hover.right="'I am Right'"
-                   title="Popover!"
-                   variant="primary">Right</CButton>
-          </CCol>
-          <CCol md="3" class="py-3 text-center">
-            <CButton v-b-popover.hover.bottom="'I am Bottom'"
-                   title="Popover!"
-                   variant="primary">Bottom</CButton>
-          </CCol>
-        </CRow>
-      </CCard> -->
     </div>
   </div>
 </template>
@@ -187,23 +98,7 @@ export default {
         'bottom-start', 'bottom', 'bottom-end',
         'right-start', 'right', 'right-end',
         'left-start', 'left', 'left-end'
-      ],
-      show: false,
-      counter: 0
-    }
-  },
-  methods: {
-    onOpen () {
-      this.$refs.popover1.$emit('open')
-    },
-    onClose () {
-      this.$refs.popover1.$emit('close')
-    },
-    onEnable () {
-      this.$refs.popover2.$emit('enable')
-    },
-    onDisable () {
-      this.$refs.popover2.$emit('disable')
+      ]
     }
   }
 }
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index 72330647..6752bb03 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -2,15 +2,16 @@
   <div class="wrapper">
     <div class="animated fadeIn">
       <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
-          <div class="card-header-actions">
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Progress</strong>
+          <!-- <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
-          </div>
+          </div> -->
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CProgress :value="counter" :max="max" show-progress animated></CProgress>
           <CProgress class="mt-1" :max="max" show-value>
             <CProgressBar :value="counter*(6/10)" variant="success"/>
@@ -18,13 +19,13 @@
             <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
           </CProgress>
           <CButton class="mt-4" @click="clicked">Click me</CButton>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <h6>No label</h6>
           <CProgress :value="value" :max="max2" class="mb-3"></CProgress>
           <h6>Value label</h6>
@@ -35,39 +36,39 @@
           <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
           <h6>Progress label with precision</h6>
           <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <h6>Default width</h6>
           <CProgress :value="value3" class="mb-3"></CProgress>
           <h6>Custom widths</h6>
           <CProgress :value="value3" class="w-75 mb-2"></CProgress>
           <CProgress :value="value3" class="w-50 mb-2"></CProgress>
           <CProgress :value="value3" class="w-25"></CProgress>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <h6>Default height</h6>
           <CProgress :value="value3" show-progress class="mb-3"></CProgress>
           <h6>Custom heights</h6>
           <CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
           <CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
           <CProgress height="2px" :value="value3"></CProgress>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
             <div class="col-sm-2">{{ bar.variant }}:</div>
             <div class="col-sm-10 pt-1">
@@ -77,13 +78,13 @@
               ></CProgress>
             </div>
           </div>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
           <CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
           <CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
@@ -91,13 +92,13 @@
           <CButton variant="secondary" @click="striped = !striped">
             {{ striped ? 'Remove' : 'Add'}} Striped
           </CButton>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
           <CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
           <CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
@@ -105,13 +106,13 @@
           <CButton variant="secondary" @click="animate = !animate">
             {{ animate ? 'Stop' : 'Start'}} Animation
           </CButton>
-        </div>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
         </CCardHeader>
-        <div>
+        <CCardBody>
           <CProgress :max="max3" class="mb-3">
             <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
             <CProgressBar variant="success" :value="values[1]"></CProgressBar>
@@ -132,7 +133,7 @@
             <CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
             <CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
           </CProgress>
-        </div>
+        </CCardBody>
       </CCard>
     </div>
   </div>
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index a16d6aa4..4cf0b1b7 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -1,445 +1,490 @@
 <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" /> -->
+
     <CRow>
       <CCol xs="12" md="6">
         <CCard v-if="true">
-          <CCardHeader slot="header">
+          <CCardHeader>
             <h5>
                Radio switches
               <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
               <CBadge variant="danger" class="float-right">NEW</CBadge>
             </h5>
           </CCardHeader>
-          <!-- <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"
-                   :value="variant"
-                   v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
-          />
+          <CCardBody>
+            <!-- <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"
+                     :value="variant"
+                     v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
+            />
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch default
             <CBadge variant="primary">{{checker}}</CBadge>
           </CCardHeader>
-          <CSwitch class="mx-1"
-            variant="primary"
-            checked
-            name="switch1"
-            v-model="checker"
-            value="someValue"
-            trueValue="yes"
-            falseValue="no"
-          />
-          <CSwitch class="mx-1"
-            ref="totest"
-            variant="primary"
-            checked
-            name="switch1"
-            :checked="true"
-            value="someValue"
-          />
-          <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 />
+          <CCardBody>
+            <CSwitch class="mx-1"
+              variant="primary"
+              checked
+              name="switch1"
+              v-model="checker"
+              value="someValue"
+              trueValue="yes"
+              falseValue="no"
+            />
+            <CSwitch class="mx-1"
+              variant="primary"
+              checked
+              name="switch1"
+              :checked="true"
+              value="someValue"
+            />
+            <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 />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch pills
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked  shape="pill"/>
-          <CSwitch class="mx-1" variant="secondary" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="success" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="warning" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="info" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="danger" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="light" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="dark" checked  shape="pill" />
-          <CSwitch class="mx-1" variant="primary" disabled  shape="pill" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked  shape="pill"/>
+            <CSwitch class="mx-1" variant="secondary" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked  shape="pill" />
+            <CSwitch class="mx-1" variant="primary" disabled  shape="pill" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             3d Switch
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="success" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="warning" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="info" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="danger" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="light" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="dark" checked   shape="3d" />
-          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="success" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="warning" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="info" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="danger" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="light" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="dark" checked   shape="3d" />
+            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
-          <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
+            <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             3d Switch <small><code>label</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
-          <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
-          <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline />
-          <CSwitch class="mx-1" variant="secondary" checked outline />
-          <CSwitch class="mx-1" variant="success" checked outline />
-          <CSwitch class="mx-1" variant="warning" checked outline />
-          <CSwitch class="mx-1" variant="info" checked outline />
-          <CSwitch class="mx-1" variant="danger" checked outline />
-          <CSwitch class="mx-1" variant="light" checked outline />
-          <CSwitch class="mx-1" variant="dark" checked outline />
-          <CSwitch class="mx-1" variant="primary" outline disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline />
+            <CSwitch class="mx-1" variant="secondary" checked outline />
+            <CSwitch class="mx-1" variant="success" checked outline />
+            <CSwitch class="mx-1" variant="warning" checked outline />
+            <CSwitch class="mx-1" variant="info" checked outline />
+            <CSwitch class="mx-1" variant="danger" checked outline />
+            <CSwitch class="mx-1" variant="light" checked outline />
+            <CSwitch class="mx-1" variant="dark" checked outline />
+            <CSwitch class="mx-1" variant="primary" outline disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>outline  shape="pill"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline  shape="pill"/>
-          <CSwitch class="mx-1" variant="secondary" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="success" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="warning" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="info" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="danger" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="light" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="dark" checked outline  shape="pill" />
-          <CSwitch class="mx-1" variant="primary" outline  shape="pill" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline  shape="pill"/>
+            <CSwitch class="mx-1" variant="secondary" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline  shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline  shape="pill" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline="alt" />
-          <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
-          <CSwitch class="mx-1" variant="success" checked outline="alt" />
-          <CSwitch class="mx-1" variant="warning" checked outline="alt" />
-          <CSwitch class="mx-1" variant="info" checked outline="alt" />
-          <CSwitch class="mx-1" variant="danger" checked outline="alt" />
-          <CSwitch class="mx-1" variant="light" checked outline="alt" />
-          <CSwitch class="mx-1" variant="dark" checked outline="alt" />
-          <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>outline="alt"  shape="pill"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
-          <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked />
-          <CSwitch class="mx-1" variant="secondary" checked />
-          <CSwitch class="mx-1" variant="success" checked />
-          <CSwitch class="mx-1" variant="warning" checked />
-          <CSwitch class="mx-1" variant="info" checked />
-          <CSwitch class="mx-1" variant="danger" checked />
-          <CSwitch class="mx-1" variant="light" checked />
-          <CSwitch class="mx-1" variant="dark" checked />
-          <CSwitch class="mx-1" variant="primary" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked />
+            <CSwitch class="mx-1" variant="secondary" checked />
+            <CSwitch class="mx-1" variant="success" checked />
+            <CSwitch class="mx-1" variant="warning" checked />
+            <CSwitch class="mx-1" variant="info" checked />
+            <CSwitch class="mx-1" variant="danger" checked />
+            <CSwitch class="mx-1" variant="light" checked />
+            <CSwitch class="mx-1" variant="dark" checked />
+            <CSwitch class="mx-1" variant="primary" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked shape="pill" />
-          <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
-          <CSwitch class="mx-1" variant="success" checked shape="pill" />
-          <CSwitch class="mx-1" variant="warning" checked shape="pill" />
-          <CSwitch class="mx-1" variant="info" checked shape="pill" />
-          <CSwitch class="mx-1" variant="danger" checked shape="pill" />
-          <CSwitch class="mx-1" variant="light" checked shape="pill" />
-          <CSwitch class="mx-1" variant="dark" checked shape="pill" />
-          <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked shape="pill" />
+            <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked shape="pill" />
+            <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline />
-          <CSwitch class="mx-1" variant="secondary" checked outline />
-          <CSwitch class="mx-1" variant="success" checked outline />
-          <CSwitch class="mx-1" variant="warning" checked outline />
-          <CSwitch class="mx-1" variant="info" checked outline />
-          <CSwitch class="mx-1" variant="danger" checked outline />
-          <CSwitch class="mx-1" variant="light" checked outline />
-          <CSwitch class="mx-1" variant="dark" checked outline />
-          <CSwitch class="mx-1" variant="primary" outline disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline />
+            <CSwitch class="mx-1" variant="secondary" checked outline />
+            <CSwitch class="mx-1" variant="success" checked outline />
+            <CSwitch class="mx-1" variant="warning" checked outline />
+            <CSwitch class="mx-1" variant="info" checked outline />
+            <CSwitch class="mx-1" variant="danger" checked outline />
+            <CSwitch class="mx-1" variant="light" checked outline />
+            <CSwitch class="mx-1" variant="dark" checked outline />
+            <CSwitch class="mx-1" variant="primary" outline disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
-          <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline="alt" />
-          <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
-          <CSwitch class="mx-1" variant="success" checked outline="alt" />
-          <CSwitch class="mx-1" variant="warning" checked outline="alt" />
-          <CSwitch class="mx-1" variant="info" checked outline="alt" />
-          <CSwitch class="mx-1" variant="danger" checked outline="alt" />
-          <CSwitch class="mx-1" variant="light" checked outline="alt" />
-          <CSwitch class="mx-1" variant="dark" checked outline="alt" />
-          <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-          <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+          </CCardBody>
         </CCard>
       </CCol>
 
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
-          <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
+            <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
+          </CCardBody>
         </CCard>shape
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Switch <small><code>label outline</code></small>
           </CCardHeader>
-          <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-          <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+          <CCardBody>
+            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+          </CCardBody>
         </CCard>
       </CCol>
 
       <CCol md="12">
-        <CCard noWrapper>
-          <CCardHeader slot="header">
+        <CCard>
+          <CCardHeader>
             Sizes
           </CCardHeader>
-          <CCardBody slot="body" class="p-0">
+          <CCardBody class="p-0">
             <CTable
               hover
               striped
@@ -472,19 +517,9 @@
 </template>
 
 <script>
-// import CSwitch from './CSwitch'
-
 export default {
   name: 'switches',
-  computed: {
-    icon (icon) {
-      return icon
-    }
-  },
-  // components: {
-  //   CSwitch
-  // },
-  data: () => {
+  data () {
     return {
       fields: [
         {key: 'size'},
@@ -498,10 +533,6 @@ export default {
       ],
       checker: 'yes',
       radio: 'primary',
-      radio2: 'warning',
-      myFlag1: true,
-      myFlag2: false,
-      picker: '',
       labelIcon: {
         dataOn: '\u2713',
         dataOff: '\u2715'
@@ -511,17 +542,6 @@ export default {
         dataOff: 'no'
       }
     }
-  },
-  methods: {
-    test (a, event) {
-      console.log(a)
-      console.log(typeof a)
-      console.log(event)
-    },
-    test2 () {
-      console.log(this.$refs.totest)
-      this.$refs.totest.$forceUpdate()
-    }
   }
 }
 </script>
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 77b8a347..7322814e 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <CCard :header="caption">
+  <CCard :header="caption" bodyWrapper>
     <CTable
       :hover="hover"
       :striped="striped"
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 0e09b660..9f163f7b 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -2,82 +2,61 @@
   <div class="animated fadeIn">
     <CRow>
       <CCol sm="12">
-        <CCard header="test1 ">
-
-          <!-- <CTable :items="items.slice(0)"
-                  noSorting
-                  striped
-          /> -->
-
+        <CCard header="CTable power presentation" bodyWrapper>
           <CTable :items="items.slice(0)"
-                   :fields="fields"
-                   :activePage="page"
-                   @pages-change="val => pages = val"
-                   :perPage="5"
-                   ref="table"
-                   indexCol="onlyFilter"
-                   filterRow
-                   smalls
-                   noPagination
-                   @row-clicked2="(item, index) => toggleDetails(index)"
-                   loadings
-                   hover
-                   striped
-                   optionsRow="onlyFilter2"
-                   :defaultSorter="{ name:'username', direction:'desc'}"
-                   defaultTableFilter="staff"
-                   :defaultColumnFilter="{username:'zby'}"
+                  :fields="fields"
+                  :perPage="6"
+                  indexColumn
+                  filterRow
+                  optionsRow
+                  loadings
+                  hover
+                  :defaultSorter="{ name:'username', direction:'desc'}"
+                  :defaultColumnFilter="{ role:'staff' }"
           >
-               <template slot="status-header" slot-scope="{item}">
-                Status scoped slot
-              </template>
-
-              <!-- <tempalate slot="sorting-icon" slot-scope={state}>
-                {{state}}
-              </tempalate> -->
-              <!-- <td slot="status-filter" slot-scope="{clear, colName}" @click="clear">
-                <i class="cui-ban icons text-danger d-block mt-2 ml-1"></i>
-              </td> -->
-              <!-- <div slot="underTable">hehe</div>
-              <caption slot="caption" style="caption-side: top;">
-                This is a table caption at the top.
-              </caption> -->
-              <td slot="status" slot-scope="{item}">
-                <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
-              </td>
-              <td slot="show_details" slot-scope="{item, index}">
-                <button class="btn btn-primary" @click="toggleDetails(index)">
-                  {{details.includes(index) ? 'Hide' : 'Show'}}
-                </button>
-              </td>
-              <td slot="index-col"
-                  slot-scope="{index}"
+              <template #index-col="{index}">
+                <td
                   @click="toggleDetails(index)"
                   style="cursor:pointer"
                   class="text-center"
-              >
-                <i class="icons font-lg d-block cui-chevron-right"
-                  style="transition: transform 0.4s"
-                  :style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
-              </td>
-              <CCollapse :show="details.includes(index)"
-                         slot="details"
-                         slot-scope="{item, index}">
-                <CCardBody>
-                  {{index + 1}} - {{item}}
-                </CCardBody>
-              </CCollapse>
+                >
+                  <i
+                    class="icons font-lg d-block cui-chevron-right"
+                    style="transition: transform 0.4s"
+                    :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
+                  ></i>
+                </td>
+              </template>
+              <template #status="{item}">
+                <td>
+                  <CBadge :variant="getBadge(item.status)">
+                    {{item.status}}
+                  </CBadge>
+                </td>
+              </template>
+              <template #show_details="{item, index}">
+                <td class="py-2">
+                  <CButton
+                    variant="outline-primary"
+                    square
+                    size="sm"
+                    @click="toggleDetails(index)"
+                    :text="details.includes(index) ? 'Hide' : 'Show'"
+                  />
+                </td>
+              </template>
+              <template #details="{item, index}">
+                <CCollapse :show="details.includes(index)">
+                  <CCardBody>
+                    {{index + 1}} - {{item}}
+                  </CCardBody>
+                </CCollapse>
+              </template>
           </CTable>
-          <CPagination v-show="pages > 1"
-                       v-model="page"
-                       :pages="pages"
-                       align="center"
-                       size="lg"
-          />
         </CCard>
       </CCol>
     </CRow>
-    <CRow>
+    <!-- <CRow>
       <CCol sm="12">
         <CCard header="test2">
           <CTable
@@ -86,8 +65,8 @@
             :perPage="5"
             indexCol="onlyCleaner"
             filterRow
-            optionsRow="onlyFilter"
-            :paginationProps="{align:'center', size:'lg'}"
+            optionsRow="onlyFiltesr"
+            :paginationProps="{align:'center'}"
           >
               <td slot="status" slot-scope="{item}">
                 <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
@@ -95,7 +74,7 @@
           </CTable>
         </CCard>
       </CCol>
-    </CRow>
+    </CRow> -->
 
 
     <CRow>
@@ -171,13 +150,12 @@
 <script>
 import CTableWrapper from './Table.vue'
 
-// const fields = ['username', 'registered', 'role']
 const fields = [
-  { key: 'username', label: 'UsErNaMe', _style:'width:40%'},
-  { key: 'registered' , style:'width:20%', noSorting: true, noFilter: true},
-  { key: 'role', _classes: 'table-danger2', _style:'width:20%; color:bluse'},
-  { key: 'status' },
-  // { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
+  { key: 'username', _style:'width:40%' },
+  { key: 'registered' , style:'width:20%' },
+  { key: 'role', _style:'width:20%;' },
+  { key: 'status', _style:'width:20%;' },
+  { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
   {number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
@@ -215,8 +193,6 @@ export default {
       items: items,
       fields: fields,
       page: 1,
-      page2: 1,
-      itemsNumber: 0,
       pages: null,
       details: []
     }
@@ -224,15 +200,10 @@ export default {
   methods: {
     getBadge (status) {
       return status === 'Active' ? 'success'
-            : status === 'Inactive' ? 'secondary'
-            : status === 'Pending' ? 'warning'
-            : status === 'Banned' ? 'danger' : 'primary'
+             : status === 'Inactive' ? 'secondary'
+             : status === 'Pending' ? 'warning'
+             : status === 'Banned' ? 'danger' : 'primary'
     },
-    // test () {
-    //   this.$refs.table.changeSort('username')
-    //   this.$refs.table.filter = 't'
-    //   // console.log(this.items)
-    // },
     shuffleArray (array) {
       for (let i = array.length - 1; i > 0; i--) {
         let j = Math.floor(Math.random() * (i + 1))
@@ -242,9 +213,6 @@ export default {
       }
       return array
     },
-    log(val) {
-      console.log(val)
-    },
     toggleDetails (index) {
       const position = this.details.indexOf(index)
       position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
@@ -253,10 +221,5 @@ export default {
       return this.shuffleArray(this.items.slice(0))
     }
   }
-  // computed: {
-  //   pages () {
-  //     return this.$refs.table.pages
-  //   }
-  // }
 }
 </script>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index d50a2705..189b9425 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -3,190 +3,200 @@
     <CRow>
       <CCol xs="12" lg="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Tabs
           </CCardHeader>
-          <CTabs addTabClasses="mt-1">
-            <CTab title="Home" active>
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab title="Profile" >
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab title="Disabled" disabled>
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-          </CTabs>
+          <CCardBody>
+            <CTabs addTabClasses="mt-1">
+              <CTab title="Home" active>
+                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab title="Profile" >
+                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab title="Disabled" disabled>
+                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+            </CTabs>
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" lg="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Tabs
           </CCardHeader>
-          <CTabs
-            pills
-            addNavClasses="mb-3"
-          >
-            <CTab title="Home" active>
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab title="Profile" >
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab title="Disabled" disabled>
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-          </CTabs>
+          <CCardBody>
+            <CTabs
+              pills
+              addNavClasses="mb-3"
+            >
+              <CTab title="Home" active>
+                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab title="Profile" >
+                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab title="Disabled" disabled>
+                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+            </CTabs>
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" lg="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Tabs with icons
           </CCardHeader>
-          <CTabs addTabClasses="mt-1">
-            <CTab active>
-              <template slot="title">
-                <i class="icon-calculator"></i>
-              </template>
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab>
-              <template slot="title">
-                <i class="icon-basket-loaded"></i>
-              </template>
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab>
-              <template slot="title">
-                <i class="icon-pie-chart"></i>
-              </template>
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-          </CTabs>
+          <CCardBody>
+            <CTabs addTabClasses="mt-1">
+              <CTab active>
+                <template slot="title">
+                  <i class="icon-calculator"></i>
+                </template>
+                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab>
+                <template slot="title">
+                  <i class="icon-basket-loaded"></i>
+                </template>
+                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab>
+                <template slot="title">
+                  <i class="icon-pie-chart"></i>
+                </template>
+                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+            </CTabs>
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" lg="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Tabs with icons
           </CCardHeader>
-          <CTabs
-            addTabClasses="mt-1"
-            card
-          >
-            <CTab active>
-              <template slot="title">
-                <i class="icon-calculator"></i> {{tabs[0]}}
-              </template>
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab>
-              <template slot="title">
-                <i class="icon-basket-loaded"></i> {{tabs[1]}}
-              </template>
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab>
-              <template slot="title">
-                <i class="icon-pie-chart"></i> {{tabs[2]}}
-              </template>
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-          </CTabs>
+          <CCardBody>
+            <CTabs
+              addTabClasses="mt-1"
+              card
+            >
+              <CTab active>
+                <template slot="title">
+                  <i class="icon-calculator"></i> {{tabs[0]}}
+                </template>
+                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab>
+                <template slot="title">
+                  <i class="icon-basket-loaded"></i> {{tabs[1]}}
+                </template>
+                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab>
+                <template slot="title">
+                  <i class="icon-pie-chart"></i> {{tabs[2]}}
+                </template>
+                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+            </CTabs>
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" lg="6">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             Tabs vertical
           </CCardHeader>
-          <CTabs
-            card
-            pills
-            vertical="4"
-            v-model="tabIndex[1]"
-          >
-            <CTab active>
-              <template slot="title">
-                <i class="icon-calculator"></i> {{tabs[0]}}
-              </template>
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab>
-              <template slot="title">
-                <i class="icon-basket-loaded"></i> {{tabs[1]}}
-              </template>
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-            <CTab>
-              <template slot="title">
-                <i class="icon-pie-chart"></i> {{tabs[2]}}
-              </template>
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </CTab>
-          </CTabs>
+          <CCardBody>
+            <CTabs
+              card
+              pills
+              vertical="4"
+              v-model="tabIndex[1]"
+            >
+              <CTab active>
+                <template slot="title">
+                  <i class="icon-calculator"></i> {{tabs[0]}}
+                </template>
+                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab>
+                <template slot="title">
+                  <i class="icon-basket-loaded"></i> {{tabs[1]}}
+                </template>
+                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+              <CTab>
+                <template slot="title">
+                  <i class="icon-pie-chart"></i> {{tabs[2]}}
+                </template>
+                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                officia deserunt mollit anim id est laborum.
+              </CTab>
+            </CTabs>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 12d4686b..8165a357 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -2,130 +2,73 @@
   <div class="wrapper">
     <div class="animated fadeIn">
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Tooltips </strong>
           <small><code>v-c-tooltip</code> directive</small>
-          <div class="card-header-actions">
+          <!-- <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
             </a>
-          </div>
+          </div> -->
         </CCardHeader>
-        <CRow>
-          <CCol cols="6">
-            <div class="text-center my-3">
-              <CButton v-c-tooltip.hover="'I am a tooltip!'">
-                Hover Me
-              </CButton>
-            </div>
-          </CCol>
-          <CCol cols="6">
-            <div class="text-center my-3">
-              <CButton v-c-tooltip.hover.active="'I start open!'">
-                Button
-              </CButton>
-            </div>
-          </CCol>
-        </CRow>
+        <CCardBody>
+          <CRow>
+            <CCol cols="4">
+              <div class="text-center my-3">
+                <CButton v-c-tooltip.hover.click="'I am a tooltip!'">
+                  Hover Me
+                </CButton>
+              </div>
+            </CCol>
+            <CCol cols="4">
+              <div class="text-center my-3">
+                <CButton v-c-tooltip="{content: 'I start open!', active:true }">
+                  Hover me
+                </CButton>
+              </div>
+            </CCol>
+            <CCol cols="4">
+              <div class="text-center my-3">
+                <CButton v-c-tooltip.click="
+                  'I am showing on click and hiding on click outside tooltip!'
+                ">
+                  Click me
+                </CButton>
+              </div>
+            </CCol>
+          </CRow>
+        </CCardBody>
       </CCard>
       <CCard>
-        <CCardHeader slot="header">
+        <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Tooltips </strong>
           <small>placement</small>
         </CCardHeader>
-        <div class="my-3">
-          <CRow>
-            <CCol
-              md="4"
-              class="py-4 text-center"
-              v-for="placement in placements"
-              :key="placement"
-            >
-              <CButton
-                variant="primary"
-                v-c-tooltip.hover="{
-                  content: `Placement ${placement}`,
-                  placement
-                }"
+        <CCardBody>
+          <div class="my-3">
+            <CRow>
+              <CCol
+                md="4"
+                class="py-4 text-center"
+                v-for="placement in placements"
+                :key="placement"
               >
-                {{ placement }}
-              </CButton>
-            </CCol>
-          </CRow>
-        </div>
-      </CCard>
-        <!-- <CRow>
-          <CCol md="6" class="py-4 text-center">
-            <CButton id="exButton1" variant="outline-success">Live chat</CButton>
-          </CCol>
-          <CCol md="6" class="py-4 text-center">
-            <CButton id="exButton2" variant="outline-success">Html chat</CButton>
-          </CCol>
-        </CRow>
-
-        <b-tooltip target="exButton1" title="Online!"></b-tooltip>
-
-        <b-tooltip target="exButton2" placement="bottom">
-          Hello <strong>World!</strong>
-        </b-tooltip>
-      </CCard>
-      <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
-        </CCardHeader>
-        <div class="text-center">
-          <CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
-          <br><br>
-          <CButton @click="show = !show">Toggle Tooltip</CButton>
-
-          <b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
-            Hello <strong>World!</strong>
-          </b-tooltip>
-        </div>
-      </CCard>
-      <CCard>
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
-        </CCardHeader>
-        <div class="d-flex flex-column text-md-center">
-          <div class="p-2">
-            <CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
+                <CButton
+                  variant="primary"
+                  v-c-tooltip.hover="{
+                    content: `Placement ${placement}`,
+                    placement
+                  }"
+                >
+                  {{ placement }}
+                </CButton>
+              </CCol>
+            </CRow>
           </div>
-          <div class="p-2">
-            <CButton class="px-1 mr-1" @click="onOpen">Open</CButton>
-            <CButton class="px-1" @click="onClose">Close</CButton>
-          </div>
-
-          <b-tooltip ref="tooltip" target="tooltipButton-showEvent">
-            Hello <strong>World!</strong>
-          </b-tooltip>
-        </div>
+        </CCardBody>
       </CCard>
-      <CCard id="boundary">
-        <CCardHeader slot="header">
-          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
-        </CCardHeader>
-        <div class="d-flex flex-column text-md-center">
-          <div class="p-2">
-            <CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
-          </div>
-          <div class="p-2">
-            <CButton @click="disabled = !disabled" class="mr-1">
-              {{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
-            </CButton>
-
-            <CButton @click="disableByRef">
-              {{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
-            </CButton>
-
-            <b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
-              Hello <strong>World!</strong>
-            </b-tooltip>
-          </div>
-        </div>
-      </CCard> -->
     </div>
   </div>
 </template>
@@ -135,10 +78,6 @@ export default {
   name: 'tooltips',
   data () {
     return {
-      // show: true,
-      // disabled: false,
-      // smh: 0,
-      // placement: 'bottom-end',
       placements: [
         'top-start', 'top', 'top-end',
         'bottom-start', 'bottom', 'bottom-end',
@@ -146,26 +85,6 @@ export default {
         'left-start', 'left', 'left-end'
       ]
     }
-  },
-  methods: {
-    // onOpen () {
-    //   this.$refs.tooltip.$emit('open')
-    // },
-    // onClose () {
-    //   this.$refs.tooltip.$emit('close')
-    // },
-    // disableByRef () {
-    //   if (this.disabled) {
-    //     this.$refs.tooltip2.$emit('enable')
-    //   } else {
-    //     this.$refs.tooltip2.$emit('disable')
-    //   }
-    // },
-    // test () {
-    //   this.show = !this.show
-    //   this.placement = 'right'
-    //   this.smh = 200
-    // }
   }
 }
 </script>
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 257ba648..e5e3a6ab 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -3,282 +3,288 @@
     <CRow>
       <CCol cols="12">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Brand Button</strong>
           </CCardHeader>
-          <small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
-          <hr/>
-          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
-          <p>
-            <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-            <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-            <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-            <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-            <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-            <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-            <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-            <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-            <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-            <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-            <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-            <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-            <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-            <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-            <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-            <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-            <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-            <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-            <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-            <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-            <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-            <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-            <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-            <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-            <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
-          </p>
-          <h6>Size Normal</h6>
-          <p>
-            <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-            <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-            <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-            <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-            <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-            <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-            <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-            <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-            <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-            <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-            <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-            <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-            <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-            <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-            <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-            <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-            <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-            <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-            <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-            <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-            <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-            <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-            <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-            <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-            <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
-          </p>
-          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-          <p>
-            <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-            <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-            <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-            <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-            <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-            <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-            <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-            <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-            <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-            <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-            <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-            <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-            <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-            <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-            <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-            <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-            <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-            <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-            <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-            <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-            <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-            <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-            <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-            <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-            <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
-          </p>
+          <CCardBody>
+            <small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <hr/>
+            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+            <p>
+              <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+              <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+              <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+              <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+              <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+              <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+              <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+              <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+              <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+              <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+              <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+              <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+              <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+              <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+              <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+              <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+              <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+              <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+              <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+              <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+              <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+              <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+              <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+              <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+              <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+              <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+              <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+              <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+              <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+              <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+              <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+              <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+              <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+              <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+              <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+              <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+              <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+              <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+              <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+              <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+              <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+            </p>
+            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+            <p>
+              <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+              <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+              <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+              <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+              <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+              <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+              <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+              <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
+              <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
+              <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
+              <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
+              <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
+              <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
+              <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
+              <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
+              <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
+              <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
+              <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
+              <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
+              <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
+              <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
+              <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+            </p>
+          </CCardBody>
         </CCard>
       </CCol><!--/.col-->
       <CCol cols="12">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Brand Button </strong> <small>Icons only</small>
           </CCardHeader>
-          <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
-          <hr/>
-          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
-          <p>
-            <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-            <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-            <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-            <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-            <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-            <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-            <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-            <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-            <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-            <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-            <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-            <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-            <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-            <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-            <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-            <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-            <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-            <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-            <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-            <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-            <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-            <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-            <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-            <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-            <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
-          </p>
-          <h6>Size Normal</h6>
-          <p>
-            <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-            <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-            <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-            <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-            <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-            <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-            <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-            <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-            <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-            <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-            <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-            <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-            <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-            <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-            <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-            <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-            <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-            <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-            <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-            <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-            <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-            <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-            <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-            <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-            <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
-          </p>
-          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-          <p>
-            <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-            <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-            <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-            <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-            <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-            <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-            <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-            <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-            <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-            <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-            <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-            <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-            <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-            <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-            <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-            <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-            <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-            <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-            <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-            <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-            <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-            <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-            <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-            <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-            <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
-          </p>
+          <CCardBody>
+            <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <hr/>
+            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+            <p>
+              <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
+              <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
+              <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
+              <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
+              <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
+              <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
+              <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
+              <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
+              <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
+              <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
+              <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
+              <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
+              <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
+              <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
+              <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
+              <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
+              <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
+              <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
+              <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
+              <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
+              <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
+              <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
+              <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
+              <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
+              <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
+              <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
+              <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
+              <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
+              <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
+              <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
+              <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
+              <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
+              <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
+              <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
+              <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
+              <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
+              <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
+              <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
+              <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
+              <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
+              <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
+              <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
+              <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
+              <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
+              <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
+            </p>
+            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+            <p>
+              <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
+              <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
+              <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
+              <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
+              <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
+              <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
+              <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
+              <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
+              <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
+              <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
+              <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
+              <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
+              <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
+              <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
+              <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
+              <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
+              <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
+              <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
+              <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
+              <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
+              <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
+              <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
+              <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
+              <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
+              <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
+            </p>
+          </CCardBody>
         </CCard>
       </CCol><!--/.col-->
 
       <CCol cols="12">
         <CCard>
-          <CCardHeader slot="header">
+          <CCardHeader>
             <strong>Brand Button </strong> <small>Text only</small>
           </CCardHeader>
-          <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
-          <hr/>
-          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
-          <p>
-            <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-            <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-            <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-            <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-            <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-            <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-            <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-            <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-            <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-            <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-            <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-            <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-            <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-            <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-            <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-            <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-            <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-            <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-            <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-            <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-            <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-            <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-            <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-            <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-            <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
-          </p>
-          <h6>Size Normal</h6>
-          <p>
-            <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-            <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-            <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-            <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-            <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-            <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-            <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-            <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-            <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-            <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-            <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-            <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-            <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-            <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-            <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-            <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-            <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-            <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-            <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-            <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-            <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-            <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-            <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-            <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-            <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
-          </p>
-          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-          <p>
-            <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-            <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-            <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-            <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-            <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-            <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-            <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-            <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-            <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-            <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-            <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-            <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-            <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-            <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-            <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-            <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-            <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-            <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-            <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-            <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-            <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-            <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-            <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-            <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-            <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
-          </p>
+          <CCardBody>
+            <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <hr/>
+            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+            <p>
+              <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
+              <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
+              <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
+              <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
+              <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
+              <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
+              <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
+              <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
+              <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
+              <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
+              <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
+              <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
+              <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
+              <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
+              <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
+              <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
+              <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
+              <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
+              <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
+              <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
+              <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
+              <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
+              <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
+              <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
+              <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
+              <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
+              <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
+              <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
+              <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
+              <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
+              <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
+              <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
+              <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
+              <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
+              <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
+              <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
+              <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
+              <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
+              <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
+              <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
+              <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
+              <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
+              <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
+              <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
+              <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
+              <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
+              <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
+              <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
+              <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
+            </p>
+            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+            <p>
+              <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
+              <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
+              <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
+              <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
+              <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
+              <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
+              <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
+              <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
+              <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
+              <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
+              <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
+              <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
+              <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
+              <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
+              <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
+              <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
+              <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
+              <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
+              <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
+              <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
+              <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
+              <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
+              <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
+              <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
+              <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
+            </p>
+          </CCardBody>
         </CCard>
       </CCol><!--/.col-->
     </CRow><!--/.row-->
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 511da4fd..142f439f 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -4,178 +4,190 @@
       <CRow>
         <CCol cols="12" >
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
-              <div class="card-header-actions">
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <div>
-              <CButtonGroup>
-                <CButton>One</CButton>
-                <CButton>Two</CButton>
-                <CButton>Three</CButton>
-                <CButton>Four</CButton>
-                <CButton class="d-sm-down-none">Five</CButton>
-              </CButtonGroup>
-              <br><br>
-              <CButtonGroup>
-                <CButton class="d-sm-down-none" variant="success">Success</CButton>
-                <CButton variant="info">Info</CButton>
-                <CButton variant="warning">Warn</CButton>
-                <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
-                <CButton variant="danger">Danger</CButton>
-                <CButton variant="link">Link</CButton>
-              </CButtonGroup>
-            </div>
+            <CCardBody>
+              <div>
+                <CButtonGroup>
+                  <CButton>One</CButton>
+                  <CButton>Two</CButton>
+                  <CButton>Three</CButton>
+                  <CButton>Four</CButton>
+                  <CButton class="d-sm-down-none">Five</CButton>
+                </CButtonGroup>
+                <br><br>
+                <CButtonGroup>
+                  <CButton class="d-sm-down-none" variant="success">Success</CButton>
+                  <CButton variant="info">Info</CButton>
+                  <CButton variant="warning">Warn</CButton>
+                  <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
+                  <CButton variant="danger">Danger</CButton>
+                  <CButton variant="link">Link</CButton>
+                </CButtonGroup>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
             </CCardHeader>
-            <div>
-              <CButtonGroup>
-                <CButton>Left</CButton>
-                <CButton>Middle</CButton>
-                <CButton>Right</CButton>
-              </CButtonGroup>
-              <br><br>
-              <CButtonGroup size="sm">
-                <CButton>Left</CButton>
-                <CButton>Middle</CButton>
-                <CButton>Right</CButton>
-              </CButtonGroup>
-              <br><br>
-              <CButtonGroup size="lg">
-                <CButton>Left</CButton>
-                <CButton>Middle</CButton>
-                <CButton>Right</CButton>
-              </CButtonGroup>
-            </div>
+            <CCardBody>
+              <div>
+                <CButtonGroup>
+                  <CButton>Left</CButton>
+                  <CButton>Middle</CButton>
+                  <CButton>Right</CButton>
+                </CButtonGroup>
+                <br><br>
+                <CButtonGroup size="sm">
+                  <CButton>Left</CButton>
+                  <CButton>Middle</CButton>
+                  <CButton>Right</CButton>
+                </CButtonGroup>
+                <br><br>
+                <CButtonGroup size="lg">
+                  <CButton>Left</CButton>
+                  <CButton>Middle</CButton>
+                  <CButton>Right</CButton>
+                </CButtonGroup>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
             </CCardHeader>
-            <div>
-              <CButtonGroup>
-                <CButton class="d-sm-down-none">Button 1</CButton>
-                <CButton class="d-sm-down-none">Button 2</CButton>
-                <CDropdown right text="Menu" variant="success">
-                  <CDropdownItem>Item 1</CDropdownItem>
-                  <CDropdownItem>Item 2</CDropdownItem>
-                  <CDropdownDivider></CDropdownDivider>
-                  <CDropdownItem>Item 3</CDropdownItem>
-                </CDropdown>
-                <CButton class="d-sm-down-none">Button 3</CButton>
-                <CDropdown right split text="Split Menu" variant="info">
-                  <CDropdownItem>Item 1</CDropdownItem>
-                  <CDropdownItem>Item 2</CDropdownItem>
-                  <CDropdownDivider></CDropdownDivider>
-                  <CDropdownItem>Item 3</CDropdownItem>
-                </CDropdown>
-              </CButtonGroup>
-            </div>
+            <CCardBody>
+              <div>
+                <CButtonGroup>
+                  <CButton class="d-sm-down-none">Button 1</CButton>
+                  <CButton class="d-sm-down-none">Button 2</CButton>
+                  <CDropdown right text="Menu" variant="success">
+                    <CDropdownItem>Item 1</CDropdownItem>
+                    <CDropdownItem>Item 2</CDropdownItem>
+                    <CDropdownDivider></CDropdownDivider>
+                    <CDropdownItem>Item 3</CDropdownItem>
+                  </CDropdown>
+                  <CButton class="d-sm-down-none">Button 3</CButton>
+                  <CDropdown right split text="Split Menu" variant="info">
+                    <CDropdownItem>Item 1</CDropdownItem>
+                    <CDropdownItem>Item 2</CDropdownItem>
+                    <CDropdownDivider></CDropdownDivider>
+                    <CDropdownItem>Item 3</CDropdownItem>
+                  </CDropdown>
+                </CButtonGroup>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
             </CCardHeader>
-            <div>
-              <CButtonGroup vertical>
-                <CButton>Top</CButton>
-                <CButton>Middle</CButton>
-                <CButton>Bottom</CButton>
-              </CButtonGroup>
-            </div>
+            <CCardBody>
+              <div>
+                <CButtonGroup vertical>
+                  <CButton>Top</CButton>
+                  <CButton>Middle</CButton>
+                  <CButton>Bottom</CButton>
+                </CButtonGroup>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
-              <div class="card-header-actions">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Button toolbar </strong>
+              <small>with button groups</small>
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <div>
-              <CButtonToolbar key-nav aria-label="Toolbar with button groups">
-                <CButtonGroup class="mx-1">
-                  <CButton class="d-sm-down-none">&laquo;</CButton>
-                  <CButton>&lsaquo;</CButton>
-                </CButtonGroup>
-                <CButtonGroup class="mx-1">
-                  <CButton class="d-sm-down-none">Edit</CButton>
-                  <CButton>Undo</CButton>
-                  <CButton>Redo</CButton>
-                </CButtonGroup>
-                <CButtonGroup class="mx-1">
-                  <CButton>&rsaquo;</CButton>
-                  <CButton class="d-sm-down-none">&raquo;</CButton>
-                </CButtonGroup>
-              </CButtonToolbar>
-            </div>
-            <hr class="d-sm-down-none"/>
-            <div>
-              <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
-                <CButtonGroup size="sm" class="mx-1">
-                  <CButton>New</CButton>
-                  <CButton>Edit</CButton>
-                </CButtonGroup>
-                <CFormInput
-                  class="mb-0 w-25 mx-1"
-                  size="sm"
-                  prepend="$"
-                  append=".00"
-                  value="100"
-                />
-                <CFormSelect
-                  class="mb-0 w-25 mx-1"
-                  size="sm"
-                  prepend="Size"
-                  value="Medium"
-                  :options="['Large','Medium','Small']"
-                  custom
-                />
-                <CButtonGroup  size="sm" class="mx-1">
-                  <CButton>Save</CButton>
-                  <CButton>Cancel</CButton>
-                </CButtonGroup>
-              </CButtonToolbar>
-            </div>
-            <hr/>
-            <div>
-              <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
-                <CButtonGroup class="mx-1 d-sm-down-none">
-                  <CButton>New</CButton>
-                  <CButton>Edit</CButton>
-                  <CButton>Undo</CButton>
-                </CButtonGroup>
-                <CDropdown
-                  class="mx-1"
-                  placement="bottom-end"
-                  button-content="Menu"
-                >
-                  <CDropdownItem>Item 1</CDropdownItem>
-                  <CDropdownItem>Item 2</CDropdownItem>
-                  <CDropdownItem>Item 3</CDropdownItem>
-                </CDropdown>
-                <CButtonGroup class="mx-1">
-                  <CButton>Save</CButton>
-                  <CButton>Cancel</CButton>
-                </CButtonGroup>
-              </CButtonToolbar>
-            </div>
+            <CCardBody>
+              <div>
+                <CButtonToolbar key-nav aria-label="Toolbar with button groups">
+                  <CButtonGroup class="mx-1">
+                    <CButton class="d-sm-down-none">&laquo;</CButton>
+                    <CButton>&lsaquo;</CButton>
+                  </CButtonGroup>
+                  <CButtonGroup class="mx-1">
+                    <CButton class="d-sm-down-none">Edit</CButton>
+                    <CButton>Undo</CButton>
+                    <CButton>Redo</CButton>
+                  </CButtonGroup>
+                  <CButtonGroup class="mx-1">
+                    <CButton>&rsaquo;</CButton>
+                    <CButton class="d-sm-down-none">&raquo;</CButton>
+                  </CButtonGroup>
+                </CButtonToolbar>
+              </div>
+              <hr class="d-sm-down-none"/>
+              <div>
+                <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
+                  <CButtonGroup size="sm" class="mx-1">
+                    <CButton>New</CButton>
+                    <CButton>Edit</CButton>
+                  </CButtonGroup>
+                  <CFormInput
+                    class="mb-0 w-25 mx-1"
+                    size="sm"
+                    prepend="$"
+                    append=".00"
+                    value="100"
+                  />
+                  <CFormSelect
+                    class="mb-0 w-25 mx-1"
+                    size="sm"
+                    prepend="Size"
+                    value="Medium"
+                    :options="['Large','Medium','Small']"
+                    custom
+                  />
+                  <CButtonGroup  size="sm" class="mx-1">
+                    <CButton>Save</CButton>
+                    <CButton>Cancel</CButton>
+                  </CButtonGroup>
+                </CButtonToolbar>
+              </div>
+              <hr/>
+              <div>
+                <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
+                  <CButtonGroup class="mx-1 d-sm-down-none">
+                    <CButton>New</CButton>
+                    <CButton>Edit</CButton>
+                    <CButton>Undo</CButton>
+                  </CButtonGroup>
+                  <CDropdown
+                    class="mx-1"
+                    placement="bottom-end"
+                    buttonContent="Menu"
+                  >
+                    <CDropdownItem>Item 1</CDropdownItem>
+                    <CDropdownItem>Item 2</CDropdownItem>
+                    <CDropdownItem>Item 3</CDropdownItem>
+                  </CDropdown>
+                  <CButtonGroup class="mx-1">
+                    <CButton>Save</CButton>
+                    <CButton>Cancel</CButton>
+                  </CButtonGroup>
+                </CButtonToolbar>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 030eb6ec..3d1058d5 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -4,238 +4,241 @@
       <CRow>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
-              <div class="card-header-actions">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Dropdown</strong>
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <div>
-              <CDropdown id="ddown1" button-content="Dropdown Button" class="m-2">
+            <CCardBody>
+              <div>
+                <CDropdown id="ddown1" buttonContent="Dropdown Button" class="m-2">
+                  <CDropdownItem>First Action</CDropdownItem>
+                  <CDropdownItem>Second Action</CDropdownItem>
+                  <CDropdownItem>Third Action</CDropdownItem>
+                  <CDropdownDivider></CDropdownDivider>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                  <CDropdownItem disabled>Disabled action</CDropdownItem>
+                </CDropdown>
+              </div>
+              <!-- <div>
+                <CDropdown id="ddown-buttons" buttonContent="Dropdown using buttons as menu items" class="m-2">
+                  <CDropdownItem>I'm a button</CDropdownItem>
+                  <CDropdownItem>I'm also a button</CDropdownItem>
+                  <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
+                  <CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
+                </CDropdown>
+              </div> -->
+              <div>
+                <CDropdown id="ddown-divider" buttonContent="Dropdown with divider" class="m-2">
+                  <CDropdownItem>First item</CDropdownItem>
+                  <CDropdownItem>Second item</CDropdownItem>
+                  <CDropdownDivider></CDropdownDivider>
+                  <CDropdownItem>Separated Item</CDropdownItem>
+                </CDropdown>
+              </div>
+              <div>
+                <CDropdown id="ddown-header" buttonContent="Dropdown with header" class="m-2">
+                  <CDropdownHeader>Dropdown header</CDropdownHeader>
+                  <CDropdownItem>First item</CDropdownItem>
+                  <CDropdownItem>Second Item</CDropdownItem>
+                </CDropdown>
+              </div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
+            </CCardHeader>
+            <CCardBody>
+              <div>
+                <CDropdown id="ddown-left" buttonContent="Left align" variant="primary" class="m-2">
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here</CDropdownItem>
+                </CDropdown>
+                <CDropdown id="ddown-right"
+                           placement="bottom-end"
+                           buttonContent="Right align"
+                           variant="primary"
+                           class="m-2"
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here</CDropdownItem>
+                </CDropdown>
+              </div>
+              <div>
+                <CDropdown id="ddown-dropup"
+                           buttonContent="Drop-Up"
+                           variant="info"
+                           class="m-2"
+                           dropup
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here</CDropdownItem>
+                </CDropdown>
+              </div>
+              <div>
+                <CDropdown id="ddown-offset"
+                           :offset="25"
+                           buttonContent="Offset Dropdown"
+                           class="m-2"
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here</CDropdownItem>
+                </CDropdown>
+              </div>
+              <div>
+                <CDropdown id="ddown-split" split buttonContent="Split Dropdown" class="m-2">
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                </CDropdown>
+              </div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
+            </CCardHeader>
+            <CCardBody>
+              <div>
+                <CDropdown variant="link"
+                           size="lg"
+                           buttonContent="&#x1f50d;<span class='sr-only'>Search</span>"
+                           no-caret
+                >
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                </CDropdown>
+              </div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
+            </CCardHeader>
+            <CCardBody>
+              <div>
+                <CDropdown id="ddown-lg" size="lg" buttonContent="Large" class="m-2">
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here</CDropdownItem>
+                </CDropdown>
+                <CDropdown id="ddown-lg-split" size="lg" split buttonContent="Large Split" class="m-2">
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                </CDropdown>
+                <br>
+                <CDropdown id="ddown-sm" size="sm" buttonContent="Small" class="m-2">
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                </CDropdown>
+                <CDropdown id="ddown-sm-split" size="sm" split buttonContent="Small Split" class="m-2">
+                  <CDropdownItem>Action</CDropdownItem>
+                  <CDropdownItem>Another action</CDropdownItem>
+                  <CDropdownItem>Something else here...</CDropdownItem>
+                </CDropdown>
+              </div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
+            </CCardHeader>
+            <CCardBody>
+              <div>
+                <CDropdown id="ddown-aria" buttonContent="Dropdown ARIA" variant="primary" class="m-2">
+                  <div role="group" aria-lableledby="header1">
+                    <CDropdownHeader id="header1">Groups</CDropdownHeader>
+                    <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
+                    <CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
+                  </div>
+                  <div role="group" aria-lableledby="header2">
+                    <CDropdownHeader id="header2">Users</CDropdownHeader>
+                    <CDropdownItem aria-describedby="header2">Add</CDropdownItem>
+                    <CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
+                  </div>
+                  <CDropdownDivider></CDropdownDivider>
+                  <CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
+                </CDropdown>
+              </div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol cols="12" md="6">
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
+            </CCardHeader>
+            <CCardBody>
+              <CDropdown size="sm" id="ddown_primary" buttonContent="Primary" variant="primary" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
-                <CDropdownDivider></CDropdownDivider>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
               </CDropdown>
-            </div>
-            <!-- <div>
-              <CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2">
-                <CDropdownItem>I'm a button</CDropdownItem>
-                <CDropdownItem>I'm also a button</CDropdownItem>
-                <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
-                <CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
+              <CDropdown size="sm" id="ddown_secondary" buttonContent="Secondary" variant="secondary" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div> -->
-            <div>
-              <CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2">
-                <CDropdownItem>First item</CDropdownItem>
-                <CDropdownItem>Second item</CDropdownItem>
-                <CDropdownDivider></CDropdownDivider>
-                <CDropdownItem>Separated Item</CDropdownItem>
+              <CDropdown size="sm" id="ddown_success" buttonContent="Success" variant="success" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div>
-            <div>
-              <CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2">
-                <CDropdownHeader>Dropdown header</CDropdownHeader>
-                <CDropdownItem>First item</CDropdownItem>
-                <CDropdownItem>Second Item</CDropdownItem>
+              <CDropdown size="sm" id="ddown_warning" buttonContent="Warning" variant="warning" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol cols="12" md="6">
-          <CCard
-
-            >
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
-            </CCardHeader>
-            <div>
-              <CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here</CDropdownItem>
+              <CDropdown size="sm" id="ddown_danger" buttonContent="Danger" variant="danger" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown id="ddown-right"
-                         placement="bottom-end"
-                         button-content="Right align"
-                         variant="primary"
-                         class="m-2"
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here</CDropdownItem>
+              <CDropdown size="sm" id="ddown_info" buttonContent="Info" variant="info" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div>
-            <div>
-              <CDropdown id="ddown-dropup"
-                         button-content="Drop-Up"
-                         variant="info"
-                         class="m-2"
-                         dropup
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here</CDropdownItem>
+              <CDropdown size="sm" id="ddown_light" buttonContent="Light" variant="light" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div>
-            <div>
-              <CDropdown id="ddown-offset"
-                         :offset="25"
-                         button-content="Offset Dropdown"
-                         class="m-2"
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here</CDropdownItem>
+              <CDropdown size="sm" id="ddown_dark" buttonContent="Dark" variant="dark" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div>
-            <div>
-              <CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2">
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdown size="sm" id="ddown_link" buttonContent="Link" variant="link" class="m-0">
+                <CDropdownItem>First Action</CDropdownItem>
+                <CDropdownItem>Second Action</CDropdownItem>
+                <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-            </div>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol cols="12" md="6">
-          <CCard
-
-            >
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
-            </CCardHeader>
-            <div>
-              <CDropdown variant="link"
-                         size="lg"
-                         button-content="&#x1f50d;<span class='sr-only'>Search</span>"
-                         no-caret
-              >
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-              </CDropdown>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol cols="12" md="6">
-          <CCard
-
-            >
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
-            </CCardHeader>
-            <div>
-              <CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here</CDropdownItem>
-              </CDropdown>
-              <CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-              </CDropdown>
-              <br>
-              <CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-              </CDropdown>
-              <CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-              </CDropdown>
-            </div>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol cols="12" md="6">
-          <CCard
-
-            >
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
-            </CCardHeader>
-            <div>
-              <CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
-                <div role="group" aria-lableledby="header1">
-                  <CDropdownHeader id="header1">Groups</CDropdownHeader>
-                  <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
-                  <CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
-                </div>
-                <div role="group" aria-lableledby="header2">
-                  <CDropdownHeader id="header2">Users</CDropdownHeader>
-                  <CDropdownItem aria-describedby="header2">Add</CDropdownItem>
-                  <CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
-                </div>
-                <CDropdownDivider></CDropdownDivider>
-                <CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
-              </CDropdown>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol cols="12" md="6">
-          <CCard
-
-            >
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
-            </CCardHeader>
-            <CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
-            <CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
-              <CDropdownItem>First Action</CDropdownItem>
-              <CDropdownItem>Second Action</CDropdownItem>
-              <CDropdownItem>Third Action</CDropdownItem>
-            </CDropdown>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index c040accb..c9ea6616 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="animated fadeIn">
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>Standard buttons</strong>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow class="align-items-center">
           <CCol cols="12" xl class="mb-3 mb-xl-0">
             Normal
@@ -103,11 +103,11 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>Outline Buttons</strong>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <p>
           Use <code>variant="outline-*"</code> prop
         </p>
@@ -203,11 +203,11 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>Ghost Buttons</strong>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <p>
           Use
           <code>ghost</code> prop for ghost buttons.
@@ -304,11 +304,11 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>Square Buttons</strong>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <p>
           Use
           <code>square</code> prop for square buttons.
@@ -411,11 +411,11 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>Pill Buttons</strong>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <p>
           Use
           <code>pill</code> prop for pill buttons.
@@ -518,11 +518,11 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>Sizes</strong>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
         <CRow class="align-items-center">
           <CCol cols="2" xl class="mb-3 mb-xl-0">
@@ -586,12 +586,12 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <strong>With Icons</strong>
       </CCardHeader>
-      <CCardBody slot="body">
-        <CRow class="align-items-center mt-3">
+      <CCardBody>
+        <CRow class="align-items-center">
           <CCol sm xs="12" class="text-center mt-3">
             <CButton variant="primary">
               <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
@@ -621,57 +621,63 @@
       </CCardBody>
     </CCard>
     <CCard>
-      <CCardHeader slot="header">
+      <CCardHeader>
         <strong>Toggle pressed state</strong>
       </CCardHeader>
-      <CRow>
-        <CCol sm xs="12" class="text-center mt-3">
-          <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
-        </CCol>
-        <CCol sm xs="12" class="text-center mt-3">
-          <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
-        </CCol>
-        <CCol sm xs="12" class="text-center mt-3">
-          <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
-        </CCol>
-        <CCol sm xs="12" class="text-center mt-3">
-          <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
-        </CCol>
-        <CCol sm xs="12" class="text-center mt-3">
-          <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
-        </CCol>
-        <CCol sm xs="12" class="text-center mt-3">
-          <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
-        </CCol>
-      </CRow>
+      <CCardBody>
+        <CRow>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+          </CCol>
+          <CCol sm xs="12" class="text-center mt-3">
+            <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
     </CCard>
     <CRow>
       <CCol xs="12" md="6">
         <CCard>
-          <CCardHeader slot="header">
-            <strong>Block Level CButtons</strong> <small>Add this <code>block</code></small>
+          <CCardHeader>
+            <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
-          <CButton size="lg" variant="secondary" block>Block level button</CButton>
-          <CButton size="lg" variant="primary" block>Block level button</CButton>
-          <CButton size="lg" variant="success" block>Block level button</CButton>
-          <CButton size="lg" variant="info" block>Block level button</CButton>
-          <CButton size="lg" variant="warning" block>Block level button</CButton>
-          <CButton size="lg" variant="danger" block>Block level button</CButton>
-          <CButton size="lg" variant="link" block>Block level button</CButton>
+          <CCardBody>
+            <CButton size="lg" variant="secondary" block>Block level button</CButton>
+            <CButton size="lg" variant="primary" block>Block level button</CButton>
+            <CButton size="lg" variant="success" block>Block level button</CButton>
+            <CButton size="lg" variant="info" block>Block level button</CButton>
+            <CButton size="lg" variant="warning" block>Block level button</CButton>
+            <CButton size="lg" variant="danger" block>Block level button</CButton>
+            <CButton size="lg" variant="link" block>Block level button</CButton>
+          </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
       <CCard>
-          <CCardHeader slot="header">
-            <strong>Block Level CButtons</strong> <small>Add this <code>block</code></small>
+          <CCardHeader>
+            <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
-          <CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
-          <CButton size="lg" variant="outline-primary" block>Block level button</CButton>
-          <CButton size="lg" variant="outline-success" block>Block level button</CButton>
-          <CButton size="lg" variant="outline-info" block>Block level button</CButton>
-          <CButton size="lg" variant="outline-warning" block>Block level button</CButton>
-          <CButton size="lg" variant="outline-danger" block>Block level button</CButton>
-          <CButton size="lg" ghost variant="info" block>Block level button</CButton>
+          <CCardBody>
+            <CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline-primary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline-success" block>Block level button</CButton>
+            <CButton size="lg" variant="outline-info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline-warning" block>Block level button</CButton>
+            <CButton size="lg" variant="outline-danger" block>Block level button</CButton>
+            <CButton size="lg" ghost variant="info" block>Block level button</CButton>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index ee310d04..8f25fe19 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="animated fadeIn">
-    <CCard noWrapper>
-      <CCardHeader slot="header">
+    <CCard >
+      <CCardHeader>
         <i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
         <div class="card-header-actions">
           <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
@@ -9,7 +9,7 @@
           </a>
         </div>
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow class="text-center">
           <CCol cols="6" sm="4" md="3" xl="2">
             <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index 3ddfa17e..5eb11695 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="animated fadeIn">
-    <CCard noWrapper id="new47">
-      <CCardHeader slot="header">
+    <CCard  id="new47">
+      <CCardHeader>
         <i class="fa fa-font-awesome"></i> Flags
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow class="text-center">
           <CCol class="mb-5" cols="12">
             For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
diff --git a/src/views/icons/FontAwesome.vue b/src/views/icons/FontAwesome.vue
index 41c98bea..05485a33 100644
--- a/src/views/icons/FontAwesome.vue
+++ b/src/views/icons/FontAwesome.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="animated fadeIn">
-    <CCard noWrapper id="new47">
-      <CCardHeader slot="header">
+    <CCard  id="new47">
+      <CCardHeader>
         <i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow class="text-center">
           <CCol cols="6" sm="4" md="3" lg="2">
             <i class="fa fa-address-book fa-lg mt-4"></i><br/>address-book
@@ -174,9 +174,9 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard noWrapper id="new">
-      <CCardHeader slot="header">20 New Icons in 4.5</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="new">
+      <CCardHeader>20 New Icons in 4.5</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -245,9 +245,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="web-application">
-      <CCardHeader slot="header">Web Application Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="web-application">
+      <CCardHeader>Web Application Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1432,9 +1432,9 @@
 
     </CCard>
 
-    <CCard noWrapper id="hand">
-      <CCardHeader slot="header">Hand Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="hand">
+      <CCardHeader>Hand Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1494,9 +1494,9 @@
 
     </CCard>
 
-    <CCard noWrapper id="transportation">
-      <CCardHeader slot="header">Transportation Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="transportation">
+      <CCardHeader>Transportation Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1555,9 +1555,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="gender">
-      <CCardHeader slot="header">Gender Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="gender">
+      <CCardHeader>Gender Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1607,9 +1607,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="file-type">
-      <CCardHeader slot="header">File Type Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="file-type">
+      <CCardHeader>File Type Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1671,9 +1671,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="spinner">
-      <CCardHeader slot="header">Spinner Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="spinner">
+      <CCardHeader>Spinner Icons</CCardHeader>
+      <CCardBody>
         <div class="alert alert-success">
           <ul class="fa-ul">
             <li>
@@ -1704,9 +1704,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="form-control">
-      <CCardHeader slot="header">Form Control Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="form-control">
+      <CCardHeader>Form Control Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1747,9 +1747,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="payment">
-      <CCardHeader slot="header">Payment Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="payment">
+      <CCardHeader>Payment Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1793,9 +1793,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="chart">
-      <CCardHeader slot="header">Chart Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="chart">
+      <CCardHeader>Chart Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1818,9 +1818,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="currency">
-      <CCardHeader slot="header">Currency Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="currency">
+      <CCardHeader>Currency Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -1906,9 +1906,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="text-editor">
-      <CCardHeader slot="header">Text Editor Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="text-editor">
+      <CCardHeader>Text Editor Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -2063,9 +2063,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="directional">
-      <CCardHeader slot="header">Directional Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="directional">
+      <CCardHeader>Directional Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -2232,9 +2232,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="video-player">
-      <CCardHeader slot="header">Video Player Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="video-player">
+      <CCardHeader>Video Player Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
@@ -2305,9 +2305,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="brand">
-      <CCardHeader slot="header">Brand Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="brand">
+      <CCardHeader>Brand Icons</CCardHeader>
+      <CCardBody>
         <div class="alert alert-warning">
           <h4><i class="fa fa-warning"></i> Warning!</h4>
           Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@@ -2796,9 +2796,9 @@
       </CCardBody>
     </CCard>
 
-    <CCard noWrapper id="medical">
-      <CCardHeader slot="header">Medical Icons</CCardHeader>
-      <CCardBody slot="body">
+    <CCard  id="medical">
+      <CCardHeader>Medical Icons</CCardHeader>
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3" lg="2">
diff --git a/src/views/icons/SimpleLineIcons.vue b/src/views/icons/SimpleLineIcons.vue
index 8659ba1a..dd127826 100644
--- a/src/views/icons/SimpleLineIcons.vue
+++ b/src/views/icons/SimpleLineIcons.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="animated fadeIn">
-    <CCard noWrapper class="card-default">
-      <CCardHeader slot="header">
+    <CCard  class="card-default">
+      <CCardHeader>
         <i class="fa fa-picture-o"></i> Simple Line Icons
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow class="text-center">
 
           <CCol cols="6" sm="4" md="3">
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 92845d9c..d9a70c9f 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -4,147 +4,158 @@
       <CRow>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
-              <div class="card-header-actions">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Alert</strong>
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <div>
-              <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>
+            <CCardBody>
+              <div>
+                <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>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i> Alert
               <small> use <code>.alert-link</code> to provide links</small>
             </CCardHeader>
-            <div>
-              <CAlert show variant="primary">
-                Primary Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="secondary">
-                Secondary Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="success">
-                Success Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="danger">
-                Danger Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="warning">
-                Warning Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="info">
-                Info Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="light">
-                Light Alert with <a href="#" class="alert-link">an example link</a>.
-              </CAlert>
-              <CAlert show variant="dark">
-                Dark Alert with
-                <CLink href="#" class="alert-link">an example link</CLink>
-                .
-              </CAlert>
-            </div>
+            <CCardBody>
+              <div>
+                <CAlert show variant="primary">
+                  Primary Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="secondary">
+                  Secondary Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="success">
+                  Success Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="danger">
+                  Danger Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="warning">
+                  Warning Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="info">
+                  Info Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="light">
+                  Light Alert with <a href="#" class="alert-link">an example link</a>.
+                </CAlert>
+                <CAlert show variant="dark">
+                  Dark Alert with
+                  <CLink href="#" class="alert-link">an example link</CLink>
+                  .
+                </CAlert>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
             </CCardHeader>
-            <CAlert show variant="success">
-              <h4 class="alert-heading">Well done!</h4>
-              <p>
-                Aww yeah, you successfully read this important alert message.
-                This example text is going to run a bit longer so that you can see
-                how spacing within an alert works with this kind of content.
-              </p>
-              <hr>
-              <p class="mb-0">
-                Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-              </p>
-            </CAlert>
+            <CCardBody>
+              <CAlert show variant="success">
+                <h4 class="alert-heading">Well done!</h4>
+                <p>
+                  Aww yeah, you successfully read this important alert message.
+                  This example text is going to run a bit longer so that you can see
+                  how spacing within an alert works with this kind of content.
+                </p>
+                <hr>
+                <p class="mb-0">
+                  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+                </p>
+              </CAlert>
+            </CCardBody>
           </CCard>
         </CCol>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
             </CCardHeader>
-            <div>
-              <CAlert :show="true" dismissible disabled>
+            <CCardBody>
+              <div>
+                <CAlert :show="true" dismissible disabled>
+                  Dismissible Alert!
+                </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!
               </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!
-            </CAlert>
-            <CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
-              Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
-            </CButton>
-            </div>
+              <CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
+                Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
+              </CButton>
+              </div>
+            </CCardBody>
           </CCard>
           <CCard>
-            <CCardHeader slot="header">
+            <CCardHeader>
               <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
             </CCardHeader>
-            <div>
-              <CAlert :show="dismissCountDown"
-                       dismissible
-                       variant="warning"
-                       @dismissed="dismissCountdown=0"
-                       @dismiss-count-down="countDownChanged">
-                Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
-              </CAlert>
+            <CCardBody>
+              <div>
+                <CAlert :show="dismissCountDown"
+                         dismissible
+                         variant="warning"
+                         @dismissed="dismissCountdown=0"
+                         @dismiss-count-down="countDownChanged">
+                  Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
+                </CAlert>
 
-              <CAlert :show="dismissCountDown"
-                       dismissible
-                       variant="info"
-                       @dismissed="dismissCountdown=0"
-                       @dismiss-count-down="countDownChanged">
-                Alert will dismiss after {{dismissCountDown}} seconds...
-                <CProgress variant="info"
-                            :max="dismissSecs"
-                            :value="dismissCountDown"
-                            height="4px">
-                </CProgress>
-              </CAlert>
-              <CButton @click="showAlert" variant="info" class="m-1">
-                Show alert with timer
-              </CButton>
-            </div>
+                <CAlert :show="dismissCountDown"
+                         dismissible
+                         variant="info"
+                         @dismissed="dismissCountdown=0"
+                         @dismiss-count-down="countDownChanged">
+                  Alert will dismiss after {{dismissCountDown}} seconds...
+                  <CProgress variant="info"
+                              :max="dismissSecs"
+                              :value="dismissCountDown"
+                              height="4px">
+                  </CProgress>
+                </CAlert>
+                <CButton @click="showAlert" variant="info" class="m-1">
+                  Show alert with timer
+                </CButton>
+              </div>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index b17d8e18..37b1c6ea 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,25 +1,26 @@
-<template>
+<template functional>
   <div class="wrapper">
     <div class="animated fadeIn">
       <CRow>
         <CCol cols="12" md="6">
           <CCard>
-            <CCardHeader slot="header">
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
-              <div class="card-header-actions">
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap Badge</strong>
+              <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
                 </a>
-              </div>
+              </div> -->
             </CCardHeader>
-            <div>
+            <CCardBody>
               <h2>Example heading <CBadge>New</CBadge></h2>
               <h3>Example heading <CBadge>New</CBadge></h3>
               <h4>Example heading <CBadge>New</CBadge></h4>
               <h5>Example heading <CBadge>New</CBadge></h5>
               <h6>Example heading <CBadge>New</CBadge></h6>
-            </div>
-            <CCardFooter slot="footer">
+            </CCardBody>
+            <CCardFooter>
               <CButton variant="primary">
                 Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
               </CButton>
@@ -27,8 +28,12 @@
           </CCard>
         </CCol>
         <CCol cols="12" md="6">
-          <CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
-            <div>
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i> Badge
+              <small>contextual variations</small>
+            </CCardHeader>
+            <CCardBody>
               <CBadge variant="primary">Primary</CBadge>
               <CBadge variant="secondary">Secondary</CBadge>
               <CBadge variant="success">Success</CBadge>
@@ -37,10 +42,14 @@
               <CBadge variant="info">Info</CBadge>
               <CBadge variant="light">Light</CBadge>
               <CBadge variant="dark">Dark</CBadge>
-            </div>
+            </CCardBody>
           </CCard>
-          <CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
-            <div>
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i> Badge
+              <small>pills</small>
+            </CCardHeader>
+            <CCardBody>
               <CBadge pill variant="primary">Primary</CBadge>
               <CBadge pill variant="secondary">Secondary</CBadge>
               <CBadge pill variant="success">Success</CBadge>
@@ -49,10 +58,14 @@
               <CBadge pill variant="info">Info</CBadge>
               <CBadge pill variant="light">Light</CBadge>
               <CBadge pill variant="dark">Dark</CBadge>
-            </div>
+            </CCardBody>
           </CCard>
-          <CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
-            <div>
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i> Badge
+              <small>actionable</small>
+            </CCardHeader>
+            <CCardBody>
               <CBadge href="#" variant="primary">Primary</CBadge>
               <CBadge href="#" variant="secondary">Secondary</CBadge>
               <CBadge href="#" variant="success">Success</CBadge>
@@ -61,7 +74,7 @@
               <CBadge href="#" variant="info">Info</CBadge>
               <CBadge href="#" variant="light">Light</CBadge>
               <CBadge href="#" variant="dark">Dark</CBadge>
-            </div>
+            </CCardBody>
           </CCard>
         </CCol>
       </CRow>
@@ -71,10 +84,6 @@
 
 <script>
 export default {
-  name: 'badges',
-  data () {
-    return {
-    }
-  }
+  name: 'badges'
 }
 </script>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 8d0a3448..a8075ba1 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -3,17 +3,40 @@
     <div class="animated fadeIn">
       <CRow>
         <CCol cols="12">
-          <CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
-            <CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton>
-            <CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton>
-            <CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton>
-            <hr>
-            <CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton>
-            <CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton>
-            <CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton>
-            <CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton>
-            <CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton>
-            <CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton>
+          <CCard>
+            <CCardHeader>
+              <i class="fa fa-align-justify"></i> Bootstrap Modals
+            </CCardHeader>
+            <CCardBody>
+              <CButton variant="secondary" @click="myModal = true" class="mr-1">
+                Launch demo modal
+              </CButton>
+              <CButton variant="secondary" @click="largeModal = true" class="mr-1">
+                Launch large modal
+              </CButton>
+              <CButton variant="secondary" @click="smallModal = true" class="mr-1">
+                Launch small modal
+              </CButton>
+              <hr>
+              <CButton variant="primary" @click="primaryModal = true" class="mr-1">
+                Launch primary modal
+              </CButton>
+              <CButton variant="success" @click="successModal = true" class="mr-1">
+                Launch success modal
+              </CButton>
+              <CButton variant="warning" @click="warningModal = true" class="mr-1">
+                Launch warning modal
+              </CButton>
+              <CButton variant="danger" @click="dangerModal = true" class="mr-1">
+                Launch danger modal
+              </CButton>
+              <CButton variant="info" @click="infoModal = true" class="mr-1">
+                Launch info modal
+              </CButton>
+              <CButton variant="dark" @click="darkModal = true" class="mr-1">
+                Launch dark modal
+              </CButton>
+            </CCardBody>
           </CCard>
         </CCol><!--/.col-->
       </CRow><!--/.row-->
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 54072f8c..5585c91a 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -4,8 +4,8 @@
       <CRow class="justify-content-center">
         <CCol md="8">
           <CCardGroup>
-            <CCard noWrapper class="p-4">
-              <CCardBody slot="body">
+            <CCard class="p-4">
+              <CCardBody>
                 <CForm>
                   <h1>Login</h1>
                   <p class="text-muted">Sign In to your account</p>
@@ -34,6 +34,7 @@
             <CCard
               class="text-white text-center bg-primary py-5 d-md-down-none"
               style="width:44%"
+              bodyWrapper
             >
               <h2>Sign up</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index 62e1b354..2b23abfc 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -4,50 +4,46 @@
       <CRow class="justify-content-center">
         <CCol md="6" sm="8">
           <CCard class="mx-4">
-            <template #body>
-              <CCardBody class="p-4">
-                <CForm>
-                  <h1>Register</h1>
-                  <p class="text-muted">Create your account</p>
-                  <CFormInput
-                    placeholder="Username"
-                    prepend="<i class='icon-user'></i>"
-                    autocomplete="username"
-                  />
-                  <CFormInput
-                    placeholder="Email"
-                    prepend="@"
-                    autocomplete="email"
-                  />
-                  <CFormInput
-                    placeholder="Password"
-                    type="password"
-                    prepend="<i class='icon-lock'></i>"
-                    autocomplete="new-password"
-                  />
-                  <CFormInput
-                    placeholder="Repeat password"
-                    type="password"
-                    prepend="<i class='icon-lock'></i>"
-                    autocomplete="new-password"
-                    class="mb-4"
-                  />
-                  <CButton variant="success" block>Create Account</CButton>
-                </CForm>
-              </CCardBody>
-            </template>
-            <template #footer>
-              <CCardFooter class="p-4">
-                <CRow>
-                  <CCol cols="6">
-                    <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
-                  </CCol>
-                  <CCol cols="6">
-                    <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
-                  </CCol>
-                </CRow>
-              </CCardFooter>
-            </template>
+            <CCardBody class="p-4">
+              <CForm>
+                <h1>Register</h1>
+                <p class="text-muted">Create your account</p>
+                <CFormInput
+                  placeholder="Username"
+                  prepend="<i class='icon-user'></i>"
+                  autocomplete="username"
+                />
+                <CFormInput
+                  placeholder="Email"
+                  prepend="@"
+                  autocomplete="email"
+                />
+                <CFormInput
+                  placeholder="Password"
+                  type="password"
+                  prepend="<i class='icon-lock'></i>"
+                  autocomplete="new-password"
+                />
+                <CFormInput
+                  placeholder="Repeat password"
+                  type="password"
+                  prepend="<i class='icon-lock'></i>"
+                  autocomplete="new-password"
+                  class="mb-4"
+                />
+                <CButton variant="success" block>Create Account</CButton>
+              </CForm>
+            </CCardBody>
+            <CCardFooter class="p-4">
+              <CRow>
+                <CCol cols="6">
+                  <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
+                </CCol>
+                <CCol cols="6">
+                  <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
+                </CCol>
+              </CRow>
+            </CCardFooter>
           </CCard>
         </CCol>
       </CRow>
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index 38dec887..b10c798c 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="animated fadeIn">
     <CCard >
-      <CCardHeader slot="header">
+      <CCardHeader>
         <i class="icon-drop"></i> Theme colors
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow>
           <ColorTheme color="bg-primary">
             <h6>Brand Primary Color</h6>
@@ -19,11 +19,11 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
-      <CCardHeader slot="header">
+    <CCard>
+      <CCardHeader>
         <i class="icon-drop"></i> Grays
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow>
           <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
           <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
@@ -38,10 +38,10 @@
       </CCardBody>
     </CCard>
     <CCard >
-      <CCardHeader slot="header">
+      <CCardHeader>
         <i class="icon-drop"></i> Additional colors
       </CCardHeader>
-      <CCardBody slot="body">
+      <CCardBody>
         <CRow>
           <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
           <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
diff --git a/src/views/users/User.vue b/src/views/users/User.vue
index 40b9e4ab..d186bfac 100644
--- a/src/views/users/User.vue
+++ b/src/views/users/User.vue
@@ -1,21 +1,21 @@
 <template>
   <CRow>
-    <CCol cols="12"
-          lg="6"
-    >
-      <CCard no-header>
-        <template slot="header">
+    <CCol cols="12" lg="6">
+      <CCard>
+        <CCardHeader>
           User id:  {{ $route.params.id }}
-        </template>
-        <CTable striped
-                small
-                fixed
-                :items="items($route.params.id)"
-                :fields="$options.fields"
-        />
-        <template slot="footer">
+        </CCardHeader>
+        <CCardBody>
+          <CTable striped
+                  small
+                  fixed
+                  :items="items($route.params.id)"
+                  :fields="$options.fields"
+          />
+        </CCardBody>
+        <CCardFooter>
           <CButton @click="goBack">Back</CButton>
-        </template>
+        </CCardFooter>
       </CCard>
     </CCol>
   </CRow>
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index 53e46468..51369cb5 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -1,8 +1,8 @@
 <template>
   <CRow>
-    <CCol cols="12" xl="6">
+    <CCol cols="12" xl="8">
       <transition name="slide">
-        <CCard header="users">
+        <CCard header="users" bodyWrapper>
           <CTable hover
                   striped
                   :items="items"