diff --git a/src/App.vue b/src/App.vue
index 07353025..683fbcb5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'app'
+  name: 'App'
 }
 </script>
 
diff --git a/src/containers/TheContainer.vue b/src/containers/TheContainer.vue
index 6205566c..2526ecc8 100644
--- a/src/containers/TheContainer.vue
+++ b/src/containers/TheContainer.vue
@@ -23,7 +23,7 @@ import TheHeader from './TheHeader'
 import TheFooter from './TheFooter'
 
 export default {
-  name: 'full',
+  name: 'TheContainer',
   components: {
     TheSidebar,
     TheHeader,
diff --git a/src/containers/TheFooter.vue b/src/containers/TheFooter.vue
index d4740374..6a88937c 100644
--- a/src/containers/TheFooter.vue
+++ b/src/containers/TheFooter.vue
@@ -2,7 +2,7 @@
   <CFooter>
     <div>
       <a href="https://coreui.io">CoreUI</a>
-      <span class="ml-1">&copy; 2018 creativeLabs.</span>
+      <span class="ml-1">&copy; 2019 creativeLabs.</span>
     </div>
     <div class="ml-auto">
       <span class="mr-1">Powered by</span>
diff --git a/src/containers/_nav.js b/src/containers/_nav.js
index b77013a0..6f1104f7 100644
--- a/src/containers/_nav.js
+++ b/src/containers/_nav.js
@@ -447,6 +447,7 @@ export default [
           href: 'http://coreui.io/vue/',
           icon: 'cui-cloud-download',
           addLinkClasses: 'c-nav-link-success',
+          target: '_blank'
         },
         attrs: {
           class: 'mt-auto',
@@ -461,6 +462,7 @@ export default [
           href: 'http://coreui.io/pro/vue/',
           icon: 'cui-layers',
           addLinkClasses: 'c-nav-link-danger',
+          target: '_blank'
         }
       }
     ]
diff --git a/src/router/index.js b/src/router/index.js
index 128069be..fab58824 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
 const Colors = () => import('@/views/theme/Colors')
 const Typography = () => import('@/views/theme/Typography')
 
-const Charts = () => import('@/views/Charts')
+const Charts = () => import('@/views/charts/Charts')
 const Widgets = () => import('@/views/widgets/Widgets')
 
 // Views - Components
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 542f4e05..23a80a45 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,37 +1,33 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol col>
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <CCardBody>
-              <CBreadcrumb :items="items"/>
-              <CBreadcrumb :items="items2"/>
-              <CBreadcrumb :items="items3"/>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
-  </div>
+  <CRow>
+    <CCol col>
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
+          <div class="card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <CCardBody>
+          <CBreadcrumb :items="items"/>
+          <CBreadcrumb :items="items2"/>
+          <CBreadcrumb :items="items3"/>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 export default {
-  name: 'breadcrumbs',
+  name: 'Breadcrumbs',
   data () {
     return {
       items: [
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index ade55bdd..5daceb36 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -233,11 +233,11 @@
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" v-if="show" >
+          <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" >
+                <CLink href="#" class="card-header-action btn-setting">
                   <i class="cui-settings"></i>
                 </CLink>
                 <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
@@ -263,7 +263,7 @@
 <script>
 
 export default {
-  name: 'cards',
+  name: 'Cards',
   data: function () {
     return {
       show: true,
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 4abde58c..31b33616 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,52 +1,50 @@
 <template>
-  <div class="wrapper">
-      <CRow>
-      <CCol md="12" lg="7">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap Carousel</strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Carousel" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <CCardBody>
-              <CCarousel
-                arrows
-                indicators
-                animate
-                height="400px"
-              >
-                <CCarouselItem
-                captionHeader="First Slide"
-                  image="https://lorempixel.com/1024/480/technics/2/"
-                captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
-                />
-                <CCarouselItem
-                captionHeader="Blank page"
-                  :image="{ blankColor: 'grey' }"
-                captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
-                />
-                <CCarouselItem
-                 image="https://lorempixel.com/1024/480/technics/8/"
-                />
-              </CCarousel>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
+  <CRow>
+    <CCol md="12" lg="7">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Carousel</strong>
+          <div class="card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Carousel" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <CCardBody>
+          <CCarousel
+            arrows
+            indicators
+            animate
+            height="400px"
+          >
+            <CCarouselItem
+            captionHeader="First Slide"
+              image="https://lorempixel.com/1024/480/technics/2/"
+            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+            />
+            <CCarouselItem
+            captionHeader="Blank page"
+              :image="{ blankColor: 'grey' }"
+            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+            />
+            <CCarouselItem
+              image="https://lorempixel.com/1024/480/technics/8/"
+            />
+          </CCarousel>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 export default {
-  name: 'carousels'
+  name: 'Carousels'
 }
 </script>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 54069fd5..f7d99a63 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,49 +1,45 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap Collapse </strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Collapse" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <CCardBody>
-              <CButton id="collapse1" variant="primary">
-                Toggle Collapse
+  <CRow>
+    <CCol col="12" md="6">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Collapse </strong>
+          <div class="card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Collapse" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <CCardBody>
+          <CButton id="collapse1" variant="primary">
+            Toggle Collapse
+          </CButton>
+          <CCollapse toggler="collapse1" class="mt-2">
+            <CCard body-wrapper>
+              <p class="card-text">Collapse contents Here</p>
+              <CButton id="collapse2" size="sm" variant="secondary">
+                Toggle Inner Collapse
               </CButton>
-              <CCollapse toggler="collapse1" class="mt-2">
-                <CCard body-wrapper>
-                  <p class="card-text">Collapse contents Here</p>
-                  <CButton id="collapse2" size="sm" variant="secondary">
-                    Toggle Inner Collapse
-                  </CButton>
-                  <CCollapse toggler="collapse2" class="mt-2">
-                    <CCard body-wrapper>Hello!</CCard>
-                  </CCollapse>
-                </CCard>
+              <CCollapse toggler="collapse2" class="mt-2">
+                <CCard body-wrapper>Hello!</CCard>
               </CCollapse>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
-  </div>
+            </CCard>
+          </CCollapse>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 export default {
-  name: 'collapses',
+  name: 'Collapses',
   data () {
     return {
       showCollapse: true,
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 136dbd0f..81e1faa9 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -852,7 +852,7 @@
 
 <script>
 export default {
-  name: 'forms',
+  name: 'Forms',
   data () {
     return {
       selected: [], // Must be an array reference!
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 74f54c85..e019d69b 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -1,89 +1,87 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol>
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap Jumbotron </strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Jumbotron" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <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>
-            </CCardBody>
-          </CCard>
-        </CCol>
-        <CCol>
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
-              <small>with slots</small>
-            </CCardHeader>
-            <CCardBody>
-              <CJumbotron header="Bootstrap 4" lead="">
-                <p slot="lead" class="lead">
-                  This is a simple hero unit, a simple jumbotron-style component for
-                  calling extra attention to featured content or information.
-                </p>
-                <hr class="my-4">
-                <p>
-                  It uses utility classes for typography and spacing to space content
-                  out within the larger container.
-                </p>
-                <CButton variant="primary" href="#">Do Something</CButton>
-                <CButton variant="success" href="#">Do Something Else</CButton>
-              </CJumbotron>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol>
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
-              <small>variants</small>
-            </CCardHeader>
-            <CCardBody>
-              <CJumbotron
-                variant="info"
-                text-variant="white"
-                border-variant="dark"
-                header="Bootstrap 4"
+  <div>
+    <CRow>
+      <CCol>
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Bootstrap Jumbotron </strong>
+            <div class="card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/Jumbotron" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
               >
-                <p slot="lead" class="lead">
-                  This is a simple hero unit, a simple jumbotron-style component for
-                  calling extra attention to featured content or information.
-                </p>
-                <hr class="my-4">
-                <p>
-                  It uses utility classes for typography and spacing to space content
-                  out within the larger container.
-                </p>
-              </CJumbotron>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+          </CCardHeader>
+          <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>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol>
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <small>with slots</small>
+          </CCardHeader>
+          <CCardBody>
+            <CJumbotron header="Bootstrap 4" lead="">
+              <p slot="lead" class="lead">
+                This is a simple hero unit, a simple jumbotron-style component for
+                calling extra attention to featured content or information.
+              </p>
+              <hr class="my-4">
+              <p>
+                It uses utility classes for typography and spacing to space content
+                out within the larger container.
+              </p>
+              <CButton variant="primary" href="#">Do Something</CButton>
+              <CButton variant="success" href="#">Do Something Else</CButton>
+            </CJumbotron>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol>
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <small>variants</small>
+          </CCardHeader>
+          <CCardBody>
+            <CJumbotron
+              variant="info"
+              text-variant="white"
+              border-variant="dark"
+              header="Bootstrap 4"
+            >
+              <p slot="lead" class="lead">
+                This is a simple hero unit, a simple jumbotron-style component for
+                calling extra attention to featured content or information.
+              </p>
+              <hr class="my-4">
+              <p>
+                It uses utility classes for typography and spacing to space content
+                out within the larger container.
+              </p>
+            </CJumbotron>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'jumbotrons'
+  name: 'Jumbotrons'
 }
 </script>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 34401831..4f53881c 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,281 +1,279 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap list group </strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/ListGroup" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>disabled items</small>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>actionable items</small>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>buttons</small>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>with badges</small>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>variants</small>
-            </CCardHeader>
-            <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>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>variants active</small>
-            </CCardHeader>
-            <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 col="12">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> List group </strong>
-              <small>inside cards</small>
-            </CCardHeader>
-            <CCardBody>
-              <CCardGroup deck>
-                <CCard headerHtml="<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>
-              <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
-            </CCardHeader>
-            <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>
-    </div>
+  <div>
+    <CRow>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Bootstrap list group </strong>
+            <div class="card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/ListGroup" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>disabled items</small>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>actionable items</small>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>buttons</small>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>with badges</small>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>variants</small>
+          </CCardHeader>
+          <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>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>variants active</small>
+          </CCardHeader>
+          <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 col="12">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> List group </strong>
+            <small>inside cards</small>
+          </CCardHeader>
+          <CCardBody>
+            <CCardGroup deck>
+              <CCard headerHtml="<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>
+            <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
+          </CCardHeader>
+          <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>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'list-groups'
+  name: 'ListGroups'
 }
 </script>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 9df65eb2..9ec817d2 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -1,212 +1,177 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <!-- <CCard>
-        <CNavbar toggleable="md" light variant="light">
-          <CNavbarToggle class="hehe" @click="test2 = !test2"/>
-          <CLink class="navbar-brand">NavBar</CLink>
-          <CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
-            <CNavbarNav pills class="navbar-nav">
-              <CNavItem>
-                hehehe1
-              </CNavItem>
-              <CNavItem class="nav-item">
-                hehehe1
-              </CNavItem>
-              <CNavItem class="nav-item">
-                hehehe2
-              </CNavItem>
-              <DefaultHeaderDropdownAccnt/>
-            </CNavbarNav>
-            <CNavbarNav class="ml-auto">
-              <CDropdown right class="nav-item " toggle-classes="nav-link">
-                <CDropdownItem><i class="cui-file" /> Projects
-                  <CBadge variant="primary">32</CBadge>
-                </CDropdownItem>
-                <CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
-                <CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
-              </CDropdown>
-            </CNavbarNav>
-          </CCollapse>
-        </CNavbar>
-      </CCard> -->
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navbar </strong>
-          <div class="card-header-actions">
-            <a 
-              href="https://coreui.io/vue/docs/3.0/components/Navbar" 
-              class="card-header-action" 
-              rel="noreferrer noopener" 
-              target="_blank"
-            >
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </CCardHeader>
-        <CCardBody>
-          <CNavbar
-            toggleable="md"
-            variant="info"
+  <div>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navbar </strong>
+        <div class="card-header-actions">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/Navbar" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
           >
-            <CNavbarToggle @click="show=!show"/>
-            <CNavbarBrand href="#">NavBar</CNavbarBrand>
-            <CCollapse :show="show" navbar>
-              <CNavbarNav>
-                <CNavItem href="#">Link</CNavItem>
-                <CNavItem href="#" disabled>Disabled</CNavItem>
-              </CNavbarNav>
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
+      </CCardHeader>
+      <CCardBody>
+        <CNavbar
+          toggleable="md"
+          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 variant="light" size="sm" class="my-2 my-sm-0">
-                    Search
-                  </CButton>
-                </CForm>
+            <!-- Right aligned nav items -->
+            <CNavbarNav class="ml-auto">
+              <CForm inline>
+                <CFormInput
+                  class="mr-sm-2"
+                  placeholder="Search"
+                  size="sm"
+                />
+                <CButton variant="light" size="sm" class="my-2 my-sm-0">
+                  Search
+                </CButton>
+              </CForm>
 
-                <CDropdown
-                  button-html="Lang"
-                  nav
-                  placement="bottom-end"
-                >
-                    <CDropdownItem>EN</CDropdownItem>
-                    <CDropdownItem>ES</CDropdownItem>
-                    <CDropdownItem>RU</CDropdownItem>
-                    <CDropdownItem>FA</CDropdownItem>
-                </CDropdown>
-
-                <CDropdown
-                  nav
-                  buttonHtml="<em>User</em>"
-                  placement="bottom-end"
-                >
-                  <CDropdownItem>Profile</CDropdownItem>
-                  <CDropdownItem>Signout</CDropdownItem>
-                </CDropdown>
-              </CNavbarNav>
-            </CCollapse>
-          </CNavbar>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>brand</small>
-        </CCardHeader>
-        <CCardBody>
-          <!-- Image and text -->
-          <CNavbar variant="faded" light>
-            <CNavbarBrand href="#">
-              <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
-              CoreuiVue
-            </CNavbarBrand>
-          </CNavbar>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>text</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNavbar toggleable="sm" light variant="light">
-            <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
-            <CNavbarBrand>CoreuiVue</CNavbarBrand>
-            <CCollapse :show="navbarText" navbar>
-              <CNavbarNav>
-                <span class="navbar-text">Navbar text</span>
-              </CNavbarNav>
-            </CCollapse>
-          </CNavbar>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>dropdown</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNavbar toggleable="sm" variant="primary">
-            <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
-            <CCollapse :show="navbarDropdown" navbar>
-              <CNavbarNav>
-                <CNavItem href="#">Home</CNavItem>
-                <CNavItem href="#">Link</CNavItem>
-                <!-- Navbar dropdowns -->
-                <CDropdown
-                  button-html="Lang"
-                  right
-                  nav
-                >
+              <CDropdown
+                button-html="Lang"
+                nav
+                placement="bottom-end"
+              >
                   <CDropdownItem>EN</CDropdownItem>
                   <CDropdownItem>ES</CDropdownItem>
                   <CDropdownItem>RU</CDropdownItem>
                   <CDropdownItem>FA</CDropdownItem>
-                </CDropdown>
-                <CDropdown
-                  button-html="User"
-                  right
-                  nav
-                >
-                  <CDropdownItem>Account</CDropdownItem>
-                  <CDropdownItem>Settings</CDropdownItem>
-                </CDropdown>
-              </CNavbarNav>
-            </CCollapse>
-          </CNavbar>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>form</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNavbar light variant="light">
-            <CForm inline>
-              <CFormInput
-                class="mr-sm-2"
-                placeholder="Search"
-                size="sm"
-              />
-              <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
-            </CForm>
-          </CNavbar>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>input group</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNavbar light variant="light">
-            <CForm inline>
-              <CFormInput
-                class="mr-sm-2"
-                placeholder="Username"
-              />
-            </CForm>
-          </CNavbar>
-        </CCardBody>
-      </CCard>
-    </div>
+              </CDropdown>
+
+              <CDropdown
+                nav
+                buttonHtml="<em>User</em>"
+                placement="bottom-end"
+              >
+                <CDropdownItem>Profile</CDropdownItem>
+                <CDropdownItem>Signout</CDropdownItem>
+              </CDropdown>
+            </CNavbarNav>
+          </CCollapse>
+        </CNavbar>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <small>brand</small>
+      </CCardHeader>
+      <CCardBody>
+        <!-- Image and text -->
+        <CNavbar variant="faded" light>
+          <CNavbarBrand href="#">
+            <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
+            CoreuiVue
+          </CNavbarBrand>
+        </CNavbar>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <small>text</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNavbar toggleable="sm" light variant="light">
+          <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
+          <CNavbarBrand>CoreuiVue</CNavbarBrand>
+          <CCollapse :show="navbarText" navbar>
+            <CNavbarNav>
+              <span class="navbar-text">Navbar text</span>
+            </CNavbarNav>
+          </CCollapse>
+        </CNavbar>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <small>dropdown</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNavbar toggleable="sm" variant="primary">
+          <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
+          <CCollapse :show="navbarDropdown" navbar>
+            <CNavbarNav>
+              <CNavItem href="#">Home</CNavItem>
+              <CNavItem href="#">Link</CNavItem>
+              <!-- Navbar dropdowns -->
+              <CDropdown
+                button-html="Lang"
+                right
+                nav
+              >
+                <CDropdownItem>EN</CDropdownItem>
+                <CDropdownItem>ES</CDropdownItem>
+                <CDropdownItem>RU</CDropdownItem>
+                <CDropdownItem>FA</CDropdownItem>
+              </CDropdown>
+              <CDropdown
+                button-html="User"
+                right
+                nav
+              >
+                <CDropdownItem>Account</CDropdownItem>
+                <CDropdownItem>Settings</CDropdownItem>
+              </CDropdown>
+            </CNavbarNav>
+          </CCollapse>
+        </CNavbar>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <small>form</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNavbar light variant="light">
+          <CForm inline>
+            <CFormInput
+              class="mr-sm-2"
+              placeholder="Search"
+              size="sm"
+            />
+            <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
+          </CForm>
+        </CNavbar>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <small>input group</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNavbar light variant="light">
+          <CForm inline>
+            <CFormInput
+              class="mr-sm-2"
+              placeholder="Username"
+            />
+          </CForm>
+        </CNavbar>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 <script>
-import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
 export default {
-  name: 'navbars',
-  components: {
-    DefaultHeaderDropdownAccnt
-  },
+  name: 'Navbars',
   data () {
     return {
       show: false,
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index d5a8db02..3088bb6a 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,167 +1,165 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
-          <div class="card-header-actions">
-            <a 
-              href="https://coreui.io/vue/docs/3.0/components/Nav" 
-              class="card-header-action" 
-              rel="noreferrer noopener" 
-              target="_blank"
-            >
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </CCardHeader>
-        <CCardBody>
-          <CNav>
-            <CNavItem active>Active</CNavItem>
-            <CNavItem title="Link"/>
-            <CNavItem>Another Link</CNavItem>
-            <CNavItem disabled>Disabled</CNavItem>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>icons</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNav>
-            <CNavItem active>
-              <i class="cui-basket-loaded"></i>
-            </CNavItem>
-            <CNavItem>
-              Link
-            </CNavItem>
-            <CNavItem>
-              Another Link
-            </CNavItem>
-            <CNavItem disabled>Disabled</CNavItem>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>tab style</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNav tabs>
-            <CNavItem active>
-              Active
-            </CNavItem>
-            <CNavItem>
-              Link
-            </CNavItem>
-            <CNavItem>
-              Another Link
-            </CNavItem>
-            <CNavItem disabled>Disabled</CNavItem>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader @click="item++">
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>pill style</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNav pills>
-            <CNavItem active>Active</CNavItem>
-            <CNavItem>Link</CNavItem>
-            <CNavItem>Another Link</CNavItem>
-            <CNavItem disabled>Disabled</CNavItem>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>fill tabs</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNav fill tabs>
-            <CNavItem active>Active</CNavItem>
-            <CNavItem>Link</CNavItem>
-            <CNavItem>Link with a long name </CNavItem>
-            <CNavItem disabled>Disabled</CNavItem>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>justified tabs</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNav justified tabs>
-            <CNavItem active>Active</CNavItem>
-            <CNavItem>Link</CNavItem>
-            <CNavItem>Link with a long name </CNavItem>
-            <CNavItem disabled>Disabled</CNavItem>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>dropdown support</small>
-        </CCardHeader>
-        <CCardBody>
-          <CNav pills>
-            <CNavItem active>Active</CNavItem>
-            <CNavItem>Link</CNavItem>
-            <CDropdown
-              id="nav7_ddown"
-              nav
-              placement="bottom-end"
-              button-content="Dropdown"
-            >
-              <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
-              <CDropdownItem>one</CDropdownItem>
-              <CDropdownItem>two</CDropdownItem>
-              <CDropdownDivider/>
-              <CDropdownItem>three</CDropdownItem>
-            </CDropdown>
-          </CNav>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Navs </strong>
-          <small>vertical variation</small>
-        </CCardHeader>
-        <CCardBody>
-          <CRow>
-            <CCol col="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>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
+        <div class="card-header-actions">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/Nav" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
+          >
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
+      </CCardHeader>
+      <CCardBody>
+        <CNav>
+          <CNavItem active>Active</CNavItem>
+          <CNavItem title="Link"/>
+          <CNavItem>Another Link</CNavItem>
+          <CNavItem disabled>Disabled</CNavItem>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>icons</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNav>
+          <CNavItem active>
+            <i class="cui-basket-loaded"></i>
+          </CNavItem>
+          <CNavItem>
+            Link
+          </CNavItem>
+          <CNavItem>
+            Another Link
+          </CNavItem>
+          <CNavItem disabled>Disabled</CNavItem>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>tab style</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNav tabs>
+          <CNavItem active>
+            Active
+          </CNavItem>
+          <CNavItem>
+            Link
+          </CNavItem>
+          <CNavItem>
+            Another Link
+          </CNavItem>
+          <CNavItem disabled>Disabled</CNavItem>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader @click="item++">
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>pill style</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNav pills>
+          <CNavItem active>Active</CNavItem>
+          <CNavItem>Link</CNavItem>
+          <CNavItem>Another Link</CNavItem>
+          <CNavItem disabled>Disabled</CNavItem>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>fill tabs</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNav fill tabs>
+          <CNavItem active>Active</CNavItem>
+          <CNavItem>Link</CNavItem>
+          <CNavItem>Link with a long name </CNavItem>
+          <CNavItem disabled>Disabled</CNavItem>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>justified tabs</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNav justified tabs>
+          <CNavItem active>Active</CNavItem>
+          <CNavItem>Link</CNavItem>
+          <CNavItem>Link with a long name </CNavItem>
+          <CNavItem disabled>Disabled</CNavItem>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>dropdown support</small>
+      </CCardHeader>
+      <CCardBody>
+        <CNav pills>
+          <CNavItem active>Active</CNavItem>
+          <CNavItem>Link</CNavItem>
+          <CDropdown
+            id="nav7_ddown"
+            nav
+            placement="bottom-end"
+            button-content="Dropdown"
+          >
+            <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
+            <CDropdownItem>one</CDropdownItem>
+            <CDropdownItem>two</CDropdownItem>
+            <CDropdownDivider/>
+            <CDropdownItem>three</CDropdownItem>
+          </CDropdown>
+        </CNav>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Navs </strong>
+        <small>vertical variation</small>
+      </CCardHeader>
+      <CCardBody>
+        <CRow>
+          <CCol col="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>
 </template>
 
 <script>
 export default {
-  name: 'navs',
+  name: 'Navs',
   data () {
     return {
       item: 2
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index dfb354e3..af76e4cf 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,91 +1,89 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Responsive bootstrap Pagination</strong>
-          <div class="card-header-actions">
-            <a 
-              href="https://coreui.io/vue/docs/3.0/components/Pagination" 
-              class="card-header-action" 
-              rel="noreferrer noopener" 
-              target="_blank"
-            >
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </CCardHeader>
-        <CCardBody>
-          <h6>Default</h6>
+  <div>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Responsive bootstrap Pagination</strong>
+        <div class="card-header-actions">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/Pagination" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
+          >
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
+      </CCardHeader>
+      <CCardBody>
+        <h6>Default</h6>
+        <CPagination
+          :active-page.sync="currentPage"
+          :pages="10"
+          responsive
+        />
+        <br>
+
+        <h6>Small</h6>
+        <CPagination
+          size="sm"
+          :active-page.sync="currentPage"
+          :pages="10"/>
+        <br>
+
+        <div>
+          <h6>Large</h6>
           <CPagination
+            size="lg"
             :active-page.sync="currentPage"
             :pages="10"
             responsive
           />
           <br>
+        </div>
 
-          <h6>Small</h6>
-          <CPagination
-            size="sm"
-            :active-page.sync="currentPage"
-            :pages="10"/>
-          <br>
+        <div>currentPage: {{currentPage}}</div>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Pagination </strong>
+        <small>alignment</small>
+      </CCardHeader>
+      <CCardBody>
+        <h6>Left alignment (default)</h6>
+        <CPagination
+          :active-page.sync="currentPage"
+          :pages="10"
+        />
+        <br>
 
-          <div>
-            <h6>Large</h6>
-            <CPagination
-              size="lg"
-              :active-page.sync="currentPage"
-              :pages="10"
-              responsive
-            />
-            <br>
-          </div>
+        <h6>Center alignment</h6>
+        <CPagination
+          align="center"
+          :pages="10"
+          :active-page.sync="currentPage"
+        />
+        <br>
 
-          <div>currentPage: {{currentPage}}</div>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Pagination </strong>
-          <small>alignment</small>
-        </CCardHeader>
-        <CCardBody>
-          <h6>Left alignment (default)</h6>
-          <CPagination
-            :active-page.sync="currentPage"
-            :pages="10"
-          />
-          <br>
+        <h6>Right (end) alignment</h6>
+        <CPagination
+          align="end"
+          :active-page.sync="currentPage"
+          :pages="10"
+        />
+        <br>
 
-          <h6>Center alignment</h6>
-          <CPagination
-            align="center"
-            :pages="10"
-            :active-page.sync="currentPage"
-          />
-          <br>
-
-          <h6>Right (end) alignment</h6>
-          <CPagination
-            align="end"
-            :active-page.sync="currentPage"
-            :pages="10"
-          />
-          <br>
-
-          <div>currentPage: {{currentPage}}</div>
-        </CCardBody>
-      </CCard>
-    </div>
+        <div>currentPage: {{currentPage}}</div>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'paginations',
+  name: 'Paginations',
   data () {
     return {
       currentPage: 3,
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index fa093ba5..81072407 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,101 +1,99 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Popovers</strong>
-          <div class="card-header-actions">
-            <a 
-              href="https://coreui.io/vue/docs/3.0/components/Popover" 
-              class="card-header-action" 
-              rel="noreferrer noopener" 
-              target="_blank"
-            >
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </CCardHeader>
-        <CCardBody>
-          <CRow>
-            <CCol col="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 col="4">
-              <div class="my-3 text-center">
-                <CButton
-                  variant="primary"
-                  v-c-popover="{
-                    header: 'Popover!',
-                    content: 'I start <strong>open</strong>',
-                    active: true
-                  }"
-                  textHtml="Hover me"
-                />
-              </div>
-            </CCol>
-            <CCol col="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>
-          <i class="fa fa-align-justify"></i>
-          <strong> Popovers </strong>
-          <small>placement</small>
-        </CCardHeader>
-        <CCardBody class="my-3">
-          <CRow>
-            <CCol
-              md="4"
-              class="py-4 text-center"
-              v-for="placement in placements"
-              :key="placement"
-            >
+  <div>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Popovers</strong>
+        <div class="card-header-actions">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/Popover" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
+          >
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
+      </CCardHeader>
+      <CCardBody>
+        <CRow>
+          <CCol col="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 col="4">
+            <div class="my-3 text-center">
               <CButton
                 variant="primary"
                 v-c-popover="{
                   header: 'Popover!',
-                  content: `Placement ${placement}`,
-                  placement
+                  content: 'I start <strong>open</strong>',
+                  active: true
+                }"
+                textHtml="Hover me"
+              />
+            </div>
+          </CCol>
+          <CCol col="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'
                 }"
               >
-                {{ placement }}
+                Click me
               </CButton>
-            </CCol>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </div>
+            </div>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Popovers </strong>
+        <small>placement</small>
+      </CCardHeader>
+      <CCardBody class="my-3">
+        <CRow>
+          <CCol
+            md="4"
+            class="py-4 text-center"
+            v-for="placement in placements"
+            :key="placement"
+          >
+            <CButton
+              variant="primary"
+              v-c-popover="{
+                header: 'Popover!',
+                content: `Placement ${placement}`,
+                placement
+              }"
+            >
+              {{ placement }}
+            </CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'popovers',
+  name: 'Popovers',
   data () {
     return {
       placements: [
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index c6fc3053..88a65c90 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -1,214 +1,212 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Bootstrap Progress</strong>
-          <div class="card-header-actions">
-            <a 
-              href="https://coreui.io/vue/docs/3.0/components/Progress" 
-              class="card-header-action" 
-              rel="noreferrer noopener" 
-              target="_blank"
-            >
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </CCardHeader>
-        <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"/>
-            <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
-            <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
-          </CProgress>
-          <CButton 
-            @click="clicked"
-            variant="secondary"
-            class="mt-4" 
+  <div>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Bootstrap Progress</strong>
+        <div class="card-header-actions">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/Progress" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
           >
-            Click me to animate progress bars
-          </CButton>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
-        </CCardHeader>
-        <CCardBody>
-          <h6>No label</h6>
-          <CProgress :value="value" :max="max2" class="mb-3"/>
-          <h6>Value label</h6>
-          <CProgress :value="value" :max="max2" show-value class="mb-3"/>
-          <h6>Progress label</h6>
-          <CProgress :value="value" :max="max2" show-progress class="mb-3"/>
-          <h6>Value label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
-          <h6>Progress label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Progress </strong>
-          <small>width</small>
-        </CCardHeader>
-        <CCardBody>
-          <h6>Default width</h6>
-          <CProgress :value="value3" class="mb-3"/>
-          <h6>Custom widths</h6>
-          <CProgress :value="value3" class="w-75 mb-2"/>
-          <CProgress :value="value3" class="w-50 mb-2"/>
-          <CProgress :value="value3" class="w-25"/>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Progress </strong>
-          <small>height</small>
-        </CCardHeader>
-        <CCardBody>
-          <h6>Default height</h6>
-          <CProgress :value="value3" show-progress class="mb-3"/>
-          <h6>Custom heights</h6>
-          <CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
-          <CProgress height="20px" :value="value3" show-progress class="mb-2"/>
-          <CProgress height="2px" :value="value3"/>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Progress </strong>
-          <small>variants</small>
-        </CCardHeader>
-        <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">
-              <CProgress
-                :value="bar.value"
-                :variant="bar.variant"
-                :key="bar.variant"
-              />
-            </div>
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
+      </CCardHeader>
+      <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"/>
+          <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
+          <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
+        </CProgress>
+        <CButton 
+          @click="clicked"
+          variant="secondary"
+          class="mt-4" 
+        >
+          Click me to animate progress bars
+        </CButton>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
+      </CCardHeader>
+      <CCardBody>
+        <h6>No label</h6>
+        <CProgress :value="value" :max="max2" class="mb-3"/>
+        <h6>Value label</h6>
+        <CProgress :value="value" :max="max2" show-value class="mb-3"/>
+        <h6>Progress label</h6>
+        <CProgress :value="value" :max="max2" show-progress class="mb-3"/>
+        <h6>Value label with precision</h6>
+        <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
+        <h6>Progress label with precision</h6>
+        <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Progress </strong>
+        <small>width</small>
+      </CCardHeader>
+      <CCardBody>
+        <h6>Default width</h6>
+        <CProgress :value="value3" class="mb-3"/>
+        <h6>Custom widths</h6>
+        <CProgress :value="value3" class="w-75 mb-2"/>
+        <CProgress :value="value3" class="w-50 mb-2"/>
+        <CProgress :value="value3" class="w-25"/>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Progress </strong>
+        <small>height</small>
+      </CCardHeader>
+      <CCardBody>
+        <h6>Default height</h6>
+        <CProgress :value="value3" show-progress class="mb-3"/>
+        <h6>Custom heights</h6>
+        <CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
+        <CProgress height="20px" :value="value3" show-progress class="mb-2"/>
+        <CProgress height="2px" :value="value3"/>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Progress </strong>
+        <small>variants</small>
+      </CCardHeader>
+      <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">
+            <CProgress
+              :value="bar.value"
+              :variant="bar.variant"
+              :key="bar.variant"
+            />
           </div>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Progress </strong>
-          <small>striped</small>
-        </CCardHeader>
-        <CCardBody>
-          <CProgress
-            :value="25"
-            variant="success"
-            :striped="striped"
-            class="mb-2"
-          />
-          <CProgress
-            :value="50"
-            variant="info"
-            :striped="striped"
-            class="mb-2"
-          />
-          <CProgress
-            :value="75"
-            variant="warning"
-            :striped="striped"
-            class="mb-2"
-          />
-          <CProgress
-            :value="100"
-            variant="danger"
-            :striped="striped"
-            class="mb-2"
-          />
-          <CButton variant="secondary" @click="striped = !striped">
-            {{ striped ? 'Remove' : 'Add'}} Striped
-          </CButton>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Progress </strong>
-          <small>animated</small>
-        </CCardHeader>
-        <CCardBody>
-          <CProgress
-            :value="25"
-            variant="success"
-            striped
-            :animated="animate"
-            class="mb-2"
-          />
-          <CProgress
-            :value="50"
-            variant="info"
-            striped
-            :animated="animate"
-            class="mb-2"
-          />
-          <CProgress
-            :value="75"
-            variant="warning"
-            striped
-            :animated="animate"
-            class="mb-2"
-          />
-          <CProgress
-            :value="100"
-            variant="danger"
-            :animated="animate"
-            class="mb-3"
-          />
-          <CButton variant="secondary" @click="animate = !animate">
-            {{ animate ? 'Stop' : 'Start'}} Animation
-          </CButton>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Progress </strong>
-          <small>multiple bars</small>
-        </CCardHeader>
-        <CCardBody>
-          <CProgress :max="max3" class="mb-3">
-            <CProgressBar variant="primary" :value="values[0]"/>
-            <CProgressBar variant="success" :value="values[1]"/>
-            <CProgressBar variant="info" :value="values[2]"/>
-          </CProgress>
-          <CProgress show-progress :max="max3" class="mb-3">
-            <CProgressBar variant="primary" :value="values[0]"/>
-            <CProgressBar variant="success" :value="values[1]"/>
-            <CProgressBar variant="info" :value="values[2]"/>
-          </CProgress>
-          <CProgress show-value striped :max="max3" class="mb-3">
-            <CProgressBar variant="primary" :value="values[0]"/>
-            <CProgressBar variant="success" :value="values[1]"/>
-            <CProgressBar variant="info" :value="values[2]"/>
-          </CProgress>
-          <CProgress :max="max3" class="mb-3">
-            <CProgressBar variant="primary" :value="values[0]" show-progress/>
-            <CProgressBar variant="success" :value="values[1]" animated show-progress/>
-            <CProgressBar variant="info" :value="values[2]" striped show-progress/>
-          </CProgress>
-        </CCardBody>
-      </CCard>
-    </div>
+        </div>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Progress </strong>
+        <small>striped</small>
+      </CCardHeader>
+      <CCardBody>
+        <CProgress
+          :value="25"
+          variant="success"
+          :striped="striped"
+          class="mb-2"
+        />
+        <CProgress
+          :value="50"
+          variant="info"
+          :striped="striped"
+          class="mb-2"
+        />
+        <CProgress
+          :value="75"
+          variant="warning"
+          :striped="striped"
+          class="mb-2"
+        />
+        <CProgress
+          :value="100"
+          variant="danger"
+          :striped="striped"
+          class="mb-2"
+        />
+        <CButton variant="secondary" @click="striped = !striped">
+          {{ striped ? 'Remove' : 'Add'}} Striped
+        </CButton>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Progress </strong>
+        <small>animated</small>
+      </CCardHeader>
+      <CCardBody>
+        <CProgress
+          :value="25"
+          variant="success"
+          striped
+          :animated="animate"
+          class="mb-2"
+        />
+        <CProgress
+          :value="50"
+          variant="info"
+          striped
+          :animated="animate"
+          class="mb-2"
+        />
+        <CProgress
+          :value="75"
+          variant="warning"
+          striped
+          :animated="animate"
+          class="mb-2"
+        />
+        <CProgress
+          :value="100"
+          variant="danger"
+          :animated="animate"
+          class="mb-3"
+        />
+        <CButton variant="secondary" @click="animate = !animate">
+          {{ animate ? 'Stop' : 'Start'}} Animation
+        </CButton>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        <i class="fa fa-align-justify"></i>
+        <strong> Progress </strong>
+        <small>multiple bars</small>
+      </CCardHeader>
+      <CCardBody>
+        <CProgress :max="max3" class="mb-3">
+          <CProgressBar variant="primary" :value="values[0]"/>
+          <CProgressBar variant="success" :value="values[1]"/>
+          <CProgressBar variant="info" :value="values[2]"/>
+        </CProgress>
+        <CProgress show-progress :max="max3" class="mb-3">
+          <CProgressBar variant="primary" :value="values[0]"/>
+          <CProgressBar variant="success" :value="values[1]"/>
+          <CProgressBar variant="info" :value="values[2]"/>
+        </CProgress>
+        <CProgress show-value striped :max="max3" class="mb-3">
+          <CProgressBar variant="primary" :value="values[0]"/>
+          <CProgressBar variant="success" :value="values[1]"/>
+          <CProgressBar variant="info" :value="values[2]"/>
+        </CProgress>
+        <CProgress :max="max3" class="mb-3">
+          <CProgressBar variant="primary" :value="values[0]" show-progress/>
+          <CProgressBar variant="success" :value="values[1]" animated show-progress/>
+          <CProgressBar variant="info" :value="values[2]" striped show-progress/>
+        </CProgress>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'progress-bars',
+  name: 'ProgressBars',
   data () {
     return {
       counter: 73,
@@ -235,8 +233,6 @@ export default {
   methods: {
     clicked () {
       this.counter = Math.random() * this.max
-      // console.log('Change progress to ' +
-      //     Math.round(this.counter * 100) / 100)
     }
   },
   mounted () {
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 8dbab265..ef7ff7b5 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -526,21 +526,33 @@
 
 <script>
 export default {
-  name: 'switches',
+  name: 'Switches',
   data () {
     return {
-      variants:[
+      variants: [
         'primary','secondary','warning','success','info','danger','light','dark'
       ],
       fields: [
-        {key: 'size'},
-        {key: 'example'},
-        {key: 'size_prop', label: 'Size prop'}
+        { key: 'size' },
+        { key: 'example' },
+        { key: 'size_prop', label: 'Size prop' }
       ],
       items: [
-        {size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
-        {size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
-        {size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
+        {
+          size: 'Large', 
+          example: { shape: '3d', variant: 'primary', size: 'lg', checked: true }, 
+          size_prop: 'Add following prop <code>size="lg"</code>'
+        },
+        {
+          size: 'Normal', 
+          example: { shape: '3d', variant: 'primary', size: '', checked: true }, 
+          size_prop: '-'
+        },
+        {
+          size: 'Small', 
+          example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, 
+          size_prop: 'Add following prop <code>size="sm"</code>'
+        }
       ],
       checker: 'yes',
       radio: 'primary',
@@ -551,8 +563,7 @@ export default {
       labelTxt: {
         labelOn: 'yes',
         labelOff: 'no'
-      },
-
+      }
     }
   }
 }
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index d71ff12b..a8df2f75 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -10,7 +10,7 @@
       :fields="fields"
       :per-page="small ? 10 : 5"
       :dark="dark"
-      pagination      
+      pagination
     >
       <template #status="{item}">
         <td>
@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: 'TableWrapper',
+  name: 'Table',
   props: {
     items: Array,
     fields: {
@@ -49,7 +49,7 @@ export default {
         : status === 'Inactive' ? 'secondary'
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
-    },
+    }
   }
 }
 </script>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 7ef9b8ba..4a91928a 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -137,10 +137,7 @@
         />
       </CCol>
     </CRow>
-
-
   </div>
-
 </template>
 
 <script>
@@ -154,42 +151,40 @@ const fields = [
   { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
-  {number:11.1, username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
-  {number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
-  {number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
-  {number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-  {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
+  { username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
+  { username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
+  { username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
+  { username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
+  { username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
 
 export default {
-  name: 'tables',
+  name: 'Tables',
   components: { CTableWrapper },
   data () {
     return {
-      items: items,
-      fields: fields,
-      page: 1,
-      pages: null,
+      items,
+      fields,
       details: [],
     }
   },
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index d1598263..1b65046e 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -25,7 +25,7 @@
                 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-html="Profile" >
+              <CTab title-html="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
@@ -57,7 +57,7 @@
                 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-html="Profile" >
+              <CTab title-html="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
@@ -116,7 +116,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <!-- <CCol xs="12" lg="6">
+      <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
             Tabs with icons
@@ -156,7 +156,7 @@
             </CTabs>
           </CCardBody>
         </CCard>
-      </CCol> -->
+      </CCol>
       <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
@@ -204,7 +204,7 @@
 
 <script>
 export default {
-  name: 'tabs',
+  name: 'Tabs',
   data () {
     return {
       tabs: [
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 40e6e9e0..dc06b96f 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,95 +1,93 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CCard>
-        <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">
-            <a 
-              href="https://coreui.io/vue/docs/3.0/components/Tooltip" 
-              class="card-header-action" 
-              rel="noreferrer noopener" 
-              target="_blank"
-            >
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </CCardHeader>
-        <CCardBody>
+  <div>
+    <CCard>
+      <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">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/Tooltip" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
+          >
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
+      </CCardHeader>
+      <CCardBody>
+        <CRow>
+          <CCol col="4">
+            <div class="text-center my-3">
+              <CButton 
+                variant="secondary"
+                v-c-tooltip.hover.click="'I am a tooltip!'"
+              >
+                Hover Me
+              </CButton>
+            </div>
+          </CCol>
+          <CCol col="4">
+            <div class="text-center my-3">
+              <CButton 
+                v-c-tooltip="{content: 'I start open!', active:true }"
+                variant="secondary"
+              >
+                Hover me
+              </CButton>
+            </div>
+          </CCol>
+          <CCol col="4">
+            <div class="text-center my-3">
+              <CButton
+                variant="secondary"
+                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>
+        <i class="fa fa-align-justify"></i>
+        <strong> Tooltips </strong>
+        <small>placement</small>
+      </CCardHeader>
+      <CCardBody>
+        <div class="my-3">
           <CRow>
-            <CCol col="4">
-              <div class="text-center my-3">
-                <CButton 
-                  variant="secondary"
-                  v-c-tooltip.hover.click="'I am a tooltip!'"
-                >
-                  Hover Me
-                </CButton>
-              </div>
-            </CCol>
-            <CCol col="4">
-              <div class="text-center my-3">
-                <CButton 
-                  v-c-tooltip="{content: 'I start open!', active:true }"
-                  variant="secondary"
-                >
-                  Hover me
-                </CButton>
-              </div>
-            </CCol>
-            <CCol col="4">
-              <div class="text-center my-3">
-                <CButton
-                  variant="secondary"
-                  v-c-tooltip.click="
-                    'I am showing on click and hiding on click outside tooltip!'
-                  "
-                >
-                  Click me
-                </CButton>
-              </div>
+            <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
+                }"
+              >
+                {{ placement }}
+              </CButton>
             </CCol>
           </CRow>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
-          <strong> Tooltips </strong>
-          <small>placement</small>
-        </CCardHeader>
-        <CCardBody>
-          <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
-                  }"
-                >
-                  {{ placement }}
-                </CButton>
-              </CCol>
-            </CRow>
-          </div>
-        </CCardBody>
-      </CCard>
-    </div>
+        </div>
+      </CCardBody>
+    </CCard>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'tooltips',
+  name: 'Tooltips',
   data () {
     return {
       placements: [
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 6c827235..9c4a05e5 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -1,183 +1,183 @@
 <template>
-  <div>
-    <CRow>
-      <CCol col="12">
-        <CCard>
-          <CCardHeader>
-            <strong>Brand Button</strong>
-            <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-          </CCardHeader>
-          <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>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  size="sm"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <CIcon :name="brandName"/>
-                  <span>{{brandName}}</span>
-                </CButton>
-              </template>
-            </p>
-            <h6>Size Normal</h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <CIcon :name="brandName"/>
-                  <span>{{brandName}}</span>
-                </CButton>
-              </template>
-            </p>
-            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  size="lg"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <CIcon :name="brandName"/>
-                  <span>{{brandName}}</span>
-                </CButton>
-              </template>
-            </p>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol col="12">
-        <CCard>
-          <CCardHeader>
-            <strong>Brand Button </strong> <small>Icons only</small>
-          </CCardHeader>
-          <CCardBody>
-            <small>Usage </small>
-              <code>
-                {{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
-              </code>
-            <hr/>
-            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  size="sm"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <CIcon :name="brandName"/>
-                </CButton>
-              </template>
-            </p>
-            <h6>Size Normal</h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <CIcon :name="brandName"/>
-                </CButton>
-              </template>
-            </p>
-            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  size="lg"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <CIcon :name="brandName"/>
-                </CButton>
-              </template>
-            </p>
-          </CCardBody>
-        </CCard>
-      </CCol>
+  <CRow>
+    <CCol col="12">
+      <CCard>
+        <CCardHeader>
+          <strong>Brand Button</strong>
+          <div class="card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+        </CCardHeader>
+        <CCardBody>
+          <small>Usage </small>
+          <code>{{ $options.usage }}</code>
+          <hr/>
+          <h6>
+            Size Small
+            <small>Add <code>size="sm"</code></small>
+          </h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                size="sm"
+                :key="key"
+                :variant="brandName"
+              >
+                <CIcon :name="brandName"/>
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </p>
+          <h6>Size Normal</h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                :key="key"
+                :variant="brandName"
+              >
+                <CIcon :name="brandName"/>
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </p>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                size="lg"
+                :key="key"
+                :variant="brandName"
+              >
+                <CIcon :name="brandName"/>
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </p>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol col="12">
+      <CCard>
+        <CCardHeader>
+          <strong>Brand Button </strong> <small>Icons only</small>
+        </CCardHeader>
+        <CCardBody>
+          <small>Usage </small>
+            <code>{{ $options.iconsOnlyUsage }}</code>
+          <hr/>
+          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                size="sm"
+                :key="key"
+                :variant="brandName"
+              >
+                <CIcon :name="brandName"/>
+              </CButton>
+            </template>
+          </p>
+          <h6>Size Normal</h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                :key="key"
+                :variant="brandName"
+              >
+                <CIcon :name="brandName"/>
+              </CButton>
+            </template>
+          </p>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                size="lg"
+                :key="key"
+                :variant="brandName"
+              >
+                <CIcon :name="brandName"/>
+              </CButton>
+            </template>
+          </p>
+        </CCardBody>
+      </CCard>
+    </CCol>
 
-      <CCol col="12">
-        <CCard>
-          <CCardHeader>
-            <strong>Brand Button </strong> <small>Text only</small>
-          </CCardHeader>
-          <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>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  size="sm"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <span>{{brandName}}</span>
-                </CButton>
-              </template>
-            </p>
-            <h6>Size Normal</h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <span>{{brandName}}</span>
-                </CButton>
-              </template>
-            </p>
-            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-            <p>
-              <template v-for="(brandName, key) in $options.brands">
-                <CButton
-                  :name="brandName"
-                  size="lg"
-                  :key="key"
-                  :variant="brandName"
-                >
-                  <span>{{brandName}}</span>
-                </CButton>
-              </template>
-            </p>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
-  </div>
+    <CCol col="12">
+      <CCard>
+        <CCardHeader>
+          <strong>Brand Button </strong> <small>Text only</small>
+        </CCardHeader>
+        <CCardBody>
+          <small>Usage </small> 
+          <code>
+            {{ $options.textOnlyUsage }}
+          </code>
+          <hr/>
+          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                size="sm"
+                :key="key"
+                :variant="brandName"
+              >
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </p>
+          <h6>Size Normal</h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                :key="key"
+                :variant="brandName"
+              >
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </p>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+          <p>
+            <template v-for="(brandName, key) in $options.brands">
+              <CButton
+                :name="brandName"
+                size="lg"
+                :key="key"
+                :variant="brandName"
+              >
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </p>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 export default {
-  name: 'brand-buttons',
+  name: 'BrandButtons',
+  usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
+  iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
+  textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
   brands: [
     'facebook',
     'twitter',
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index d28d99a9..98665ad5 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,221 +1,209 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol col="12" >
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap button group</strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CButtonGroup>
-                  <CButton variant="secondary">One</CButton>
-                  <CButton variant="secondary">Two</CButton>
-                  <CButton variant="secondary">Three</CButton>
-                  <CButton variant="secondary">Four</CButton>
-                  <CButton variant="secondary" 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 col="12">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Button group </strong>sizing
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CButtonGroup>
-                  <CButton variant="secondary">Left</CButton>
-                  <CButton variant="secondary">Middle</CButton>
-                  <CButton variant="secondary">Right</CButton>
-                </CButtonGroup>
-                <br><br>
-                <CButtonGroup size="sm">
-                  <CButton variant="secondary">Left</CButton>
-                  <CButton variant="secondary">Middle</CButton>
-                  <CButton variant="secondary">Right</CButton>
-                </CButtonGroup>
-                <br><br>
-                <CButtonGroup size="lg">
-                  <CButton variant="secondary">Left</CButton>
-                  <CButton variant="secondary">Middle</CButton>
-                  <CButton variant="secondary">Right</CButton>
-                </CButtonGroup>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-        <CCol col="12">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CButtonGroup>
-                  <CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
-                  <CButton variant="secondary" 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 variant="secondary" 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 col="12">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Button group </strong>vertical variation
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CButtonGroup vertical>
-                  <CButton variant="secondary">Top</CButton>
-                  <CButton variant="secondary">Middle</CButton>
-                  <CButton variant="secondary">Bottom</CButton>
-                </CButtonGroup>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-        <CCol col="12">
-          <CCard>
-            <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> -->
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CButtonToolbar aria-label="Toolbar with button groups">
-                  <CButtonGroup class="mx-1">
-                    <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
-                    <CButton variant="secondary">&lsaquo;</CButton>
-                  </CButtonGroup>
-                  <CButtonGroup class="mx-1">
-                    <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
-                    <CButton variant="secondary">Undo</CButton>
-                    <CButton variant="secondary">Redo</CButton>
-                  </CButtonGroup>
-                  <CButtonGroup class="mx-1">
-                    <CButton variant="secondary">&rsaquo;</CButton>
-                    <CButton variant="secondary" 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 variant="secondary">New</CButton>
-                    <CButton variant="secondary">Edit</CButton>
-                  </CButtonGroup>
-                  <CFormInput
-                    class="mb-0 w-25 mx-1"
-                    size="sm"
-                    prepend-html="$"
-                    append-html=".00"
-                    value="100"
-                  />
-                  <CFormSelect
-                    class="mb-0 w-25 mx-1"
-                    size="sm"
-                    prepend-html="Size"
-                    value="Medium"
-                    :options="['Large','Medium','Small']"
-                    custom
-                  />
-                  <CButtonGroup size="sm" class="mx-1">
-                    <CButton variant="secondary">Save</CButton>
-                    <CButton variant="secondary">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 variant="secondary">New</CButton>
-                    <CButton variant="secondary">Edit</CButton>
-                    <CButton variant="secondary">Undo</CButton>
-                  </CButtonGroup>
-                  <CDropdown
-                    variant="secondary"
-                    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 variant="secondary">Save</CButton>
-                    <CButton variant="secondary">Cancel</CButton>
-                  </CButtonGroup>
-                </CButtonToolbar>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
-  </div>
+  <CRow>
+    <CCol col="12">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap button group</strong>
+          <div class="card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CButtonGroup>
+              <CButton variant="secondary">One</CButton>
+              <CButton variant="secondary">Two</CButton>
+              <CButton variant="secondary">Three</CButton>
+              <CButton variant="secondary">Four</CButton>
+              <CButton variant="secondary" 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 col="12">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Button group </strong>sizing
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CButtonGroup>
+              <CButton variant="secondary">Left</CButton>
+              <CButton variant="secondary">Middle</CButton>
+              <CButton variant="secondary">Right</CButton>
+            </CButtonGroup>
+            <br><br>
+            <CButtonGroup size="sm">
+              <CButton variant="secondary">Left</CButton>
+              <CButton variant="secondary">Middle</CButton>
+              <CButton variant="secondary">Right</CButton>
+            </CButtonGroup>
+            <br><br>
+            <CButtonGroup size="lg">
+              <CButton variant="secondary">Left</CButton>
+              <CButton variant="secondary">Middle</CButton>
+              <CButton variant="secondary">Right</CButton>
+            </CButtonGroup>
+          </div>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol col="12">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CButtonGroup>
+              <CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
+              <CButton variant="secondary" 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 variant="secondary" 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 col="12">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Button group </strong>vertical variation
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CButtonGroup vertical>
+              <CButton variant="secondary">Top</CButton>
+              <CButton variant="secondary">Middle</CButton>
+              <CButton variant="secondary">Bottom</CButton>
+            </CButtonGroup>
+          </div>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol col="12">
+      <CCard>
+        <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> -->
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CButtonToolbar aria-label="Toolbar with button groups">
+              <CButtonGroup class="mx-1">
+                <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
+                <CButton variant="secondary">&lsaquo;</CButton>
+              </CButtonGroup>
+              <CButtonGroup class="mx-1">
+                <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
+                <CButton variant="secondary">Undo</CButton>
+                <CButton variant="secondary">Redo</CButton>
+              </CButtonGroup>
+              <CButtonGroup class="mx-1">
+                <CButton variant="secondary">&rsaquo;</CButton>
+                <CButton variant="secondary" 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 variant="secondary">New</CButton>
+                <CButton variant="secondary">Edit</CButton>
+              </CButtonGroup>
+              <CFormInput
+                class="mb-0 w-25 mx-1"
+                size="sm"
+                prepend-html="$"
+                append-html=".00"
+                value="100"
+              />
+              <CFormSelect
+                class="mb-0 w-25 mx-1"
+                size="sm"
+                prepend-html="Size"
+                value="Medium"
+                :options="['Large','Medium','Small']"
+                custom
+              />
+              <CButtonGroup size="sm" class="mx-1">
+                <CButton variant="secondary">Save</CButton>
+                <CButton variant="secondary">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 variant="secondary">New</CButton>
+                <CButton variant="secondary">Edit</CButton>
+                <CButton variant="secondary">Undo</CButton>
+              </CButtonGroup>
+              <CDropdown
+                variant="secondary"
+                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 variant="secondary">Save</CButton>
+                <CButton variant="secondary">Cancel</CButton>
+              </CButtonGroup>
+            </CButtonToolbar>
+          </div>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 <script>
 export default {
-  name: 'button-groups',
-  data () {
-    return {
-      myToggle: false,
-      myToggle2: false,
-      itemsCount: 33
-
-    }
-  }
+  name: 'ButtonGroups',
 }
 </script>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 94332ce1..3c97073d 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,360 +1,358 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap Dropdown</strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Dropdown" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CDropdown 
-                  toggler-text="Dropdown Button" 
-                  class="m-2"
-                  variant="secondary"
-                >
-                  <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 toggler-text="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 
-                  toggler-text="Dropdown with divider" 
-                  class="m-2"
-                  variant="secondary"
-                >
-                  <CDropdownItem>First item</CDropdownItem>
-                  <CDropdownItem>Second item</CDropdownItem>
-                  <CDropdownDivider></CDropdownDivider>
-                  <CDropdownItem>Separated Item</CDropdownItem>
-                </CDropdown>
-              </div>
-              <div>
-                <CDropdown 
-                  toggler-text="Dropdown with header" 
-                  class="m-2"
-                  variant="secondary"
-                >
-                  <CDropdownHeader>Dropdown header</CDropdownHeader>
-                  <CDropdownItem>First item</CDropdownItem>
-                  <CDropdownItem>Second Item</CDropdownItem>
-                </CDropdown>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Dropdown </strong>
-              <small>positioning</small>
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CDropdown
-                  toggler-text="Left align"
-                  variant="primary"
-                  class="m-2 d-inline-block"
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here</CDropdownItem>
-                </CDropdown>
-                <CDropdown
-                  placement="bottom-end"
-                  toggler-text="Right align"
-                  variant="primary"
-                  class="m-2 d-inline-block"
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here</CDropdownItem>
-                </CDropdown>
-              </div>
-              <div>
-                <CDropdown
-                  toggler-text="Drop-Up"
-                  variant="info"
-                  class="m-2"
-                  placement="top-start"
-
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here</CDropdownItem>
-                </CDropdown>
-              </div>
-              <div>
-                <CDropdown
-                  variant="secondary"
-                  :offset="25"
-                  toggler-text="Offset Dropdown"
-                  class="m-2"
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here</CDropdownItem>
-                </CDropdown>
-              </div>
-              <div>
-                <CDropdown
-                  variant="secondary"
-                  split
-                  toggler-text="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 col="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"
-                  no-caret
-                >
-                  <template #toggler-content>
-                    &#x1f50d;<span class="sr-only">Search</span>
-                  </template>
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here...</CDropdownItem>
-                </CDropdown>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Dropdown </strong>
-              <small>sizing</small>
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CDropdown
-                  variant="secondary"
-                  size="lg"
-                  toggler-text="Large"
-                  class="m-2 d-inline-block"
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here</CDropdownItem>
-                </CDropdown>
-                <CDropdown
-                  variant="secondary"
-                  size="lg"
-                  split
-                  toggler-text="Large Split"
-                  class="m-2"
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here...</CDropdownItem>
-                </CDropdown>
-                <br>
-                <CDropdown
-                  variant="secondary"
-                  size="sm"
-                  toggler-text="Small"
-                  class="m-2 d-inline-block"
-                >
-                  <CDropdownItem>Action</CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here...</CDropdownItem>
-                </CDropdown>
-                <CDropdown
-                  variant="secondary"
-                  size="sm"
-                  split toggler-text="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 col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Dropdown </strong>
-              <small>headers and accessibility</small>
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CDropdown
-                  toggler-text="Dropdown ARIA" variant="primary"
-                  class="m-2"
-                >
-                  <div role="group">
-                    <CDropdownHeader>Groups</CDropdownHeader>
-                    <CDropdownItem>Add</CDropdownItem>
-                    <CDropdownItem>Delete</CDropdownItem>
-                  </div>
-                  <div role="group">
-                    <CDropdownHeader>Users</CDropdownHeader>
-                    <CDropdownItem>Add</CDropdownItem>
-                    <CDropdownItem>Delete</CDropdownItem>
-                  </div>
-                  <CDropdownDivider></CDropdownDivider>
-                  <CDropdownItem>
-                    Something <strong>not</strong> associated with user
-                  </CDropdownItem>
-                </CDropdown>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-        <CCol col="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"
-                toggler-text="Primary"
-                variant="primary"
-                class="m-0 d-inline-block"
+  <div>
+    <CRow>
+      <CCol col="12" md="6">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Bootstrap Dropdown</strong>
+            <div class="card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/Dropdown" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
-              </CDropdown>
-              <CDropdown
-                size="sm"
-                toggler-text="Secondary"
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+          </CCardHeader>
+          <CCardBody>
+            <div>
+              <CDropdown 
+                toggler-text="Dropdown Button" 
+                class="m-2"
                 variant="secondary"
-                class="m-0 d-inline-block"
               >
                 <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>
-              <CDropdown
-                size="sm"
-                toggler-text="Success"
-                variant="success"
-                class="m-0 d-inline-block"
+            </div>
+            <!-- <div>
+              <CDropdown toggler-text="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 
+                toggler-text="Dropdown with divider" 
+                class="m-2"
+                variant="secondary"
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownItem>First item</CDropdownItem>
+                <CDropdownItem>Second item</CDropdownItem>
+                <CDropdownDivider></CDropdownDivider>
+                <CDropdownItem>Separated Item</CDropdownItem>
               </CDropdown>
-              <CDropdown
-                size="sm"
-                toggler-text="Warning"
-                variant="warning"
-                class="m-0 d-inline-block"
+            </div>
+            <div>
+              <CDropdown 
+                toggler-text="Dropdown with header" 
+                class="m-2"
+                variant="secondary"
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownHeader>Dropdown header</CDropdownHeader>
+                <CDropdownItem>First item</CDropdownItem>
+                <CDropdownItem>Second Item</CDropdownItem>
               </CDropdown>
+            </div>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol col="12" md="6">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Dropdown </strong>
+            <small>positioning</small>
+          </CCardHeader>
+          <CCardBody>
+            <div>
               <CDropdown
-                size="sm"
-                toggler-text="Danger"
-                variant="danger"
-                class="m-0 d-inline-block"
+                toggler-text="Left align"
+                variant="primary"
+                class="m-2 d-inline-block"
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
               </CDropdown>
               <CDropdown
-                size="sm"
-                toggler-text="Info"
+                placement="bottom-end"
+                toggler-text="Right align"
+                variant="primary"
+                class="m-2 d-inline-block"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
+            </div>
+            <div>
+              <CDropdown
+                toggler-text="Drop-Up"
                 variant="info"
-                class="m-0 d-inline-block"
+                class="m-2"
+                placement="top-start"
+
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
               </CDropdown>
+            </div>
+            <div>
               <CDropdown
-                size="sm"
-                toggler-text="Light"
-                variant="light"
-                class="m-0 d-inline-block"
+                variant="secondary"
+                :offset="25"
+                toggler-text="Offset Dropdown"
+                class="m-2"
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
               </CDropdown>
+            </div>
+            <div>
               <CDropdown
-                size="sm"
-                toggler-text="Dark"
-                variant="dark"
-                class="m-0 d-inline-block"
+                variant="secondary"
+                split
+                toggler-text="Split Dropdown"
+                class="m-2"
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
               </CDropdown>
+            </div>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol col="12" md="6">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Dropdown </strong>
+            <small>hidden caret</small>
+          </CCardHeader>
+          <CCardBody>
+            <div>
               <CDropdown
-                size="sm"
-                toggler-text="Link"
                 variant="link"
-                class="m-0 d-inline-block"
+                size="lg"
+                no-caret
               >
-                <CDropdownItem>First Action</CDropdownItem>
-                <CDropdownItem>Second Action</CDropdownItem>
-                <CDropdownItem>Third Action</CDropdownItem>
+                <template #toggler-content>
+                  &#x1f50d;<span class="sr-only">Search</span>
+                </template>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
               </CDropdown>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
+            </div>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol col="12" md="6">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Dropdown </strong>
+            <small>sizing</small>
+          </CCardHeader>
+          <CCardBody>
+            <div>
+              <CDropdown
+                variant="secondary"
+                size="lg"
+                toggler-text="Large"
+                class="m-2 d-inline-block"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here</CDropdownItem>
+              </CDropdown>
+              <CDropdown
+                variant="secondary"
+                size="lg"
+                split
+                toggler-text="Large Split"
+                class="m-2"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
+              <br>
+              <CDropdown
+                variant="secondary"
+                size="sm"
+                toggler-text="Small"
+                class="m-2 d-inline-block"
+              >
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+              </CDropdown>
+              <CDropdown
+                variant="secondary"
+                size="sm"
+                split toggler-text="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 col="12" md="6">
+        <CCard>
+          <CCardHeader>
+            <i class="fa fa-align-justify"></i>
+            <strong> Dropdown </strong>
+            <small>headers and accessibility</small>
+          </CCardHeader>
+          <CCardBody>
+            <div>
+              <CDropdown
+                toggler-text="Dropdown ARIA" variant="primary"
+                class="m-2"
+              >
+                <div role="group">
+                  <CDropdownHeader>Groups</CDropdownHeader>
+                  <CDropdownItem>Add</CDropdownItem>
+                  <CDropdownItem>Delete</CDropdownItem>
+                </div>
+                <div role="group">
+                  <CDropdownHeader>Users</CDropdownHeader>
+                  <CDropdownItem>Add</CDropdownItem>
+                  <CDropdownItem>Delete</CDropdownItem>
+                </div>
+                <CDropdownDivider></CDropdownDivider>
+                <CDropdownItem>
+                  Something <strong>not</strong> associated with user
+                </CDropdownItem>
+              </CDropdown>
+            </div>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol col="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"
+              toggler-text="Primary"
+              variant="primary"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Secondary"
+              variant="secondary"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Success"
+              variant="success"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Warning"
+              variant="warning"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Danger"
+              variant="danger"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Info"
+              variant="info"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Light"
+              variant="light"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Dark"
+              variant="dark"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+            <CDropdown
+              size="sm"
+              toggler-text="Link"
+              variant="link"
+              class="m-0 d-inline-block"
+            >
+              <CDropdownItem>First Action</CDropdownItem>
+              <CDropdownItem>Second Action</CDropdownItem>
+              <CDropdownItem>Third Action</CDropdownItem>
+            </CDropdown>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index 8d564084..aee5ff40 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Standard buttons</strong>
         <div class="card-header-actions">
@@ -113,7 +113,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Outline Buttons</strong>
       </CCardHeader>
@@ -213,7 +213,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Ghost Buttons</strong>
       </CCardHeader>
@@ -226,7 +226,7 @@
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
@@ -314,7 +314,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Square Buttons</strong>
       </CCardHeader>
@@ -421,7 +421,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Pill Buttons</strong>
       </CCardHeader>
@@ -528,7 +528,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Sizes</strong>
       </CCardHeader>
@@ -562,7 +562,7 @@
             <CButton variant="primary">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline variant="secondary" >Outline Button</CButton>
+            <CButton outline variant="secondary">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton ghost variant="success">Ghost Button</CButton>
@@ -596,7 +596,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>With Icons</strong>
       </CCardHeader>
@@ -696,15 +696,9 @@
 
 <script>
 export default {
-  name: 'standard-buttons',
+  name: 'StandardButtons',
   data () {
     return { togglePress: false }
   }
 }
-</script>
-
-<style scoped>
-  .btn.disabled {
-    cursor: auto;
-  }
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/Charts.vue b/src/views/charts/Charts.vue
similarity index 97%
rename from src/views/Charts.vue
rename to src/views/charts/Charts.vue
index 8a5ae845..28c93f1f 100644
--- a/src/views/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -47,7 +47,7 @@
   </div>
 </template>
 <script>
-import * as Charts from './charts/index.js'
+import * as Charts from './index.js'
 
 export default {
   name: 'Charts',
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index cbd853ba..91615eea 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <i class="cui-pencil"></i>CoreUI Icons
         <CBadge variant="info">New</CBadge>
@@ -18,7 +18,7 @@
       <CCardBody>
         <!-- <CRow class="text-center mb-5">
           <template v-for="(name, key) in $options.iconNames">
-            <CCol :key="key" col="6" sm="4" md="3" xl="2" >
+            <CCol :key="key" col="6" sm="4" md="3" xl="2">
               <CIcon :name="name" width="24" class="mt-4"/>
               <div>{{name}}</div>
             </CCol>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index eae9d162..b47e8faa 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -33,9 +33,11 @@
 <script>
 import { iconSet } from '@coreui/icons/flags'
 export default {
-  name: 'flags',
+  name: 'Flags',
   iconSet,
   computed: {
+    // Avoid duplication caused by displaying 1x1 and 4x3 formats
+    // (adding Q to name makes icon quadratic)
     displayedFlags () {
       return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
     }
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index b626c0b6..bd12820b 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,190 +1,186 @@
 <template>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap Alert</strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Alert" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <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 col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alert
-              <small> use <code>.alert-link</code> to provide links</small>
-            </CCardHeader>
-            <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 col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
-            </CCardHeader>
-            <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 col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alerts
-              <small>dismissible</small>
-            </CCardHeader>
-            <CCardBody>
-              <CAlert
-                variant="secondary"
-                closeButton
-                :show.sync="dismissibleAlerts[0]"
-              >
-                Dismissible Alert!
-              </CAlert>
+  <CRow>
+    <CCol col="12" md="6">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Alert</strong>
+          <div class="card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Alert" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <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 col="12" md="6">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i> Alert
+          <small> use <code>.alert-link</code> to provide links</small>
+        </CCardHeader>
+        <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 col="12" md="6">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
+        </CCardHeader>
+        <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 col="12" md="6">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i> Alerts
+          <small>dismissible</small>
+        </CCardHeader>
+        <CCardBody>
+          <CAlert
+            variant="secondary"
+            closeButton
+            :show.sync="dismissibleAlerts[0]"
+          >
+            Dismissible Alert!
+          </CAlert>
 
-              <CAlert
-                variant="secondary"
-                closeButton
-                fade
-                :show.sync="dismissibleAlerts[1]"
-              >
-                Dismissible Alert with fade effect!
-              </CAlert>
+          <CAlert
+            variant="secondary"
+            closeButton
+            fade
+            :show.sync="dismissibleAlerts[1]"
+          >
+            Dismissible Alert with fade effect!
+          </CAlert>
 
-              <CAlert
-                variant="secondary"
-                :show.sync="dismissibleAlerts[2]"
-                v-slot="{dismiss}"
-                class="alert-dismissible"
-              >
-                Dismissible Alert with custom button!
-                <CButton
-                  class="position-absolute"
-                  variant="secondary"
-                  style="right:10px;top: 50%;transform: translateY(-50%);"
-                  textHtml="<i>Close</i>"
-                  @click="dismiss"
-                />
-              </CAlert>
-              <CButton
-                @click="showDismissibleAlerts"
+          <CAlert
+            variant="secondary"
+            :show.sync="dismissibleAlerts[2]"
+            v-slot="{dismiss}"
+            class="alert-dismissible"
+          >
+            Dismissible Alert with custom button!
+            <CButton
+              class="position-absolute"
+              variant="secondary"
+              style="right:10px;top: 50%;transform: translateY(-50%);"
+              textHtml="<i>Close</i>"
+              @click="dismiss"
+            />
+          </CAlert>
+          <CButton
+            @click="showDismissibleAlerts"
+            variant="info"
+            class="m-1"
+          >
+            Show dismissible alerts
+          </CButton>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i> Alerts
+          <small>auto dismissible</small>
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CAlert
+              :show.sync="dismissCountDown"
+              closeButton
+              variant="warning"
+              fade
+            >
+              Alert will dismiss after
+              <strong>{{dismissCountDown}}</strong> seconds...
+            </CAlert>
+
+            <CAlert
+              :show.sync="dismissCountDown"
+              closeButton
+              variant="info"
+            >
+              Alert will dismiss after {{dismissCountDown}} seconds...
+              <CProgress
                 variant="info"
-                class="m-1"
-              >
-                Show dismissible alerts
-              </CButton>
-            </CCardBody>
-          </CCard>
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alerts
-              <small>auto dismissible</small>
-            </CCardHeader>
-            <CCardBody>
-              <div>
-                <CAlert
-                  :show.sync="dismissCountDown"
-                  closeButton
-                  variant="warning"
-                  fade
-                >
-                  Alert will dismiss after
-                  <strong>{{dismissCountDown}}</strong> seconds...
-                </CAlert>
-
-                <CAlert
-                  :show.sync="dismissCountDown"
-                  closeButton
-                  variant="info"
-                >
-                  Alert will dismiss after {{dismissCountDown}} seconds...
-                  <CProgress
-                    variant="info"
-                    :max="dismissSecs"
-                    :value="dismissCountDown"
-                    height="4px"
-                  />
-                </CAlert>
-                <CButton @click="showAlert" variant="info" class="m-1">
-                  Show alert with timer
-                </CButton>
-              </div>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
-  </div>
+                :max="dismissSecs"
+                :value="dismissCountDown"
+                height="4px"
+              />
+            </CAlert>
+            <CButton @click="showAlert" variant="info" class="m-1">
+              Show alert with timer
+            </CButton>
+          </div>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 export default {
-  name: 'alerts',
+  name: 'Alerts',
   data () {
     return {
       dismissSecs: 10,
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 271aeaa1..f7ad181f 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,95 +1,91 @@
 <template functional>
-  <div class="wrapper">
-    <div>
-      <CRow>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i>
-              <strong> Bootstrap Badge</strong>
-              <div class="card-header-actions">
-                <a 
-                  href="https://coreui.io/vue/docs/3.0/components/Badge" 
-                  class="card-header-action" 
-                  rel="noreferrer noopener" 
-                  target="_blank"
-                >
-                  <small class="text-muted">docs</small>
-                </a>
-              </div>
-            </CCardHeader>
-            <CCardBody>
-              <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
-              <h3>Example heading <CBadge variant="primary">New</CBadge></h3>
-              <h4>Example heading <CBadge variant="primary">New</CBadge></h4>
-              <h5>Example heading <CBadge variant="primary">New</CBadge></h5>
-              <h6>Example heading <CBadge variant="primary">New</CBadge></h6>
-            </CCardBody>
-            <CCardFooter>
-              <CButton variant="primary">
-                Notifications
-                <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
-              </CButton>
-            </CCardFooter>
-          </CCard>
-        </CCol>
-        <CCol col="12" md="6">
-          <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>
-              <CBadge variant="danger">Danger</CBadge>
-              <CBadge variant="warning">Warning</CBadge>
-              <CBadge variant="info">Info</CBadge>
-              <CBadge variant="light">Light</CBadge>
-              <CBadge variant="dark">Dark</CBadge>
-            </CCardBody>
-          </CCard>
-          <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>
-              <CBadge pill variant="danger">Danger</CBadge>
-              <CBadge pill variant="warning">Warning</CBadge>
-              <CBadge pill variant="info">Info</CBadge>
-              <CBadge pill variant="light">Light</CBadge>
-              <CBadge pill variant="dark">Dark</CBadge>
-            </CCardBody>
-          </CCard>
-          <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>
-              <CBadge href="#" variant="danger">Danger</CBadge>
-              <CBadge href="#" variant="warning">Warning</CBadge>
-              <CBadge href="#" variant="info">Info</CBadge>
-              <CBadge href="#" variant="light">Light</CBadge>
-              <CBadge href="#" variant="dark">Dark</CBadge>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </div>
-  </div>
+  <CRow>
+    <CCol col="12" md="6">
+      <CCard>
+        <CCardHeader>
+          <i class="fa fa-align-justify"></i>
+          <strong> Bootstrap Badge</strong>
+          <div class="card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Badge" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <CCardBody>
+          <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
+          <h3>Example heading <CBadge variant="primary">New</CBadge></h3>
+          <h4>Example heading <CBadge variant="primary">New</CBadge></h4>
+          <h5>Example heading <CBadge variant="primary">New</CBadge></h5>
+          <h6>Example heading <CBadge variant="primary">New</CBadge></h6>
+        </CCardBody>
+        <CCardFooter>
+          <CButton variant="primary">
+            Notifications
+            <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
+          </CButton>
+        </CCardFooter>
+      </CCard>
+    </CCol>
+    <CCol col="12" md="6">
+      <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>
+          <CBadge variant="danger">Danger</CBadge>
+          <CBadge variant="warning">Warning</CBadge>
+          <CBadge variant="info">Info</CBadge>
+          <CBadge variant="light">Light</CBadge>
+          <CBadge variant="dark">Dark</CBadge>
+        </CCardBody>
+      </CCard>
+      <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>
+          <CBadge pill variant="danger">Danger</CBadge>
+          <CBadge pill variant="warning">Warning</CBadge>
+          <CBadge pill variant="info">Info</CBadge>
+          <CBadge pill variant="light">Light</CBadge>
+          <CBadge pill variant="dark">Dark</CBadge>
+        </CCardBody>
+      </CCard>
+      <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>
+          <CBadge href="#" variant="danger">Danger</CBadge>
+          <CBadge href="#" variant="warning">Warning</CBadge>
+          <CBadge href="#" variant="info">Info</CBadge>
+          <CBadge href="#" variant="light">Light</CBadge>
+          <CBadge href="#" variant="dark">Dark</CBadge>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 export default {
-  name: 'badges'
+  name: 'Badges'
 }
 </script>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 1133c8ac..032ff6fb 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -176,7 +176,7 @@
 
 <script>
 export default {
-  name: 'modals',
+  name: 'Modals',
   data () {
     return {
       myModal: false,
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index 89c1b187..91288b77 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -15,10 +15,7 @@ export default {
   name: 'ColorTheme',
   components: { ColorView },
   props: {
-    color: {
-      type: String,
-      default: 'bg-secondary'
-    }
+    color: String,
   }
 }
 </script>
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index b4218d81..ca7981ca 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <i class="cui-drop"></i> Theme colors
       </CCardHeader>
@@ -37,32 +37,13 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
-      <CCardHeader>
-        <i class="cui-drop"></i> Additional colors
-      </CCardHeader>
-      <CCardBody>
-        <CRow>
-          <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
-          <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
-          <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
-          <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
-          <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
-          <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
-          <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
-          <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
-          <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
-          <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
-        </CRow>
-      </CCardBody>
-    </CCard>
   </div>
 </template>
 
 <script>
 import ColorTheme from './ColorTheme'
 export default {
-  name: 'colors',
+  name: 'Colors',
   components: { ColorTheme }
 }
 </script>
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
index 94505fa6..3b28dbdf 100644
--- a/src/views/theme/Typography.vue
+++ b/src/views/theme/Typography.vue
@@ -215,6 +215,6 @@
 
 <script>
 export default {
-  name: 'typography'
+  name: 'Typography'
 }
 </script>
diff --git a/src/views/users/UsersData.js b/src/views/users/UsersData.js
index 506e990d..03be495c 100644
--- a/src/views/users/UsersData.js
+++ b/src/views/users/UsersData.js
@@ -1,5 +1,4 @@
 const usersData = [
-  // {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
   {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
   {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
   {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},