diff --git a/public/avatars/1.jpg b/src/assets/images/avatars/1.jpg
similarity index 100%
rename from public/avatars/1.jpg
rename to src/assets/images/avatars/1.jpg
diff --git a/public/avatars/2.jpg b/src/assets/images/avatars/2.jpg
similarity index 100%
rename from public/avatars/2.jpg
rename to src/assets/images/avatars/2.jpg
diff --git a/public/avatars/3.jpg b/src/assets/images/avatars/3.jpg
similarity index 100%
rename from public/avatars/3.jpg
rename to src/assets/images/avatars/3.jpg
diff --git a/public/avatars/4.jpg b/src/assets/images/avatars/4.jpg
similarity index 100%
rename from public/avatars/4.jpg
rename to src/assets/images/avatars/4.jpg
diff --git a/public/avatars/5.jpg b/src/assets/images/avatars/5.jpg
similarity index 100%
rename from public/avatars/5.jpg
rename to src/assets/images/avatars/5.jpg
diff --git a/public/avatars/6.jpg b/src/assets/images/avatars/6.jpg
similarity index 100%
rename from public/avatars/6.jpg
rename to src/assets/images/avatars/6.jpg
diff --git a/public/avatars/7.jpg b/src/assets/images/avatars/7.jpg
similarity index 100%
rename from public/avatars/7.jpg
rename to src/assets/images/avatars/7.jpg
diff --git a/public/avatars/8.jpg b/src/assets/images/avatars/8.jpg
similarity index 100%
rename from public/avatars/8.jpg
rename to src/assets/images/avatars/8.jpg
diff --git a/public/avatars/9.jpg b/src/assets/images/avatars/9.jpg
similarity index 100%
rename from public/avatars/9.jpg
rename to src/assets/images/avatars/9.jpg
diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index 0deecab..5be919e 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -22,11 +22,13 @@ import {
 } from '@coreui/icons'
 import CIcon from '@coreui/icons-react'
 
+import avatar8 from './../../assets/images/avatars/8.jpg'
+
 const AppHeaderDropdown = () => {
   return (
     <CDropdown variant="nav-item">
       <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
-        <CAvatar src="/avatars/8.jpg" size="md" />
+        <CAvatar src={avatar8} size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
         <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
diff --git a/src/views/components/widgets/Widgets.js b/src/views/components/widgets/Widgets.js
index 4d3d00c..cf5f4b3 100644
--- a/src/views/components/widgets/Widgets.js
+++ b/src/views/components/widgets/Widgets.js
@@ -1,6 +1,9 @@
 import React from 'react'
 import {
+  CCard,
+  CCardBody,
   CCardGroup,
+  CCardHeader,
   CCol,
   CLink,
   CRow,
@@ -26,6 +29,7 @@ import {
   cilUserFollow,
 } from '@coreui/icons'
 import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+import { DocsExample } from 'src/components'
 
 import WidgetsBrand from './WidgetsBrand'
 import WidgetsDropdown from './WidgetsDropdown'
@@ -34,868 +38,898 @@ const Widgets = () => {
   const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
   return (
-    <>
-      <WidgetsDropdown />
-      <CRow>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            progress={{ color: 'success', value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-            title="Widget title"
-            value="89.9%"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            value="12.124"
-            title="Widget title"
-            progress={{ color: 'info', value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            value="$98.111,00"
-            title="Widget title"
-            progress={{ color: 'warning', value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            value="2 TB"
-            title="Widget title"
-            progress={{ color: 'primary', value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            color="success"
-            inverse
-            value="89.9%"
-            title="Widget title"
-            progress={{ value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            color="info"
-            inverse
-            textColor="white"
-            value="12.124"
-            title="Widget title"
-            progress={{ value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            color="warning"
-            inverse
-            textColor="white"
-            value="$98.111,00"
-            title="Widget title"
-            progress={{ value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsB
-            className="mb-4"
-            color="primary"
-            inverse
-            textColor="white"
-            value="2 TB"
-            title="Widget title"
-            progress={{ value: 89.9 }}
-            text="Lorem ipsum dolor sit amet enim."
-          />
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol sm={4} lg={2}>
-          <CWidgetStatsE
-            chart={
-              <CChartBar
-                className="mx-auto"
-                style={{ height: '40px', width: '80px' }}
-                data={{
-                  labels: [
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                  ],
-                  datasets: [
-                    {
-                      backgroundColor: getStyle('--cui-danger'),
-                      borderColor: 'transparent',
-                      borderWidth: 1,
-                      data: [
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                      ],
-                    },
-                  ],
-                }}
-                options={{
-                  maintainAspectRatio: false,
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
-                  scales: {
-                    x: {
-                      display: false,
-                    },
-                    y: {
-                      display: false,
-                    },
-                  },
-                }}
+    <CCard>
+      <CCardHeader>Widgets</CCardHeader>
+      <CCardBody>
+        <DocsExample href="/components/widgets/#cwidgetstatsa">
+          <WidgetsDropdown />
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsb">
+          <CRow>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                progress={{ color: 'success', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+                title="Widget title"
+                value="89.9%"
               />
-            }
-            className="mb-4"
-            title="title"
-            value="1,123"
-          />
-        </CCol>
-        <CCol sm={4} lg={2}>
-          <CWidgetStatsE
-            chart={
-              <CChartBar
-                className="mx-auto"
-                style={{ height: '40px', width: '80px' }}
-                data={{
-                  labels: [
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                  ],
-                  datasets: [
-                    {
-                      backgroundColor: getStyle('--cui-primary'),
-                      borderColor: 'transparent',
-                      borderWidth: 1,
-                      data: [
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                      ],
-                    },
-                  ],
-                }}
-                options={{
-                  maintainAspectRatio: false,
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
-                  scales: {
-                    x: {
-                      display: false,
-                    },
-                    y: {
-                      display: false,
-                    },
-                  },
-                }}
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                value="12.124"
+                title="Widget title"
+                progress={{ color: 'info', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
               />
-            }
-            className="mb-4"
-            title="title"
-            value="1,123"
-          />
-        </CCol>
-        <CCol sm={4} lg={2}>
-          <CWidgetStatsE
-            chart={
-              <CChartBar
-                className="mx-auto"
-                style={{ height: '40px', width: '80px' }}
-                data={{
-                  labels: [
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                  ],
-                  datasets: [
-                    {
-                      backgroundColor: getStyle('--cui-success'),
-                      borderColor: 'transparent',
-                      borderWidth: 1,
-                      data: [
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                      ],
-                    },
-                  ],
-                }}
-                options={{
-                  maintainAspectRatio: false,
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
-                  scales: {
-                    x: {
-                      display: false,
-                    },
-                    y: {
-                      display: false,
-                    },
-                  },
-                }}
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                value="$98.111,00"
+                title="Widget title"
+                progress={{ color: 'warning', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
               />
-            }
-            className="mb-4"
-            title="title"
-            value="1,123"
-          />
-        </CCol>
-        <CCol sm={4} lg={2}>
-          <CWidgetStatsE
-            chart={
-              <CChartLine
-                className="mx-auto"
-                style={{ height: '40px', width: '80px' }}
-                data={{
-                  labels: [
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                  ],
-                  datasets: [
-                    {
-                      backgroundColor: 'transparent',
-                      borderColor: getStyle('--cui-danger'),
-                      borderWidth: 2,
-                      data: [
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                      ],
-                    },
-                  ],
-                }}
-                options={{
-                  maintainAspectRatio: false,
-                  elements: {
-                    line: {
-                      tension: 0.4,
-                    },
-                    point: {
-                      radius: 0,
-                    },
-                  },
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
-                  scales: {
-                    x: {
-                      display: false,
-                    },
-                    y: {
-                      display: false,
-                    },
-                  },
-                }}
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                value="2 TB"
+                title="Widget title"
+                progress={{ color: 'primary', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
               />
-            }
-            className="mb-4"
-            title="title"
-            value="1,123"
-          />
-        </CCol>
-        <CCol sm={4} lg={2}>
-          <CWidgetStatsE
-            chart={
-              <CChartLine
-                className="mx-auto"
-                style={{ height: '40px', width: '80px' }}
-                data={{
-                  labels: [
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                  ],
-                  datasets: [
-                    {
-                      backgroundColor: 'transparent',
-                      borderColor: getStyle('--cui-success'),
-                      borderWidth: 2,
-                      data: [
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                      ],
-                    },
-                  ],
-                }}
-                options={{
-                  maintainAspectRatio: false,
-                  elements: {
-                    line: {
-                      tension: 0.4,
-                    },
-                    point: {
-                      radius: 0,
-                    },
-                  },
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
-                  scales: {
-                    x: {
-                      display: false,
-                    },
-                    y: {
-                      display: false,
-                    },
-                  },
-                }}
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsb">
+          <CRow>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                color="success"
+                inverse
+                value="89.9%"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
               />
-            }
-            className="mb-4"
-            title="title"
-            value="1,123"
-          />
-        </CCol>
-        <CCol sm={4} lg={2}>
-          <CWidgetStatsE
-            chart={
-              <CChartLine
-                className="mx-auto"
-                style={{ height: '40px', width: '80px' }}
-                data={{
-                  labels: [
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                    'T',
-                    'W',
-                    'T',
-                    'F',
-                    'S',
-                    'S',
-                    'M',
-                  ],
-                  datasets: [
-                    {
-                      backgroundColor: 'transparent',
-                      borderColor: getStyle('--cui-info'),
-                      borderWidth: 2,
-                      data: [
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                        random(40, 100),
-                      ],
-                    },
-                  ],
-                }}
-                options={{
-                  maintainAspectRatio: false,
-                  elements: {
-                    line: {
-                      tension: 0.4,
-                    },
-                    point: {
-                      radius: 0,
-                    },
-                  },
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
-                  scales: {
-                    x: {
-                      display: false,
-                    },
-                    y: {
-                      display: false,
-                    },
-                  },
-                }}
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                color="info"
+                inverse
+                value="12.124"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
               />
-            }
-            className="mb-4"
-            title="title"
-            value="1,123"
-          />
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="primary"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilUser} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="info"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="warning"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilBell} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="danger"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="primary"
-            footer={
-              <CLink
-                className="font-weight-bold font-xs text-medium-emphasis"
-                href="https://coreui.io/"
-                rel="noopener norefferer"
-                target="_blank"
-              >
-                View more
-                <CIcon icon={cilArrowRight} className="float-end" width={16} />
-              </CLink>
-            }
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="info"
-            footer={
-              <CLink
-                className="font-weight-bold font-xs text-medium-emphasis"
-                href="https://coreui.io/"
-                rel="noopener norefferer"
-                target="_blank"
-              >
-                View more
-                <CIcon icon={cilArrowRight} className="float-end" width={16} />
-              </CLink>
-            }
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="warning"
-            footer={
-              <CLink
-                className="font-weight-bold font-xs text-medium-emphasis"
-                href="https://coreui.io/"
-                rel="noopener norefferer"
-                target="_blank"
-              >
-                View more
-                <CIcon icon={cilArrowRight} className="float-end" width={16} />
-              </CLink>
-            }
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilBell} size="xl" />}
-            title="income"
-            value="$1.999,50"
-            color="danger"
-            footer={
-              <CLink
-                className="font-weight-bold font-xs text-medium-emphasis"
-                href="https://coreui.io/"
-                rel="noopener norefferer"
-                target="_blank"
-              >
-                View more
-                <CIcon icon={cilArrowRight} className="float-end" width={16} />
-              </CLink>
-            }
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-            padding={false}
-            title="income"
-            value="$1.999,50"
-            color="primary"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilUser} size="xl" />}
-            padding={false}
-            title="income"
-            value="$1.999,50"
-            color="info"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-            padding={false}
-            title="income"
-            value="$1.999,50"
-            color="warning"
-          />
-        </CCol>
-        <CCol xs={12} sm={6} lg={3}>
-          <CWidgetStatsF
-            className="mb-3"
-            icon={<CIcon width={24} icon={cilBell} size="xl" />}
-            padding={false}
-            title="income"
-            value="$1.999,50"
-            color="danger"
-          />
-        </CCol>
-      </CRow>
-      <WidgetsBrand />
-      <WidgetsBrand withCharts />
-      <CCardGroup className="mb-4">
-        <CWidgetStatsC
-          icon={<CIcon icon={cilPeople} height={36} />}
-          value="87.500"
-          title="Visitors"
-          progress={{ color: 'info', value: 75 }}
-        />
-        <CWidgetStatsC
-          icon={<CIcon icon={cilUserFollow} height={36} />}
-          value="385"
-          title="New Clients"
-          progress={{ color: 'success', value: 75 }}
-        />
-        <CWidgetStatsC
-          icon={<CIcon icon={cilBasket} height={36} />}
-          value="1238"
-          title="Products sold"
-          progress={{ color: 'warning', value: 75 }}
-        />
-        <CWidgetStatsC
-          icon={<CIcon icon={cilChartPie} height={36} />}
-          value="28%"
-          title="Returning Visitors"
-          progress={{ color: 'primary', value: 75 }}
-        />
-        <CWidgetStatsC
-          icon={<CIcon icon={cilSpeedometer} height={36} />}
-          value="5:34:11"
-          title="Avg. Time"
-          progress={{ color: 'danger', value: 75 }}
-        />
-      </CCardGroup>
-      <CRow>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            icon={<CIcon icon={cilPeople} height={36} />}
-            value="87.500"
-            title="Visitors"
-            progress={{ color: 'info', value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            icon={<CIcon icon={cilUserFollow} height={36} />}
-            value="385"
-            title="New Clients"
-            progress={{ color: 'success', value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            icon={<CIcon icon={cilBasket} height={36} />}
-            value="1238"
-            title="Products sold"
-            progress={{ color: 'warning', value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            icon={<CIcon icon={cilChartPie} height={36} />}
-            value="28%"
-            title="Returning Visitors"
-            progress={{ color: 'primary', value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            icon={<CIcon icon={cilSpeedometer} height={36} />}
-            value="5:34:11"
-            title="Avg. Time"
-            progress={{ color: 'danger', value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            icon={<CIcon icon={cilSpeech} height={36} />}
-            value="972"
-            title="comments"
-            progress={{ color: 'info', value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            color="info"
-            icon={<CIcon icon={cilPeople} height={36} />}
-            value="87.500"
-            title="Visitors"
-            inverse
-            progress={{ value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            color="success"
-            icon={<CIcon icon={cilUserFollow} height={36} />}
-            value="385"
-            title="New Clients"
-            inverse
-            progress={{ value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            color="warning"
-            icon={<CIcon icon={cilBasket} height={36} />}
-            value="1238"
-            title="Products sold"
-            inverse
-            progress={{ value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            color="primary"
-            icon={<CIcon icon={cilChartPie} height={36} />}
-            value="28%"
-            title="Returning Visitors"
-            inverse
-            progress={{ value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            color="danger"
-            icon={<CIcon icon={cilSpeedometer} height={36} />}
-            value="5:34:11"
-            title="Avg. Time"
-            inverse
-            progress={{ value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-        <CCol sm={6} md={2}>
-          <CWidgetStatsC
-            color="info"
-            icon={<CIcon icon={cilSpeech} height={36} />}
-            value="972"
-            title="comments"
-            inverse
-            progress={{ value: 75 }}
-            className="mb-4"
-          />
-        </CCol>
-      </CRow>
-    </>
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                color="warning"
+                inverse
+                value="$98.111,00"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsB
+                className="mb-4"
+                color="primary"
+                inverse
+                value="2 TB"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatse">
+          <CRow>
+            <CCol sm={4} lg={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartBar
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: getStyle('--cui-danger'),
+                          borderColor: 'transparent',
+                          borderWidth: 1,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                className="mb-4"
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} lg={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartBar
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: getStyle('--cui-primary'),
+                          borderColor: 'transparent',
+                          borderWidth: 1,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                className="mb-4"
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} lg={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartBar
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: getStyle('--cui-success'),
+                          borderColor: 'transparent',
+                          borderWidth: 1,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                className="mb-4"
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} lg={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartLine
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: 'transparent',
+                          borderColor: getStyle('--cui-danger'),
+                          borderWidth: 2,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      elements: {
+                        line: {
+                          tension: 0.4,
+                        },
+                        point: {
+                          radius: 0,
+                        },
+                      },
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                className="mb-4"
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} lg={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartLine
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: 'transparent',
+                          borderColor: getStyle('--cui-success'),
+                          borderWidth: 2,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      elements: {
+                        line: {
+                          tension: 0.4,
+                        },
+                        point: {
+                          radius: 0,
+                        },
+                      },
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                className="mb-4"
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} lg={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartLine
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: 'transparent',
+                          borderColor: getStyle('--cui-info'),
+                          borderWidth: 2,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      elements: {
+                        line: {
+                          tension: 0.4,
+                        },
+                        point: {
+                          radius: 0,
+                        },
+                      },
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                className="mb-4"
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsf">
+          <CRow>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="primary"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilUser} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="info"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="warning"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilBell} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="danger"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsf">
+          <CRow>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="primary"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-medium-emphasis"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="info"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-medium-emphasis"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="warning"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-medium-emphasis"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilBell} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="danger"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-medium-emphasis"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsf">
+          <CRow>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="primary"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilUser} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="info"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="warning"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} lg={3}>
+              <CWidgetStatsF
+                className="mb-3"
+                icon={<CIcon width={24} icon={cilBell} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="danger"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsd">
+          <WidgetsBrand />
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsd">
+          <WidgetsBrand withCharts />
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsc">
+          <CCardGroup className="mb-4">
+            <CWidgetStatsC
+              icon={<CIcon icon={cilPeople} height={36} />}
+              value="87.500"
+              title="Visitors"
+              progress={{ color: 'info', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilUserFollow} height={36} />}
+              value="385"
+              title="New Clients"
+              progress={{ color: 'success', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilBasket} height={36} />}
+              value="1238"
+              title="Products sold"
+              progress={{ color: 'warning', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilChartPie} height={36} />}
+              value="28%"
+              title="Returning Visitors"
+              progress={{ color: 'primary', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilSpeedometer} height={36} />}
+              value="5:34:11"
+              title="Avg. Time"
+              progress={{ color: 'danger', value: 75 }}
+            />
+          </CCardGroup>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsc">
+          <CRow>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilPeople} height={36} />}
+                value="87.500"
+                title="Visitors"
+                progress={{ color: 'info', value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilUserFollow} height={36} />}
+                value="385"
+                title="New Clients"
+                progress={{ color: 'success', value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilBasket} height={36} />}
+                value="1238"
+                title="Products sold"
+                progress={{ color: 'warning', value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilChartPie} height={36} />}
+                value="28%"
+                title="Returning Visitors"
+                progress={{ color: 'primary', value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilSpeedometer} height={36} />}
+                value="5:34:11"
+                title="Avg. Time"
+                progress={{ color: 'danger', value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilSpeech} height={36} />}
+                value="972"
+                title="comments"
+                progress={{ color: 'info', value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsc">
+          <CRow>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                color="info"
+                icon={<CIcon icon={cilPeople} height={36} />}
+                value="87.500"
+                title="Visitors"
+                inverse
+                progress={{ value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                color="success"
+                icon={<CIcon icon={cilUserFollow} height={36} />}
+                value="385"
+                title="New Clients"
+                inverse
+                progress={{ value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                color="warning"
+                icon={<CIcon icon={cilBasket} height={36} />}
+                value="1238"
+                title="Products sold"
+                inverse
+                progress={{ value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                color="primary"
+                icon={<CIcon icon={cilChartPie} height={36} />}
+                value="28%"
+                title="Returning Visitors"
+                inverse
+                progress={{ value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                color="danger"
+                icon={<CIcon icon={cilSpeedometer} height={36} />}
+                value="5:34:11"
+                title="Avg. Time"
+                inverse
+                progress={{ value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+            <CCol sm={6} md={2}>
+              <CWidgetStatsC
+                color="info"
+                icon={<CIcon icon={cilSpeech} height={36} />}
+                value="972"
+                title="comments"
+                inverse
+                progress={{ value: 75 }}
+                className="mb-4"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+      </CCardBody>
+    </CCard>
   )
 }
 
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index ef9783a..c93ca66 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -44,6 +44,13 @@ import {
   cilUserFemale,
 } from '@coreui/icons'
 
+import avatar1 from './../../assets/images/avatars/1.jpg'
+import avatar2 from './../../assets/images/avatars/2.jpg'
+import avatar3 from './../../assets/images/avatars/3.jpg'
+import avatar4 from './../../assets/images/avatars/4.jpg'
+import avatar5 from './../../assets/images/avatars/5.jpg'
+import avatar6 from './../../assets/images/avatars/6.jpg'
+
 const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
 const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
 
@@ -397,7 +404,7 @@ const Dashboard = () => {
                 <CTableBody>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/1.jpg" status="success" />
+                      <CAvatar size="md" src={avatar1} status="success" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Yiorgos Avraamu</div>
@@ -431,7 +438,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/2.jpg" status="danger" />
+                      <CAvatar size="md" src={avatar2} status="danger" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Avram Tarasios</div>
@@ -465,7 +472,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/3.jpg" status="warning" />
+                      <CAvatar size="md" src={avatar3} status="warning" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Quintin Ed</div>
@@ -499,7 +506,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/4.jpg" status="secondary" />
+                      <CAvatar size="md" src={avatar4} status="secondary" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Enéas Kwadwo</div>
@@ -533,7 +540,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/5.jpg" status="success" />
+                      <CAvatar size="md" src={avatar5} status="success" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Agapetus Tadeáš</div>
@@ -567,7 +574,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/6.jpg" status="danger" />
+                      <CAvatar size="md" src={avatar6} status="danger" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Friderik Dávid</div>