diff --git a/src/containers/_nav.js b/src/containers/_nav.js
index 0ae46af0..7c469bec 100644
--- a/src/containers/_nav.js
+++ b/src/containers/_nav.js
@@ -10,7 +10,7 @@ export default [
           icon: 'cui-speedometer',
           badge: {
             color: 'primary',
-            textHtml: 'NEW'
+            text: 'NEW'
           }
         }
       }
@@ -296,7 +296,7 @@ export default [
               icon: 'cui-star',
               badge: {
                 color: 'info',
-                textHtml: 'NEW'
+                text: 'NEW'
               }
             }
           }
@@ -374,7 +374,7 @@ export default [
           icon: 'cui-calculator',
           badge: {
             color: 'primary',
-            textHtml: 'NEW',
+            text: 'NEW',
             pill: true
           }
         }
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 23a80a45..5cf0bb25 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -32,51 +32,51 @@ export default {
     return {
       items: [
         {
-          textHtml: '<b>Admin</b>',
+          text: '<b>Admin</b>',
           href: '#'
         }, 
         {
-          textHtml: 'Manage',
+          text: 'Manage',
           href: '#'
         }, 
         {
-          textHtml: 'Library'
+          text: 'Library'
         }
       ],
 
 
       items2: [
         {
-          textHtml: 'Go to dashboard',
+          text: 'Go to dashboard',
           to: '/dashboard'
         }, 
         {
-          textHtml: 'Go to widgets',
+          text: 'Go to widgets',
           to: '/Widgets'
         }, 
         {
-          textHtml: 'Go to Google',
+          text: 'Go to Google',
           href: 'http://google.com'
         },
         {
-          textHtml: 'Current page'
+          text: 'Current page'
         }
       ],
 
 
       items3: [
         {
-          textHtml: 'Added',
+          text: 'Added',
           to: '#2',
           addClasses: 'font-xl'
         }, 
         {
-          textHtml: 'Custom',
+          text: 'Custom',
           to: '#3',
           addClasses: 'font-xl'
         },
         {
-          textHtml: 'Classes',
+          text: 'Classes',
           to: '#4',
           addClasses: 'font-xl text-danger'
         }
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index a6147883..4aa3cf80 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -17,10 +17,10 @@
       </CCardHeader>
       <CCardBody>
         <CNavbar
-          toggleable="md"
+          expandable="md"
           color="info"
         >
-          <CNavbarToggler @click="show=!show"/>
+          <CToggler inNavbar @click="show=!show"/>
           <CNavbarBrand href="#">NavBar</CNavbarBrand>
           <CCollapse :show="show" navbar>
             <CNavbarNav>
@@ -87,7 +87,7 @@
       </CCardHeader>
       <CCardBody>
         <CNavbar toggleable="sm" light color="light">
-          <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
+          <CToggler inNavbar @click="navbarText=!navbarText"/>
           <CNavbarBrand>CoreuiVue</CNavbarBrand>
           <CCollapse :show="navbarText" navbar>
             <CNavbarNav>
@@ -103,8 +103,8 @@
         <small>dropdown</small>
       </CCardHeader>
       <CCardBody>
-        <CNavbar toggleable="sm" color="primary">
-          <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
+        <CNavbar expandable="sm" color="primary" >
+          <CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
           <CCollapse :show="navbarDropdown" navbar>
             <CNavbarNav>
               <CNavItem href="#">Home</CNavItem>
@@ -112,7 +112,7 @@
               <!-- Navbar dropdowns -->
               <CDropdown
                 toggler-text="Lang"
-                right
+                placement="bottom-end"
                 nav
               >
                 <CDropdownItem>EN</CDropdownItem>
@@ -122,7 +122,7 @@
               </CDropdown>
               <CDropdown
                 toggler-text="User"
-                right
+                placement="bottom-end"
                 nav
               >
                 <CDropdownItem>Account</CDropdownItem>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index abb3eaa1..58300166 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -125,9 +125,10 @@
               class="position-absolute"
               color="secondary"
               style="right:10px;top: 50%;transform: translateY(-50%);"
-              textHtml="<i>Close</i>"
               @click="dismiss"
-            />
+            >
+              <i>Close</i>
+            </CButton>
           </CAlert>
           <CButton
             @click="showDismissibleAlerts"
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index e2b66856..f1cbecbd 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -26,7 +26,7 @@
         <CCardFooter>
           <CButton color="primary">
             Notifications
-            <CBadge color="light" :style="{position: 'static'}">4</CBadge>
+            <CBadge color="light" class="ml-2 position-static">4</CBadge>
           </CButton>
         </CCardFooter>
       </CCard>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index f6b386de..b34ecb89 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -161,11 +161,11 @@
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      <template #header="{hide}">
+      <template #header>
         <h6 class="modal-title">Custom smaller modal title</h6>
-        <CButtonClose @click="hide()" class="text-white"/>
+        <CButtonClose @click="darkModal = false" class="text-white"/>
       </template>
-      <template #footer="{hide}">
+      <template #footer>
         <CButton @click="darkModal = false" color="danger">Discard</CButton>
         <CButton @click="darkModal = false" color="success">Accept</CButton>
       </template>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index e728e3a1..32f61f20 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -140,7 +140,7 @@
           header="$1.999,50"
           text="Income"
           color="primary"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="settings" width="24"/>
         </CWidgetIcon>
@@ -150,7 +150,7 @@
           header="$1.999,50"
           text="Income"
           color="info"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="laptop" width="24"/>
         </CWidgetIcon>
@@ -160,7 +160,7 @@
           header="$1.999,50"
           text="Income"
           color="warning"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="moon" width="24"/>
         </CWidgetIcon>
@@ -170,7 +170,7 @@
           header="$1.999,50"
           text="Income"
           color="danger"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="bell" width="24"/>
         </CWidgetIcon>
@@ -182,7 +182,7 @@
           header="$1.999,50"
           text="Income"
           color="primary"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="settings" class="mx-5 " width="24"/>
         </CWidgetIcon>
@@ -192,7 +192,7 @@
           header="$1.999,50"
           text="Income"
           color="info"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="laptop" class="mx-5 " width="24"/>
         </CWidgetIcon>
@@ -202,7 +202,7 @@
           header="$1.999,50"
           text="Income"
           color="warning"
-          no-icon-padding
+          :icon-padding="false"
         >
           <CIcon name="moon" class="mx-5 " width="24"/>
           <template #footer>
@@ -225,7 +225,7 @@
           header="$1.999,50"
           text="Income"
           color="primary"
-          no-icon-padding
+          :icon-padding="false"
           link="#"
         >
           <CIcon name="settings" class="mx-5 " width="24"/>
@@ -236,7 +236,7 @@
           header="$1.999,50"
           text="Income"
           color="info"
-          no-icon-padding
+          :icon-padding="false"
           link="#"
         >
           <CIcon name="laptop" class="mx-5 " width="24"/>
@@ -247,7 +247,7 @@
           header="$1.999,50"
           text="Income"
           color="warning"
-          no-icon-padding
+          :icon-padding="false"
           link="#"
         >
           <CIcon name="moon" class="mx-5" width="24"/>
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 119453ae..8c0b574f 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -37,7 +37,7 @@
             class="float-right"
             color="transparent p-0"
             placement="bottom-end"
-            no-caret
+            :caret="false"
             buttonHtml="<i class='cui-location-pin'></i>"
           >
             <template #toggler-content>