diff --git a/src/router/index.js b/src/router/index.js
index 5cfb4e76..546429bd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,7 +11,7 @@ const Colors = () => import('@/views/theme/Colors')
 const Typography = () => import('@/views/theme/Typography')
 
 const Charts = () => import('@/views/Charts')
-const Widgets = () => import('@/views/Widgets')
+const Widgets = () => import('@/views/widgets/Widgets')
 
 // Views - Components
 const Cards = () => import('@/views/base/Cards')
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c8073b2f..610e4d8b 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,102 +1,6 @@
 <template>
   <div class="animated fadeIn">
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidget06 header="9.823" text="Members online">
-          <template slot="dropdown">
-            <CDropdown class="float-right"
-                       variant="transparent p-0"
-                       right
-                       buttonContent="<i class='icon-settings'></i>"
-                       tag="div"
-            >
-              <!-- <template slot="buttonContent">
-
-              </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">
-          <CDropdown slot="dropdown"
-                     class="float-right"
-                     variant="transparent p-0"
-                     right
-                     no-caret
-                     buttonContent="<i class='icon-location-pin'></i>"
-                     tag="div"
-          >
-            <!-- <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>
-          <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
-                       buttonContent="<i class='icon-settings'></i>"
-                       tag="div"
-             >
-
-              <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
-                       buttonContent="<i class='icon-settings'></i>"
-            >
-              <!-- <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/>
     <CCard>
       <CCardBody>
         <CRow>
@@ -151,36 +55,7 @@
         </CRow>
       </CCardFooter>
     </CCard>
-    <CRow>
-      <CCol md="3" sm="6">
-        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04  variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-    </CRow><!--/.row-->
+    <Widgets04/>
     <CRow>
       <CCol md="12">
         <CCard header="Traffic &amp; Sales" bodyWrapper>
@@ -459,6 +334,8 @@
 
 <script>
 import MainChartExample from './dashboard/MainChartExample'
+import Widgets06 from './widgets/Widgets06'
+import Widgets04 from './widgets/Widgets04'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
 
@@ -468,6 +345,8 @@ export default {
     MainChartExample,
     SocialBoxChartExample,
     CalloutChartExample,
+    Widgets06,
+    Widgets04
   },
   data: function () {
     return {
diff --git a/src/views/Widgets.vue b/src/views/widgets/Widgets.vue
similarity index 80%
rename from src/views/Widgets.vue
rename to src/views/widgets/Widgets.vue
index c9f9c753..8bbea009 100644
--- a/src/views/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -91,58 +91,8 @@
       </CCol>
 
     </CRow><!--/.row-->
-    <CRow>
-      <CCol md="3" sm="6">
-        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
-       </CCol>
-       <CCol md="3" sm="6" class="codeContainer">
-        <CWidget04  variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
-          <i slot="icon" class="fa fa-battery-1"></i>
-        </CWidget04>
-       </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol md="3" sm="6">
-        <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
-                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04 variant='google-plus'
-                    rightHeader='894'
-                    rightFooter='followers'
-                    leftHeader='92' leftFooter='circles'>
-          <CSimpleLineChart chartId="google-plus"
-                               :data='[35, 23, 56, 22, 97, 23, 64]'
-                               label='Followers'
-                               :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                               style='height:100px'
-                               color='rgba(255,255,255,.1)'/>
-        </CWidget04>
-       </CCol>
-    </CRow><!--/.row-->
+    <Widgets04 noCharts/>
+    <Widgets04/>
     <CCardGroup class="mb-4">
       <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
       <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
@@ -202,9 +152,13 @@
     <CRow>
       <CCol sm="6" lg="3">
         <CWidget06 header="9.823" text="Members online">
-          <template slot='dropdown'>
-            <CDropdown class="float-right" variant="transparent p-0" right>
-              <template slot="buttonContent">
+          <template #dropdown>
+            <CDropdown
+              class="float-right"
+              variant="transparent p-0"
+              placement="bottom-end"
+            >
+              <template #buttonContent>
                 <i class="icon-settings"></i>
               </template>
               <CDropdownItem>Action</CDropdownItem>
@@ -219,16 +173,26 @@
         </CWidget06>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget06 variant="info" header="9.823" text="Members online">
-          <CDropdown slot="dropdown" 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>
+        <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']"
@@ -350,7 +314,11 @@
 </template>
 
 <script>
+import Widgets04 from './Widgets04'
 export default {
   name: 'Widgets',
+  components: {
+    Widgets04
+  }
 }
 </script>
diff --git a/src/views/widgets/Widgets04.vue b/src/views/widgets/Widgets04.vue
new file mode 100644
index 00000000..6408c97b
--- /dev/null
+++ b/src/views/widgets/Widgets04.vue
@@ -0,0 +1,126 @@
+<template functional>
+  <CRow>
+    <template v-if="!props.noCharts">
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="facebook"
+          rightHeader="89k"
+          rightFooter="friends"
+          leftHeader="459"
+          leftFooter="feeds"
+        >
+          <CSimpleLineChart
+            chartId="facebook"
+            :data="[65, 59, 84, 84, 51, 55, 40]"
+            label="Friends"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04
+          variant="twitter"
+          rightHeader="973k"
+          rightFooter="followers"
+          leftHeader="1.792"
+          leftFooter="tweets"
+        >
+          <CSimpleLineChart
+            chartId="twitter"
+            :data="[1, 13, 9, 17, 34, 41, 38]"
+            label="Followers"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04
+          variant="linkedin"
+          rightHeader="500+"
+          rightFooter="contracts"
+          leftHeader="292"
+          leftFooter="feeds"
+        >
+          <CSimpleLineChart
+            chartId="linkedIn"
+            :data="[78, 81, 80, 45, 34, 12, 40]"
+            label="Contracts"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidget04
+          variant="google-plus"
+          rightHeader="894"
+          rightFooter="followers"
+          leftHeader="92"
+          leftFooter="circles"
+        >
+          <CSimpleLineChart
+            chartId="google-plus"
+            :data="[35, 23, 56, 22, 97, 23, 64]"
+            label="Followers"
+            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+            style="height:100px"
+            color="rgba(255,255,255,.1)"
+          />
+        </CWidget04>
+      </CCol>
+    </template>
+    <template v-else>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="facebook"
+          rightHeader="89k"
+          rightFooter="friends"
+          leftHeader="459"
+          leftFooter="feeds"
+        />
+      </CCol>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="twitter"
+          rightHeader="973k"
+          rightFooter="followers"
+          leftHeader="1.792"
+          leftFooter="tweets"
+        />
+      </CCol>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="linkedin"
+          rightHeader="500+"
+          rightFooter="contracts"
+          leftHeader="292"
+          leftFooter="feeds"
+        />
+      </CCol>
+      <CCol md="3" sm="6">
+        <CWidget04
+          variant="warning"
+          iconClasses="fa fa-battery-1"
+          rightHeader="0:57"
+          rightFooter="time"
+          leftHeader="17"
+          leftFooter="percentage"
+        />
+      </CCol>
+    </template>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Widgets04',
+  props: {
+    noCharts: Boolean
+  }
+}
+</script>
diff --git a/src/views/widgets/Widgets06.vue b/src/views/widgets/Widgets06.vue
new file mode 100644
index 00000000..03053377
--- /dev/null
+++ b/src/views/widgets/Widgets06.vue
@@ -0,0 +1,130 @@
+<template>
+  <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>"
+          >
+            <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="months"
+          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"
+            placement="bottom-end"
+            noCaret
+            buttonContent="<i 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="months"
+          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 #dropdown>
+          <CDropdown
+            class="float-right"
+            variant="transparent p-0"
+            placement="bottom-end"
+            buttonContent="<i class='icon-settings'></i>"
+          >
+            <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="months"
+          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 #dropdown>
+          <CDropdown
+            class="float-right"
+            variant="transparent p-0"
+            placement="bottom-end"
+            buttonContent="<i class='icon-settings'></i>"
+          >
+            <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>
+</template>
+
+<script>
+export default {
+  name: 'Widgets06',
+  props: {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+  }
+}
+</script>