diff --git a/src/containers/TheContainer.vue b/src/containers/TheContainer.vue
index ecaa7df2..80cee3b1 100644
--- a/src/containers/TheContainer.vue
+++ b/src/containers/TheContainer.vue
@@ -6,8 +6,8 @@
       <div class="c-body">
         <main class="c-main">
           <CContainer fluid>
-            <transition name="fade">
-              <router-view></router-view>
+            <transition name="fade" mode="out-in">
+              <router-view :key="$route.path"></router-view>
             </transition>
           </CContainer>
         </main>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 7a19c2ce..13b7b118 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,50 +1,5 @@
 <template>
   <div>
-    <CRow>
-      <CCol md="6">
-        <CCard>
-          <CCardHeader>
-            <CIcon name="cil-justify-center"/>
-            <strong> Bootstrap list group </strong>
-            <div class="card-header-actions">
-              <a 
-                href="https://coreui.io/vue/docs/components/list-group" 
-                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>
-            <CIcon name="cil-justify-center"/><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>
@@ -58,6 +13,7 @@
               <CListGroupItem disabled>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
               <CListGroupItem>Morbi leo risus</CListGroupItem>
+              <CListGroupItemDivider/>
               <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
@@ -160,19 +116,19 @@
           <CCardHeader>
             <CIcon name="cil-justify-center"/>
             <strong> List group </strong>
-            <small>colors active</small>
+            <small>colors active accent</small>
           </CCardHeader>
           <CCardBody>
-            <CListGroup>
-              <CListGroupItem href="#">This is a default list group item</CListGroupItem>
-              <CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
-              <CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
-              <CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
-              <CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
-              <CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
-              <CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
-              <CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
-              <CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
+            <CListGroup accent>
+              <CListGroupItem href="#" accent="light">This is a default list group item</CListGroupItem>
+              <CListGroupItem href="#" color="primary" accent="primary">This is a primary list group item</CListGroupItem>
+              <CListGroupItem href="#" color="secondary" accent="secondary">This is a secondary list group item</CListGroupItem>
+              <CListGroupItem href="#" color="success" accent="success">This is a success list group item</CListGroupItem>
+              <CListGroupItem href="#" color="danger" accent="danger">This is a danger list group item</CListGroupItem>
+              <CListGroupItem href="#" color="warning" accent="warning">This is a warning list group item</CListGroupItem>
+              <CListGroupItem href="#" color="info" accent="info">This is a info list group item</CListGroupItem>
+              <CListGroupItem href="#" color="light" accent="light">This is a light list group item</CListGroupItem>
+              <CListGroupItem href="#" color="dark" accent="dark">This is a dark list group item</CListGroupItem>
             </CListGroup>
           </CCardBody>
         </CCard>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index db642f6c..0b6ddf3e 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -143,8 +143,8 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <CCol col="3" class="m-0">
-            <CNav vertical pills >
+          <CCol col="12" class="m-0">
+            <CNav vertical="lg" pills >
               <CNavItem active>Active</CNavItem>
               <CNavItem>Link</CNavItem>
               <CNavItem>Another Link</CNavItem>
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index 136fcc96..fb3a56d0 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -18,9 +18,9 @@
       <CCardBody>
         <CProgress :value="counter" :max="max" show-percentage animated></CProgress>
         <CProgress class="mt-1" :max="max" show-value>
-          <CProgressBar :value="counter*(6/10)" color="success"/>
-          <CProgressBar :value="counter*(2.5/10)" color="warning"/>
-          <CProgressBar :value="counter*(1.5/10)" color="danger"/>
+          <CProgressBar :value="counter*(6/10)" color="gradient-success"/>
+          <CProgressBar :value="counter*(2.5/10)" color="gradient-warning"/>
+          <CProgressBar :value="counter*(1.5/10)" color="gradient-danger"/>
         </CProgress>
         <CButton 
           @click="clicked"
@@ -73,9 +73,11 @@
         <h6>Default height</h6>
         <CProgress :value="value3" show-percentage class="mb-3"/>
         <h6>Custom heights</h6>
-        <CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
-        <CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
-        <CProgress height="2px" :value="value3"/>
+        <CProgress size="xs" :value="value3" show-percentage class="mb-2"/>
+        <CProgress size="sm" :value="value3" show-percentage class="mb-2"/>
+        <CProgress style="height:2rem" :value="value3" show-percentage class="mb-2"/>
+        <CProgress style="height:20px" :value="value3" show-percentage class="mb-2"/>
+        <CProgress style="height:2px" :value="value3"/>
       </CCardBody>
     </CCard>
     <CCard>
@@ -180,24 +182,24 @@
       </CCardHeader>
       <CCardBody>
         <CProgress :max="max3" class="mb-3">
-          <CProgressBar color="primary" :value="values[0]"/>
-          <CProgressBar color="success" :value="values[1]"/>
-          <CProgressBar color="info" :value="values[2]"/>
+          <CProgressBar color="gradient-primary" :value="values[0]"/>
+          <CProgressBar color="gradient-success" :value="values[1]"/>
+          <CProgressBar color="gradient-info" :value="values[2]"/>
         </CProgress>
         <CProgress show-percentage :max="max3" class="mb-3">
-          <CProgressBar color="primary" :value="values[0]"/>
-          <CProgressBar color="success" :value="values[1]"/>
-          <CProgressBar color="info" :value="values[2]"/>
+          <CProgressBar color="gradient-primary" :value="values[0]"/>
+          <CProgressBar color="gradient-success" :value="values[1]"/>
+          <CProgressBar color="gradient-info" :value="values[2]"/>
         </CProgress>
         <CProgress show-value striped :max="max3" class="mb-3">
-          <CProgressBar color="primary" :value="values[0]"/>
-          <CProgressBar color="success" :value="values[1]"/>
-          <CProgressBar color="info" :value="values[2]"/>
+          <CProgressBar color="gradient-primary" :value="values[0]"/>
+          <CProgressBar color="gradient-success" :value="values[1]"/>
+          <CProgressBar color="gradient-info" :value="values[2]"/>
         </CProgress>
         <CProgress :max="max3" class="mb-3">
-          <CProgressBar color="primary" :value="values[0]" show-percentage/>
+          <CProgressBar color="gradient-primary" :value="values[0]" show-percentage/>
           <CProgressBar color="success" :value="values[1]" animated show-percentage/>
-          <CProgressBar color="info" :value="values[2]" striped show-percentage/>
+          <CProgressBar color="gradient-info" :value="values[2]" striped show-percentage/>
         </CProgress>
       </CCardBody>
     </CCard>
@@ -215,13 +217,13 @@ export default {
       value: 33.333333333,
       value3: 75,
       bars: [
-        {color: 'success', value: 75},
-        {color: 'info', value: 75},
-        {color: 'warning', value: 75},
-        {color: 'danger', value: 75},
-        {color: 'primary', value: 75},
-        {color: 'secondary', value: 75},
-        {color: 'dark', value: 75}
+        {color: 'gradient-success', value: 75},
+        {color: 'gradient-info', value: 75},
+        {color: 'gradient-warning', value: 75},
+        {color: 'gradient-danger', value: 75},
+        {color: 'gradient-primary', value: 75},
+        {color: 'gradient-secondary', value: 75},
+        {color: 'gradient-dark', value: 75}
       ],
       timer: null,
       striped: true,
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index de983ce7..c0933a5c 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -17,7 +17,7 @@
           </div>
           <div>Lorem ipsum...</div>
           <CProgress
-            color="success"
+            color="gradient-success"
             :value="25"
             class="progress-xs my-3 mb-0"
           />
@@ -28,7 +28,7 @@
           header="12.124"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="info"
+          color="gradient-info"
           :value="25"
         />
       </CCol>
@@ -37,7 +37,7 @@
           header="$98.111,00"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="warning"
+          color="gradient-warning"
           :value="25"
         />
       </CCol>
@@ -46,7 +46,7 @@
           header="2 TB"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="danger"
+          color="gradient-danger"
           :value="25"
         />
       </CCol>
@@ -57,7 +57,7 @@
           header="89.9%"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="success"
+          color="gradient-success"
           inverse :value="25"
         />
       </CCol>
@@ -66,7 +66,7 @@
           header="12.124"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="info"
+          color="gradient-info"
           inverse
           :value="25"
         />
@@ -76,7 +76,7 @@
           header="$98.111,00"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="warning"
+          color="gradient-warning"
           inverse
           :value="25"
         />
@@ -86,7 +86,7 @@
           header="2 TB"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          color="danger"
+          color="gradient-danger"
           inverse
           :value="25"
         />
@@ -97,7 +97,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="primary"
+          color="gradient-primary"
         >
           <CIcon name="cil-settings" width="24"/>
         </CWidgetIcon>
@@ -106,7 +106,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="info"
+          color="gradient-info"
         >
           <CIcon name="cil-laptop" width="24"/>
         </CWidgetIcon>
@@ -115,7 +115,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="warning"
+          color="gradient-warning"
         >
           <CIcon name="cil-moon" width="24"/>
         </CWidgetIcon>
@@ -124,7 +124,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="danger"
+          color="gradient-danger"
         >
           <CIcon name="cil-bell" width="24"/>
         </CWidgetIcon>
@@ -135,7 +135,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="primary"
+          color="gradient-primary"
           :icon-padding="false"
         >
           <CIcon name="cil-settings" width="24"/>
@@ -145,7 +145,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="info"
+          color="gradient-info"
           :icon-padding="false"
         >
           <CIcon name="cil-laptop" width="24"/>
@@ -155,7 +155,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="warning"
+          color="gradient-warning"
           :icon-padding="false"
         >
           <CIcon name="cil-moon" width="24"/>
@@ -165,7 +165,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="danger"
+          color="gradient-danger"
           :icon-padding="false"
         >
           <CIcon name="cil-bell" width="24"/>
@@ -177,7 +177,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="primary"
+          color="gradient-primary"
           :icon-padding="false"
         >
           <CIcon name="cil-settings" class="mx-5 " width="24"/>
@@ -187,7 +187,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="info"
+          color="gradient-info"
           :icon-padding="false"
         >
           <CIcon name="cil-laptop" class="mx-5 " width="24"/>
@@ -197,18 +197,19 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="warning"
+          color="gradient-warning"
           :icon-padding="false"
         >
           <CIcon name="cil-moon" class="mx-5 " width="24"/>
           <template #footer>
-            <CCardFooter class="card-footer px-3 py-2">
+            <CCardFooter class="px-3 py-2">
               <CLink
-                class="font-weight-bold font-xs btn-block text-muted"
+                class="font-weight-bold font-xs text-muted d-flex justify-content-between"
                 href="https://coreui.io/"
+                target="_blank"
               >
                 View more
-                <CIcon name="cil-arrowRight" class="float-right" width="16"/>
+                <CIcon name="cil-arrow-right" width="16"/>
               </CLink>
             </CCardFooter>
           </template>
@@ -220,7 +221,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="primary"
+          color="gradient-primary"
           :icon-padding="false"
           link="#"
         >
@@ -231,7 +232,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="info"
+          color="gradient-info"
           :icon-padding="false"
           link="#"
         >
@@ -242,7 +243,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          color="warning"
+          color="gradient-warning"
           :icon-padding="false"
           link="#"
         >
@@ -256,21 +257,21 @@
       <CWidgetProgressIcon
         header="87.500"
         text="Visitors"
-        color="info"
+        color="gradient-info"
       >
         <CIcon name="cil-people" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="385"
         text="New Clients"
-        color="success"
+        color="gradient-success"
       >
         <CIcon name="cil-userFollow" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="1238"
         text="Products sold"
-        color="warning"
+        color="gradient-warning"
       >
         <CIcon name="cil-basket" height="36"/>
       </CWidgetProgressIcon>
@@ -283,7 +284,7 @@
       <CWidgetProgressIcon
         header="5:34:11"
         text="Avg. Time"
-        color="danger"
+        color="gradient-danger"
       >
         <CIcon name="cil-speedometer" height="36"/>
       </CWidgetProgressIcon>
@@ -292,7 +293,7 @@
       <CWidgetProgressIcon
         header="87.500"
         text="Visitors"
-        color="info"
+        color="gradient-info"
         inverse
       >
         <CIcon name="cil-people" height="36"/>
@@ -300,7 +301,7 @@
       <CWidgetProgressIcon
         header="385"
         text="New Clients"
-        color="success"
+        color="gradient-success"
         inverse
       >
         <CIcon name="cil-userFollow" height="36"/>
@@ -308,7 +309,7 @@
       <CWidgetProgressIcon
         header="1238"
         text="Products sold"
-        color="warning"
+        color="gradient-warning"
         inverse
       >
         <CIcon name="cil-basket" height="36"/>
@@ -316,7 +317,7 @@
       <CWidgetProgressIcon
         header="28%"
         text="Returning Visitors"
-        color="primary"
+        color="gradient-primary"
         inverse
       >
         <CIcon name="cil-chartPie" height="36"/>
@@ -324,7 +325,7 @@
       <CWidgetProgressIcon
         header="5:34:11"
         text="Avg. Time"
-        color="danger"
+        color="gradient-danger"
         inverse
       >
         <CIcon name="cil-speedometer" height="36"/>
@@ -335,7 +336,7 @@
         <CWidgetProgressIcon
           header="87.500"
           text="Visitors"
-          color="info"
+          color="gradient-info"
         >
           <CIcon name="cil-people" height="36"/>
         </CWidgetProgressIcon>
@@ -344,7 +345,7 @@
         <CWidgetProgressIcon
           header="385"
           text="New Clients"
-          color="success"
+          color="gradient-success"
         >
           <CIcon name="cil-userFollow" height="36"/>
         </CWidgetProgressIcon>
@@ -353,7 +354,7 @@
         <CWidgetProgressIcon
           header="1238"
           text="Products sold"
-          color="warning"
+          color="gradient-warning"
         >
           <CIcon name="cil-basket" height="36"/>
         </CWidgetProgressIcon>
@@ -362,7 +363,7 @@
         <CWidgetProgressIcon
           header="28%"
           text="Returning Visitors"
-          color="primary"
+          color="gradient-primary"
         >
           <CIcon name="cil-chartPie" height="36"/>
         </CWidgetProgressIcon>
@@ -371,7 +372,7 @@
         <CWidgetProgressIcon
           header="5:34:11"
           text="Avg. Time"
-          color="danger"
+          color="gradient-danger"
         >
           <CIcon name="cil-speedometer" height="36"/>
         </CWidgetProgressIcon>
@@ -380,7 +381,7 @@
         <CWidgetProgressIcon
           header="972"
           text="comments"
-          color="info"
+          color="gradient-info"
         >
           <CIcon name="cil-speech" height="36"/>
         </CWidgetProgressIcon>
@@ -391,7 +392,7 @@
         <CWidgetProgressIcon
           header="87.500"
           text="Visitors"
-          color="info"
+          color="gradient-info"
           inverse
         >
           <CIcon name="cil-people" height="36"/>
@@ -401,7 +402,7 @@
         <CWidgetProgressIcon
           header="385"
           text="New Clients"
-          color="success"
+          color="gradient-success"
           inverse
         >
           <CIcon name="cil-userFollow" height="36"/>
@@ -411,7 +412,7 @@
         <CWidgetProgressIcon
           header="1238"
           text="Products sold"
-          color="warning"
+          color="gradient-warning"
           inverse
         >
           <CIcon name="cil-basket" height="36"/>
@@ -421,7 +422,7 @@
         <CWidgetProgressIcon
           header="28%"
           text="Returning Visitors"
-          color="primary"
+          color="gradient-primary"
           inverse
         >
           <CIcon name="cil-chartPie" height="36"/>
@@ -431,7 +432,7 @@
         <CWidgetProgressIcon
           header="5:34:11"
           text="Avg. Time"
-          color="danger"
+          color="gradient-danger"
           inverse
         >
           <CIcon name="cil-speedometer" height="36"/>
@@ -441,7 +442,7 @@
         <CWidgetProgressIcon
           header="972"
           text="comments"
-          color="info"
+          color="gradient-info"
           inverse
         >
           <CIcon name="cil-speech" height="36"/>
diff --git a/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap b/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
index 6e1ca26c..3757e7c8 100644
--- a/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
@@ -22,6 +22,7 @@ exports[`TheContainer.vue renders correctly 1`] = `
           tag="div"
         >
           <router-view-stub
+            mode="out-in"
             name="fade"
           />
         </ccontainer-stub>
diff --git a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
index eb1bc967..cee7f779 100644
--- a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
@@ -2,187 +2,6 @@
 
 exports[`ListGroups.vue renders correctly 1`] = `
 <div>
-  <crow-stub
-    gutters="true"
-    tag="div"
-  >
-    <ccol-stub
-      md="6"
-      tag="div"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          <cicon-stub
-            name="cil-justify-center"
-          />
-           
-          <strong>
-             Bootstrap list group 
-          </strong>
-           
-          <div
-            class="card-header-actions"
-          >
-            <a
-              class="card-header-action"
-              href="https://coreui.io/vue/docs/components/list-group"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              <small
-                class="text-muted"
-              >
-                docs
-              </small>
-            </a>
-          </div>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <clistgroup-stub
-            tag="ul"
-          >
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Cras justo odio
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Dapibus ac facilisis in
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Morbi leo risus
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Porta ac consectetur ac
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Vestibulum at eros
-            </clistgroupitem-stub>
-          </clistgroup-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="6"
-      tag="div"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          <cicon-stub
-            name="cil-justify-center"
-          />
-          <strong>
-             List group 
-          </strong>
-          <small>
-            active items
-          </small>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <clistgroup-stub
-            tag="ul"
-          >
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Cras justo odio
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              active="true"
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Dapibus ac facilisis in
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Morbi leo risus
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Porta ac consectetur ac
-            </clistgroupitem-stub>
-             
-            <clistgroupitem-stub
-              activeclass="router-link-active"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              tag="li"
-              target="_self"
-            >
-              Vestibulum at eros
-            </clistgroupitem-stub>
-          </clistgroup-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-   
   <crow-stub
     gutters="true"
     tag="div"
@@ -244,6 +63,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
               Morbi leo risus
             </clistgroupitem-stub>
              
+            <clistgroupitemdivider />
+             
             <clistgroupitem-stub
               activeclass="router-link-active"
               disabled="true"
@@ -684,15 +505,17 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </strong>
            
           <small>
-            colors active
+            colors active accent
           </small>
         </ccardheader-stub>
          
         <ccardbody-stub>
           <clistgroup-stub
+            accent=""
             tag="ul"
           >
             <clistgroupitem-stub
+              accent="light"
               activeclass="router-link-active"
               event="click"
               exactactiveclass="router-link-exact-active"
@@ -705,6 +528,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="primary"
               activeclass="router-link-active"
               color="primary"
               event="click"
@@ -718,6 +542,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="secondary"
               activeclass="router-link-active"
               color="secondary"
               event="click"
@@ -731,6 +556,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="success"
               activeclass="router-link-active"
               color="success"
               event="click"
@@ -744,6 +570,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="danger"
               activeclass="router-link-active"
               color="danger"
               event="click"
@@ -757,6 +584,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="warning"
               activeclass="router-link-active"
               color="warning"
               event="click"
@@ -770,6 +598,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="info"
               activeclass="router-link-active"
               color="info"
               event="click"
@@ -783,6 +612,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="light"
               activeclass="router-link-active"
               color="light"
               event="click"
@@ -796,6 +626,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
             </clistgroupitem-stub>
              
             <clistgroupitem-stub
+              accent="dark"
               activeclass="router-link-active"
               color="dark"
               event="click"
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
index 2e8ac8ce..77606f67 100644
--- a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -519,12 +519,12 @@ exports[`Navs.vue renders correctly 1`] = `
       >
         <ccol-stub
           class="m-0"
-          col="3"
+          col="12"
           tag="div"
         >
           <cnav-stub
             pills=""
-            vertical="true"
+            vertical="lg"
           >
             <cnavitem-stub
               active="true"
diff --git a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
index 2c8ab1ad..f3f237df 100644
--- a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
@@ -47,21 +47,21 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         value="0"
       >
         <cprogressbar-stub
-          color="success"
+          color="gradient-success"
           max="100"
           precision="0"
           value="43.8"
         />
          
         <cprogressbar-stub
-          color="warning"
+          color="gradient-warning"
           max="100"
           precision="0"
           value="18.25"
         />
          
         <cprogressbar-stub
-          color="danger"
+          color="gradient-danger"
           max="100"
           precision="0"
           value="10.95"
@@ -249,26 +249,44 @@ exports[`ProgressBars.vue renders correctly 1`] = `
        
       <cprogress-stub
         class="mb-2"
-        height="2rem"
         max="100"
         precision="0"
         showpercentage="true"
+        size="xs"
         value="75"
       />
        
       <cprogress-stub
         class="mb-2"
-        height="20px"
         max="100"
         precision="0"
         showpercentage="true"
+        size="sm"
         value="75"
       />
        
       <cprogress-stub
-        height="2px"
+        class="mb-2"
         max="100"
         precision="0"
+        showpercentage="true"
+        style="height: 2rem;"
+        value="75"
+      />
+       
+      <cprogress-stub
+        class="mb-2"
+        max="100"
+        precision="0"
+        showpercentage="true"
+        style="height: 20px;"
+        value="75"
+      />
+       
+      <cprogress-stub
+        max="100"
+        precision="0"
+        style="height: 2px;"
         value="75"
       />
     </ccardbody-stub>
@@ -296,14 +314,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          success:
+          gradient-success:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="success"
+            color="gradient-success"
             max="100"
             precision="0"
             value="75"
@@ -316,14 +334,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          info:
+          gradient-info:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="info"
+            color="gradient-info"
             max="100"
             precision="0"
             value="75"
@@ -336,14 +354,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          warning:
+          gradient-warning:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="warning"
+            color="gradient-warning"
             max="100"
             precision="0"
             value="75"
@@ -356,14 +374,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          danger:
+          gradient-danger:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="danger"
+            color="gradient-danger"
             max="100"
             precision="0"
             value="75"
@@ -376,14 +394,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          primary:
+          gradient-primary:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="primary"
+            color="gradient-primary"
             max="100"
             precision="0"
             value="75"
@@ -396,14 +414,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          secondary:
+          gradient-secondary:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="secondary"
+            color="gradient-secondary"
             max="100"
             precision="0"
             value="75"
@@ -416,14 +434,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         <div
           class="col-sm-2"
         >
-          dark:
+          gradient-dark:
         </div>
          
         <div
           class="col-sm-10 pt-1"
         >
           <cprogress-stub
-            color="dark"
+            color="gradient-dark"
             max="100"
             precision="0"
             value="75"
@@ -595,21 +613,21 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         value="0"
       >
         <cprogressbar-stub
-          color="primary"
+          color="gradient-primary"
           max="100"
           precision="0"
           value="15"
         />
          
         <cprogressbar-stub
-          color="success"
+          color="gradient-success"
           max="100"
           precision="0"
           value="30"
         />
          
         <cprogressbar-stub
-          color="info"
+          color="gradient-info"
           max="100"
           precision="0"
           value="20"
@@ -624,21 +642,21 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         value="0"
       >
         <cprogressbar-stub
-          color="primary"
+          color="gradient-primary"
           max="100"
           precision="0"
           value="15"
         />
          
         <cprogressbar-stub
-          color="success"
+          color="gradient-success"
           max="100"
           precision="0"
           value="30"
         />
          
         <cprogressbar-stub
-          color="info"
+          color="gradient-info"
           max="100"
           precision="0"
           value="20"
@@ -654,21 +672,21 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         value="0"
       >
         <cprogressbar-stub
-          color="primary"
+          color="gradient-primary"
           max="100"
           precision="0"
           value="15"
         />
          
         <cprogressbar-stub
-          color="success"
+          color="gradient-success"
           max="100"
           precision="0"
           value="30"
         />
          
         <cprogressbar-stub
-          color="info"
+          color="gradient-info"
           max="100"
           precision="0"
           value="20"
@@ -682,7 +700,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         value="0"
       >
         <cprogressbar-stub
-          color="primary"
+          color="gradient-primary"
           max="100"
           precision="0"
           showpercentage="true"
@@ -699,7 +717,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         />
          
         <cprogressbar-stub
-          color="info"
+          color="gradient-info"
           max="100"
           precision="0"
           showpercentage="true"
diff --git a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
index e166a81e..b9435621 100644
--- a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
@@ -51,7 +51,7 @@ exports[`Tables.vue renders correctly 1`] = `
       tag="div"
     >
       <ctablewrapper-stub
-        bordered="true"
+        border="true"
         caption="Bordered Table"
         fields="username,registered,role,status"
         fixed="true"
@@ -69,7 +69,7 @@ exports[`Tables.vue renders correctly 1`] = `
       tag="div"
     >
       <ctablewrapper-stub
-        bordered="true"
+        border="true"
         caption="Combined All Table"
         fields="username,registered,role,status"
         fixed="true"
@@ -90,7 +90,7 @@ exports[`Tables.vue renders correctly 1`] = `
       tag="div"
     >
       <ctablewrapper-stub
-        bordered="true"
+        border="true"
         caption="Combined All dark Table"
         dark="true"
         fields="username,registered,role,status"
diff --git a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
index 708635b4..ad74fc91 100644
--- a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
+++ b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
@@ -45,7 +45,7 @@ exports[`Widgets.vue renders correctly 1`] = `
          
         <cprogress-stub
           class="progress-xs my-3 mb-0"
-          color="success"
+          color="gradient-success"
           max="100"
           precision="0"
           value="25"
@@ -59,7 +59,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="info"
+        color="gradient-info"
         footer="Lorem ipsum dolor sit amet enim."
         header="12.124"
         text="Lorem ipsum..."
@@ -73,7 +73,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="warning"
+        color="gradient-warning"
         footer="Lorem ipsum dolor sit amet enim."
         header="$98.111,00"
         text="Lorem ipsum..."
@@ -87,7 +87,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="danger"
+        color="gradient-danger"
         footer="Lorem ipsum dolor sit amet enim."
         header="2 TB"
         text="Lorem ipsum..."
@@ -106,7 +106,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="success"
+        color="gradient-success"
         footer="Lorem ipsum dolor sit amet enim."
         header="89.9%"
         inverse="true"
@@ -121,7 +121,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="info"
+        color="gradient-info"
         footer="Lorem ipsum dolor sit amet enim."
         header="12.124"
         inverse="true"
@@ -136,7 +136,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="warning"
+        color="gradient-warning"
         footer="Lorem ipsum dolor sit amet enim."
         header="$98.111,00"
         inverse="true"
@@ -151,7 +151,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogress-stub
-        color="danger"
+        color="gradient-danger"
         footer="Lorem ipsum dolor sit amet enim."
         header="2 TB"
         inverse="true"
@@ -172,7 +172,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="primary"
+        color="gradient-primary"
         header="$1.999,50"
         iconpadding="true"
         text="Income"
@@ -191,7 +191,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="info"
+        color="gradient-info"
         header="$1.999,50"
         iconpadding="true"
         text="Income"
@@ -210,7 +210,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="warning"
+        color="gradient-warning"
         header="$1.999,50"
         iconpadding="true"
         text="Income"
@@ -229,7 +229,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="danger"
+        color="gradient-danger"
         header="$1.999,50"
         iconpadding="true"
         text="Income"
@@ -253,7 +253,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="primary"
+        color="gradient-primary"
         header="$1.999,50"
         text="Income"
       >
@@ -271,7 +271,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="info"
+        color="gradient-info"
         header="$1.999,50"
         text="Income"
       >
@@ -289,7 +289,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="warning"
+        color="gradient-warning"
         header="$1.999,50"
         text="Income"
       >
@@ -307,7 +307,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="danger"
+        color="gradient-danger"
         header="$1.999,50"
         text="Income"
       >
@@ -330,7 +330,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="primary"
+        color="gradient-primary"
         header="$1.999,50"
         text="Income"
       >
@@ -349,7 +349,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="info"
+        color="gradient-info"
         header="$1.999,50"
         text="Income"
       >
@@ -368,7 +368,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgeticon-stub
-        color="warning"
+        color="gradient-warning"
         header="$1.999,50"
         text="Income"
       >
@@ -392,7 +392,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     tag="div"
   >
     <cwidgetprogressicon-stub
-      color="info"
+      color="gradient-info"
       header="87.500"
       text="Visitors"
       value="25"
@@ -404,7 +404,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="success"
+      color="gradient-success"
       header="385"
       text="New Clients"
       value="25"
@@ -416,7 +416,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="warning"
+      color="gradient-warning"
       header="1238"
       text="Products sold"
       value="25"
@@ -439,7 +439,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="danger"
+      color="gradient-danger"
       header="5:34:11"
       text="Avg. Time"
       value="25"
@@ -456,7 +456,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     tag="div"
   >
     <cwidgetprogressicon-stub
-      color="info"
+      color="gradient-info"
       header="87.500"
       inverse="true"
       text="Visitors"
@@ -469,7 +469,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="success"
+      color="gradient-success"
       header="385"
       inverse="true"
       text="New Clients"
@@ -482,7 +482,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="warning"
+      color="gradient-warning"
       header="1238"
       inverse="true"
       text="Products sold"
@@ -495,7 +495,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="primary"
+      color="gradient-primary"
       header="28%"
       inverse="true"
       text="Returning Visitors"
@@ -508,7 +508,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     </cwidgetprogressicon-stub>
      
     <cwidgetprogressicon-stub
-      color="danger"
+      color="gradient-danger"
       header="5:34:11"
       inverse="true"
       text="Avg. Time"
@@ -531,7 +531,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="info"
+        color="gradient-info"
         header="87.500"
         text="Visitors"
         value="25"
@@ -549,7 +549,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="success"
+        color="gradient-success"
         header="385"
         text="New Clients"
         value="25"
@@ -567,7 +567,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="warning"
+        color="gradient-warning"
         header="1238"
         text="Products sold"
         value="25"
@@ -585,7 +585,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="primary"
+        color="gradient-primary"
         header="28%"
         text="Returning Visitors"
         value="25"
@@ -603,7 +603,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="danger"
+        color="gradient-danger"
         header="5:34:11"
         text="Avg. Time"
         value="25"
@@ -621,7 +621,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="info"
+        color="gradient-info"
         header="972"
         text="comments"
         value="25"
@@ -644,7 +644,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="info"
+        color="gradient-info"
         header="87.500"
         inverse="true"
         text="Visitors"
@@ -663,7 +663,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="success"
+        color="gradient-success"
         header="385"
         inverse="true"
         text="New Clients"
@@ -682,7 +682,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="warning"
+        color="gradient-warning"
         header="1238"
         inverse="true"
         text="Products sold"
@@ -701,7 +701,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="primary"
+        color="gradient-primary"
         header="28%"
         inverse="true"
         text="Returning Visitors"
@@ -720,7 +720,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="danger"
+        color="gradient-danger"
         header="5:34:11"
         inverse="true"
         text="Avg. Time"
@@ -739,7 +739,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       tag="div"
     >
       <cwidgetprogressicon-stub
-        color="info"
+        color="gradient-info"
         header="972"
         inverse="true"
         text="comments"