diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index 4bc6aacd..b82188ed 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,34 +1,34 @@
 <template>
   <div class="animated fadeIn">
     <CCardGroup columns class="card-columns">
-      <CCard header="Line Chart" bodyWrapper>
+      <CCard headerHtml="Line Chart" bodyWrapper>
         <LineExample/>
       </CCard>
-      <CCard header="Bar Chart" bodyWrapper>
+      <CCard headerHtml="Bar Chart" bodyWrapper>
         <BarExample/>
       </CCard>
-      <CCard header="Doughnut Chart" bodyWrapper>
+      <CCard headerHtml="Doughnut Chart" bodyWrapper>
         <DoughnutExample/>
       </CCard>
-      <CCard header="Radar Chart" bodyWrapper>
+      <CCard headerHtml="Radar Chart" bodyWrapper>
         <RadarExample/>
       </CCard>
-      <CCard header="Pie Chart" bodyWrapper>
+      <CCard headerHtml="Pie Chart" bodyWrapper>
         <PieExample/>
       </CCard>
-      <CCard header="Polar Area Chart" bodyWrapper>
+      <CCard headerHtml="Polar Area Chart" bodyWrapper>
         <PolarAreaExample/>
       </CCard>
-      <CCard header="Simple line chart" bodyWrapper>
+      <CCard headerHtml="Simple line chart" bodyWrapper>
         <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                      label='Sales' borderColor='success'/>
       </CCard>
-      <CCard header="Simple pointed chart" bodyWrapper>
+      <CCard headerHtml="Simple pointed chart" bodyWrapper>
         <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                      :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                      style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
       </CCard>
-      <CCard header="Simple bar chart" bodyWrapper>
+      <CCard headerHtml="Simple bar chart" bodyWrapper>
         <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                     label='Sales' color='danger'/>
       </CCard>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 610e4d8b..dccfd558 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -58,7 +58,7 @@
     <Widgets04/>
     <CRow>
       <CCol md="12">
-        <CCard header="Traffic &amp; Sales" bodyWrapper>
+        <CCard headerHtml="Traffic &amp; Sales" bodyWrapper>
           <CRow>
             <CCol sm="12" lg="6">
               <CRow>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 13c6e02f..7dbe1231 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -30,41 +30,41 @@ export default {
   data () {
     return {
       items: [{
-        text: '<b>Admin</b>',
+        textHtml: '<b>Admin</b>',
         href: '#'
       }, {
-        text: 'Manage',
+        textHtml: 'Manage',
         href: '#'
       }, {
-        text: 'Library'
+        textHtml: 'Library'
       }],
 
 
       items2: [{
-        text: 'Go to dashboard',
+        textHtml: 'Go to dashboard',
         to: '/dashboard'
       }, {
-        text: 'Go to widgets',
+        textHtml: 'Go to widgets',
         to: '/Widgets'
       }, {
-        text: 'Go to Google',
+        textHtml: 'Go to Google',
         href: 'http://google.com'
       },{
-        text: 'Current page'
+        textHtml: 'Current page'
       }],
 
 
       items3: [{
-        text: 'Link',
+        textHtml: 'Link',
         to: '#2',
         activeClass: 'bg-info p-1'
       }, {
-        text: 'Active',
+        textHtml: 'Active',
         to: '#3',
         activeClass: 'bg-warning p-1',
         addLinkClasses: 'bg-info p-1'
       },{
-        text: 'Classes',
+        textHtml: 'Classes',
         to: '#4',
         activeClass: 'bg-danger p-1',
       }]
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 8181fce9..4064c874 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -2,15 +2,15 @@
   <div class="animated fadeIn">
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card title" :body="loremIpsum"/>
+        <CCard headerHtml="Card title" :bodyHtml="loremIpsum"/>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard footer="Card Footer" :body="loremIpsum" />
+        <CCard footerHtml="Card Footer" :bodyHtml="loremIpsum" />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="<i class='fa fa-check'></i> Card with icon"
-          :body="loremIpsum"
+          :bodyHtml="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
@@ -49,7 +49,7 @@
             Card with label
             <CBadge pill variant="danger" class="float-right">42</CBadge>
           </CCardHeader>
-          <CCardBody :body="loremIpsum"/>
+          <CCardBody :bodyHtml="loremIpsum"/>
         </CCard>
       </CCol>
     </CRow><!--/.row-->
@@ -58,14 +58,14 @@
         <CCard
           header="Card outline primary"
           borderVariant="primary"
-          :body="loremIpsum"
+          :bodyHtml="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline secondary"
           borderVariant="secondary"
-          :body="loremIpsum"
+          :bodyHtml="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
@@ -78,17 +78,17 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline info" borderVariant="info" bodyWrapper>
+        <CCard headerHtml="Card outline info" borderVariant="info" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline warning" borderVariant="warning" bodyWrapper>
+        <CCard headerHtml="Card outline warning" borderVariant="warning" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline danger" borderVariant="danger" bodyWrapper>
+        <CCard headerHtml="Card outline danger" borderVariant="danger" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
@@ -190,27 +190,27 @@
     </CRow><!--/.row-->
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-primary" bodyWrapper>
+        <CCard headerHtml="Card title" class="bg-primary" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-success" bodyWrapper>
+        <CCard headerHtml="Card title" class="bg-success" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-info" bodyWrapper>
+        <CCard headerHtml="Card title" class="bg-info" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-warning" bodyWrapper>
+        <CCard headerHtml="Card title" class="bg-warning" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-danger" bodyWrapper>
+        <CCard headerHtml="Card title" class="bg-danger" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
@@ -244,7 +244,7 @@
       <CCol sm="6" md="4">
         <CCard >
           <CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
-          <CCardHeader header="Card title"/>
+          <CCardHeader headerHtml="Card title"/>
           <CCardBody style="max-height:200px;overflow-y:auto">
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 540d484b..2e5014a1 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -24,7 +24,7 @@
                     Toggle Inner Collapse
                   </CButton>
                   <CCollapse toggler="collapse2" class="mt-2">
-                    <CCard>Hello!</CCard>
+                    <CCard bodyWrapper>Hello!</CCard>
                   </CCollapse>
                 </CCard>
               </CCollapse>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 96c0629c..09a81513 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -178,7 +178,7 @@
             </CCardHeader>
             <CCardBody>
               <CCardGroup deck>
-                <CCard header="<b>Card with list group</b>">
+                <CCard headerHtml="<b>Card with list group</b>">
                   <CListGroup>
                     <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                     <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index c9efb401..0988464c 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -35,7 +35,7 @@
                     content: 'I start <strong>open</strong>',
                     active: true
                   }"
-                  text="Hover me"
+                  textHtml="Hover me"
                 />
               </div>
             </CCol>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 9f163f7b..030349c1 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -2,7 +2,7 @@
   <div class="animated fadeIn">
     <CRow>
       <CCol sm="12">
-        <CCard header="CTable power presentation" bodyWrapper>
+        <CCard headerHtml="CTable power presentation" bodyWrapper>
           <CTable :items="items.slice(0)"
                   :fields="fields"
                   :perPage="6"
@@ -58,7 +58,7 @@
     </CRow>
     <!-- <CRow>
       <CCol sm="12">
-        <CCard header="test2">
+        <CCard headerHtml="test2">
           <CTable
             :items="items.slice(0)"
             :fields="fields"
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 189b9425..4aa332f3 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -8,21 +8,21 @@
           </CCardHeader>
           <CCardBody>
             <CTabs addTabClasses="mt-1">
-              <CTab title="Home" active>
+              <CTab titleHtml="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Profile" >
+              <CTab titleHtml="Profile" >
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Disabled" disabled>
+              <CTab titleHtml="Disabled" disabled>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -43,21 +43,21 @@
               pills
               addNavClasses="mb-3"
             >
-              <CTab title="Home" active>
+              <CTab titleHtml="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Profile" >
+              <CTab titleHtml="Profile" >
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Disabled" disabled>
+              <CTab titleHtml="Disabled" disabled>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 3d1058d5..c3af383a 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -15,7 +15,7 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown1" buttonContent="Dropdown Button" class="m-2">
+                <CDropdown id="ddown1" buttonHtml="Dropdown Button" class="m-2">
                   <CDropdownItem>First Action</CDropdownItem>
                   <CDropdownItem>Second Action</CDropdownItem>
                   <CDropdownItem>Third Action</CDropdownItem>
@@ -25,7 +25,7 @@
                 </CDropdown>
               </div>
               <!-- <div>
-                <CDropdown id="ddown-buttons" buttonContent="Dropdown using buttons as menu items" class="m-2">
+                <CDropdown id="ddown-buttons" buttonHtml="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>
@@ -33,7 +33,7 @@
                 </CDropdown>
               </div> -->
               <div>
-                <CDropdown id="ddown-divider" buttonContent="Dropdown with divider" class="m-2">
+                <CDropdown id="ddown-divider" buttonHtml="Dropdown with divider" class="m-2">
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second item</CDropdownItem>
                   <CDropdownDivider></CDropdownDivider>
@@ -41,7 +41,7 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-header" buttonContent="Dropdown with header" class="m-2">
+                <CDropdown id="ddown-header" buttonHtml="Dropdown with header" class="m-2">
                   <CDropdownHeader>Dropdown header</CDropdownHeader>
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second Item</CDropdownItem>
@@ -57,14 +57,14 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-left" buttonContent="Left align" variant="primary" class="m-2">
+                <CDropdown id="ddown-left" buttonHtml="Left align" variant="primary" class="m-2">
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here</CDropdownItem>
                 </CDropdown>
                 <CDropdown id="ddown-right"
                            placement="bottom-end"
-                           buttonContent="Right align"
+                           buttonHtml="Right align"
                            variant="primary"
                            class="m-2"
                 >
@@ -75,7 +75,7 @@
               </div>
               <div>
                 <CDropdown id="ddown-dropup"
-                           buttonContent="Drop-Up"
+                           buttonHtml="Drop-Up"
                            variant="info"
                            class="m-2"
                            dropup
@@ -88,7 +88,7 @@
               <div>
                 <CDropdown id="ddown-offset"
                            :offset="25"
-                           buttonContent="Offset Dropdown"
+                           buttonHtml="Offset Dropdown"
                            class="m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -97,7 +97,7 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-split" split buttonContent="Split Dropdown" class="m-2">
+                <CDropdown id="ddown-split" split buttonHtml="Split Dropdown" class="m-2">
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
@@ -117,7 +117,7 @@
               <div>
                 <CDropdown variant="link"
                            size="lg"
-                           buttonContent="&#x1f50d;<span class='sr-only'>Search</span>"
+                           buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
                            no-caret
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -135,23 +135,23 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-lg" size="lg" buttonContent="Large" class="m-2">
+                <CDropdown id="ddown-lg" size="lg" buttonHtml="Large" class="m-2">
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-lg-split" size="lg" split buttonContent="Large Split" class="m-2">
+                <CDropdown id="ddown-lg-split" size="lg" split buttonHtml="Large Split" class="m-2">
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
                 </CDropdown>
                 <br>
-                <CDropdown id="ddown-sm" size="sm" buttonContent="Small" class="m-2">
+                <CDropdown id="ddown-sm" size="sm" buttonHtml="Small" class="m-2">
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-sm-split" size="sm" split buttonContent="Small Split" class="m-2">
+                <CDropdown id="ddown-sm-split" size="sm" split buttonHtml="Small Split" class="m-2">
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
@@ -169,7 +169,7 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-aria" buttonContent="Dropdown ARIA" variant="primary" class="m-2">
+                <CDropdown id="ddown-aria" buttonHtml="Dropdown ARIA" variant="primary" class="m-2">
                   <div role="group" aria-lableledby="header1">
                     <CDropdownHeader id="header1">Groups</CDropdownHeader>
                     <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
@@ -193,47 +193,47 @@
               <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
             </CCardHeader>
             <CCardBody>
-              <CDropdown size="sm" id="ddown_primary" buttonContent="Primary" variant="primary" class="m-0">
+              <CDropdown size="sm" id="ddown_primary" buttonHtml="Primary" variant="primary" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_secondary" buttonContent="Secondary" variant="secondary" class="m-0">
+              <CDropdown size="sm" id="ddown_secondary" buttonHtml="Secondary" variant="secondary" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_success" buttonContent="Success" variant="success" class="m-0">
+              <CDropdown size="sm" id="ddown_success" buttonHtml="Success" variant="success" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_warning" buttonContent="Warning" variant="warning" class="m-0">
+              <CDropdown size="sm" id="ddown_warning" buttonHtml="Warning" variant="warning" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_danger" buttonContent="Danger" variant="danger" class="m-0">
+              <CDropdown size="sm" id="ddown_danger" buttonHtml="Danger" variant="danger" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_info" buttonContent="Info" variant="info" class="m-0">
+              <CDropdown size="sm" id="ddown_info" buttonHtml="Info" variant="info" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_light" buttonContent="Light" variant="light" class="m-0">
+              <CDropdown size="sm" id="ddown_light" buttonHtml="Light" variant="light" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_dark" buttonContent="Dark" variant="dark" class="m-0">
+              <CDropdown size="sm" id="ddown_dark" buttonHtml="Dark" variant="dark" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_link" buttonContent="Link" variant="link" class="m-0">
+              <CDropdown size="sm" id="ddown_link" buttonHtml="Link" variant="link" class="m-0">
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index 51369cb5..a37dad5b 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -2,7 +2,7 @@
   <CRow>
     <CCol cols="12" xl="8">
       <transition name="slide">
-        <CCard header="users" bodyWrapper>
+        <CCard headerHtml="users" bodyWrapper>
           <CTable hover
                   striped
                   :items="items"
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 8bbea009..a6e718a6 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -149,97 +149,7 @@
         <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
       </CCol>
     </CRow>
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidget06 header="9.823" text="Members online">
-          <template #dropdown>
-            <CDropdown
-              class="float-right"
-              variant="transparent p-0"
-              placement="bottom-end"
-            >
-              <template #buttonContent>
-                <i class="icon-settings"></i>
-              </template>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverColor='primary'/>
-        </CWidget06>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget06
-          variant="info"
-          header="9.823"
-          text="Members online"
-        >
-          <template #dropdown>
-            <CDropdown
-              class="float-right"
-              variant="transparent p-0"
-             right no-caret>
-              <i slot="buttonContent"
-                 class="icon-location-pin"
-              ></i>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-
-          <CSimplePointedChart class="px-3"
-                               :data="[1, 18, 9, 17, 34, 22, 11]"
-                               :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
-                               style="height:70px"
-                               label="Members"
-                               :options="{elements: {line: {tension: 0.00001}}}"
-                               pointHoverColor="info"
-          />
-        </CWidget06>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget06 variant="warning" header="9.823" text="Members online">
-          <template slot='dropdown'>
-            <CDropdown class="float-right" variant="transparent p-0" right>
-              <template slot="buttonContent">
-                <i class="icon-settings"></i>
-              </template>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-        </CWidget06>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget06 variant="danger" header="9.823" text="Members online">
-          <template slot="dropdown">
-            <CDropdown class="float-right" variant="transparent p-0" right>
-              <template slot="buttonContent">
-                <i class="icon-settings"></i>
-              </template>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
-        </CWidget06>
-      </CCol>
-    </CRow>
+    <Widgets06/>
     <CRow>
       <CCol sm="6" lg="3">
         <CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
@@ -315,10 +225,13 @@
 
 <script>
 import Widgets04 from './Widgets04'
+import Widgets06 from './Widgets06'
+
 export default {
   name: 'Widgets',
   components: {
-    Widgets04
+    Widgets04,
+    Widgets06
   }
 }
 </script>
diff --git a/src/views/widgets/Widgets06.vue b/src/views/widgets/Widgets06.vue
index 03053377..e44122cf 100644
--- a/src/views/widgets/Widgets06.vue
+++ b/src/views/widgets/Widgets06.vue
@@ -2,13 +2,12 @@
   <CRow>
     <CCol sm="6" lg="3">
       <CWidget06 header="9.823" text="Members online">
-
         <template #dropdown>
           <CDropdown
             class="float-right"
             variant="transparent p-0"
             placement="bottom-end"
-            buttonContent="<i class='icon-settings'></i>"
+            buttonHtml="<i class='icon-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -16,7 +15,6 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-
         <CSimplePointedChart
           class="px-3"
           :data="[65, 59, 84, 84, 51, 55, 40]"
@@ -35,7 +33,7 @@
             variant="transparent p-0"
             placement="bottom-end"
             noCaret
-            buttonContent="<i class='icon-location-pin'></i>"
+            buttonHtml="<i class='icon-location-pin'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -66,7 +64,7 @@
             class="float-right"
             variant="transparent p-0"
             placement="bottom-end"
-            buttonContent="<i class='icon-settings'></i>"
+            buttonHtml="<i class='icon-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -99,7 +97,7 @@
             class="float-right"
             variant="transparent p-0"
             placement="bottom-end"
-            buttonContent="<i class='icon-settings'></i>"
+            buttonHtml="<i class='icon-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -123,8 +121,10 @@
 <script>
 export default {
   name: 'Widgets06',
-  props: {
-    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+  data () {
+    return {
+      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+    }
   }
 }
 </script>