diff --git a/src/containers/TheLayout.js b/src/containers/TheLayout.js
index e5f88c9..80b8e89 100644
--- a/src/containers/TheLayout.js
+++ b/src/containers/TheLayout.js
@@ -9,9 +9,9 @@ import {
 const TheLayout = () => {
 
   return (
-    <div className="d-flex bg-light">
+    <div>
       <TheSidebar/>
-      <div className="wrapper">
+      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
         <TheHeader/>
         <div className="body">
           <TheContent/>
diff --git a/src/containers/TheSidebar.js b/src/containers/TheSidebar.js
index 9201ab2..3f5d170 100644
--- a/src/containers/TheSidebar.js
+++ b/src/containers/TheSidebar.js
@@ -27,7 +27,7 @@ const TheSidebar = () => {
 
   return (
     <CSidebar
-      position="sticky"
+      position="fixed"
       selfHiding="md"
       // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
     >
diff --git a/src/containers/_nav.js b/src/containers/_nav.js
index 01f4289..9552fd1 100644
--- a/src/containers/_nav.js
+++ b/src/containers/_nav.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import CIcon from '@coreui/icons-react'
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router-dom"
 
 const _nav =  [
   {
@@ -256,38 +256,41 @@ const _nav =  [
   // {
   //   _component: 'CSidebarNavDivider'
   // },
-  // {
-  //   _component: 'CSidebarNavTitle',
-  //   items: ['Extras'],
-  // },
-  // {
-  //   _component: 'CNavGroup',
-  //   anchor: 'Pages',
-  //   route: '/pages',
-  //   icon: 'cil-star',
-  //   items: [
-  //     {
-  //       _component: 'CNavItem',
-  //       anchor: 'Login',
-  //       to: '/login',
-  //     },
-  //     {
-  //       _component: 'CNavItem',
-  //       anchor: 'Register',
-  //       to: '/register',
-  //     },
-  //     {
-  //       _component: 'CNavItem',
-  //       anchor: 'Error 404',
-  //       to: '/404',
-  //     },
-  //     {
-  //       _component: 'CNavItem',
-  //       anchor: 'Error 500',
-  //       to: '/500',
-  //     },
-  //   ],
-  // },
+  {
+    _component: 'CNavTitle',
+    anchor: 'Extras',
+  },
+  {
+    _component: 'CNavGroup',
+    anchor: 'Pages',
+    icon: 'cil-star',
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Login',
+        to: '/pages/login',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Register',
+        to: '/pages/register',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Error 404',
+        to: '/pages/404',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Error 500',
+        to: '/pages/500',
+      },
+    ],
+  },
   // {
   //   _component: 'CNavItem',
   //   anchor: 'Disabled',
@@ -304,7 +307,7 @@ const _nav =  [
   //   classanchor: 'm-2'
   // },
   // {
-  //   _component: 'CSidebarNavTitle',
+  //   _component: 'CNavTitle',
   //   items: ['Labels']
   // },
   // {
diff --git a/src/routes.js b/src/routes.js
index 9620be9..d85d94e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -38,6 +38,9 @@ const Widgets = React.lazy(() => import('./views/widgets/Widgets'));
 const Users = React.lazy(() => import('./views/users/Users'));
 const User = React.lazy(() => import('./views/users/User'));
 
+const Login = React.lazy(() => import('./views/pages/login/Login'));
+const Register = React.lazy(() => import('./views/pages/register/Register'));
+
 const routes = [
   { path: '/', exact: true, name: 'Home' },
   { path: '/dashboard', name: 'Dashboard', component: Dashboard },
@@ -76,6 +79,8 @@ const routes = [
   { path: '/notifications/badges', name: 'Badges', component: Badges },
   { path: '/notifications/modals', name: 'Modals', component: Modals },
   { path: '/notifications/toaster', name: 'Toaster', component: Toaster },
+  { path: '/pages/login', name: 'Login', component: Login },
+  { path: '/pages/register', name: 'Register', component: Register },
   { path: '/widgets', name: 'Widgets', component: Widgets },
   { path: '/users', exact: true,  name: 'Users', component: Users },
   { path: '/users/:id', exact: true, name: 'User Details', component: User }
diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
new file mode 100644
index 0000000..81912d5
--- /dev/null
+++ b/src/scss/_layout.scss
@@ -0,0 +1,7 @@
+.wrapper {
+  width: 100%;
+  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  transform: translateZ(0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index e993a80..2a8be43 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,11 +1,13 @@
 // If you want to override variables do it here
 @import "variables";
 
-// Import CoreUI styles
-@import "~@coreui/coreui/scss/coreui.scss";
+$enable-ltr: true;
+$enable-rtl: true;
 
-// Some temp fixes
-@import "fixes";
+// Import styles
+@import "@coreui/coreui/scss/coreui";
 
-// If you want to add something do it here
+@import "layout";
+
+// If you want to add custom CSS you can put it here.
 @import "custom";
diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js
index 24932f7..da2d34c 100644
--- a/src/views/base/forms/BasicForms.js
+++ b/src/views/base/forms/BasicForms.js
@@ -3,7 +3,6 @@ import {
   CFade,
   CValidFeedback,
   CInvalidFeedback,
-  CTextarea,
   CSwitch
 } from '@coreui/react'
 import {
@@ -18,27 +17,15 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
-  // CFade,
   CForm,
   CFormCheck,
   CFormControl,
   CFormLabel,
   CFormText,
   CFormSelect,
-  // CValidFeedback,
-  // CInvalidFeedback,
-  // CTextarea,
-  // CInput,
-  // CInputFile,
-  // CInputRadio,
   CInputGroup,
-  // CInputGroupAppend,
-  // CInputGroupPrepend,
   CInputGroupText,
-  // CLabel,
-  // CSelect,
   CRow,
-  // CSwitch
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 import { DocsLink } from 'src/reusable'
@@ -227,7 +214,8 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="textarea-input">Textarea</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CTextarea
+                    <CFormControl
+                      component="textarea"
                       name="textarea-input"
                       id="textarea-input"
                       rows="9"
@@ -759,10 +747,10 @@ const BasicForms = () => {
                 <CRow className="mb-3">
                   <CCol md="12">
                     <CInputGroup className="mb-3">
-                      <CDropdown className="input-group-prepend">
-                          <CDropdownToggle caret color="primary">
-                            Dropdown
-                          </CDropdownToggle>
+                      <CDropdown>
+                        <CDropdownToggle caret color="primary">
+                          Dropdown
+                        </CDropdownToggle>
                         <CDropdownMenu>
                           <CDropdownItem>Action</CDropdownItem>
                           <CDropdownItem>Another Action</CDropdownItem>
diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js
index e69a11b..137d2a8 100644
--- a/src/views/base/navbars/Navbars.js
+++ b/src/views/base/navbars/Navbars.js
@@ -1,8 +1,6 @@
 import React, { useState } from 'react'
 import {
   CToggler,
-  CForm,
-  CInput,
   CImg
 } from '@coreui/react'
 import {
@@ -13,6 +11,8 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
+  CForm,
+  CFormControl,
   CNavbar,
   CNavbarNav,
   CNavbarBrand,
@@ -48,8 +48,8 @@ const CNavbars = () => {
                 <CNavLink>Link</CNavLink>
               </CNavbarNav>
               <CNavbarNav className="ms-auto">
-                <CForm inline>
-                  <CInput
+                <CForm className="d-flex">
+                  <CFormControl
                     className="me-sm-2"
                     placeholder="Search"
                     size="sm"
@@ -171,8 +171,8 @@ const CNavbars = () => {
         </CCardHeader>
         <CCardBody>
           <CNavbar light color="light">
-            <CForm inline>
-              <CInput
+            <CForm className="d-flex">
+              <CFormControl
                 className="me-sm-2"
                 placeholder="Search"
                 size="sm"
@@ -189,8 +189,8 @@ const CNavbars = () => {
         </CCardHeader>
         <CCardBody>
           <CNavbar light color="light">
-            <CForm inline>
-              <CInput
+            <CForm className="d-flex">
+              <CFormControl
                 className="me-sm-2"
                 placeholder="Username"
               />
diff --git a/src/views/buttons/button-dropdowns/ButtonDropdowns.js b/src/views/buttons/button-dropdowns/ButtonDropdowns.js
index 3aba0ab..8218b38 100644
--- a/src/views/buttons/button-dropdowns/ButtonDropdowns.js
+++ b/src/views/buttons/button-dropdowns/ButtonDropdowns.js
@@ -13,11 +13,10 @@ import {
   CDropdownMenu,
   CDropdownToggle,
   CRow,
-  CFormGroup,
-  CLabel,
-  CInput,
-  CInputCheckbox
-} from '@coreui/react'
+  CFormLabel,
+  CFormControl,
+  CFormCheck
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const ButtonDropdowns = () => {
@@ -393,24 +392,23 @@ const ButtonDropdowns = () => {
               </CDropdownToggle>
               <CDropdownMenu>
                 <CForm className="px-4 py-3" >
-                  <CFormGroup>
-                    <CLabel htmlFor="exampleDropdownFormEmail1">Email address</CLabel>
-                    <CInput className="form-control" id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
-                  </CFormGroup>
-                  <CFormGroup>
-                    <CLabel htmlFor="exampleDropdownFormPassword1">Password</CLabel>
-                    <CInput className="form-control" id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
-                  </CFormGroup>
-                  <CFormGroup variant="custom-checkbox" className="form-group">
-                    <CInputCheckbox custom id="exampleDropdownFormCheckbox1" />
-                    <CLabel variant="custom-checkbox" htmlFor="exampleDropdownFormCheckbox1">Remember me</CLabel>
-                  </CFormGroup>
-                  <CFormGroup className="mt-2">
+                  <div className="mb-3">
+                    <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
+                    <CFormControl id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
+                  </div>
+                  <div className="mb-3">
+                    <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
+                    <CFormControl id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
+                  </div>
+                  <div className="mb-3">
+                    <CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me"/>
+                  </div>
+                  <div className="mb-3">
                     <CButton color="primary" type="submit">Sign in</CButton>
-                  </CFormGroup>
+                  </div>
                 </CForm>
                 <CDropdownDivider/>
-                <CDropdownItem to="/register" >Register</CDropdownItem>
+                <CDropdownItem href="#/pages/register" >Register</CDropdownItem>
                 <CDropdownItem>Forgot password?</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js
index 5ba153a..436bbea 100644
--- a/src/views/buttons/button-groups/ButtonGroups.js
+++ b/src/views/buttons/button-groups/ButtonGroups.js
@@ -10,14 +10,13 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
+  CFormControl,
+  CInputGroup,
+  CInputGroupText,
   CRow,
 } from '@coreui/react-ts'
 import {
   CButtonToolbar,
-  CInput,
-  CInputGroup,
-  CInputGroupPrepend,
-  CInputGroupText,
   CCallout
 } from '@coreui/react'
 import { DocsLink } from 'src/reusable'
@@ -82,10 +81,8 @@ const ButtonGroups = () => {
                 <CButton color="secondary">4</CButton>
               </CButtonGroup>
               <CInputGroup>
-                <CInputGroupPrepend>
-                  <CInputGroupText>@</CInputGroupText>
-                </CInputGroupPrepend>
-                <CInput placeholder="Input group example" />
+                <CInputGroupText>@</CInputGroupText>
+                <CFormControl placeholder="Input group example" />
               </CInputGroup>
             </CButtonToolbar>
             <CButtonToolbar justify="between">
@@ -96,10 +93,8 @@ const ButtonGroups = () => {
                 <CButton color="secondary">4</CButton>
               </CButtonGroup>
               <CInputGroup>
-                <CInputGroupPrepend>
-                  <CInputGroupText>@</CInputGroupText>
-                </CInputGroupPrepend>
-                <CInput placeholder="Input group example" />
+                <CInputGroupText>@</CInputGroupText>
+                <CFormControl placeholder="Input group example" />
               </CInputGroup>
             </CButtonToolbar>
           </CCardBody>
diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js
index ecd2c72..3463bd0 100644
--- a/src/views/icons/brands/Brands.js
+++ b/src/views/icons/brands/Brands.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 import { brandSet } from '@coreui/icons'
 import { DocsLink } from 'src/reusable'
diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js
index 4c48aa8..3367542 100644
--- a/src/views/icons/coreui-icons/CoreUIIcons.js
+++ b/src/views/icons/coreui-icons/CoreUIIcons.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
+import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react-ts'
 import { freeSet } from '@coreui/icons'
 import { getIconsView } from '../brands/Brands.js'
 import { DocsLink } from 'src/reusable'
diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js
index 65e3e5a..44fc32f 100644
--- a/src/views/icons/flags/Flags.js
+++ b/src/views/icons/flags/Flags.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
+import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react-ts'
 import { getIconsView } from '../brands/Brands.js'
 import { flagSet } from '@coreui/icons'
 import { DocsLink } from 'src/reusable'
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index 7f90972..e423ded 100644
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -8,12 +8,11 @@ import {
   CCol,
   CContainer,
   CForm,
-  CInput,
+  CFormControl,
   CInputGroup,
-  CInputGroupPrepend,
   CInputGroupText,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const Login = () => {
@@ -29,20 +28,16 @@ const Login = () => {
                     <h1>Login</h1>
                     <p className="text-muted">Sign In to your account</p>
                     <CInputGroup className="mb-3">
-                      <CInputGroupPrepend>
-                        <CInputGroupText>
-                          <CIcon name="cil-user" />
-                        </CInputGroupText>
-                      </CInputGroupPrepend>
-                      <CInput type="text" placeholder="Username" autoComplete="username" />
+                      <CInputGroupText>
+                        <CIcon name="cil-user" />
+                      </CInputGroupText>
+                      <CFormControl placeholder="Username" autoComplete="username" />
                     </CInputGroup>
                     <CInputGroup className="mb-4">
-                      <CInputGroupPrepend>
-                        <CInputGroupText>
-                          <CIcon name="cil-lock-locked" />
-                        </CInputGroupText>
-                      </CInputGroupPrepend>
-                      <CInput type="password" placeholder="Password" autoComplete="current-password" />
+                      <CInputGroupText>
+                        <CIcon name="cil-lock-locked" />
+                      </CInputGroupText>
+                      <CFormControl type="password" placeholder="Password" autoComplete="current-password" />
                     </CInputGroup>
                     <CRow>
                       <CCol xs="6">
diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js
index 6837ae6..fcbd7ae 100644
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -7,12 +7,11 @@ import {
   CCol,
   CContainer,
   CForm,
-  CInput,
+  CFormControl,
   CInputGroup,
-  CInputGroupPrepend,
   CInputGroupText,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const Register = () => {
@@ -27,34 +26,26 @@ const Register = () => {
                   <h1>Register</h1>
                   <p className="text-muted">Create your account</p>
                   <CInputGroup className="mb-3">
-                    <CInputGroupPrepend>
-                      <CInputGroupText>
-                        <CIcon name="cil-user" />
-                      </CInputGroupText>
-                    </CInputGroupPrepend>
-                    <CInput type="text" placeholder="Username" autoComplete="username" />
+                    <CInputGroupText>
+                      <CIcon name="cil-user" />
+                    </CInputGroupText>
+                    <CFormControl placeholder="Username" autoComplete="username" />
                   </CInputGroup>
                   <CInputGroup className="mb-3">
-                    <CInputGroupPrepend>
-                      <CInputGroupText>@</CInputGroupText>
-                    </CInputGroupPrepend>
-                    <CInput type="text" placeholder="Email" autoComplete="email" />
+                    <CInputGroupText>@</CInputGroupText>
+                    <CFormControl placeholder="Email" autoComplete="email" />
                   </CInputGroup>
                   <CInputGroup className="mb-3">
-                    <CInputGroupPrepend>
-                      <CInputGroupText>
-                        <CIcon name="cil-lock-locked" />
-                      </CInputGroupText>
-                    </CInputGroupPrepend>
-                    <CInput type="password" placeholder="Password" autoComplete="new-password" />
+                    <CInputGroupText>
+                      <CIcon name="cil-lock-locked" />
+                    </CInputGroupText>
+                    <CFormControl type="password" placeholder="Password" autoComplete="new-password" />
                   </CInputGroup>
                   <CInputGroup className="mb-4">
-                    <CInputGroupPrepend>
-                      <CInputGroupText>
-                        <CIcon name="cil-lock-locked" />
-                      </CInputGroupText>
-                    </CInputGroupPrepend>
-                    <CInput type="password" placeholder="Repeat password" autoComplete="new-password" />
+                    <CInputGroupText>
+                      <CIcon name="cil-lock-locked" />
+                    </CInputGroupText>
+                    <CFormControl type="password" placeholder="Repeat password" autoComplete="new-password" />
                   </CInputGroup>
                   <CButton color="success" block>Create Account</CButton>
                 </CForm>
diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js
index 076d425..c38734a 100644
--- a/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@@ -28,33 +28,30 @@ const Widgets = () => {
       <WidgetsDropdown />
       <CRow>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
-            <CProgress color="danger" animated size="xs" className="my-3" value={75}/>
-          </CWidgetProgress>
+          <CWidgetProgress className="mb-4" header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." />
         </CCol>
 
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
         </CCol>
-
       </CRow>
 
       <CRow>
@@ -118,7 +115,7 @@ const Widgets = () => {
             footerSlot={
               <CCardFooter className="card-footer px-3 py-2">
                 <CLink
-                  className="font-weight-bold font-xs btn-block text-muted"
+                 className="font-weight-bold font-xs btn-block text-muted"
                   href="https://coreui.io/"
                   rel="noopener norefferer"
                   target="_blank"
@@ -139,21 +136,21 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="87.500"
           text="Visitors"
-          color="gradient-info"
+          color="info"
         >
           <CIcon name="cil-people" height="36"/>
         </CWidgetProgressIcon>
         <CWidgetProgressIcon
           header="385"
           text="New Clients"
-          color="gradient-success"
+          color="success"
         >
           <CIcon name="cil-userFollow" height="36"/>
         </CWidgetProgressIcon>
         <CWidgetProgressIcon
           header="1238"
           text="Products sold"
-          color="gradient-warning"
+          color="warning"
         >
           <CIcon name="cil-basket" height="36"/>
         </CWidgetProgressIcon>
@@ -166,7 +163,7 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="5:34:11"
           text="Avg. Time"
-          color="gradient-danger"
+          color="danger"
           progressSlot={
             <CProgress color="danger" size="xs" value={75} animated className="my-3"
           />}
@@ -178,7 +175,7 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="87.500"
           text="Visitors"
-          color="gradient-info"
+          color="info"
           inverse
         >
           <CIcon name="cil-people" height="36"/>
@@ -186,7 +183,7 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="385"
           text="New Clients"
-          color="gradient-success"
+          color="success"
           inverse
         >
           <CIcon name="cil-userFollow" height="36"/>
@@ -194,7 +191,7 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="1238"
           text="Products sold"
-          color="gradient-warning"
+          color="warning"
           inverse
         >
           <CIcon name="cil-basket" height="36"/>
@@ -202,7 +199,7 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="28%"
           text="Returning Visitors"
-          color="gradient-primary"
+          color="primary"
           inverse
         >
           <CIcon name="cil-chartPie" height="36"/>
@@ -210,7 +207,7 @@ const Widgets = () => {
         <CWidgetProgressIcon
           header="5:34:11"
           text="Avg. Time"
-          color="gradient-danger"
+          color="danger"
           inverse
         >
           <CIcon name="cil-speedometer" height="36"/>
@@ -221,7 +218,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="87.500"
             text="Visitors"
-            color="gradient-info"
+            color="info"
           >
             <CIcon name="cil-people" height="36"/>
           </CWidgetProgressIcon>
@@ -230,7 +227,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="385"
             text="New Clients"
-            color="gradient-success"
+            color="success"
           >
             <CIcon name="cil-userFollow" height="36"/>
           </CWidgetProgressIcon>
@@ -239,7 +236,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="1238"
             text="Products sold"
-            color="gradient-warning"
+            color="warning"
           >
             <CIcon name="cil-basket" height="36"/>
           </CWidgetProgressIcon>
@@ -248,7 +245,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="28%"
             text="Returning Visitors"
-            color="gradient-primary"
+            color="primary"
           >
             <CIcon name="cil-chartPie" height="36"/>
           </CWidgetProgressIcon>
@@ -257,7 +254,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="5:34:11"
             text="Avg. Time"
-            color="gradient-danger"
+            color="danger"
           >
             <CIcon name="cil-speedometer" height="36"/>
           </CWidgetProgressIcon>
@@ -266,7 +263,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="972"
             text="comments"
-            color="gradient-info"
+            color="info"
           >
             <CIcon name="cil-speech" height="36"/>
           </CWidgetProgressIcon>
@@ -277,7 +274,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="87.500"
             text="Visitors"
-            color="gradient-info"
+            color="info"
             inverse
           >
             <CIcon name="cil-people" height="36"/>
@@ -287,7 +284,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="385"
             text="New Clients"
-            color="gradient-success"
+            color="success"
             inverse
           >
             <CIcon name="cil-userFollow" height="36"/>
@@ -297,7 +294,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="1238"
             text="Products sold"
-            color="gradient-warning"
+            color="warning"
             inverse
           >
             <CIcon name="cil-basket" height="36"/>
@@ -307,7 +304,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="28%"
             text="Returning Visitors"
-            color="gradient-primary"
+            color="primary"
             inverse
           >
             <CIcon name="cil-chartPie" height="36"/>
@@ -317,7 +314,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="5:34:11"
             text="Avg. Time"
-            color="gradient-danger"
+            color="danger"
             inverse
           >
             <CIcon name="cil-speedometer" height="36"/>
@@ -327,7 +324,7 @@ const Widgets = () => {
           <CWidgetProgressIcon
             header="972"
             text="comments"
-            color="gradient-info"
+            color="info"
             inverse
           >
             <CIcon name="cil-speech" height="36"/>
diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
index 4cf0719..27599ac 100644
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@@ -12,11 +12,14 @@ const WidgetsBrand = ({withCharts})=>{
   <CRow>
     <CCol sm="6" lg="3">
       <CWidgetBrand
-        color="facebook"
+        className="mb-4"
         rightHeader="89k"
         rightFooter="friends"
         leftHeader="459"
         leftFooter="feeds"
+        style={{
+          "--cui-card-cap-bg": "#3b5998"
+        }}
       >
         <CIcon
           name="cib-facebook"
@@ -35,11 +38,14 @@ const WidgetsBrand = ({withCharts})=>{
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
-        color="twitter"
+        className="mb-4"
         rightHeader="973k"
         rightFooter="followers"
         leftHeader="1.792"
         leftFooter="tweets"
+        style={{
+          "--cui-card-cap-bg": "#00aced"
+        }}
       >
         <CIcon
           name="cib-twitter"
@@ -58,11 +64,14 @@ const WidgetsBrand = ({withCharts})=>{
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
-        color="linkedin"
+        className="mb-4"
         rightHeader="500+"
         rightFooter="contracts"
         leftHeader="292"
         leftFooter="feeds"
+        style={{
+          "--cui-card-cap-bg": "#4875b4"
+        }}
       >
         <CIcon
           name="cib-linkedin"
@@ -77,15 +86,16 @@ const WidgetsBrand = ({withCharts})=>{
           labels="months"
         />
       </CWidgetBrand>
-    </CCol> 
+    </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
+        className="mb-4"
         rightHeader="12"
         rightFooter="events"
         leftHeader="4"
         leftFooter="meetings"
-        color="gradient-warning"
+        color="warning"
       >
         <CIcon
           name="cil-calendar"
@@ -102,15 +112,18 @@ const WidgetsBrand = ({withCharts})=>{
       </CWidgetBrand>
     </CCol>
   </CRow> :
-  
+
   <CRow>
     <CCol sm="6" lg="3">
       <CWidgetBrand
-        color="facebook"
+        className="mb-4"
         rightHeader="89k"
         rightFooter="friends"
         leftHeader="459"
         leftFooter="feeds"
+        style={{
+          "--cui-card-cap-bg": "#3b5998"
+        }}
       >
         <CIcon
           name="cib-facebook"
@@ -122,11 +135,14 @@ const WidgetsBrand = ({withCharts})=>{
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
-        color="twitter"
+        className="mb-4"
         rightHeader="973k"
         rightFooter="followers"
         leftHeader="1.792"
         leftFooter="tweets"
+        style={{
+          "--cui-card-cap-bg": "#00aced"
+        }}
       >
         <CIcon
           name="cib-twitter"
@@ -138,11 +154,14 @@ const WidgetsBrand = ({withCharts})=>{
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
-        color="linkedin"
+        className="mb-4"
         rightHeader="500+"
         rightFooter="contracts"
         leftHeader="292"
         leftFooter="feeds"
+        style={{
+          "--cui-card-cap-bg": "#4875b4"
+        }}
       >
         <CIcon
           name="cib-linkedin"
@@ -154,11 +173,12 @@ const WidgetsBrand = ({withCharts})=>{
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
+        className="mb-4"
         rightHeader="12"
         rightFooter="events"
         leftHeader="4"
         leftFooter="meetings"
-        color="gradient-warning"
+        color="warning"
       >
         <CIcon
           name="cil-calendar"
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index 4c98047..1d3c6db 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -17,7 +17,7 @@ const WidgetsDropdown = () => {
   return (
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidgetDropdown
+        <CWidgetDropdown className="mb-4"
           color="primary"
           header="9.823"
           text="Members online"
@@ -48,7 +48,7 @@ const WidgetsDropdown = () => {
       </CCol>
 
       <CCol sm="6" lg="3">
-        <CWidgetDropdown
+        <CWidgetDropdown className="mb-4"
           color="info"
           header="9.823"
           text="Members online"
@@ -80,7 +80,7 @@ const WidgetsDropdown = () => {
       </CCol>
 
       <CCol sm="6" lg="3">
-        <CWidgetDropdown
+        <CWidgetDropdown className="mb-4"
           color="warning"
           header="9.823"
           text="Members online"
@@ -112,7 +112,7 @@ const WidgetsDropdown = () => {
       </CCol>
 
       <CCol sm="6" lg="3">
-        <CWidgetDropdown
+        <CWidgetDropdown className="mb-4"
           color="danger"
           header="9.823"
           text="Members online"