diff --git a/package.json b/package.json
index fccb0aebe9..9c4709b678 100644
--- a/package.json
+++ b/package.json
@@ -19,24 +19,20 @@
     "start": "vite"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.1.0",
-    "@coreui/coreui": "^5.5.0",
-    "@coreui/icons": "^3.0.1",
-    "@coreui/icons-react": "^2.3.0",
-    "@coreui/react": "^5.9.2",
-    "@coreui/react-chartjs": "^3.0.0",
-    "@coreui/utils": "^2.0.2",
-    "@popperjs/core": "^2.11.8",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
     "chart.js": "^4.5.1",
     "classnames": "^2.5.1",
     "core-js": "^3.47.0",
     "prop-types": "^15.8.1",
     "react": "^19.2.3",
+    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.3",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.11.0",
-    "redux": "5.0.1",
-    "simplebar-react": "^3.3.2"
+    "redux": "5.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.2",
diff --git a/src/App.js b/src/App.js
index f5b22393e1..5e64727e4e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,58 +1,62 @@
-import React, { Suspense, useEffect } from 'react'
+import React, { Suspense, useEffect, useMemo } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
 
-import { CSpinner, useColorModes } from '@coreui/react'
-import './scss/style.scss'
+import { createAppTheme } from './theme'
 
-// We use those styles to show code examples, you should remove them in your application.
-import './scss/examples.scss'
-
-// Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
-// Pages
 const Login = React.lazy(() => import('./views/pages/login/Login'))
 const Register = React.lazy(() => import('./views/pages/register/Register'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
-  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const dispatch = useDispatch()
   const storedTheme = useSelector((state) => state.theme)
 
+  const theme = useMemo(() => createAppTheme(storedTheme), [storedTheme])
+
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-    if (theme) {
-      setColorMode(theme)
+    const themeParam = urlParams.get('theme')
+    if (themeParam && (themeParam === 'light' || themeParam === 'dark')) {
+      dispatch({ type: 'set', theme: themeParam })
     }
-
-    if (isColorModeSet()) {
-      return
-    }
-
-    setColorMode(storedTheme)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [dispatch])
 
   return (
-    <HashRouter>
-      <Suspense
-        fallback={
-          <div className="pt-3 text-center">
-            <CSpinner color="primary" variant="grow" />
-          </div>
-        }
-      >
-        <Routes>
-          <Route exact path="/login" name="Login Page" element={<Login />} />
-          <Route exact path="/register" name="Register Page" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
-        </Routes>
-      </Suspense>
-    </HashRouter>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <HashRouter>
+        <Suspense
+          fallback={
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: '100vh',
+              }}
+            >
+              <CircularProgress color="primary" />
+            </Box>
+          }
+        >
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/404" element={<Page404 />} />
+            <Route path="/500" element={<Page500 />} />
+            <Route path="*" element={<DefaultLayout />} />
+          </Routes>
+        </Suspense>
+      </HashRouter>
+    </ThemeProvider>
   )
 }
 
diff --git a/src/_nav.js b/src/_nav.js
index e43f1df1ee..4c75595c86 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -1,506 +1,152 @@
 import React from 'react'
-import CIcon from '@coreui/icons-react'
-import {
-  cilBell,
-  cilCalculator,
-  cilChartPie,
-  cilCursor,
-  cilDescription,
-  cilDrop,
-  cilExternalLink,
-  cilNotes,
-  cilPencil,
-  cilPuzzle,
-  cilSpeedometer,
-  cilStar,
-} from '@coreui/icons'
-import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
+import DashboardIcon from '@mui/icons-material/Dashboard'
+import ColorLensIcon from '@mui/icons-material/ColorLens'
+import TextFieldsIcon from '@mui/icons-material/TextFields'
+import ExtensionIcon from '@mui/icons-material/Extension'
+import TouchAppIcon from '@mui/icons-material/TouchApp'
+import NotesIcon from '@mui/icons-material/Notes'
+import PieChartIcon from '@mui/icons-material/PieChart'
+import StarIcon from '@mui/icons-material/Star'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import WidgetsIcon from '@mui/icons-material/Widgets'
+import DescriptionIcon from '@mui/icons-material/Description'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
 const _nav = [
   {
-    component: CNavItem,
+    type: 'item',
     name: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
+    icon: DashboardIcon,
     badge: {
       color: 'info',
       text: 'NEW',
     },
   },
   {
-    component: CNavTitle,
+    type: 'title',
     name: 'Theme',
   },
   {
-    component: CNavItem,
+    type: 'item',
     name: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+    icon: ColorLensIcon,
   },
   {
-    component: CNavItem,
+    type: 'item',
     name: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+    icon: TextFieldsIcon,
   },
   {
-    component: CNavTitle,
+    type: 'title',
     name: 'Components',
   },
   {
-    component: CNavGroup,
+    type: 'group',
     name: 'Base',
-    to: '/base',
-    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
+    icon: ExtensionIcon,
     items: [
-      {
-        component: CNavItem,
-        name: 'Accordion',
-        to: '/base/accordion',
-      },
-      {
-        component: CNavItem,
-        name: 'Breadcrumb',
-        to: '/base/breadcrumbs',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Calendar'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/calendar/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Cards',
-        to: '/base/cards',
-      },
-      {
-        component: CNavItem,
-        name: 'Carousel',
-        to: '/base/carousels',
-      },
-      {
-        component: CNavItem,
-        name: 'Collapse',
-        to: '/base/collapses',
-      },
-      {
-        component: CNavItem,
-        name: 'List group',
-        to: '/base/list-groups',
-      },
-      {
-        component: CNavItem,
-        name: 'Navs & Tabs',
-        to: '/base/navs',
-      },
-      {
-        component: CNavItem,
-        name: 'Pagination',
-        to: '/base/paginations',
-      },
-      {
-        component: CNavItem,
-        name: 'Placeholders',
-        to: '/base/placeholders',
-      },
-      {
-        component: CNavItem,
-        name: 'Popovers',
-        to: '/base/popovers',
-      },
-      {
-        component: CNavItem,
-        name: 'Progress',
-        to: '/base/progress',
-      },
-      {
-        component: CNavItem,
-        name: 'Smart Pagination',
-        href: 'https://coreui.io/react/docs/components/smart-pagination/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Smart Table'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/smart-table/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Spinners',
-        to: '/base/spinners',
-      },
-      {
-        component: CNavItem,
-        name: 'Tables',
-        to: '/base/tables',
-      },
-      {
-        component: CNavItem,
-        name: 'Tabs',
-        to: '/base/tabs',
-      },
-      {
-        component: CNavItem,
-        name: 'Tooltips',
-        to: '/base/tooltips',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Virtual Scroller'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/virtual-scroller/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
+      { type: 'item', name: 'Accordion', to: '/base/accordion' },
+      { type: 'item', name: 'Breadcrumb', to: '/base/breadcrumbs' },
+      { type: 'item', name: 'Cards', to: '/base/cards' },
+      { type: 'item', name: 'Carousel', to: '/base/carousels' },
+      { type: 'item', name: 'Collapse', to: '/base/collapses' },
+      { type: 'item', name: 'List group', to: '/base/list-groups' },
+      { type: 'item', name: 'Navs & Tabs', to: '/base/navs' },
+      { type: 'item', name: 'Pagination', to: '/base/paginations' },
+      { type: 'item', name: 'Placeholders', to: '/base/placeholders' },
+      { type: 'item', name: 'Popovers', to: '/base/popovers' },
+      { type: 'item', name: 'Progress', to: '/base/progress' },
+      { type: 'item', name: 'Spinners', to: '/base/spinners' },
+      { type: 'item', name: 'Tables', to: '/base/tables' },
+      { type: 'item', name: 'Tabs', to: '/base/tabs' },
+      { type: 'item', name: 'Tooltips', to: '/base/tooltips' },
     ],
   },
   {
-    component: CNavGroup,
+    type: 'group',
     name: 'Buttons',
-    to: '/buttons',
-    icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
+    icon: TouchAppIcon,
     items: [
-      {
-        component: CNavItem,
-        name: 'Buttons',
-        to: '/buttons/buttons',
-      },
-      {
-        component: CNavItem,
-        name: 'Buttons groups',
-        to: '/buttons/button-groups',
-      },
-      {
-        component: CNavItem,
-        name: 'Dropdowns',
-        to: '/buttons/dropdowns',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Loading Button'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/loading-button/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
+      { type: 'item', name: 'Buttons', to: '/buttons/buttons' },
+      { type: 'item', name: 'Button groups', to: '/buttons/button-groups' },
+      { type: 'item', name: 'Dropdowns', to: '/buttons/dropdowns' },
     ],
   },
   {
-    component: CNavGroup,
+    type: 'group',
     name: 'Forms',
-    icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
+    icon: NotesIcon,
     items: [
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Autocomplete'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/autocomplete/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Checks & Radios',
-        to: '/forms/checks-radios',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Date Picker'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/date-picker/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Date Range Picker',
-        href: 'https://coreui.io/react/docs/forms/date-range-picker/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Floating Labels',
-        to: '/forms/floating-labels',
-      },
-      {
-        component: CNavItem,
-        name: 'Form Control',
-        to: '/forms/form-control',
-      },
-      {
-        component: CNavItem,
-        name: 'Input Group',
-        to: '/forms/input-group',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Multi Select'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/multi-select/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'OTP Input'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/one-time-password-input/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Password Input'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/password-input/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Range',
-        to: '/forms/range',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Range Slider'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/range-slider/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Rating'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/rating/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Select',
-        to: '/forms/select',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Stepper'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/stepper/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Time Picker'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/time-picker/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Layout',
-        to: '/forms/layout',
-      },
-      {
-        component: CNavItem,
-        name: 'Validation',
-        to: '/forms/validation',
-      },
+      { type: 'item', name: 'Checks & Radios', to: '/forms/checks-radios' },
+      { type: 'item', name: 'Floating Labels', to: '/forms/floating-labels' },
+      { type: 'item', name: 'Form Control', to: '/forms/form-control' },
+      { type: 'item', name: 'Input Group', to: '/forms/input-group' },
+      { type: 'item', name: 'Range', to: '/forms/range' },
+      { type: 'item', name: 'Select', to: '/forms/select' },
+      { type: 'item', name: 'Layout', to: '/forms/layout' },
+      { type: 'item', name: 'Validation', to: '/forms/validation' },
     ],
   },
   {
-    component: CNavItem,
+    type: 'item',
     name: 'Charts',
     to: '/charts',
-    icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
+    icon: PieChartIcon,
   },
   {
-    component: CNavGroup,
+    type: 'group',
     name: 'Icons',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: StarIcon,
     items: [
-      {
-        component: CNavItem,
-        name: 'CoreUI Free',
-        to: '/icons/coreui-icons',
-      },
-      {
-        component: CNavItem,
-        name: 'CoreUI Flags',
-        to: '/icons/flags',
-      },
-      {
-        component: CNavItem,
-        name: 'CoreUI Brands',
-        to: '/icons/brands',
-      },
+      { type: 'item', name: 'Material Icons', to: '/icons/coreui-icons' },
+      { type: 'item', name: 'Flags', to: '/icons/flags' },
+      { type: 'item', name: 'Brands', to: '/icons/brands' },
     ],
   },
   {
-    component: CNavGroup,
+    type: 'group',
     name: 'Notifications',
-    icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
+    icon: NotificationsIcon,
     items: [
-      {
-        component: CNavItem,
-        name: 'Alerts',
-        to: '/notifications/alerts',
-      },
-      {
-        component: CNavItem,
-        name: 'Badges',
-        to: '/notifications/badges',
-      },
-      {
-        component: CNavItem,
-        name: 'Modal',
-        to: '/notifications/modals',
-      },
-      {
-        component: CNavItem,
-        name: 'Toasts',
-        to: '/notifications/toasts',
-      },
+      { type: 'item', name: 'Alerts', to: '/notifications/alerts' },
+      { type: 'item', name: 'Badges', to: '/notifications/badges' },
+      { type: 'item', name: 'Modal', to: '/notifications/modals' },
+      { type: 'item', name: 'Toasts', to: '/notifications/toasts' },
     ],
   },
   {
-    component: CNavItem,
+    type: 'item',
     name: 'Widgets',
     to: '/widgets',
-    icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
+    icon: WidgetsIcon,
     badge: {
       color: 'info',
       text: 'NEW',
     },
   },
   {
-    component: CNavTitle,
+    type: 'title',
     name: 'Extras',
   },
   {
-    component: CNavGroup,
+    type: 'group',
     name: 'Pages',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: StarIcon,
     items: [
-      {
-        component: CNavItem,
-        name: 'Login',
-        to: '/login',
-      },
-      {
-        component: CNavItem,
-        name: 'Register',
-        to: '/register',
-      },
-      {
-        component: CNavItem,
-        name: 'Error 404',
-        to: '/404',
-      },
-      {
-        component: CNavItem,
-        name: 'Error 500',
-        to: '/500',
-      },
+      { type: 'item', name: 'Login', to: '/login' },
+      { type: 'item', name: 'Register', to: '/register' },
+      { type: 'item', name: 'Error 404', to: '/404' },
+      { type: 'item', name: 'Error 500', to: '/500' },
     ],
   },
   {
-    component: CNavItem,
+    type: 'item',
     name: 'Docs',
     href: 'https://coreui.io/react/docs/templates/installation/',
-    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
+    icon: DescriptionIcon,
   },
 ]
 
diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js
index d37de8ce9b..ee63062754 100644
--- a/src/components/AppBreadcrumb.js
+++ b/src/components/AppBreadcrumb.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, Link } from 'react-router-dom'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import MuiLink from '@mui/material/Link'
+import Typography from '@mui/material/Typography'
+import HomeIcon from '@mui/icons-material/Home'
 
 import routes from '../routes'
 
-import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
-
 const AppBreadcrumb = () => {
   const currentLocation = useLocation().pathname
 
@@ -32,19 +34,38 @@ const AppBreadcrumb = () => {
   const breadcrumbs = getBreadcrumbs(currentLocation)
 
   return (
-    <CBreadcrumb className="my-0">
-      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
+    <Breadcrumbs aria-label="breadcrumb" sx={{ my: 0 }}>
+      <MuiLink
+        component={Link}
+        to="/"
+        underline="hover"
+        color="inherit"
+        sx={{ display: 'flex', alignItems: 'center' }}
+      >
+        <HomeIcon sx={{ mr: 0.5, fontSize: 18 }} />
+        Home
+      </MuiLink>
       {breadcrumbs.map((breadcrumb, index) => {
+        if (breadcrumb.active) {
+          return (
+            <Typography key={index} color="text.primary">
+              {breadcrumb.name}
+            </Typography>
+          )
+        }
         return (
-          <CBreadcrumbItem
-            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
+          <MuiLink
             key={index}
+            component={Link}
+            to={breadcrumb.pathname}
+            underline="hover"
+            color="inherit"
           >
             {breadcrumb.name}
-          </CBreadcrumbItem>
+          </MuiLink>
         )
       })}
-    </CBreadcrumb>
+    </Breadcrumbs>
   )
 }
 
diff --git a/src/components/AppContent.js b/src/components/AppContent.js
index b9a39ef505..b7002f742c 100644
--- a/src/components/AppContent.js
+++ b/src/components/AppContent.js
@@ -1,14 +1,21 @@
 import React, { Suspense } from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { CContainer, CSpinner } from '@coreui/react'
+import Container from '@mui/material/Container'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
 
-// routes config
 import routes from '../routes'
 
 const AppContent = () => {
   return (
-    <CContainer className="px-4" lg>
-      <Suspense fallback={<CSpinner color="primary" />}>
+    <Container maxWidth="xl" sx={{ px: { xs: 2, sm: 3 } }}>
+      <Suspense
+        fallback={
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+            <CircularProgress color="primary" />
+          </Box>
+        }
+      >
         <Routes>
           {routes.map((route, idx) => {
             return (
@@ -26,7 +33,7 @@ const AppContent = () => {
           <Route path="/" element={<Navigate to="dashboard" replace />} />
         </Routes>
       </Suspense>
-    </CContainer>
+    </Container>
   )
 }
 
diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js
index 217c5a04c3..f76b309b0b 100644
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -1,22 +1,43 @@
 import React from 'react'
-import { CFooter } from '@coreui/react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
 
 const AppFooter = () => {
   return (
-    <CFooter className="px-4">
-      <div>
-        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
+    <Box
+      component="footer"
+      sx={{
+        py: 2,
+        px: 3,
+        mt: 'auto',
+        borderTop: 1,
+        borderColor: 'divider',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 1,
+      }}
+    >
+      <Typography variant="body2" color="text.secondary">
+        <Link href="https://coreui.io" target="_blank" rel="noopener noreferrer" underline="hover">
           CoreUI
-        </a>
-        <span className="ms-1">&copy; 2025 creativeLabs.</span>
-      </div>
-      <div className="ms-auto">
-        <span className="me-1">Powered by</span>
-        <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">
+        </Link>{' '}
+        &copy; 2025 creativeLabs.
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        Powered by{' '}
+        <Link
+          href="https://coreui.io/react"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
           CoreUI React Admin &amp; Dashboard Template
-        </a>
-      </div>
-    </CFooter>
+        </Link>
+      </Typography>
+    </Box>
   )
 }
 
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 534dadaa89..04dde92177 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -1,143 +1,126 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
-import {
-  CContainer,
-  CDropdown,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CHeader,
-  CHeaderNav,
-  CHeaderToggler,
-  CNavLink,
-  CNavItem,
-  useColorModes,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import {
-  cilBell,
-  cilContrast,
-  cilEnvelopeOpen,
-  cilList,
-  cilMenu,
-  cilMoon,
-  cilSun,
-} from '@coreui/icons'
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
+import IconButton from '@mui/material/IconButton'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Divider from '@mui/material/Divider'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import MenuIcon from '@mui/icons-material/Menu'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import ListIcon from '@mui/icons-material/List'
+import EmailIcon from '@mui/icons-material/Email'
+import LightModeIcon from '@mui/icons-material/LightMode'
+import DarkModeIcon from '@mui/icons-material/DarkMode'
+import ContrastIcon from '@mui/icons-material/Contrast'
 
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
 
-const AppHeader = () => {
-  const headerRef = useRef()
-  const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+const drawerWidth = 256
 
+const AppHeader = () => {
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
+  const theme = useSelector((state) => state.theme)
+
+  const [themeAnchorEl, setThemeAnchorEl] = useState(null)
+  const themeMenuOpen = Boolean(themeAnchorEl)
 
-  useEffect(() => {
-    const handleScroll = () => {
-      headerRef.current &&
-        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
-    }
+  const handleThemeClick = (event) => {
+    setThemeAnchorEl(event.currentTarget)
+  }
 
-    document.addEventListener('scroll', handleScroll)
-    return () => document.removeEventListener('scroll', handleScroll)
-  }, [])
+  const handleThemeClose = () => {
+    setThemeAnchorEl(null)
+  }
+
+  const handleThemeChange = (newTheme) => {
+    dispatch({ type: 'set', theme: newTheme })
+    handleThemeClose()
+  }
 
   return (
-    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
-      <CContainer className="border-bottom px-4" fluid>
-        <CHeaderToggler
+    <AppBar
+      position="sticky"
+      color="default"
+      sx={{
+        bgcolor: 'background.paper',
+        borderBottom: 1,
+        borderColor: 'divider',
+      }}
+    >
+      <Toolbar>
+        <IconButton
+          edge="start"
+          color="inherit"
+          aria-label="toggle sidebar"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
-          style={{ marginInlineStart: '-14px' }}
+          sx={{ mr: 2 }}
         >
-          <CIcon icon={cilMenu} size="lg" />
-        </CHeaderToggler>
-        <CHeaderNav className="d-none d-md-flex">
-          <CNavItem>
-            <CNavLink to="/dashboard" as={NavLink}>
-              Dashboard
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#">Users</CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#">Settings</CNavLink>
-          </CNavItem>
-        </CHeaderNav>
-        <CHeaderNav className="ms-auto">
-          <CNavItem>
-            <CNavLink href="#">
-              <CIcon icon={cilBell} size="lg" />
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#">
-              <CIcon icon={cilList} size="lg" />
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#">
-              <CIcon icon={cilEnvelopeOpen} size="lg" />
-            </CNavLink>
-          </CNavItem>
-        </CHeaderNav>
-        <CHeaderNav>
-          <li className="nav-item py-1">
-            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
-          </li>
-          <CDropdown variant="nav-item" placement="bottom-end">
-            <CDropdownToggle caret={false}>
-              {colorMode === 'dark' ? (
-                <CIcon icon={cilMoon} size="lg" />
-              ) : colorMode === 'auto' ? (
-                <CIcon icon={cilContrast} size="lg" />
-              ) : (
-                <CIcon icon={cilSun} size="lg" />
-              )}
-            </CDropdownToggle>
-            <CDropdownMenu>
-              <CDropdownItem
-                active={colorMode === 'light'}
-                className="d-flex align-items-center"
-                as="button"
-                type="button"
-                onClick={() => setColorMode('light')}
-              >
-                <CIcon className="me-2" icon={cilSun} size="lg" /> Light
-              </CDropdownItem>
-              <CDropdownItem
-                active={colorMode === 'dark'}
-                className="d-flex align-items-center"
-                as="button"
-                type="button"
-                onClick={() => setColorMode('dark')}
-              >
-                <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
-              </CDropdownItem>
-              <CDropdownItem
-                active={colorMode === 'auto'}
-                className="d-flex align-items-center"
-                as="button"
-                type="button"
-                onClick={() => setColorMode('auto')}
-              >
-                <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
-              </CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-          <li className="nav-item py-1">
-            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
-          </li>
+          <MenuIcon />
+        </IconButton>
+
+        <Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 1 }}>
+          <Button component={NavLink} to="/dashboard" color="inherit">
+            Dashboard
+          </Button>
+          <Button color="inherit">Users</Button>
+          <Button color="inherit">Settings</Button>
+        </Box>
+
+        <Box sx={{ flexGrow: 1 }} />
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <IconButton color="inherit">
+            <NotificationsIcon />
+          </IconButton>
+          <IconButton color="inherit">
+            <ListIcon />
+          </IconButton>
+          <IconButton color="inherit">
+            <EmailIcon />
+          </IconButton>
+
+          <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+          <IconButton color="inherit" onClick={handleThemeClick}>
+            {theme === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+          </IconButton>
+          <Menu
+            anchorEl={themeAnchorEl}
+            open={themeMenuOpen}
+            onClose={handleThemeClose}
+            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          >
+            <MenuItem selected={theme === 'light'} onClick={() => handleThemeChange('light')}>
+              <ListItemIcon>
+                <LightModeIcon fontSize="small" />
+              </ListItemIcon>
+              Light
+            </MenuItem>
+            <MenuItem selected={theme === 'dark'} onClick={() => handleThemeChange('dark')}>
+              <ListItemIcon>
+                <DarkModeIcon fontSize="small" />
+              </ListItemIcon>
+              Dark
+            </MenuItem>
+          </Menu>
+
+          <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
           <AppHeaderDropdown />
-        </CHeaderNav>
-      </CContainer>
-      <CContainer className="px-4" fluid>
+        </Box>
+      </Toolbar>
+      <Box sx={{ px: 3, py: 1, borderTop: 1, borderColor: 'divider' }}>
         <AppBreadcrumb />
-      </CContainer>
-    </CHeader>
+      </Box>
+    </AppBar>
   )
 }
 
diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 021cb52c34..e02766ebfe 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -1,58 +1,95 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-
-import {
-  CCloseButton,
-  CSidebar,
-  CSidebarBrand,
-  CSidebarFooter,
-  CSidebarHeader,
-  CSidebarToggler,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
+import { Link } from 'react-router-dom'
+import Drawer from '@mui/material/Drawer'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+import CloseIcon from '@mui/icons-material/Close'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { useTheme } from '@mui/material/styles'
 
 import { AppSidebarNav } from './AppSidebarNav'
-
-import { logo } from 'src/assets/brand/logo'
-import { sygnet } from 'src/assets/brand/sygnet'
-
-// sidebar nav config
 import navigation from '../_nav'
 
+const drawerWidth = 256
+
 const AppSidebar = () => {
+  const muiTheme = useTheme()
+  const isMobile = useMediaQuery(muiTheme.breakpoints.down('sm'))
   const dispatch = useDispatch()
-  const unfoldable = useSelector((state) => state.sidebarUnfoldable)
   const sidebarShow = useSelector((state) => state.sidebarShow)
 
+  const handleClose = () => {
+    dispatch({ type: 'set', sidebarShow: false })
+  }
+
+  const drawerContent = (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          p: 2,
+          borderBottom: 1,
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          variant="h6"
+          component={Link}
+          to="/"
+          sx={{
+            textDecoration: 'none',
+            color: 'inherit',
+            fontWeight: 'bold',
+          }}
+        >
+          CoreUI React
+        </Typography>
+        {isMobile && (
+          <IconButton onClick={handleClose} size="small">
+            <CloseIcon />
+          </IconButton>
+        )}
+      </Box>
+      <AppSidebarNav items={navigation} />
+      <Box
+        sx={{
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 1,
+          display: { xs: 'none', lg: 'flex' },
+          justifyContent: 'flex-end',
+        }}
+      >
+        <IconButton onClick={handleClose} size="small">
+          <ChevronLeftIcon />
+        </IconButton>
+      </Box>
+    </>
+  )
+
   return (
-    <CSidebar
-      className="border-end"
-      colorScheme="dark"
-      position="fixed"
-      unfoldable={unfoldable}
-      visible={sidebarShow}
-      onVisibleChange={(visible) => {
-        dispatch({ type: 'set', sidebarShow: visible })
+    <Drawer
+      variant={isMobile ? 'temporary' : 'persistent'}
+      open={sidebarShow}
+      onClose={handleClose}
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: drawerWidth,
+          boxSizing: 'border-box',
+          bgcolor: 'background.paper',
+        },
       }}
     >
-      <CSidebarHeader className="border-bottom">
-        <CSidebarBrand to="/">
-          <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
-          <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
-        </CSidebarBrand>
-        <CCloseButton
-          className="d-lg-none"
-          dark
-          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
-        />
-      </CSidebarHeader>
-      <AppSidebarNav items={navigation} />
-      <CSidebarFooter className="border-top d-none d-lg-flex">
-        <CSidebarToggler
-          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
-        />
-      </CSidebarFooter>
-    </CSidebar>
+      {drawerContent}
+    </Drawer>
   )
 }
 
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 7583abf49e..16d07bc174 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,70 +1,160 @@
-import React from 'react'
-import { NavLink } from 'react-router-dom'
+import React, { useState } from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Collapse from '@mui/material/Collapse'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Box from '@mui/material/Box'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
 
-import SimpleBar from 'simplebar-react'
-import 'simplebar-react/dist/simplebar.min.css'
+export const AppSidebarNav = ({ items }) => {
+  const location = useLocation()
+  const [openGroups, setOpenGroups] = useState({})
 
-import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
+  const handleGroupClick = (name) => {
+    setOpenGroups((prev) => ({
+      ...prev,
+      [name]: !prev[name],
+    }))
+  }
 
-export const AppSidebarNav = ({ items }) => {
-  const navLink = (name, icon, badge, indent = false) => {
-    return (
-      <>
-        {icon
-          ? icon
-          : indent && (
-              <span className="nav-icon">
-                <span className="nav-icon-bullet"></span>
-              </span>
+  const isActive = (to) => {
+    return location.pathname === to
+  }
+
+  const renderNavItem = (item, index, nested = false) => {
+    const { name, to, href, icon: Icon, badge } = item
+
+    if (href) {
+      return (
+        <ListItem key={index} disablePadding>
+          <ListItemButton
+            component="a"
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{ pl: nested ? 4 : 2 }}
+          >
+            {Icon && (
+              <ListItemIcon sx={{ minWidth: 40 }}>
+                <Icon fontSize="small" />
+              </ListItemIcon>
             )}
-        {name && name}
-        {badge && (
-          <CBadge color={badge.color} className="ms-auto" size="sm">
-            {badge.text}
-          </CBadge>
-        )}
-      </>
+            {nested && !Icon && (
+              <ListItemIcon sx={{ minWidth: 40 }}>
+                <FiberManualRecordIcon sx={{ fontSize: 8 }} />
+              </ListItemIcon>
+            )}
+            <ListItemText primary={name} />
+            {badge && (
+              <Chip
+                label={badge.text}
+                size="small"
+                color={
+                  badge.color === 'info' ? 'info' : badge.color === 'danger' ? 'error' : 'default'
+                }
+              />
+            )}
+          </ListItemButton>
+        </ListItem>
+      )
+    }
+
+    return (
+      <ListItem key={index} disablePadding>
+        <ListItemButton
+          component={NavLink}
+          to={to}
+          selected={isActive(to)}
+          sx={{ pl: nested ? 4 : 2 }}
+        >
+          {Icon && (
+            <ListItemIcon sx={{ minWidth: 40 }}>
+              <Icon fontSize="small" />
+            </ListItemIcon>
+          )}
+          {nested && !Icon && (
+            <ListItemIcon sx={{ minWidth: 40 }}>
+              <FiberManualRecordIcon sx={{ fontSize: 8 }} />
+            </ListItemIcon>
+          )}
+          <ListItemText primary={name} />
+          {badge && (
+            <Chip
+              label={badge.text}
+              size="small"
+              color={
+                badge.color === 'info' ? 'info' : badge.color === 'danger' ? 'error' : 'default'
+              }
+            />
+          )}
+        </ListItemButton>
+      </ListItem>
     )
   }
 
-  const navItem = (item, index, indent = false) => {
-    const { component, name, badge, icon, ...rest } = item
-    const Component = component
+  const renderNavGroup = (item, index) => {
+    const { name, icon: Icon, items: subItems } = item
+    const isOpen = openGroups[name] || false
+
     return (
-      <Component as="div" key={index}>
-        {rest.to || rest.href ? (
-          <CNavLink
-            {...(rest.to && { as: NavLink })}
-            {...(rest.href && { target: '_blank', rel: 'noopener noreferrer' })}
-            {...rest}
-          >
-            {navLink(name, icon, badge, indent)}
-          </CNavLink>
-        ) : (
-          navLink(name, icon, badge, indent)
-        )}
-      </Component>
+      <React.Fragment key={index}>
+        <ListItem disablePadding>
+          <ListItemButton onClick={() => handleGroupClick(name)}>
+            {Icon && (
+              <ListItemIcon sx={{ minWidth: 40 }}>
+                <Icon fontSize="small" />
+              </ListItemIcon>
+            )}
+            <ListItemText primary={name} />
+            {isOpen ? <ExpandLess /> : <ExpandMore />}
+          </ListItemButton>
+        </ListItem>
+        <Collapse in={isOpen} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            {subItems?.map((subItem, subIndex) => renderNavItem(subItem, subIndex, true))}
+          </List>
+        </Collapse>
+      </React.Fragment>
     )
   }
 
-  const navGroup = (item, index) => {
-    const { component, name, icon, items, to, ...rest } = item
-    const Component = component
+  const renderNavTitle = (item, index) => {
     return (
-      <Component compact as="div" key={index} toggler={navLink(name, icon)} {...rest}>
-        {items?.map((item, index) =>
-          item.items ? navGroup(item, index) : navItem(item, index, true),
-        )}
-      </Component>
+      <Box key={index} sx={{ px: 2, py: 1.5, mt: index > 0 ? 1 : 0 }}>
+        <Typography
+          variant="overline"
+          color="text.secondary"
+          sx={{ fontWeight: 'bold', fontSize: '0.7rem' }}
+        >
+          {item.name}
+        </Typography>
+      </Box>
     )
   }
 
   return (
-    <CSidebarNav as={SimpleBar}>
-      {items &&
-        items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
-    </CSidebarNav>
+    <Box sx={{ overflow: 'auto', flexGrow: 1 }}>
+      <List component="nav" sx={{ py: 0 }}>
+        {items &&
+          items.map((item, index) => {
+            if (item.type === 'title') {
+              return renderNavTitle(item, index)
+            }
+            if (item.type === 'group') {
+              return renderNavGroup(item, index)
+            }
+            return renderNavItem(item, index)
+          })}
+      </List>
+    </Box>
   )
 }
 
diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js
index 2adedad493..44f58610ea 100644
--- a/src/components/DocsExample.js
+++ b/src/components/DocsExample.js
@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilCode, cilMediaPlay } from '@coreui/icons'
+import Box from '@mui/material/Box'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Link from '@mui/material/Link'
+import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+import CodeIcon from '@mui/icons-material/Code'
 
 const DocsExample = (props) => {
   const { children, href, tabContentClassName } = props
@@ -10,27 +13,26 @@ const DocsExample = (props) => {
   const _href = `https://coreui.io/react/docs/${href}`
 
   return (
-    <div className="example">
-      <CNav variant="underline-border">
-        <CNavItem>
-          <CNavLink href="#" active>
-            <CIcon icon={cilMediaPlay} className="me-2" />
-            Preview
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href={_href} target="_blank">
-            <CIcon icon={cilCode} className="me-2" />
-            Code
-          </CNavLink>
-        </CNavItem>
-      </CNav>
-      <CTabContent className={`rounded-bottom ${tabContentClassName ? tabContentClassName : ''}`}>
-        <CTabPane className="p-3 preview" visible>
-          {children}
-        </CTabPane>
-      </CTabContent>
-    </div>
+    <Box sx={{ mb: 3 }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={0}>
+          <Tab icon={<PlayArrowIcon />} iconPosition="start" label="Preview" />
+          <Tab
+            icon={<CodeIcon />}
+            iconPosition="start"
+            label="Code"
+            component={Link}
+            href={_href}
+            target="_blank"
+          />
+        </Tabs>
+      </Box>
+      <Box
+        sx={{ p: 3, border: 1, borderTop: 0, borderColor: 'divider', borderRadius: '0 0 4px 4px' }}
+      >
+        {children}
+      </Box>
+    </Box>
   )
 }
 
diff --git a/src/components/DocsLink.js b/src/components/DocsLink.js
index 7c72aa1284..1d9bafc94c 100644
--- a/src/components/DocsLink.js
+++ b/src/components/DocsLink.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { CLink } from '@coreui/react'
+import Box from '@mui/material/Box'
+import Link from '@mui/material/Link'
+import Typography from '@mui/material/Typography'
 
 const DocsLink = (props) => {
   const { href, name, text, ...rest } = props
@@ -8,17 +10,13 @@ const DocsLink = (props) => {
   const _href = name ? `https://coreui.io/react/docs/components/${name}` : href
 
   return (
-    <div className="float-end">
-      <CLink
-        {...rest}
-        href={_href}
-        rel="noreferrer noopener"
-        target="_blank"
-        className="card-header-action"
-      >
-        <small className="text-body-secondary">{text || 'docs'}</small>
-      </CLink>
-    </div>
+    <Box sx={{ float: 'right' }}>
+      <Link {...rest} href={_href} rel="noreferrer noopener" target="_blank" underline="hover">
+        <Typography variant="caption" color="text.secondary">
+          {text || 'docs'}
+        </Typography>
+      </Link>
+    </Box>
   )
 }
 
diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index 30c0df82ba..b4bf20411a 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -1,95 +1,128 @@
-import React from 'react'
-import {
-  CAvatar,
-  CBadge,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-} from '@coreui/react'
-import {
-  cilBell,
-  cilCreditCard,
-  cilCommentSquare,
-  cilEnvelopeOpen,
-  cilFile,
-  cilLockLocked,
-  cilSettings,
-  cilTask,
-  cilUser,
-} from '@coreui/icons'
-import CIcon from '@coreui/icons-react'
+import React, { useState } from 'react'
+import Avatar from '@mui/material/Avatar'
+import Badge from '@mui/material/Badge'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Divider from '@mui/material/Divider'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import EmailIcon from '@mui/icons-material/Email'
+import AssignmentIcon from '@mui/icons-material/Assignment'
+import CommentIcon from '@mui/icons-material/Comment'
+import PersonIcon from '@mui/icons-material/Person'
+import SettingsIcon from '@mui/icons-material/Settings'
+import CreditCardIcon from '@mui/icons-material/CreditCard'
+import FolderIcon from '@mui/icons-material/Folder'
+import LockIcon from '@mui/icons-material/Lock'
 
 import avatar8 from './../../assets/images/avatars/8.jpg'
 
 const AppHeaderDropdown = () => {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
   return (
-    <CDropdown variant="nav-item">
-      <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
-        <CAvatar src={avatar8} size="md" />
-      </CDropdownToggle>
-      <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="bg-body-secondary fw-semibold mb-2">Account</CDropdownHeader>
-        <CDropdownItem href="#">
-          <CIcon icon={cilBell} className="me-2" />
-          Updates
-          <CBadge color="info" className="ms-2">
-            42
-          </CBadge>
-        </CDropdownItem>
-        <CDropdownItem href="#">
-          <CIcon icon={cilEnvelopeOpen} className="me-2" />
-          Messages
-          <CBadge color="success" className="ms-2">
-            42
-          </CBadge>
-        </CDropdownItem>
-        <CDropdownItem href="#">
-          <CIcon icon={cilTask} className="me-2" />
-          Tasks
-          <CBadge color="danger" className="ms-2">
-            42
-          </CBadge>
-        </CDropdownItem>
-        <CDropdownItem href="#">
-          <CIcon icon={cilCommentSquare} className="me-2" />
-          Comments
-          <CBadge color="warning" className="ms-2">
-            42
-          </CBadge>
-        </CDropdownItem>
-        <CDropdownHeader className="bg-body-secondary fw-semibold my-2">Settings</CDropdownHeader>
-        <CDropdownItem href="#">
-          <CIcon icon={cilUser} className="me-2" />
-          Profile
-        </CDropdownItem>
-        <CDropdownItem href="#">
-          <CIcon icon={cilSettings} className="me-2" />
-          Settings
-        </CDropdownItem>
-        <CDropdownItem href="#">
-          <CIcon icon={cilCreditCard} className="me-2" />
-          Payments
-          <CBadge color="secondary" className="ms-2">
-            42
-          </CBadge>
-        </CDropdownItem>
-        <CDropdownItem href="#">
-          <CIcon icon={cilFile} className="me-2" />
-          Projects
-          <CBadge color="primary" className="ms-2">
-            42
-          </CBadge>
-        </CDropdownItem>
-        <CDropdownDivider />
-        <CDropdownItem href="#">
-          <CIcon icon={cilLockLocked} className="me-2" />
-          Lock Account
-        </CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>
+    <>
+      <IconButton onClick={handleClick} size="small" sx={{ ml: 2 }}>
+        <Avatar src={avatar8} sx={{ width: 32, height: 32 }} />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        PaperProps={{
+          sx: { width: 280, maxHeight: 400 },
+        }}
+      >
+        <Box sx={{ px: 2, py: 1, bgcolor: 'action.hover' }}>
+          <Typography variant="subtitle2" fontWeight="bold">
+            Account
+          </Typography>
+        </Box>
+        <MenuItem>
+          <ListItemIcon>
+            <NotificationsIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Updates</ListItemText>
+          <Chip label="42" size="small" color="info" />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <EmailIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Messages</ListItemText>
+          <Chip label="42" size="small" color="success" />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <AssignmentIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Tasks</ListItemText>
+          <Chip label="42" size="small" color="error" />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <CommentIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Comments</ListItemText>
+          <Chip label="42" size="small" color="warning" />
+        </MenuItem>
+        <Box sx={{ px: 2, py: 1, bgcolor: 'action.hover' }}>
+          <Typography variant="subtitle2" fontWeight="bold">
+            Settings
+          </Typography>
+        </Box>
+        <MenuItem>
+          <ListItemIcon>
+            <PersonIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Profile</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <SettingsIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Settings</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <CreditCardIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Payments</ListItemText>
+          <Chip label="42" size="small" color="default" />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <FolderIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Projects</ListItemText>
+          <Chip label="42" size="small" color="primary" />
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ListItemIcon>
+            <LockIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Lock Account</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
   )
 }
 
diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js
index 19fbf225fd..346fef708d 100644
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -1,18 +1,35 @@
 import React from 'react'
+import Box from '@mui/material/Box'
+import { useSelector } from 'react-redux'
 import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
 
+const drawerWidth = 256
+
 const DefaultLayout = () => {
+  const sidebarShow = useSelector((state) => state.sidebarShow)
+
   return (
-    <div>
+    <Box sx={{ display: 'flex' }}>
       <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100">
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
+          width: { sm: `calc(100% - ${sidebarShow ? drawerWidth : 0}px)` },
+          ml: { sm: sidebarShow ? `${drawerWidth}px` : 0 },
+          transition: 'margin-left 0.3s, width 0.3s',
+        }}
+      >
         <AppHeader />
-        <div className="body flex-grow-1">
+        <Box sx={{ flexGrow: 1, p: 3 }}>
           <AppContent />
-        </div>
+        </Box>
         <AppFooter />
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }
 
diff --git a/src/scss/examples.scss b/src/scss/examples.scss
index 83e43f34e8..e37fd9c25d 100644
--- a/src/scss/examples.scss
+++ b/src/scss/examples.scss
@@ -1,116 +1,21 @@
-/* stylelint-disable scss/selector-no-redundant-nesting-selector */
-@use "@coreui/coreui/scss/variables" as * with (
-  $enable-deprecation-messages: false
-);
-@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-@use "@coreui/coreui/scss/mixins/color-mode" as *;
+/* MUI-based examples styling - CoreUI has been removed */
 
 .example {
-  &:not(:first-child) {
-    margin-top: 1.5rem;
-  }
-
-  .tab-content {
-    background-color: var(--#{$prefix}tertiary-bg);
-  }
-
-  & + p {
-    margin-top: 1.5rem;
-  }
-
-  // Components examples
-  .preview {
-    + p {
-      margin-top: 2rem;
-    }
-
-    > .form-control {
-      + .form-control {
-        margin-top: .5rem;
-      }
-    }
-
-    > .nav + .nav,
-    > .alert + .alert,
-    > .navbar + .navbar,
-    > .progress + .progress {
-      margin-top: 1rem;
-    }
-
-    > .dropdown-menu {
-      position: static;
-      display: block;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-
-    // Images
-    > svg + svg,
-    > img + img {
-      margin-left: .5rem;
-    }
-
-    // Buttons
-    .col > .btn,
-    .col-auto > .btn,
-    > .btn,
-    > .btn-group {
-      margin: .25rem .125rem;
-    }
-    > .btn-toolbar + .btn-toolbar {
-      margin-top: .5rem;
-    }
-
-    // List groups
-    > .list-group {
-      max-width: 400px;
-    }
-
-    > [class*="list-group-horizontal"] {
-      max-width: 100%;
-    }
-
-    // Navbars
-    .fixed-top,
-    .sticky-top {
-      position: static;
-      margin: -1rem -1rem 1rem;
-    }
-
-    .fixed-bottom {
-      position: static;
-      margin: 1rem -1rem -1rem;
-    }
+  margin-top: 1.5rem;
+}
 
-    @include media-breakpoint-up(sm) {
-      .fixed-top,
-      .sticky-top {
-        margin: -1.5rem -1.5rem 1rem;
-      }
-      .fixed-bottom {
-        margin: 1rem -1.5rem -1.5rem;
-      }
-    }
+.example + p {
+  margin-top: 1.5rem;
+}
 
-    // Pagination
-    .pagination {
-      margin-top: .5rem;
-      margin-bottom: .5rem;
-    }
+.preview {
+  padding: 1rem;
+}
 
-    .docs-example-modal {
-      .modal {
-        position: static;
-        display: block;
-      }
-    }
-  }
+.preview + p {
+  margin-top: 2rem;
 }
 
-@include color-mode(dark) {
-  .example .tab-content {
-    background-color: var(--#{$prefix}secondary-bg);
-  }
+.preview > :last-child {
+  margin-bottom: 0;
 }
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 6b8f2b2e53..043c2ef42d 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,67 +1,23 @@
-@use "@coreui/coreui/scss/coreui" as * with ( 
-  $enable-deprecation-messages: false,
-);
-@use "@coreui/chartjs/scss/coreui-chartjs";
-@use "vendors/simplebar";
+/* MUI-based styling - CoreUI has been removed */
 
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-header {
-  .nav-underline-border {
-    --cui-nav-underline-border-link-padding-x: 1rem;
-    --cui-nav-underline-border-gap: 0;
-  }
-
-  .nav-link {
-    display: flex;
-    align-items: center;
-    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-  }
-}
-
-.sidebar-toggler {
-  margin-inline-start: auto;
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    margin-inline-end: auto;
-  }
+* {
+  box-sizing: border-box;
 }
 
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
 
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+a {
+  text-decoration: none;
+  color: inherit;
 }
 
-@include color-mode(dark) {
-  body {
-    background-color: var(--cui-dark-bg-subtle);
-  }
-
-  .footer {
-    --cui-footer-bg: var(--cui-body-bg);
-  }
+.wrapper {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000000..e804f0e76b
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,145 @@
+import { createTheme } from '@mui/material/styles'
+
+const getDesignTokens = (mode) => ({
+  palette: {
+    mode,
+    ...(mode === 'light'
+      ? {
+          primary: {
+            main: '#321fdb',
+            light: '#5850ec',
+            dark: '#2819b0',
+          },
+          secondary: {
+            main: '#9da5b1',
+            light: '#c4c9d0',
+            dark: '#636f83',
+          },
+          success: {
+            main: '#2eb85c',
+            light: '#51c97a',
+            dark: '#1e9c4a',
+          },
+          info: {
+            main: '#39f',
+            light: '#66b0ff',
+            dark: '#0080ff',
+          },
+          warning: {
+            main: '#f9b115',
+            light: '#fac043',
+            dark: '#d99a0e',
+          },
+          error: {
+            main: '#e55353',
+            light: '#ea7575',
+            dark: '#c93c3c',
+          },
+          background: {
+            default: '#ebedef',
+            paper: '#ffffff',
+          },
+          text: {
+            primary: '#3c4b64',
+            secondary: '#768192',
+          },
+        }
+      : {
+          primary: {
+            main: '#5c6bc0',
+            light: '#8e99c4',
+            dark: '#3949ab',
+          },
+          secondary: {
+            main: '#9da5b1',
+            light: '#c4c9d0',
+            dark: '#636f83',
+          },
+          success: {
+            main: '#2eb85c',
+            light: '#51c97a',
+            dark: '#1e9c4a',
+          },
+          info: {
+            main: '#39f',
+            light: '#66b0ff',
+            dark: '#0080ff',
+          },
+          warning: {
+            main: '#f9b115',
+            light: '#fac043',
+            dark: '#d99a0e',
+          },
+          error: {
+            main: '#e55353',
+            light: '#ea7575',
+            dark: '#c93c3c',
+          },
+          background: {
+            default: '#212631',
+            paper: '#2c3240',
+          },
+          text: {
+            primary: '#ffffff',
+            secondary: '#b0b8c4',
+          },
+        }),
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    h1: {
+      fontSize: '2.5rem',
+      fontWeight: 500,
+    },
+    h2: {
+      fontSize: '2rem',
+      fontWeight: 500,
+    },
+    h3: {
+      fontSize: '1.75rem',
+      fontWeight: 500,
+    },
+    h4: {
+      fontSize: '1.5rem',
+      fontWeight: 500,
+    },
+    h5: {
+      fontSize: '1.25rem',
+      fontWeight: 500,
+    },
+    h6: {
+      fontSize: '1rem',
+      fontWeight: 500,
+    },
+  },
+  shape: {
+    borderRadius: 4,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          width: 256,
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none',
+        },
+      },
+    },
+  },
+})
+
+export const createAppTheme = (mode) => createTheme(getDesignTokens(mode))
+
+export default createAppTheme
diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js
index edcb5e7aeb..11bba749c7 100644
--- a/src/views/base/accordion/Accordion.js
+++ b/src/views/base/accordion/Accordion.js
@@ -1,177 +1,51 @@
 import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CRow,
-  CAccordion,
-  CAccordionBody,
-  CAccordionHeader,
-  CAccordionItem,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import MuiAccordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import Typography from '@mui/material/Typography'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { DocsExample } from 'src/components'
 
 const Accordion = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/accordion/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Accordion</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Click the accordions below to expand/collapse the accordion content.
-            </p>
-            <DocsExample href="components/accordion">
-              <CAccordion activeItemKey={2}>
-                <CAccordionItem itemKey={1}>
-                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-                <CAccordionItem itemKey={2}>
-                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-                <CAccordionItem itemKey={3}>
-                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-              </CAccordion>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Accordion</strong> <small>Flush</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>flush</code> to remove the default <code>background-color</code>, some
-              borders, and some rounded corners to render accordions edge-to-edge with their parent
-              container.
-            </p>
-            <DocsExample href="components/accordion#flush">
-              <CAccordion flush>
-                <CAccordionItem itemKey={1}>
-                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-                <CAccordionItem itemKey={2}>
-                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-                <CAccordionItem itemKey={3}>
-                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-              </CAccordion>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Accordion</strong> <small>Always open</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>alwaysOpen</code> property to make accordion items stay open when another
-              item is opened.
-            </p>
-            <DocsExample href="components/accordion#flush">
-              <CAccordion alwaysOpen>
-                <CAccordionItem itemKey={1}>
-                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-                <CAccordionItem itemKey={2}>
-                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-                <CAccordionItem itemKey={3}>
-                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-                  <CAccordionBody>
-                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
-                    default, until the collapse plugin adds the appropriate classes that we use to
-                    style each element. These classes control the overall appearance, as well as the
-                    showing and hiding via CSS transitions. You can modify any of this with custom
-                    CSS or overriding our default variables. It&#39;s also worth noting that just
-                    about any HTML can go within the <code>.accordion-body</code>, though the
-                    transition does limit overflow.
-                  </CAccordionBody>
-                </CAccordionItem>
-              </CAccordion>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Accordion" />
+      <CardContent>
+        <DocsExample href="components/accordion">
+          <MuiAccordion defaultExpanded>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography>Accordion Item #1</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography>
+                This is the first item&apos;s accordion body. It is shown by default.
+              </Typography>
+            </AccordionDetails>
+          </MuiAccordion>
+          <MuiAccordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography>Accordion Item #2</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography>This is the second item&apos;s accordion body.</Typography>
+            </AccordionDetails>
+          </MuiAccordion>
+          <MuiAccordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography>Accordion Item #3</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography>This is the third item&apos;s accordion body.</Typography>
+            </AccordionDetails>
+          </MuiAccordion>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js
index 3e1df44754..d7fb97de70 100644
--- a/src/views/base/breadcrumbs/Breadcrumbs.js
+++ b/src/views/base/breadcrumbs/Breadcrumbs.js
@@ -1,74 +1,37 @@
 import React from 'react'
-import {
-  CBreadcrumb,
-  CBreadcrumbItem,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CRow,
-  CLink,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs'
+import Link from '@mui/material/Link'
+import Typography from '@mui/material/Typography'
+
+import { DocsExample } from 'src/components'
 
 const Breadcrumbs = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/breadcrumb/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Breadcrumb</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The breadcrumb navigation provides links back to each previous page the user navigated
-              through and shows the current location in a website or an application. You don’t have
-              to add separators, because they automatically added in CSS through{' '}
-              <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
-                {' '}
-                <code>::before</code>
-              </a>{' '}
-              and{' '}
-              <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
-                {' '}
-                <code>content</code>
-              </a>
-              .
-            </p>
-            <DocsExample href="components/breadcrumb">
-              <CBreadcrumb>
-                <CBreadcrumbItem>
-                  <CLink href="#">Home</CLink>
-                </CBreadcrumbItem>
-                <CBreadcrumbItem active>Library</CBreadcrumbItem>
-              </CBreadcrumb>
-              <CBreadcrumb>
-                <CBreadcrumbItem>
-                  <CLink href="#">Home</CLink>
-                </CBreadcrumbItem>
-                <CBreadcrumbItem>
-                  <CLink href="#">Library</CLink>
-                </CBreadcrumbItem>
-                <CBreadcrumbItem active>Data</CBreadcrumbItem>
-              </CBreadcrumb>
-              <CBreadcrumb>
-                <CBreadcrumbItem>
-                  <CLink href="#">Home</CLink>
-                </CBreadcrumbItem>
-                <CBreadcrumbItem>
-                  <CLink href="#">Library</CLink>
-                </CBreadcrumbItem>
-                <CBreadcrumbItem>
-                  <CLink href="#">Data</CLink>
-                </CBreadcrumbItem>
-                <CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
-              </CBreadcrumb>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Breadcrumbs" />
+      <CardContent>
+        <DocsExample href="components/breadcrumb">
+          <MuiBreadcrumbs aria-label="breadcrumb">
+            <Link underline="hover" color="inherit" href="#">
+              Home
+            </Link>
+            <Typography color="text.primary">Library</Typography>
+          </MuiBreadcrumbs>
+          <MuiBreadcrumbs aria-label="breadcrumb" sx={{ mt: 2 }}>
+            <Link underline="hover" color="inherit" href="#">
+              Home
+            </Link>
+            <Link underline="hover" color="inherit" href="#">
+              Library
+            </Link>
+            <Typography color="text.primary">Data</Typography>
+          </MuiBreadcrumbs>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js
index daf44f60ef..d57a2aa306 100644
--- a/src/views/base/cards/Cards.js
+++ b/src/views/base/cards/Cards.js
@@ -1,934 +1,80 @@
 import React from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardGroup,
-  CCardHeader,
-  CCardImage,
-  CCardLink,
-  CCardSubtitle,
-  CCardText,
-  CCardTitle,
-  CListGroup,
-  CListGroupItem,
-  CNav,
-  CNavItem,
-  CNavLink,
-  CCol,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import CardActions from '@mui/material/CardActions'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
 
-import ReactImg from 'src/assets/images/react.jpg'
+import { DocsExample } from 'src/components'
 
 const Cards = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/card/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Example</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Cards are built with as little markup and styles as possible but still manage to
-              deliver a bunch of control and customization. Built with flexbox, they offer easy
-              alignment and mix well with other CoreUI components. Cards have no top, left, and
-              right margins by default, so use{' '}
-              <a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed.
-              They have no fixed width to start, so they&#39;ll fill the full width of its parent.
-            </p>
-            <p className="text-body-secondary small">
-              Below is an example of a basic card with mixed content and a fixed width. Cards have
-              no fixed width to start, so they&#39;ll naturally fill the full width of its parent
-              element.
-            </p>
-            <DocsExample href="components/card">
-              <CCard style={{ width: '18rem' }}>
-                <CCardImage orientation="top" src={ReactImg} />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Cards" />
+      <CardContent>
+        <DocsExample href="components/card">
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+              <Card>
+                <CardContent>
+                  <Typography variant="h6" gutterBottom>
+                    Card title
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
                     Some quick example text to build on the card title and make up the bulk of the
-                    card&#39;s content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
+                    card&apos;s content.
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button size="small" variant="contained">
                     Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Body</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you
-              need a padded section within a card.
-            </p>
-            <DocsExample href="components/card/#body">
-              <CCard>
-                <CCardBody>This is some text within a card body.</CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Titles, text, and links</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Card titles are managed by <code>&lt;CCardTitle&gt;</code> component. Identically,
-              links are attached and collected next to each other by <code>&lt;CCardLink&gt;</code>{' '}
-              component.
-            </p>
-            <p className="text-body-secondary small">
-              Subtitles are managed by <code>&lt;CCardSubtitle&gt;</code> component. If the{' '}
-              <code>&lt;CCardTitle&gt;</code> also, the <code>&lt;CCardSubtitle&gt;</code> items are
-              stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
-              arranged rightly.
-            </p>
-            <DocsExample href="components/card/#titles-text-and-links">
-              <CCard style={{ width: '18rem' }}>
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
-                  <CCardText>
-                    Some quick example text to build on the card title and make up the bulk of the
-                    card&#39;s content.
-                  </CCardText>
-                  <CCardLink href="#">Card link</CCardLink>
-                  <CCardLink href="#">Another link</CCardLink>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Images</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              <code>.card-img-top</code> places a picture to the top of the card. With{' '}
-              <code>.card-text</code>, text can be added to the card. Text within{' '}
-              <code>.card-text</code> can additionally be styled with the regular HTML tags.
-            </p>
-            <DocsExample href="components/card/#images">
-              <CCard style={{ width: '18rem' }}>
-                <CCardImage orientation="top" src={ReactImg} />
-                <CCardBody>
-                  <CCardText>
-                    Some quick example text to build on the card title and make up the bulk of the
-                    card&#39;s content.
-                  </CCardText>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>List groups</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create lists of content in a card with a flush list group.
-            </p>
-            <DocsExample href="components/card/#list-groups">
-              <CRow>
-                <CCol lg={4}>
-                  <CCard>
-                    <CListGroup flush>
-                      <CListGroupItem>Cras justo odio</CListGroupItem>
-                      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                      <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                    </CListGroup>
-                  </CCard>
-                </CCol>
-                <CCol lg={4}>
-                  <CCard>
-                    <CCardHeader>Header</CCardHeader>
-                    <CListGroup flush>
-                      <CListGroupItem>Cras justo odio</CListGroupItem>
-                      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                      <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                    </CListGroup>
-                  </CCard>
-                </CCol>
-                <CCol lg={4}>
-                  <CCard>
-                    <CListGroup flush>
-                      <CListGroupItem>Cras justo odio</CListGroupItem>
-                      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                      <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                    </CListGroup>
-                    <CCardFooter>Footer</CCardFooter>
-                  </CCard>
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Kitchen sink</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Combine and match many content types to build the card you need, or throw everything
-              in there. Shown below are image styles, blocks, text styles, and a list group—all
-              wrapped in a fixed-width card.
-            </p>
-            <DocsExample href="components/card/#kitchen-sink">
-              <CCard style={{ width: '18rem' }}>
-                <CCardImage orientation="top" src={ReactImg} />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    Some quick example text to build on the card title and make up the bulk of the
-                    card&#39;s content.
-                  </CCardText>
-                </CCardBody>
-                <CListGroup flush>
-                  <CListGroupItem>Cras justo odio</CListGroupItem>
-                  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                  <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                </CListGroup>
-                <CCardBody>
-                  <CCardLink href="#">Card link</CCardLink>
-                  <CCardLink href="#">Another link</CCardLink>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Header and footer</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add an optional header and/or footer within a card.
-            </p>
-            <DocsExample href="components/card/#header-and-footer">
-              <CCard>
-                <CCardHeader>Header</CCardHeader>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Card headers can be styled by adding ex. <code>as=&#34;h5&#34;</code>.
-            </p>
-            <DocsExample href="components/card/#header-and-footer">
-              <CCard>
-                <CCardHeader as="h5">Header</CCardHeader>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-            <DocsExample href="components/card/#header-and-footer">
-              <CCard>
-                <CCardHeader>Quote</CCardHeader>
-                <CCardBody>
-                  <blockquote className="blockquote mb-0">
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
-                      a ante.
-                    </p>
-                    <footer className="blockquote-footer">
-                      Someone famous in <cite title="Source Title">Source Title</cite>
-                    </footer>
-                  </blockquote>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-            <DocsExample href="components/card/#header-and-footer">
-              <CCard className="text-center">
-                <CCardHeader>Header</CCardHeader>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-                <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Body</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide
-              unless otherwise stated. You can adjust this as required with custom CSS, grid
-              classes, grid Sass mixins, or services.
-            </p>
-            <h3>Using grid markup</h3>
-            <p className="text-body-secondary small">
-              Using the grid, wrap cards in columns and rows as needed.
-            </p>
-            <DocsExample href="components/card/#sizing">
-              <CRow>
-                <CCol sm={6}>
-                  <CCard>
-                    <CCardBody>
-                      <CCardTitle>Special title treatment</CCardTitle>
-                      <CCardText>
-                        With supporting text below as a natural lead-in to additional content.
-                      </CCardText>
-                      <CButton color="primary" href="#">
-                        Go somewhere
-                      </CButton>
-                    </CCardBody>
-                  </CCard>
-                </CCol>
-                <CCol sm={6}>
-                  <CCard>
-                    <CCardBody>
-                      <CCardTitle>Special title treatment</CCardTitle>
-                      <CCardText>
-                        With supporting text below as a natural lead-in to additional content.
-                      </CCardText>
-                      <CButton color="primary" href="#">
-                        Go somewhere
-                      </CButton>
-                    </CCardBody>
-                  </CCard>
-                </CCol>
-              </CRow>
-            </DocsExample>
-            <h3>Using utilities</h3>
-            <p className="text-body-secondary small">
-              Use some of{' '}
-              <a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to
-              rapidly set a card&#39;s width.
-            </p>
-            <DocsExample href="components/card/#sizing">
-              <CCard className="w-75">
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-              <CCard className="w-50">
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-            <strong>Using custom CSS</strong>
-            <p className="text-body-secondary small">
-              Use custom CSS in your stylesheets or as inline styles to set a width.
-            </p>
-            <DocsExample href="components/card/#sizing">
-              <CCard style={{ width: '18rem' }}>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Text alignment</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You can instantly change the text arrangement of any card—in its whole or specific
-              parts—with{' '}
-              <a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
-              .
-            </p>
-            <DocsExample href="components/card/#text-alignment">
-              <CCard style={{ width: '18rem' }}>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-              <CCard className="text-center" style={{ width: '18rem' }}>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-              <CCard className="text-end" style={{ width: '18rem' }}>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Navigation</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '}
-              <code>&lt;CNav&gt;</code> component.
-            </p>
-            <DocsExample href="components/card/##navigation">
-              <CCard className="text-center">
-                <CCardHeader>
-                  <CNav variant="tabs" className="card-header-tabs">
-                    <CNavItem>
-                      <CNavLink href="#" active>
-                        Active
-                      </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                      <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                      <CNavLink href="#" disabled>
-                        Disabled
-                      </CNavLink>
-                    </CNavItem>
-                  </CNav>
-                </CCardHeader>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
+                  </Button>
+                </CardActions>
+              </Card>
+            </Grid>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+              <Card>
+                <CardContent>
+                  <Typography variant="h6" gutterBottom>
+                    Card title
+                  </Typography>
+                  <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+                    Card subtitle
+                  </Typography>
+                  <Typography variant="body2">
+                    Some quick example text to build on the card title.
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button size="small">Card link</Button>
+                  <Button size="small">Another link</Button>
+                </CardActions>
+              </Card>
+            </Grid>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+              <Card>
+                <CardHeader title="Featured" />
+                <CardContent>
+                  <Typography variant="h5" gutterBottom>
+                    Special title treatment
+                  </Typography>
+                  <Typography variant="body2">
                     With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-            <DocsExample href="components/card/##navigation">
-              <CCard className="text-center">
-                <CCardHeader>
-                  <CNav variant="pills" className="card-header-pills">
-                    <CNavItem>
-                      <CNavLink href="#" active>
-                        Active
-                      </CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                      <CNavLink href="#">Link</CNavLink>
-                    </CNavItem>
-                    <CNavItem>
-                      <CNavLink href="#" disabled>
-                        Disabled
-                      </CNavLink>
-                    </CNavItem>
-                  </CNav>
-                </CCardHeader>
-                <CCardBody>
-                  <CCardTitle>Special title treatment</CCardTitle>
-                  <CCardText>
-                    With supporting text below as a natural lead-in to additional content.
-                  </CCardText>
-                  <CButton color="primary" href="#">
-                    Go somewhere
-                  </CButton>
-                </CCardBody>
-              </CCard>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Image caps</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Similar to headers and footers, cards can include top and bottom &#34;image
-              caps&#34;—images at the top or bottom of a card.
-            </p>
-            <DocsExample href="components/card/#image-caps">
-              <CRow>
-                <CCol lg={6}>
-                  <CCard className="mb-3">
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                      <CCardText>
-                        <small className="text-body-secondary">Last updated 3 mins ago</small>
-                      </CCardText>
-                    </CCardBody>
-                  </CCard>
-                </CCol>
-                <CCol lg={6}>
-                  <CCard className="mb-3">
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                      <CCardText>
-                        <small className="text-body-secondary">Last updated 3 mins ago</small>
-                      </CCardText>
-                    </CCardBody>
-                    <CCardImage orientation="bottom" src={ReactImg} />
-                  </CCard>
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Card styles</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Cards include various options for customizing their backgrounds, borders, and color.
-            </p>
-            <h3>Background and color</h3>
-            <p className="text-body-secondary small">
-              Use <code>color</code> property to change the appearance of a card.
-            </p>
-            <DocsExample href="components/card/#background-and-color">
-              <CRow>
-                {[
-                  { color: 'primary', textColor: 'white' },
-                  { color: 'secondary', textColor: 'white' },
-                  { color: 'success', textColor: 'white' },
-                  { color: 'danger', textColor: 'white' },
-                  { color: 'warning' },
-                  { color: 'info', textColor: 'white' },
-                  { color: 'light' },
-                  { color: 'dark', textColor: 'white' },
-                ].map((item, index) => (
-                  <CCol lg={4} key={index}>
-                    <CCard color={item.color} textColor={item.textColor} className="mb-3">
-                      <CCardHeader>Header</CCardHeader>
-                      <CCardBody>
-                        <CCardTitle>{item.color} card title</CCardTitle>
-                        <CCardText>
-                          Some quick example text to build on the card title and make up the bulk of
-                          the card&#39;s content.
-                        </CCardText>
-                      </CCardBody>
-                    </CCard>
-                  </CCol>
-                ))}
-              </CRow>
-            </DocsExample>
-            <h3>Border</h3>
-            <p className="text-body-secondary small">
-              Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
-              just the <code>border-color</code> of a card. Note that you can set{' '}
-              <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
-              card&#39;s contents as shown below.
-            </p>
-            <DocsExample href="components/card/#border">
-              <CRow>
-                {[
-                  { color: 'primary', textColor: 'primary' },
-                  { color: 'secondary', textColor: 'secondary' },
-                  { color: 'success', textColor: 'success' },
-                  { color: 'danger', textColor: 'danger' },
-                  { color: 'warning', textColor: 'warning' },
-                  { color: 'info', textColor: 'info' },
-                  { color: 'light' },
-                  { color: 'dark' },
-                ].map((item, index) => (
-                  <CCol lg={4} key={index}>
-                    <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
-                      <CCardHeader>Header</CCardHeader>
-                      <CCardBody>
-                        <CCardTitle>{item.color} card title</CCardTitle>
-                        <CCardText>
-                          Some quick example text to build on the card title and make up the bulk of
-                          the card&#39;s content.
-                        </CCardText>
-                      </CCardBody>
-                    </CCard>
-                  </CCol>
-                ))}
-              </CRow>
-            </DocsExample>
-            <h3>Top border</h3>
-            <p className="text-body-secondary small">
-              Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
-              just the <code>border-color</code> of a card. Note that you can set{' '}
-              <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
-              card&#39;s contents as shown below.
-            </p>
-            <DocsExample href="components/card/#top-border">
-              <CRow>
-                {[
-                  { color: 'primary', textColor: 'primary' },
-                  { color: 'secondary', textColor: 'secondary' },
-                  { color: 'success', textColor: 'success' },
-                  { color: 'danger', textColor: 'danger' },
-                  { color: 'warning', textColor: 'warning' },
-                  { color: 'info', textColor: 'info' },
-                  { color: 'light' },
-                  { color: 'dark' },
-                ].map((item, index) => (
-                  <CCol lg={4} key={index}>
-                    <CCard
-                      textColor={item.textColor}
-                      className={`mb-3 border-top-${item.color} border-top-3`}
-                    >
-                      <CCardHeader>Header</CCardHeader>
-                      <CCardBody>
-                        <CCardTitle>{item.color} card title</CCardTitle>
-                        <CCardText>
-                          Some quick example text to build on the card title and make up the bulk of
-                          the card&#39;s content.
-                        </CCardText>
-                      </CCardBody>
-                    </CCard>
-                  </CCol>
-                ))}
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Card groups</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use card groups to render cards as a single, attached element with equal width and
-              height columns. Card groups start off stacked and use <code>display: flex;</code> to
-              become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
-            </p>
-            <DocsExample href="components/card/#card-groups">
-              <CCardGroup>
-                <CCard>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a natural lead-in to
-                      additional content. This content is a little bit longer.
-                    </CCardText>
-                    <CCardText>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardText>
-                  </CCardBody>
-                </CCard>
-                <CCard>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This card has supporting text below as a natural lead-in to additional
-                      content.
-                    </CCardText>
-                    <CCardText>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardText>
-                  </CCardBody>
-                </CCard>
-                <CCard>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a natural lead-in to
-                      additional content. This card has even longer content than the first to show
-                      that equal height action.
-                    </CCardText>
-                    <CCardText>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardText>
-                  </CCardBody>
-                </CCard>
-              </CCardGroup>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              When using card groups with footers, their content will automatically line up.
-            </p>
-            <DocsExample href="components/card/#card-groups">
-              <CCardGroup>
-                <CCard>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a natural lead-in to
-                      additional content. This content is a little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small className="text-body-secondary">Last updated 3 mins ago</small>
-                  </CCardFooter>
-                </CCard>
-                <CCard>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This card has supporting text below as a natural lead-in to additional
-                      content.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small className="text-body-secondary">Last updated 3 mins ago</small>
-                  </CCardFooter>
-                </CCard>
-                <CCard>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a natural lead-in to
-                      additional content. This card has even longer content than the first to show
-                      that equal height action.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small className="text-body-secondary">Last updated 3 mins ago</small>
-                  </CCardFooter>
-                </CCard>
-              </CCardGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Card</strong> <small>Grid cards</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use the <code>CRow</code> component and set{' '}
-              <code>&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: * &#125;&#125;</code> property
-              to control how many grid columns (wrapped around your cards) you show per row. For
-              example, here&#39;s <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the
-              cards on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting
-              four cards to equal width across multiple rows, from the medium breakpoint up.
-            </p>
-            <DocsExample href="components/card/#grid-cards">
-              <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-              </CRow>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you&#39;ll see the
-              fourth card wrap.
-            </p>
-            <DocsExample href="components/card/#grid-cards">
-              <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-                <CCol xs>
-                  <CCard>
-                    <CCardImage orientation="top" src={ReactImg} />
-                    <CCardBody>
-                      <CCardTitle>Card title</CCardTitle>
-                      <CCardText>
-                        This is a wider card with supporting text below as a natural lead-in to
-                        additional content. This content is a little bit longer.
-                      </CCardText>
-                    </CCardBody>
-                    <CCardFooter>
-                      <small className="text-body-secondary">Last updated 3 mins ago</small>
-                    </CCardFooter>
-                  </CCard>
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button variant="contained">Go somewhere</Button>
+                </CardActions>
+              </Card>
+            </Grid>
+          </Grid>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js
index 6d8763902d..7f1d7f113f 100644
--- a/src/views/base/carousels/Carousels.js
+++ b/src/views/base/carousels/Carousels.js
@@ -1,212 +1,29 @@
 import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCarousel,
-  CCarouselCaption,
-  CCarouselItem,
-  CCol,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
 
-import AngularImg from 'src/assets/images/angular.jpg'
-import ReactImg from 'src/assets/images/react.jpg'
-import VueImg from 'src/assets/images/vue.jpg'
-
-const slidesLight = [
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-]
+import { DocsExample } from 'src/components'
 
 const Carousels = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/carousel/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Carousel</strong> <small>Slide only</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">Here’s a carousel with slides</p>
-            <DocsExample href="components/carousel">
-              <CCarousel>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
-                </CCarouselItem>
-              </CCarousel>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Carousel</strong> <small>With controls</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Adding in the previous and next controls by <code>controls</code> property.
-            </p>
-            <DocsExample href="components/carousel/#with-controls">
-              <CCarousel controls>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
-                </CCarouselItem>
-              </CCarousel>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Carousel</strong> <small>With indicators</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You can attach the indicators to the carousel, lengthwise the controls, too.
-            </p>
-            <DocsExample href="components/carousel/#with-indicators">
-              <CCarousel controls indicators>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
-                </CCarouselItem>
-              </CCarousel>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Carousel</strong> <small>With captions</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
-              within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
-              smaller viewports, as shown below, with optional{' '}
-              <a href="https://coreui.io//utilities/display">display utilities</a>. We hide them
-              with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
-              <code>.d-md-block</code>.
-            </p>
-            <DocsExample href="components/carousel/#with-captions">
-              <CCarousel controls indicators>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
-                  <CCarouselCaption className="d-none d-md-block">
-                    <h5>First slide label</h5>
-                    <p>Some representative placeholder content for the first slide.</p>
-                  </CCarouselCaption>
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
-                  <CCarouselCaption className="d-none d-md-block">
-                    <h5>Second slide label</h5>
-                    <p>Some representative placeholder content for the first slide.</p>
-                  </CCarouselCaption>
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
-                  <CCarouselCaption className="d-none d-md-block">
-                    <h5>Third slide label</h5>
-                    <p>Some representative placeholder content for the first slide.</p>
-                  </CCarouselCaption>
-                </CCarouselItem>
-              </CCarousel>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Carousel</strong> <small>Crossfade</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
-              with a fade transition instead of a slide.
-            </p>
-            <DocsExample href="components/carousel/#crossfade">
-              <CCarousel controls transition="crossfade">
-                <CCarouselItem>
-                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
-                </CCarouselItem>
-              </CCarousel>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Carousel</strong> <small>Dark variant</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>dark</code> property to the <code>CCarousel</code> for darker controls,
-              indicators, and captions. Controls have been inverted from their default white fill
-              with the <code>filter</code> CSS property. Captions and controls have additional Sass
-              variables that customize the <code>color</code> and <code>background-color</code>.
-            </p>
-            <DocsExample href="components/carousel/#dark-variant">
-              <CCarousel controls indicators dark>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={slidesLight[0]} alt="slide 1" />
-                  <CCarouselCaption className="d-none d-md-block">
-                    <h5>First slide label</h5>
-                    <p>Some representative placeholder content for the first slide.</p>
-                  </CCarouselCaption>
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={slidesLight[1]} alt="slide 2" />
-                  <CCarouselCaption className="d-none d-md-block">
-                    <h5>Second slide label</h5>
-                    <p>Some representative placeholder content for the first slide.</p>
-                  </CCarouselCaption>
-                </CCarouselItem>
-                <CCarouselItem>
-                  <img className="d-block w-100" src={slidesLight[2]} alt="slide 3" />
-                  <CCarouselCaption className="d-none d-md-block">
-                    <h5>Third slide label</h5>
-                    <p>Some representative placeholder content for the first slide.</p>
-                  </CCarouselCaption>
-                </CCarouselItem>
-              </CCarousel>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Carousels" />
+      <CardContent>
+        <DocsExample href="components/carousel">
+          <Typography variant="body2" color="text.secondary">
+            MUI does not have a built-in carousel component. Consider using a third-party library
+            like react-slick or swiper for carousel functionality.
+          </Typography>
+          <Box sx={{ p: 4, bgcolor: 'grey.200', borderRadius: 1, textAlign: 'center', mt: 2 }}>
+            <Typography variant="h6">Carousel Placeholder</Typography>
+            <Typography variant="body2">Slide content would appear here</Typography>
+          </Box>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js
index d36f48f4a5..d5608a15ce 100644
--- a/src/views/base/collapses/Collapses.js
+++ b/src/views/base/collapses/Collapses.js
@@ -1,135 +1,36 @@
 import React, { useState } from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Collapse from '@mui/material/Collapse'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+import { DocsExample } from 'src/components'
 
 const Collapses = () => {
-  const [visible, setVisible] = useState(false)
-  const [visibleHorizontal, setVisibleHorizontal] = useState(false)
-  const [visibleA, setVisibleA] = useState(false)
-  const [visibleB, setVisibleB] = useState(false)
+  const [open, setOpen] = useState(false)
 
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/collapse/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Collapse</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">You can use a link or a button component.</p>
-            <DocsExample href="components/collapse">
-              <CButton
-                color="primary"
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault()
-                  setVisible(!visible)
-                }}
-              >
-                Link
-              </CButton>
-              <CButton color="primary" onClick={() => setVisible(!visible)}>
-                Button
-              </CButton>
-              <CCollapse visible={visible}>
-                <CCard className="mt-3">
-                  <CCardBody>
-                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                    richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
-                    anderson cred nesciunt sapiente ea proident.
-                  </CCardBody>
-                </CCard>
-              </CCollapse>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Collapse</strong> <small> Horizontal</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">You can use a link or a button component.</p>
-            <DocsExample href="components/collapse#horizontal">
-              <CButton
-                className="mb-3"
-                color="primary"
-                onClick={() => setVisibleHorizontal(!visibleHorizontal)}
-                aria-expanded={visibleHorizontal}
-                aria-controls="collapseWidthExample"
-              >
-                Button
-              </CButton>
-              <div style={{ minHeight: '120px' }}>
-                <CCollapse id="collapseWidthExample" horizontal visible={visibleHorizontal}>
-                  <CCard style={{ width: '300px' }}>
-                    <CCardBody>
-                      This is some placeholder content for a horizontal collapse. It&#39;s hidden by
-                      default and shown when triggered.
-                    </CCardBody>
-                  </CCard>
-                </CCollapse>
-              </div>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Collapse</strong> <small> multi target</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
-            </p>
-            <DocsExample href="components/collapse#multiple-targets">
-              <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
-                Toggle first element
-              </CButton>
-              <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
-                Toggle second element
-              </CButton>
-              <CButton
-                color="primary"
-                onClick={() => {
-                  setVisibleA(!visibleA)
-                  setVisibleB(!visibleB)
-                }}
-              >
-                Toggle both elements
-              </CButton>
-              <CRow>
-                <CCol xs={6}>
-                  <CCollapse visible={visibleA}>
-                    <CCard className="mt-3">
-                      <CCardBody>
-                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                        richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
-                        anderson cred nesciunt sapiente ea proident.
-                      </CCardBody>
-                    </CCard>
-                  </CCollapse>
-                </CCol>
-                <CCol xs={6}>
-                  <CCollapse visible={visibleB}>
-                    <CCard className="mt-3">
-                      <CCardBody>
-                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                        richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
-                        anderson cred nesciunt sapiente ea proident.
-                      </CCardBody>
-                    </CCard>
-                  </CCollapse>
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Collapse" />
+      <CardContent>
+        <DocsExample href="components/collapse">
+          <Button variant="contained" onClick={() => setOpen(!open)} sx={{ mb: 2 }}>
+            Toggle Collapse
+          </Button>
+          <Collapse in={open}>
+            <Box sx={{ p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
+              <Typography>
+                This is some placeholder content for a horizontal collapse. It&apos;s hidden by
+                default and shown when triggered.
+              </Typography>
+            </Box>
+          </Collapse>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js
index a25e8bd6ef..b341b641eb 100644
--- a/src/views/base/list-groups/ListGroups.js
+++ b/src/views/base/list-groups/ListGroups.js
@@ -1,346 +1,79 @@
 import React from 'react'
-import {
-  CBadge,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CFormCheck,
-  CListGroup,
-  CListGroupItem,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemButton from '@mui/material/ListItemButton'
+import Chip from '@mui/material/Chip'
+import Grid from '@mui/material/Grid'
+
+import { DocsExample } from 'src/components'
 
 const ListGroups = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/list-group/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Basic example</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The default list group is an unordered list with items and the proper CSS classes.
-              Build upon it with the options that follow, or with your CSS as required.
-            </p>
-            <DocsExample href="components/list-group">
-              <CListGroup>
-                <CListGroupItem>Cras justo odio</CListGroupItem>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem>Morbi leo risus</CListGroupItem>
-                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                <CListGroupItem>Vestibulum at eros</CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Active items</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
-              show the current active selection.
-            </p>
-            <DocsExample href="components/list-group/#active-items">
-              <CListGroup>
-                <CListGroupItem active>Cras justo odio</CListGroupItem>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem>Morbi leo risus</CListGroupItem>
-                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                <CListGroupItem>Vestibulum at eros</CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Disabled items</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
-              make it appear disabled.
-            </p>
-            <DocsExample href="components/list-group/#disabled-items">
-              <CListGroup>
-                <CListGroupItem disabled>Cras justo odio</CListGroupItem>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem>Morbi leo risus</CListGroupItem>
-                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                <CListGroupItem>Vestibulum at eros</CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Links and buttons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
-              <em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
-              <code>as=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure list
-              groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
-              <code>&lt;div&gt;</code>
-              s) don&#39;tprovide a click or tap affordance.
-            </p>
-            <DocsExample href="components/list-group/#links-and-buttons">
-              <CListGroup>
-                <CListGroupItem as="a" href="#" active>
-                  Cras justo odio
-                </CListGroupItem>
-                <CListGroupItem as="a" href="#">
-                  Dapibus ac facilisis in
-                </CListGroupItem>
-                <CListGroupItem as="a" href="#">
-                  Morbi leo risus
-                </CListGroupItem>
-                <CListGroupItem as="a" href="#">
-                  Porta ac consectetur ac
-                </CListGroupItem>
-                <CListGroupItem as="a" href="#" disabled>
-                  Vestibulum at eros
-                </CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Flush</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>flush</code> boolean property to remove some borders and rounded corners to
-              render list group items edge-to-edge in a parent container (e.g., cards).
-            </p>
-            <DocsExample href="components/list-group/#flush">
-              <CListGroup flush>
-                <CListGroupItem>Cras justo odio</CListGroupItem>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem>Morbi leo risus</CListGroupItem>
-                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-                <CListGroupItem>Vestibulum at eros</CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Horizontal</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>layout=&#34;horizontal&#34;</code> to change the layout of list group items
-              from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
-              variant <code>.layout=&#34;horizontal-&#123;sm | md | lg | xl | xxl&#125;&#34;</code>{' '}
-              to make a list group horizontal starting at that breakpoint&#39;s{' '}
-              <code>min-width</code>. Currently{' '}
-              <strong>horizontal list groups cannot be combined with flush list groups.</strong>
-            </p>
-            <DocsExample href="components/list-group/#flush">
-              {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
-                <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
-                  <CListGroupItem>Cras justo odio</CListGroupItem>
-                  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                  <CListGroupItem>Morbi leo risus</CListGroupItem>
-                </CListGroup>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Contextual classes</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use contextual classes to style list items with a stateful background and color.
-            </p>
-            <DocsExample href="components/list-group/#contextual-classes">
-              <CListGroup>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                {[
-                  'primary',
-                  'secondary',
-                  'success',
-                  'danger',
-                  'warning',
-                  'info',
-                  'light',
-                  'dark',
-                ].map((color, index) => (
-                  <CListGroupItem color={color} key={index}>
-                    A simple {color} list group item
-                  </CListGroupItem>
-                ))}
-              </CListGroup>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
-              <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
-              in the previous example. Also supported is the <code>active</code> state; apply it to
-              indicate an active selection on a contextual list group item.
-            </p>
-            <DocsExample href="components/list-group/#contextual-classes">
-              <CListGroup>
-                <CListGroupItem as="a" href="#">
-                  Dapibus ac facilisis in
-                </CListGroupItem>
-                {[
-                  'primary',
-                  'secondary',
-                  'success',
-                  'danger',
-                  'warning',
-                  'info',
-                  'light',
-                  'dark',
-                ].map((color, index) => (
-                  <CListGroupItem as="a" href="#" color={color} key={index}>
-                    A simple {color} list group item
-                  </CListGroupItem>
-                ))}
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>With badges</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add badges to any list group item to show unread counts, activity, and more.
-            </p>
-            <DocsExample href="components/list-group/#with-badges">
-              <CListGroup>
-                <CListGroupItem className="d-flex justify-content-between align-items-center">
-                  Cras justo odio
-                  <CBadge color="primary" shape="rounded-pill">
-                    14
-                  </CBadge>
-                </CListGroupItem>
-                <CListGroupItem className="d-flex justify-content-between align-items-center">
-                  Dapibus ac facilisis in
-                  <CBadge color="primary" shape="rounded-pill">
-                    2
-                  </CBadge>
-                </CListGroupItem>
-                <CListGroupItem className="d-flex justify-content-between align-items-center">
-                  Morbi leo risus
-                  <CBadge color="primary" shape="rounded-pill">
-                    1
-                  </CBadge>
-                </CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Custom content</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add nearly any HTML within, even for linked list groups like the one below, with the
-              help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
-            </p>
-            <DocsExample href="components/list-group/#custom-content">
-              <CListGroup>
-                <CListGroupItem as="a" href="#" active>
-                  <div className="d-flex w-100 justify-content-between">
-                    <h5 className="mb-1">List group item heading</h5>
-                    <small>3 days ago</small>
-                  </div>
-                  <p className="mb-1">
-                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
-                    varius blandit.
-                  </p>
-                  <small>Donec id elit non mi porta.</small>
-                </CListGroupItem>
-                <CListGroupItem as="a" href="#">
-                  <div className="d-flex w-100 justify-content-between">
-                    <h5 className="mb-1">List group item heading</h5>
-                    <small className="text-body-secondary">3 days ago</small>
-                  </div>
-                  <p className="mb-1">
-                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
-                    varius blandit.
-                  </p>
-                  <small className="text-body-secondary">Donec id elit non mi porta.</small>
-                </CListGroupItem>
-                <CListGroupItem as="a" href="#">
-                  <div className="d-flex w-100 justify-content-between">
-                    <h5 className="mb-1">List group item heading</h5>
-                    <small className="text-body-secondary">3 days ago</small>
-                  </div>
-                  <p className="mb-1">
-                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
-                    varius blandit.
-                  </p>
-                  <small className="text-body-secondary">Donec id elit non mi porta.</small>
-                </CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React List Group</strong> <small>Checkboxes and radios</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Place CoreUI&#39;s checkboxes and radios within list group items and customize as
-              needed.
-            </p>
-            <DocsExample href="components/list-group/#checkboxes-and-radios">
-              <CListGroup>
-                <CListGroupItem>
-                  <CFormCheck label="Cras justo odio" />
-                </CListGroupItem>
-                <CListGroupItem>
-                  <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
-                </CListGroupItem>
-                <CListGroupItem>
-                  <CFormCheck label="Morbi leo risus" defaultChecked />
-                </CListGroupItem>
-                <CListGroupItem>
-                  <CFormCheck label="orta ac consectetur ac" />
-                </CListGroupItem>
-                <CListGroupItem>
-                  <CFormCheck label="Vestibulum at eros" />
-                </CListGroupItem>
-              </CListGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="List Groups" />
+      <CardContent>
+        <DocsExample href="components/list-group">
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <List
+                sx={{
+                  bgcolor: 'background.paper',
+                  border: 1,
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                }}
+              >
+                <ListItem divider>
+                  <ListItemText primary="Cras justo odio" />
+                </ListItem>
+                <ListItem divider>
+                  <ListItemText primary="Dapibus ac facilisis in" />
+                </ListItem>
+                <ListItem divider>
+                  <ListItemText primary="Morbi leo risus" />
+                </ListItem>
+                <ListItem divider>
+                  <ListItemText primary="Porta ac consectetur ac" />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="Vestibulum at eros" />
+                </ListItem>
+              </List>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <List
+                sx={{
+                  bgcolor: 'background.paper',
+                  border: 1,
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                }}
+              >
+                <ListItemButton divider selected>
+                  <ListItemText primary="Cras justo odio" />
+                </ListItemButton>
+                <ListItemButton divider>
+                  <ListItemText primary="Dapibus ac facilisis in" />
+                </ListItemButton>
+                <ListItemButton divider>
+                  <ListItemText primary="Morbi leo risus" />
+                </ListItemButton>
+                <ListItemButton divider disabled>
+                  <ListItemText primary="Porta ac consectetur ac" />
+                </ListItemButton>
+                <ListItemButton>
+                  <ListItemText primary="Vestibulum at eros" />
+                </ListItemButton>
+              </List>
+            </Grid>
+          </Grid>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js
index 052ed6fc5c..221a3e5b5c 100644
--- a/src/views/base/navs/Navs.js
+++ b/src/views/base/navs/Navs.js
@@ -1,397 +1,32 @@
 import React from 'react'
-import {
-  CRow,
-  CCol,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CDropdown,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CNav,
-  CNavItem,
-  CNavLink,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Box from '@mui/material/Box'
+
+import { DocsExample } from 'src/components'
 
 const Navs = () => {
+  const [value, setValue] = React.useState(0)
+
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/nav-tabs/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Base navs</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The base <code>.nav</code> component is built with flexbox and provide a strong
-              foundation for building all types of navigation components. It includes some style
-              overrides (for working with lists), some link padding for larger hit areas, and basic
-              disabled styling.
-            </p>
-            <DocsExample href="components/nav-tabs#base-nav">
-              <CNav>
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Classes are used throughout, so your markup can be super flexible. Use{' '}
-              <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
-              items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
-              the .nav uses display: flex, the nav links behave the same as nav items would, but
-              without the extra markup.
-            </p>
-            <DocsExample href="components/nav-tabs#base-nav">
-              <CNav as="nav">
-                <CNavLink href="#" active>
-                  Active
-                </CNavLink>
-                <CNavLink href="#">Link</CNavLink>
-                <CNavLink href="#">Link</CNavLink>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Horizontal alignment</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Change the horizontal alignment of your nav with{' '}
-              <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
-                flexbox utilities
-              </a>
-              . By default, navs are left-aligned, but you can easily change them to center or right
-              aligned.
-            </p>
-            <p className="text-body-secondary small">
-              Centered with <code>.justify-content-center</code>:
-            </p>
-            <DocsExample href="components/nav-tabs#horizontal-alignment">
-              <CNav className="justify-content-center">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Right-aligned with <code>.justify-content-end</code>:
-            </p>
-            <DocsExample href="components/nav-tabs#base-nav">
-              <CNav className="justify-content-end">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Vertical</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Stack your navigation by changing the flex item direction with the{' '}
-              <code>.flex-column</code> utility. Need to stack them on some viewports but not
-              others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
-            </p>
-            <DocsExample href="components/nav-tabs#vertical">
-              <CNav className="flex-column">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Tabs</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
-              to generate a tabbed interface
-            </p>
-            <DocsExample href="components/nav-tabs#tabs">
-              <CNav variant="tabs">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Pills</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
-            </p>
-            <DocsExample href="components/nav-tabs#pills">
-              <CNav variant="pills">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Fill and justify</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Force your <code>.nav</code>&#39;s contents to extend the full available width one of
-              two modifier classes. To proportionately fill all available space with your{' '}
-              <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
-              horizontal space is occupied, but not every nav item has the same width.
-            </p>
-            <DocsExample href="components/nav-tabs#fill-and-justify">
-              <CNav variant="pills" layout="fill">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
-              space will be occupied by nav links, but unlike the .nav-fill above, every nav item
-              will be the same width.
-            </p>
-            <DocsExample href="components/nav-tabs#fill-and-justify">
-              <CNav variant="pills" layout="justified">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Working with flex utilities</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you need responsive nav variations, consider using a series of{' '}
-              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
-              verbose, these utilities offer greater customization across responsive breakpoints. In
-              the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
-              horizontal layout that fills the available width starting from the small breakpoint.
-            </p>
-            <DocsExample href="components/nav-tabs#working-with-flex-utilities">
-              <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
-                <CNavLink href="#" active>
-                  Active
-                </CNavLink>
-                <CNavLink href="#">Link</CNavLink>
-                <CNavLink href="#">Link</CNavLink>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Tabs with dropdowns</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/nav-tabs#tabs-with-dropdowns">
-              <CNav>
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CDropdown variant="nav-item">
-                  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Navs</strong> <small>Pills with dropdowns</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/nav-tabs#pills-with-dropdowns">
-              <CNav variant="pills">
-                <CNavItem>
-                  <CNavLink href="#" active>
-                    Active
-                  </CNavLink>
-                </CNavItem>
-                <CDropdown variant="nav-item">
-                  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CNavItem>
-                  <CNavLink href="#">Link</CNavLink>
-                </CNavItem>
-                <CNavItem>
-                  <CNavLink href="#" disabled>
-                    Disabled
-                  </CNavLink>
-                </CNavItem>
-              </CNav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Navs" />
+      <CardContent>
+        <DocsExample href="components/navs-tabs">
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs value={value} onChange={(e, v) => setValue(v)}>
+              <Tab label="Active" />
+              <Tab label="Link" />
+              <Tab label="Link" />
+              <Tab label="Disabled" disabled />
+            </Tabs>
+          </Box>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js
index 24dc229a10..2bfddab7b9 100644
--- a/src/views/base/paginations/Paginations.js
+++ b/src/views/base/paginations/Paginations.js
@@ -1,174 +1,27 @@
 import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CPagination,
-  CPaginationItem,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Pagination from '@mui/material/Pagination'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Paginations = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/pagination/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Pagination</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              We use a large block of connected links for our pagination, making links hard to miss
-              and easily scalable—all while providing large hit areas. Pagination is built with list
-              HTML elements so screen readers can announce the number of available links. Use a
-              wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to
-              screen readers and other assistive technologies.
-            </p>
-            <p className="text-body-secondary small">
-              In addition, as pages likely have more than one such navigation section, it&#39;s
-              advisable to provide a descriptive <code>aria-label</code> for the{' '}
-              <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination
-              component is used to navigate between a set of search results, an appropriate label
-              could be <code>aria-label=&#34;Search results pages&#34;</code>.
-            </p>
-            <DocsExample href="components/pagination">
-              <CPagination aria-label="Page navigation example">
-                <CPaginationItem>Previous</CPaginationItem>
-                <CPaginationItem>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem>Next</CPaginationItem>
-              </CPagination>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Pagination</strong> <small>Working with icons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Looking to use an icon or symbol in place of text for some pagination links? Be sure
-              to provide proper screen reader support with <code>aria</code> attributes.
-            </p>
-            <DocsExample href="components/pagination#working-with-icons">
-              <CPagination aria-label="Page navigation example">
-                <CPaginationItem aria-label="Previous">
-                  <span aria-hidden="true">&laquo;</span>
-                </CPaginationItem>
-                <CPaginationItem>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem aria-label="Next">
-                  <span aria-hidden="true">&raquo;</span>
-                </CPaginationItem>
-              </CPagination>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Pagination</strong> <small>Disabled and active states</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Pagination links are customizable for different circumstances. Use{' '}
-              <code>disabled</code> for links that appear un-clickable and <code>.active</code> to
-              indicate the current page.
-            </p>
-            <p className="text-body-secondary small">
-              While the <code>disabled</code> prop uses <code>pointer-events: none</code> to{' '}
-              <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS
-              property is not yet standardized and doesn&#39;taccount for keyboard navigation. As
-              such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use
-              custom JavaScript to fully disable their functionality.
-            </p>
-            <DocsExample href="components/pagination#disabled-and-active-states">
-              <CPagination aria-label="Page navigation example">
-                <CPaginationItem aria-label="Previous" disabled>
-                  <span aria-hidden="true">&laquo;</span>
-                </CPaginationItem>
-                <CPaginationItem active>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem aria-label="Next">
-                  <span aria-hidden="true">&raquo;</span>
-                </CPaginationItem>
-              </CPagination>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Pagination</strong> <small>Sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Fancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '}
-              <code>size=&#34;sm&#34;</code> for additional sizes.
-            </p>
-            <DocsExample href="components/pagination#sizing">
-              <CPagination size="lg" aria-label="Page navigation example">
-                <CPaginationItem>Previous</CPaginationItem>
-                <CPaginationItem>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem>Next</CPaginationItem>
-              </CPagination>
-            </DocsExample>
-            <DocsExample href="components/pagination#sizing">
-              <CPagination size="sm" aria-label="Page navigation example">
-                <CPaginationItem>Previous</CPaginationItem>
-                <CPaginationItem>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem>Next</CPaginationItem>
-              </CPagination>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Pagination</strong> <small>Alignment</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Change the alignment of pagination components with{' '}
-              <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
-            </p>
-            <DocsExample href="components/pagination#aligment">
-              <CPagination className="justify-content-center" aria-label="Page navigation example">
-                <CPaginationItem disabled>Previous</CPaginationItem>
-                <CPaginationItem>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem>Next</CPaginationItem>
-              </CPagination>
-            </DocsExample>
-            <DocsExample href="components/pagination#aligment">
-              <CPagination className="justify-content-end" aria-label="Page navigation example">
-                <CPaginationItem disabled>Previous</CPaginationItem>
-                <CPaginationItem>1</CPaginationItem>
-                <CPaginationItem>2</CPaginationItem>
-                <CPaginationItem>3</CPaginationItem>
-                <CPaginationItem>Next</CPaginationItem>
-              </CPagination>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Pagination" />
+      <CardContent>
+        <DocsExample href="components/pagination">
+          <Stack spacing={2}>
+            <Pagination count={10} />
+            <Pagination count={10} color="primary" />
+            <Pagination count={10} color="secondary" />
+            <Pagination count={10} disabled />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js
index 743416d93d..4e4ac1819e 100644
--- a/src/views/base/placeholders/Placeholders.js
+++ b/src/views/base/placeholders/Placeholders.js
@@ -1,196 +1,43 @@
 import React from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-  CCol,
-  CPlaceholder,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Skeleton from '@mui/material/Skeleton'
+import Stack from '@mui/material/Stack'
+import Grid from '@mui/material/Grid'
 
-import ReactImg from 'src/assets/images/react.jpg'
+import { DocsExample } from 'src/components'
 
 const Placeholders = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/placeholder/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Placeholder</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              In the example below, we take a typical card component and recreate it with
-              placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
-              same between the two.
-            </p>
-            <DocsExample href="components/placeholder">
-              <div className="d-flex justify-content-around p-3">
-                <CCard style={{ width: '18rem' }}>
-                  <CCardImage orientation="top" src={ReactImg} />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      Some quick example text to build on the card title and make up the bulk of the
-                      card&#39;s content.
-                    </CCardText>
-                    <CButton color="primary" href="#">
-                      Go somewhere
-                    </CButton>
-                  </CCardBody>
-                </CCard>
-                <CCard style={{ width: '18rem' }}>
-                  <svg
-                    className="card-img-top"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                  </svg>
-                  <CCardBody>
-                    <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
-                      <CPlaceholder xs={6} />
-                    </CPlaceholder>
-                    <CPlaceholder as={CCardText} animation="glow">
-                      <CPlaceholder xs={7} />
-                      <CPlaceholder xs={4} />
-                      <CPlaceholder xs={4} />
-                      <CPlaceholder xs={6} />
-                      <CPlaceholder xs={8} />
-                    </CPlaceholder>
-                    <CPlaceholder
-                      color="primary"
-                      as={CButton}
-                      disabled
-                      href="#"
-                      tabIndex={-1}
-                      xs={6}
-                    ></CPlaceholder>
-                  </CCardBody>
-                </CCard>
-              </div>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Placeholder</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create placeholders with the <code>&lt;CPlaceholder&gt;</code> component and a grid
-              column propx (e.g., <code>xs={6}</code>) to set the <code>width</code>. They can
-              replace the text inside an element or be added as a modifier class to an existing
-              component.
-            </p>
-            <DocsExample href="components/placeholder">
-              <p aria-hidden="true">
-                <CPlaceholder xs={6} />
-              </p>
-              <CPlaceholder
-                color="primary"
-                as={CButton}
-                aria-hidden="true"
-                disabled
-                href="#"
-                tabIndex={-1}
-                xs={4}
-              ></CPlaceholder>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Placeholder</strong> <small> Width</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You can change the <code>width</code> through grid column classes, width utilities, or
-              inline styles.
-            </p>
-            <DocsExample href="components/placeholder#width">
-              <CPlaceholder xs={6} />
-              <CPlaceholder className="w-75" />
-              <CPlaceholder style={{ width: '30%' }} />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Placeholder</strong> <small> Color</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              By default, the <code>&lt;CPlaceholder&gt;</code> uses <code>currentColor</code>. This
-              can be overridden with a custom color or utility class.
-            </p>
-            <DocsExample href="components/placeholder#color">
-              <CPlaceholder xs={12} />
-
-              <CPlaceholder color="primary" xs={12} />
-              <CPlaceholder color="secondary" xs={12} />
-              <CPlaceholder color="success" xs={12} />
-              <CPlaceholder color="danger" xs={12} />
-              <CPlaceholder color="warning" xs={12} />
-              <CPlaceholder color="info" xs={12} />
-              <CPlaceholder color="light" xs={12} />
-              <CPlaceholder color="dark" xs={12} />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Placeholder</strong> <small> Sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
-              the parent element. Customize them with <code>size</code> prop: <code>lg</code>,{' '}
-              <code>sm</code>, or <code>xs</code>.
-            </p>
-            <DocsExample href="components/placeholder#sizing">
-              <CPlaceholder xs={12} size="lg" />
-              <CPlaceholder xs={12} />
-              <CPlaceholder xs={12} size="sm" />
-              <CPlaceholder xs={12} size="xs" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Placeholder</strong> <small> Animation</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Animate placeholders with <code>animation=&#34;glow&#34;</code> or{' '}
-              <code>animation=&#34;wave&#34;</code> to better convey the perception of something
-              being <em>actively</em> loaded.
-            </p>
-            <DocsExample href="components/placeholder#animation">
-              <CPlaceholder as="p" animation="glow">
-                <CPlaceholder xs={12} />
-              </CPlaceholder>
-
-              <CPlaceholder as="p" animation="wave">
-                <CPlaceholder xs={12} />
-              </CPlaceholder>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Placeholders" />
+      <CardContent>
+        <DocsExample href="components/placeholder">
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Stack spacing={1}>
+                <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+                <Skeleton variant="circular" width={40} height={40} />
+                <Skeleton variant="rectangular" width={210} height={60} />
+                <Skeleton variant="rounded" width={210} height={60} />
+              </Stack>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card>
+                <Skeleton variant="rectangular" height={140} />
+                <CardContent>
+                  <Skeleton variant="text" sx={{ fontSize: '1.5rem' }} />
+                  <Skeleton variant="text" />
+                  <Skeleton variant="text" />
+                  <Skeleton variant="rectangular" width={100} height={36} sx={{ mt: 2 }} />
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js
index 794e100258..201cd6d512 100644
--- a/src/views/base/popovers/Popovers.js
+++ b/src/views/base/popovers/Popovers.js
@@ -1,71 +1,48 @@
 import React from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Popovers = () => {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/popover/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Popover</strong> <small>Basic example</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/popover">
-              <CPopover
-                title="Popover title"
-                content="And here’s some amazing content. It’s very engaging. Right?"
-                placement="right"
-              >
-                <CButton color="danger" size="lg">
-                  Click to toggle popover
-                </CButton>
-              </CPopover>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Popover</strong> <small>Four directions</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Four options are available: top, right, bottom, and left aligned. Directions are
-              mirrored when using CoreUI for React in RTL.
-            </p>
-            <DocsExample href="components/popover#four-directions">
-              <CPopover
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="top"
-              >
-                <CButton color="secondary">Popover on top</CButton>
-              </CPopover>
-              <CPopover
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="right"
-              >
-                <CButton color="secondary">Popover on right</CButton>
-              </CPopover>
-              <CPopover
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="bottom"
-              >
-                <CButton color="secondary">Popover on bottom</CButton>
-              </CPopover>
-              <CPopover
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="left"
-              >
-                <CButton color="secondary">Popover on left</CButton>
-              </CPopover>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Popovers" />
+      <CardContent>
+        <DocsExample href="components/popover">
+          <Stack direction="row" spacing={2}>
+            <Button variant="contained" onClick={handleClick}>
+              Click to toggle popover
+            </Button>
+            <Popover
+              open={open}
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            >
+              <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
+            </Popover>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js
index 78715d305d..859e875c8d 100644
--- a/src/views/base/progress/Progress.js
+++ b/src/views/base/progress/Progress.js
@@ -1,186 +1,38 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import LinearProgress from '@mui/material/LinearProgress'
+import Stack from '@mui/material/Stack'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+import { DocsExample } from 'src/components'
 
 const Progress = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/progress/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Basic example</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Progress components are built with two HTML elements, some CSS to set the width, and a
-              few attributes. We don&#39;tuse{' '}
-              <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
-                the HTML5 <code>&lt;progress&gt;</code> element
-              </a>
-              , ensuring you can stack progress bars, animate them, and place text labels over them.
-            </p>
-            <DocsExample href="components/progress">
-              <CProgress className="mb-3">
-                <CProgressBar value={0} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar value={25} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar value={50} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar value={75} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar value={100} />
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Labels</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add labels to your progress bars by placing text within the{' '}
-              <code>&lt;CProgressBar&gt;</code>.
-            </p>
-            <DocsExample href="components/progress#labels">
-              <CProgress className="mb-3">
-                <CProgressBar value={25}>25%</CProgressBar>
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Height</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              We only set a <code>height</code> value on the <code>&lt;CProgress&gt;</code>, so if
-              you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
-              resize accordingly.
-            </p>
-            <DocsExample href="components/progress#height">
-              <CProgress height={1} className="mb-3">
-                <CProgressBar value={25}></CProgressBar>
-              </CProgress>
-              <CProgress height={20} className="mb-3">
-                <CProgressBar value={25}></CProgressBar>
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Backgrounds</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use <code>color</code> prop to change the appearance of individual progress bars.
-            </p>
-            <DocsExample href="components/progress#backgrounds">
-              <CProgress className="mb-3">
-                <CProgressBar color="success" value={25} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="info" value={50} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="warning" value={75} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="danger" value={100} />
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Multiple bars</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Include multiple progress bars in a progress component if you need.
-            </p>
-            <DocsExample href="components/progress#multiple-bars">
-              <CProgress className="mb-3">
-                <CProgressBar value={15} />
-                <CProgressBar color="success" value={30} />
-                <CProgressBar color="info" value={20} />
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Striped</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to
-              apply a stripe via CSS gradient over the progress bar&#39;s background color.
-            </p>
-            <DocsExample href="components/progress#striped">
-              <CProgress className="mb-3">
-                <CProgressBar color="success" variant="striped" value={25} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="info" variant="striped" value={50} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="warning" variant="striped" value={75} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="danger" variant="striped" value={100} />
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Progress</strong> <small>Animated stripes</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The striped gradient can also be animated. Add <code>animated</code> property to{' '}
-              <code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
-              animations.
-            </p>
-            <DocsExample href="components/progress#animated-stripes">
-              <CProgress className="mb-3">
-                <CProgressBar color="success" variant="striped" animated value={25} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="info" variant="striped" animated value={50} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="warning" variant="striped" animated value={75} />
-              </CProgress>
-              <CProgress className="mb-3">
-                <CProgressBar color="danger" variant="striped" animated value={100} />
-              </CProgress>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Progress" />
+      <CardContent>
+        <DocsExample href="components/progress">
+          <Stack spacing={2}>
+            <LinearProgress variant="determinate" value={0} />
+            <LinearProgress variant="determinate" value={25} />
+            <LinearProgress variant="determinate" value={50} />
+            <LinearProgress variant="determinate" value={75} />
+            <LinearProgress variant="determinate" value={100} />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/progress#color">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <LinearProgress variant="determinate" value={25} color="success" />
+            <LinearProgress variant="determinate" value={50} color="info" />
+            <LinearProgress variant="determinate" value={75} color="warning" />
+            <LinearProgress variant="determinate" value={100} color="error" />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js
index 5553dbc0f7..6a7608cadf 100644
--- a/src/views/base/spinners/Spinners.js
+++ b/src/views/base/spinners/Spinners.js
@@ -1,120 +1,36 @@
 import React from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import CircularProgress from '@mui/material/CircularProgress'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Spinners = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/spinner/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Spinner</strong> <small>Border</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use the border spinners for a lightweight loading indicator.
-            </p>
-            <DocsExample href="components/spinner">
-              <CSpinner />
-            </DocsExample>
-            <p className="text-body-secondary small">
-              The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
-              You can use any of our text color utilities on the standard spinner.
-            </p>
-            <DocsExample href="components/spinner#colors">
-              <CSpinner color="primary" />
-              <CSpinner color="secondary" />
-              <CSpinner color="success" />
-              <CSpinner color="danger" />
-              <CSpinner color="warning" />
-              <CSpinner color="info" />
-              <CSpinner color="light" />
-              <CSpinner color="dark" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Spinner</strong> <small>Growing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
-              doesn&#39;t technically spin, it does repeatedly grow!
-            </p>
-            <DocsExample href="components/spinner#growing-spinner">
-              <CSpinner variant="grow" />
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Once again, this spinner is built with <code>currentColor</code>, so you can easily
-              change its appearance. Here it is in blue, along with the supported variants.
-            </p>
-            <DocsExample href="components/spinner#growing-spinner">
-              <CSpinner color="primary" variant="grow" />
-              <CSpinner color="secondary" variant="grow" />
-              <CSpinner color="success" variant="grow" />
-              <CSpinner color="danger" variant="grow" />
-              <CSpinner color="warning" variant="grow" />
-              <CSpinner color="info" variant="grow" />
-              <CSpinner color="light" variant="grow" />
-              <CSpinner color="dark" variant="grow" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Spinner</strong> <small>Size</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
-              be used within other components.
-            </p>
-            <DocsExample href="components/spinner#size">
-              <CSpinner size="sm" />
-              <CSpinner size="sm" variant="grow" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Spinner</strong> <small>Buttons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use spinners within buttons to indicate an action is currently processing or taking
-              place. You may also swap the text out of the spinner element and utilize button text
-              as needed.
-            </p>
-            <DocsExample href="components/spinner#buttons">
-              <CButton color="primary" disabled>
-                <CSpinner as="span" size="sm" aria-hidden="true" />
-              </CButton>
-              <CButton color="primary" disabled>
-                <CSpinner as="span" size="sm" aria-hidden="true" />
-                Loading...
-              </CButton>
-            </DocsExample>
-            <DocsExample href="components/spinner#buttons">
-              <CButton color="primary" disabled>
-                <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
-              </CButton>
-              <CButton color="primary" disabled>
-                <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
-                Loading...
-              </CButton>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Spinners" />
+      <CardContent>
+        <DocsExample href="components/spinner">
+          <Stack direction="row" spacing={2}>
+            <CircularProgress />
+            <CircularProgress color="secondary" />
+            <CircularProgress color="success" />
+            <CircularProgress color="error" />
+            <CircularProgress color="warning" />
+            <CircularProgress color="info" />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/spinner#size">
+          <Stack direction="row" spacing={2} sx={{ mt: 3 }}>
+            <CircularProgress size={20} />
+            <CircularProgress size={30} />
+            <CircularProgress size={40} />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js
index 3a3f7fd864..105b909f32 100644
--- a/src/views/base/tables/Tables.js
+++ b/src/views/base/tables/Tables.js
@@ -1,986 +1,58 @@
 import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CRow,
-  CTable,
-  CTableBody,
-  CTableCaption,
-  CTableDataCell,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+
+import { DocsExample } from 'src/components'
 
 const Tables = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/table/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Basic example</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
-              tables look in CoreUI.
-            </p>
-            <DocsExample href="components/table">
-              <CTable>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Variants</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use contextual classes to color tables, table rows or individual cells.
-            </p>
-            <DocsExample href="components/table#variants">
-              <CTable>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">Default</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="primary">
-                    <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="secondary">
-                    <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="success">
-                    <CTableHeaderCell scope="row">Success</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="danger">
-                    <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="warning">
-                    <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="info">
-                    <CTableHeaderCell scope="row">Info</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="light">
-                    <CTableHeaderCell scope="row">Light</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow color="dark">
-                    <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                    <CTableDataCell>Cell</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Striped rows</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
-              <code>&lt;CTableBody&gt;</code>.
-            </p>
-            <DocsExample href="components/table#striped-rows">
-              <CTable striped>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              These classes can also be added to table variants:
-            </p>
-            <DocsExample href="components/table#striped-rows">
-              <CTable color="dark" striped>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <DocsExample href="components/table#striped-rows">
-              <CTable color="success" striped>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Hoverable rows</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use <code>hover</code> property to enable a hover state on table rows within a{' '}
-              <code>&lt;CTableBody&gt;</code>.
-            </p>
-            <DocsExample href="components/table#hoverable-rows">
-              <CTable hover>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <DocsExample href="components/table#hoverable-rows">
-              <CTable color="dark" hover>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <DocsExample href="components/table#hoverable-rows">
-              <CTable striped hover>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Active tables</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/table#active-tables">
-              <CTable>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow active>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2} active>
-                      Larry the Bird
-                    </CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <DocsExample href="components/table#active-tables">
-              <CTable color="dark">
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow active>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2} active>
-                      Larry the Bird
-                    </CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Bordered tables</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>bordered</code> property for borders on all sides of the table and cells.
-            </p>
-            <DocsExample href="components/table#bordered-tables">
-              <CTable bordered>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              <a href="https://coreui.io/docs/utilities/borders#border-color">
-                Border color utilities
-              </a>{' '}
-              can be added to change colors:
-            </p>
-            <DocsExample href="components/table#bordered-tables">
-              <CTable bordered borderColor="primary">
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Tables without borders</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>borderless</code> property for a table without borders.
-            </p>
-            <DocsExample href="components/table#tables-without-borders">
-              <CTable borderless>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <DocsExample href="components/table#tables-without-borders">
-              <CTable color="dark" borderless>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Small tables</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact
-              by cutting all cell <code>padding</code> in half.
-            </p>
-            <DocsExample href="components/table#small-tables">
-              <CTable small>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Vertical alignment</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Table cells of <code>&lt;CTableHead&gt;</code> are always vertical aligned to the
-              bottom. Table cells in <code>&lt;CTableBody&gt;</code> inherit their alignment from{' '}
-              <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align
-              property to re-align where needed.
-            </p>
-            <DocsExample href="components/table#vertical-alignment">
-              <CTable align="middle" responsive>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col" className="w-25">
-                      Heading 1
-                    </CTableHeaderCell>
-                    <CTableHeaderCell scope="col" className="w-25">
-                      Heading 2
-                    </CTableHeaderCell>
-                    <CTableHeaderCell scope="col" className="w-25">
-                      Heading 3
-                    </CTableHeaderCell>
-                    <CTableHeaderCell scope="col" className="w-25">
-                      Heading 4
-                    </CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: middle;</code> from the table
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: middle;</code> from the table
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: middle;</code> from the table
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This here is some placeholder text, intended to take up quite a bit of
-                      vertical space, to demonsCTableRowate how the vertical alignment works in the
-                      preceding cells.
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow align="bottom">
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: bottom;</code> from the table row
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: bottom;</code> from the table row
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: bottom;</code> from the table row
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This here is some placeholder text, intended to take up quite a bit of
-                      vertical space, to demonsCTableRowate how the vertical alignment works in the
-                      preceding cells.
-                    </CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: middle;</code> from the table
-                    </CTableDataCell>
-                    <CTableDataCell>
-                      This cell inherits <code>vertical-align: middle;</code> from the table
-                    </CTableDataCell>
-                    <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
-                    <CTableDataCell>
-                      This here is some placeholder text, intended to take up quite a bit of
-                      vertical space, to demonsCTableRowate how the vertical alignment works in the
-                      preceding cells.
-                    </CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Nesting</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Border styles, active styles, and table variants are not inherited by nested tables.
-            </p>
-            <DocsExample href="components/table#nesting">
-              <CTable striped>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell colSpan={4}>
-                      <CTable>
-                        <CTableHead>
-                          <CTableRow>
-                            <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                            <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                            <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                          </CTableRow>
-                        </CTableHead>
-                        <CTableBody>
-                          <CTableRow>
-                            <CTableHeaderCell scope="row">A</CTableHeaderCell>
-                            <CTableDataCell>First</CTableDataCell>
-                            <CTableDataCell>Last</CTableDataCell>
-                          </CTableRow>
-                          <CTableRow>
-                            <CTableHeaderCell scope="row">B</CTableHeaderCell>
-                            <CTableDataCell>First</CTableDataCell>
-                            <CTableDataCell>Last</CTableDataCell>
-                          </CTableRow>
-                          <CTableRow>
-                            <CTableHeaderCell scope="row">C</CTableHeaderCell>
-                            <CTableDataCell>First</CTableDataCell>
-                            <CTableDataCell>Last</CTableDataCell>
-                          </CTableRow>
-                        </CTableBody>
-                      </CTable>
-                    </CTableHeaderCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Table head</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Similar to tables and dark tables, use the modifier prop{' '}
-              <code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '}
-              <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
-            </p>
-            <DocsExample href="components/table#table-head">
-              <CTable>
-                <CTableHead color="light">
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell>Larry</CTableDataCell>
-                    <CTableDataCell>the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <DocsExample href="components/table#table-head">
-              <CTable>
-                <CTableHead color="dark">
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Table foot</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/table#table-foot">
-              <CTable>
-                <CTableHead color="light">
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableDataCell>Footer</CTableDataCell>
-                    <CTableDataCell>Footer</CTableDataCell>
-                    <CTableDataCell>Footer</CTableDataCell>
-                    <CTableDataCell>Footer</CTableDataCell>
-                  </CTableRow>
-                </CTableHead>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Table</strong> <small>Captions</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps
-              users with screen readers to find a table and understand what it&#39;s about and
-              decide if they want to read it.
-            </p>
-            <DocsExample href="components/table#captions">
-              <CTable>
-                <CTableCaption>List of users</CTableCaption>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell>Larry</CTableDataCell>
-                    <CTableDataCell>the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with{' '}
-              <code>caption=&#34;top&#34;</code>.
-            </p>
-            <DocsExample href="components/table#captions">
-              <CTable caption="top">
-                <CTableCaption>List of users</CTableCaption>
-                <CTableHead>
-                  <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">1</CTableHeaderCell>
-                    <CTableDataCell>Mark</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>@mdo</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">2</CTableHeaderCell>
-                    <CTableDataCell>Jacob</CTableDataCell>
-                    <CTableDataCell>Thornton</CTableDataCell>
-                    <CTableDataCell>@fat</CTableDataCell>
-                  </CTableRow>
-                  <CTableRow>
-                    <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell>Larry</CTableDataCell>
-                    <CTableDataCell>the Bird</CTableDataCell>
-                    <CTableDataCell>@twitter</CTableDataCell>
-                  </CTableRow>
-                </CTableBody>
-              </CTable>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Tables" />
+      <CardContent>
+        <DocsExample href="components/table">
+          <TableContainer component={Paper}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>#</TableCell>
+                  <TableCell>Class</TableCell>
+                  <TableCell>Heading</TableCell>
+                  <TableCell>Heading</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow>
+                  <TableCell>1</TableCell>
+                  <TableCell>Mark</TableCell>
+                  <TableCell>Otto</TableCell>
+                  <TableCell>@mdo</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>2</TableCell>
+                  <TableCell>Jacob</TableCell>
+                  <TableCell>Thornton</TableCell>
+                  <TableCell>@fat</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>3</TableCell>
+                  <TableCell>Larry</TableCell>
+                  <TableCell>the Bird</TableCell>
+                  <TableCell>@twitter</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js
index eae58d8f8c..3a951f7a58 100644
--- a/src/views/base/tabs/Tabs.js
+++ b/src/views/base/tabs/Tabs.js
@@ -1,234 +1,58 @@
 import React from 'react'
-import {
-  CRow,
-  CCol,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CTab,
-  CTabContent,
-  CTabList,
-  CTabPanel,
-  CTabs,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import MuiTabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+import { DocsExample } from 'src/components'
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  )
+}
+
+const Tabs = () => {
+  const [value, setValue] = React.useState(0)
 
-const Navs = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/tabs/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Tabs</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The basic React tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
-              generate a tabbed interface.
-            </p>
-            <DocsExample href="components/tabs/#example">
-              <CTabs activeItemKey="profile">
-                <CTabList variant="tabs">
-                  <CTab itemKey="home">Home</CTab>
-                  <CTab itemKey="profile">Profile</CTab>
-                  <CTab itemKey="contact">Contact</CTab>
-                  <CTab disabled itemKey="disabled">
-                    Disabled
-                  </CTab>
-                </CTabList>
-                <CTabContent>
-                  <CTabPanel className="p-3" itemKey="home">
-                    Home tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" itemKey="profile">
-                    Profile tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" itemKey="contact">
-                    Contact tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" itemKey="disabled">
-                    Disabled tab content
-                  </CTabPanel>
-                </CTabContent>
-              </CTabs>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Tabs</strong> <small>Unstyled</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you don’t provide the <code>variant</code> prop, the component will default to a
-              basic style.
-            </p>
-            <DocsExample href="components/tabs/#unstyled">
-              <CTabs activeItemKey="profile">
-                <CTabList>
-                  <CTab itemKey="home">Home</CTab>
-                  <CTab itemKey="profile">Profile</CTab>
-                  <CTab itemKey="contact">Contact</CTab>
-                  <CTab disabled itemKey="disabled">
-                    Disabled
-                  </CTab>
-                </CTabList>
-                <CTabContent>
-                  <CTabPanel className="p-3" itemKey="home">
-                    Home tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" itemKey="profile">
-                    Profile tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" itemKey="contact">
-                    Contact tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" itemKey="disabled">
-                    Disabled tab content
-                  </CTabPanel>
-                </CTabContent>
-              </CTabs>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Tabs</strong> <small>Pills</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
-            </p>
-            <DocsExample href="components/tabs/#unstyled">
-              <CTabs activeItemKey={2}>
-                <CTabList variant="pills">
-                  <CTab aria-controls="home-tab-pane" itemKey={1}>
-                    Home
-                  </CTab>
-                  <CTab aria-controls="profile-tab-pane" itemKey={2}>
-                    Profile
-                  </CTab>
-                  <CTab aria-controls="contact-tab-pane" itemKey={3}>
-                    Contact
-                  </CTab>
-                  <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
-                    Disabled
-                  </CTab>
-                </CTabList>
-                <CTabContent>
-                  <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
-                    Home tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-                    Profile tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-                    Contact tab content
-                  </CTabPanel>
-                  <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-                    Disabled tab content
-                  </CTabPanel>
-                </CTabContent>
-              </CTabs>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Tabs</strong> <small>Underline</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
-            </p>
-            <DocsExample href="components/tabs/#unstyled">
-              <CTabs activeItemKey={2}>
-                <CTabList variant="underline">
-                  <CTab aria-controls="home-tab-pane" itemKey={1}>
-                    Home
-                  </CTab>
-                  <CTab aria-controls="profile-tab-pane" itemKey={2}>
-                    Profile
-                  </CTab>
-                  <CTab aria-controls="contact-tab-pane" itemKey={3}>
-                    Contact
-                  </CTab>
-                  <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
-                    Disabled
-                  </CTab>
-                </CTabList>
-                <CTabContent>
-                  <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-                    Home tab content
-                  </CTabPanel>
-                  <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-                    Profile tab content
-                  </CTabPanel>
-                  <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-                    Contact tab content
-                  </CTabPanel>
-                  <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-                    Disabled tab content
-                  </CTabPanel>
-                </CTabContent>
-              </CTabs>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Tabs</strong> <small>Underline border</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
-            </p>
-            <DocsExample href="components/tabs/#unstyled">
-              <CTabs activeItemKey={2}>
-                <CTabList variant="underline-border">
-                  <CTab aria-controls="home-tab-pane" itemKey={1}>
-                    Home
-                  </CTab>
-                  <CTab aria-controls="profile-tab-pane" itemKey={2}>
-                    Profile
-                  </CTab>
-                  <CTab aria-controls="contact-tab-pane" itemKey={3}>
-                    Contact
-                  </CTab>
-                  <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
-                    Disabled
-                  </CTab>
-                </CTabList>
-                <CTabContent>
-                  <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-                    Home tab content
-                  </CTabPanel>
-                  <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-                    Profile tab content
-                  </CTabPanel>
-                  <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-                    Contact tab content
-                  </CTabPanel>
-                  <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-                    Disabled tab content
-                  </CTabPanel>
-                </CTabContent>
-              </CTabs>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Tabs" />
+      <CardContent>
+        <DocsExample href="components/tabs">
+          <Box sx={{ width: '100%' }}>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <MuiTabs value={value} onChange={(e, v) => setValue(v)}>
+                <Tab label="Home" />
+                <Tab label="Profile" />
+                <Tab label="Contact" />
+                <Tab label="Disabled" disabled />
+              </MuiTabs>
+            </Box>
+            <TabPanel value={value} index={0}>
+              Home content
+            </TabPanel>
+            <TabPanel value={value} index={1}>
+              Profile content
+            </TabPanel>
+            <TabPanel value={value} index={2}>
+              Contact content
+            </TabPanel>
+          </Box>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
-export default Navs
+export default Tabs
diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js
index 86a229420c..ce8c5553fa 100644
--- a/src/views/base/tooltips/Tooltips.js
+++ b/src/views/base/tooltips/Tooltips.js
@@ -1,77 +1,36 @@
 import React from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Tooltip from '@mui/material/Tooltip'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Tooltips = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/tooltip/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Tooltip</strong> <small>Basic example</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">Hover over the links below to see tooltips:</p>
-            <DocsExample href="components/tooltip">
-              <p className="text-body-secondary">
-                Tight pants next level keffiyeh
-                <CTooltip content="Tooltip text">
-                  <CLink> you probably </CLink>
-                </CTooltip>
-                haven&#39;theard of them. Photo booth beard raw denim letterpress vegan messenger
-                bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit
-                american apparel
-                <CTooltip content="Tooltip text">
-                  <CLink> have a </CLink>
-                </CTooltip>
-                terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
-                thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;&#39;s
-                cleanse vegan chambray. A really ironic artisan
-                <CTooltip content="Tooltip text">
-                  <CLink> whatever keytar </CLink>
-                </CTooltip>
-                scenester farm-to-table banksy Austin
-                <CTooltip content="Tooltip text">
-                  <CLink> twitter handle </CLink>
-                </CTooltip>
-                freegan cred raw denim single-origin coffee viral.
-              </p>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Hover over the buttons below to see the four tooltips directions: top, right, bottom,
-              and left. Directions are mirrored when using CoreUI in RTL.
-            </p>
-            <DocsExample href="components/tooltip">
-              <CTooltip
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="top"
-              >
-                <CButton color="secondary">Tooltip on top</CButton>
-              </CTooltip>
-              <CTooltip
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="right"
-              >
-                <CButton color="secondary">Tooltip on right</CButton>
-              </CTooltip>
-              <CTooltip
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="bottom"
-              >
-                <CButton color="secondary">Tooltip on bottom</CButton>
-              </CTooltip>
-              <CTooltip
-                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                placement="left"
-              >
-                <CButton color="secondary">Tooltip on left</CButton>
-              </CTooltip>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Tooltips" />
+      <CardContent>
+        <DocsExample href="components/tooltip">
+          <Stack direction="row" spacing={2}>
+            <Tooltip title="Tooltip on top" placement="top">
+              <Button variant="outlined">Tooltip on top</Button>
+            </Tooltip>
+            <Tooltip title="Tooltip on right" placement="right">
+              <Button variant="outlined">Tooltip on right</Button>
+            </Tooltip>
+            <Tooltip title="Tooltip on bottom" placement="bottom">
+              <Button variant="outlined">Tooltip on bottom</Button>
+            </Tooltip>
+            <Tooltip title="Tooltip on left" placement="left">
+              <Button variant="outlined">Tooltip on left</Button>
+            </Tooltip>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js
index 1f366db2d0..464d019e3a 100644
--- a/src/views/buttons/button-groups/ButtonGroups.js
+++ b/src/views/buttons/button-groups/ButtonGroups.js
@@ -1,439 +1,46 @@
 import React from 'react'
-import {
-  CButton,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CButtonGroup,
-  CButtonToolbar,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CFormCheck,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const ButtonGroups = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/button-group/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Basic example</span>
-          </CCardHeader>
-          <CCardBody>
-            <p>
-              Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
-              <code>&lt;CButtonGroup&gt;</code>.{' '}
-            </p>
-            <DocsExample href="components/button-group">
-              <CButtonGroup role="group" aria-label="Basic example">
-                <CButton color="primary">Left</CButton>
-                <CButton color="primary">Middle</CButton>
-                <CButton color="primary">Right</CButton>
-              </CButtonGroup>
-            </DocsExample>
-            <p>
-              These classes can also be added to groups of links, as an alternative to the{' '}
-              <code>&lt;CNav&gt;</code> components.
-            </p>
-            <DocsExample href="components/button-group">
-              <CButtonGroup>
-                <CButton href="#" color="primary" active>
-                  Active link
-                </CButton>
-                <CButton href="#" color="primary">
-                  Link
-                </CButton>
-                <CButton href="#" color="primary">
-                  Link
-                </CButton>
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Mixed styles</span>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/button-group#mixed-styles">
-              <CButtonGroup role="group" aria-label="Basic mixed styles example">
-                <CButton color="danger">Left</CButton>
-                <CButton color="warning">Middle</CButton>
-                <CButton color="success">Right</CButton>
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Outlined styles</span>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/button-group#outlined-styles">
-              <CButtonGroup role="group" aria-label="Basic outlined example">
-                <CButton color="primary" variant="outline">
-                  Left
-                </CButton>
-                <CButton color="primary" variant="outline">
-                  Middle
-                </CButton>
-                <CButton color="primary" variant="outline">
-                  Right
-                </CButton>
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Checkbox and radio button groups</span>
-          </CCardHeader>
-          <CCardBody>
-            <p>
-              Combine button-like checkbox and radio toggle buttons into a seamless looking button
-              group.
-            </p>
-            <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
-              <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
-                <CFormCheck
-                  button={{ variant: 'outline' }}
-                  id="btncheck1"
-                  autoComplete="off"
-                  label="Checkbox 1"
-                />
-                <CFormCheck
-                  button={{ variant: 'outline' }}
-                  id="btncheck2"
-                  autoComplete="off"
-                  label="Checkbox 2"
-                />
-                <CFormCheck
-                  button={{ variant: 'outline' }}
-                  id="btncheck3"
-                  autoComplete="off"
-                  label="Checkbox 3"
-                />
-              </CButtonGroup>
-            </DocsExample>
-            <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
-              <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
-                <CFormCheck
-                  type="radio"
-                  button={{ variant: 'outline' }}
-                  name="btnradio"
-                  id="btnradio1"
-                  autoComplete="off"
-                  label="Radio 1"
-                />
-                <CFormCheck
-                  type="radio"
-                  button={{ variant: 'outline' }}
-                  name="btnradio"
-                  id="btnradio2"
-                  autoComplete="off"
-                  label="Radio 2"
-                />
-                <CFormCheck
-                  type="radio"
-                  button={{ variant: 'outline' }}
-                  name="btnradio"
-                  id="btnradio3"
-                  autoComplete="off"
-                  label="Radio 3"
-                />
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Button toolbar</span>
-          </CCardHeader>
-          <CCardBody>
-            <p>
-              Join sets of button groups into button toolbars for more complicated components. Use
-              utility classes as needed to space out groups, buttons, and more.
-            </p>
-            <DocsExample href="components/button-group#button-toolbar">
-              <CButtonToolbar role="group" aria-label="Toolbar with button groups">
-                <CButtonGroup className="me-2" role="group" aria-label="First group">
-                  <CButton color="primary">1</CButton>
-                  <CButton color="primary">2</CButton>
-                  <CButton color="primary">3</CButton>
-                  <CButton color="primary">4</CButton>
-                </CButtonGroup>
-                <CButtonGroup className="me-2" role="group" aria-label="Second group">
-                  <CButton color="secondary">5</CButton>
-                  <CButton color="secondary">6</CButton>
-                  <CButton color="secondary">7</CButton>
-                </CButtonGroup>
-                <CButtonGroup className="me-2" role="group" aria-label="Third group">
-                  <CButton color="info">8</CButton>
-                </CButtonGroup>
-              </CButtonToolbar>
-            </DocsExample>
-            <p>
-              Feel free to combine input groups with button groups in your toolbars. Similar to the
-              example above, you’ll likely need some utilities through to space items correctly.
-            </p>
-            <DocsExample href="components/button-group#button-toolbar">
-              <CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
-                <CButtonGroup className="me-2" role="group" aria-label="First group">
-                  <CButton color="secondary" variant="outline">
-                    1
-                  </CButton>
-                  <CButton color="secondary" variant="outline">
-                    2
-                  </CButton>
-                  <CButton color="secondary" variant="outline">
-                    3
-                  </CButton>
-                  <CButton color="secondary" variant="outline">
-                    4
-                  </CButton>
-                </CButtonGroup>
-                <CInputGroup>
-                  <CInputGroupText>@</CInputGroupText>
-                  <CFormInput
-                    placeholder="Input group example"
-                    aria-label="Input group example"
-                    aria-describedby="btnGroupAddon"
-                  />
-                </CInputGroup>
-              </CButtonToolbar>
-              <CButtonToolbar
-                className="justify-content-between"
-                role="group"
-                aria-label="Toolbar with button groups"
-              >
-                <CButtonGroup className="me-2" role="group" aria-label="First group">
-                  <CButton color="secondary" variant="outline">
-                    1
-                  </CButton>
-                  <CButton color="secondary" variant="outline">
-                    2
-                  </CButton>
-                  <CButton color="secondary" variant="outline">
-                    3
-                  </CButton>
-                  <CButton color="secondary" variant="outline">
-                    4
-                  </CButton>
-                </CButtonGroup>
-                <CInputGroup>
-                  <CInputGroupText>@</CInputGroupText>
-                  <CFormInput
-                    placeholder="Input group example"
-                    aria-label="Input group example"
-                    aria-describedby="btnGroupAddon"
-                  />
-                </CInputGroup>
-              </CButtonToolbar>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Sizing</span>
-          </CCardHeader>
-          <CCardBody>
-            <p>
-              Alternatively, of implementing button sizing classes to each button in a group, set{' '}
-              <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
-              each one when nesting multiple groups.
-            </p>
-            <DocsExample href="components/button-group#sizing">
-              <CButtonGroup size="lg" role="group" aria-label="Large button group">
-                <CButton color="dark" variant="outline">
-                  Left
-                </CButton>
-                <CButton color="dark" variant="outline">
-                  Middle
-                </CButton>
-                <CButton color="dark" variant="outline">
-                  Right
-                </CButton>
-              </CButtonGroup>
-              <br />
-              <CButtonGroup role="group" aria-label="Default button group">
-                <CButton color="dark" variant="outline">
-                  Left
-                </CButton>
-                <CButton color="dark" variant="outline">
-                  Middle
-                </CButton>
-                <CButton color="dark" variant="outline">
-                  Right
-                </CButton>
-              </CButtonGroup>
-              <br />
-              <CButtonGroup size="sm" role="group" aria-label="Small button group">
-                <CButton color="dark" variant="outline">
-                  Left
-                </CButton>
-                <CButton color="dark" variant="outline">
-                  Middle
-                </CButton>
-                <CButton color="dark" variant="outline">
-                  Right
-                </CButton>
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Nesting</span>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Put a <code>&lt;CButtonGroup&gt;</code> inside another{' '}
-              <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
-              of buttons.
-            </p>
-            <DocsExample href="components/button-group#nesting">
-              <CButtonGroup role="group" aria-label="Button group with nested dropdown">
-                <CButton color="primary">1</CButton>
-                <CButton color="primary">2</CButton>
-                <CDropdown variant="btn-group">
-                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button Group</strong> <span>Vertical variation</span>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
-              <strong>Split button dropdowns are not supported here.</strong>
-            </p>
-            <DocsExample href="components/button-group/#vertical-variation">
-              <CButtonGroup vertical role="group" aria-label="Vertical button group">
-                <CButton color="dark">Button</CButton>
-                <CButton color="dark">Button</CButton>
-                <CButton color="dark">Button</CButton>
-                <CButton color="dark">Button</CButton>
-                <CButton color="dark">Button</CButton>
-                <CButton color="dark">Button</CButton>
-                <CButton color="dark">Button</CButton>
-              </CButtonGroup>
-            </DocsExample>
-            <DocsExample href="components/button-group/#vertical-variation">
-              <CButtonGroup vertical role="group" aria-label="Vertical button group">
-                <CButton color="primary">Button</CButton>
-                <CButton color="primary">Button</CButton>
-                <CDropdown variant="btn-group">
-                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CButton color="primary">Button</CButton>
-                <CButton color="primary">Button</CButton>
-                <CDropdown variant="btn-group">
-                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CDropdown variant="btn-group">
-                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CDropdown variant="btn-group">
-                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CButtonGroup>
-            </DocsExample>
-            <DocsExample href="components/button-group/#vertical-variation">
-              <CButtonGroup vertical role="group" aria-label="Vertical button group">
-                <CFormCheck
-                  type="radio"
-                  button={{ color: 'danger', variant: 'outline' }}
-                  name="vbtnradio"
-                  id="vbtnradio1"
-                  autoComplete="off"
-                  label="Radio 1"
-                  defaultChecked
-                />
-                <CFormCheck
-                  type="radio"
-                  button={{ color: 'danger', variant: 'outline' }}
-                  name="vbtnradio"
-                  id="vbtnradio2"
-                  autoComplete="off"
-                  label="Radio 2"
-                />
-                <CFormCheck
-                  type="radio"
-                  button={{ color: 'danger', variant: 'outline' }}
-                  name="vbtnradio"
-                  id="vbtnradio3"
-                  autoComplete="off"
-                  label="Radio 3"
-                />
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Button Groups" />
+      <CardContent>
+        <DocsExample href="components/button-group">
+          <Stack spacing={2}>
+            <ButtonGroup variant="contained">
+              <Button>Left</Button>
+              <Button>Middle</Button>
+              <Button>Right</Button>
+            </ButtonGroup>
+            <ButtonGroup variant="outlined">
+              <Button>Left</Button>
+              <Button>Middle</Button>
+              <Button>Right</Button>
+            </ButtonGroup>
+            <ButtonGroup variant="text">
+              <Button>Left</Button>
+              <Button>Middle</Button>
+              <Button>Right</Button>
+            </ButtonGroup>
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/button-group#vertical-variation">
+          <ButtonGroup orientation="vertical" variant="contained" sx={{ mt: 3 }}>
+            <Button>Top</Button>
+            <Button>Middle</Button>
+            <Button>Bottom</Button>
+          </ButtonGroup>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js
index ff6190ab9b..672a9a40f3 100644
--- a/src/views/buttons/buttons/Buttons.js
+++ b/src/views/buttons/buttons/Buttons.js
@@ -1,401 +1,87 @@
 import React from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilBell } from '@coreui/icons'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import Grid from '@mui/material/Grid'
+
+import { DocsExample } from 'src/components'
 
 const Buttons = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/buttons/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              CoreUI includes a bunch of predefined buttons components, each serving its own
-              semantic purpose. Buttons show what action will happen when the user clicks or touches
-              it. CoreUI buttons are used to initialize operations, both in the background or
-              foreground of an experience.
-            </p>
-            <DocsExample href="components/buttons">
-              {['normal', 'active', 'disabled'].map((state, index) => (
-                <CRow className="align-items-center mb-3" key={index}>
-                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
-                    {state.charAt(0).toUpperCase() + state.slice(1)}
-                  </CCol>
-                  <CCol xs>
-                    {[
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ].map((color, index) => (
-                      <CButton
-                        color={color}
-                        key={index}
-                        active={state === 'active'}
-                        disabled={state === 'disabled'}
-                      >
-                        {color.charAt(0).toUpperCase() + color.slice(1)}
-                      </CButton>
-                    ))}
-                    <CButton color="link">Link</CButton>
-                  </CCol>
-                </CRow>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>with icons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You can combine button with our <a href="https://coreui.io/icons/">CoreUI Icons</a>.
-            </p>
-            <DocsExample href="components/buttons">
-              {['normal', 'active', 'disabled'].map((state, index) => (
-                <CRow className="align-items-center mb-3" key={index}>
-                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
-                    {state.charAt(0).toUpperCase() + state.slice(1)}
-                  </CCol>
-                  <CCol xs>
-                    {[
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ].map((color, index) => (
-                      <CButton
-                        color={color}
-                        key={index}
-                        active={state === 'active'}
-                        disabled={state === 'disabled'}
-                      >
-                        <CIcon icon={cilBell} className="me-2" />
-                        {color.charAt(0).toUpperCase() + color.slice(1)}
-                      </CButton>
-                    ))}
-                    <CButton color="link">
-                      <CIcon icon={cilBell} className="me-2" />
-                      Link
-                    </CButton>
-                  </CCol>
-                </CRow>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>Button components</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The <code>&lt;CButton&gt;</code> component are designed for{' '}
-              <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code>{' '}
-              elements (though some browsers may apply a slightly different rendering).
-            </p>
-            <p className="text-body-secondary small">
-              If you&#39;re using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code>{' '}
-              elements that are used to trigger functionality ex. collapsing content, these links
-              should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
-              meaning to assistive technologies such as screen readers.
-            </p>
-            <DocsExample href="components/buttons#button-components">
-              <CButton as="a" color="primary" href="#" role="button">
-                Link
-              </CButton>
-              <CButton type="submit" color="primary">
-                Button
-              </CButton>
-              <CButton as="input" type="button" color="primary" value="Input" />
-              <CButton as="input" type="submit" color="primary" value="Submit" />
-              <CButton as="input" type="reset" color="primary" value="Reset" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>outline</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you need a button, but without the strong background colors. Set{' '}
-              <code>variant=&#34;outline&#34;</code> prop to remove all background colors.
-            </p>
-            <DocsExample href="components/buttons#outline-buttons">
-              {['normal', 'active', 'disabled'].map((state, index) => (
-                <CRow className="align-items-center mb-3" key={index}>
-                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
-                    {state.charAt(0).toUpperCase() + state.slice(1)}
-                  </CCol>
-                  <CCol xs>
-                    {[
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ].map((color, index) => (
-                      <CButton
-                        color={color}
-                        variant="outline"
-                        key={index}
-                        active={state === 'active'}
-                        disabled={state === 'disabled'}
-                      >
-                        {color.charAt(0).toUpperCase() + color.slice(1)}
-                      </CButton>
-                    ))}
-                  </CCol>
-                </CRow>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>ghost</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
-              to remove all background colors.
-            </p>
-            <DocsExample href="components/buttons#ghost-buttons">
-              {['normal', 'active', 'disabled'].map((state, index) => (
-                <CRow className="align-items-center mb-3" key={index}>
-                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
-                    {state.charAt(0).toUpperCase() + state.slice(1)}
-                  </CCol>
-                  <CCol xs>
-                    {[
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ].map((color, index) => (
-                      <CButton
-                        color={color}
-                        variant="ghost"
-                        key={index}
-                        active={state === 'active'}
-                        disabled={state === 'disabled'}
-                      >
-                        {color.charAt(0).toUpperCase() + color.slice(1)}
-                      </CButton>
-                    ))}
-                  </CCol>
-                </CRow>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>Sizes</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
-              <code>size=&#34;sm&#34;</code> for additional sizes.
-            </p>
-            <DocsExample href="components/buttons#sizes">
-              <CButton color="primary" size="lg">
-                Large button
-              </CButton>
-              <CButton color="secondary" size="lg">
-                Large button
-              </CButton>
-            </DocsExample>
-            <DocsExample href="components/buttons#sizes">
-              <CButton color="primary" size="sm">
-                Small button
-              </CButton>
-              <CButton color="secondary" size="sm">
-                Small button
-              </CButton>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>Pill</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/buttons#pill-buttons">
-              {[
-                'primary',
-                'secondary',
-                'success',
-                'danger',
-                'warning',
-                'info',
-                'light',
-                'dark',
-              ].map((color, index) => (
-                <CButton color={color} shape="rounded-pill" key={index}>
-                  {color.charAt(0).toUpperCase() + color.slice(1)}
-                </CButton>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>Square</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="components/buttons#square">
-              {[
-                'primary',
-                'secondary',
-                'success',
-                'danger',
-                'warning',
-                'info',
-                'light',
-                'dark',
-              ].map((color, index) => (
-                <CButton color={color} shape="rounded-0" key={index}>
-                  {color.charAt(0).toUpperCase() + color.slice(1)}
-                </CButton>
-              ))}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>Disabled state</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>disabled</code> boolean prop to any <code>&lt;CButton&gt;</code>{' '}
-              component to make buttons look inactive. Disabled button has{' '}
-              <code>pointer-events: none</code> applied to, disabling hover and active states from
-              triggering.
-            </p>
-            <DocsExample href="components/buttons#disabled-state">
-              <CButton color="primary" size="lg" disabled>
-                Primary button
-              </CButton>
-              <CButton color="secondary" size="lg" disabled>
-                Button
-              </CButton>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
-            </p>
-            <p className="text-body-secondary small">
-              <code>&lt;a&gt;</code>s don&#39;tsupport the <code>disabled</code> attribute, so
-              CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
-              CoreUI also has to add to the disabled button component{' '}
-              <code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
-              to assistive technologies.
-            </p>
-            <DocsExample href="components/buttons#disabled-state">
-              <CButton as="a" href="#" color="primary" size="lg" disabled>
-                Primary link
-              </CButton>
-              <CButton as="a" href="#" color="secondary" size="lg" disabled>
-                Link
-              </CButton>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Button</strong> <small>Block buttons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create buttons that span the full width of a parent—by using utilities.
-            </p>
-            <DocsExample href="components/buttons#block-buttons">
-              <div className="d-grid gap-2">
-                <CButton color="primary">Button</CButton>
-                <CButton color="primary">Button</CButton>
-              </div>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Here we create a responsive variation, starting with vertically stacked buttons until
-              the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
-              <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
-              your browser to see them change.
-            </p>
-            <DocsExample href="components/buttons#block-buttons">
-              <div className="d-grid gap-2 d-md-block">
-                <CButton color="primary">Button</CButton>
-                <CButton color="primary">Button</CButton>
-              </div>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              You can adjust the width of your block buttons with grid column width classes. For
-              example, for a half-width &#34;block button&#34;, use <code>.col-6</code>. Center it
-              horizontally with <code>.mx-auto</code>, too.
-            </p>
-            <DocsExample href="components/buttons#block-buttons">
-              <div className="d-grid gap-2 col-6 mx-auto">
-                <CButton color="primary">Button</CButton>
-                <CButton color="primary">Button</CButton>
-              </div>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Additional utilities can be used to adjust the alignment of buttons when horizontal.
-              Here we&#39;ve taken our previous responsive example and added some flex utilities and
-              a margin utility on the button to right align the buttons when they&#39;re no longer
-              stacked.
-            </p>
-            <DocsExample href="components/buttons#block-buttons">
-              <div className="d-grid gap-2 d-md-flex justify-content-md-end">
-                <CButton color="primary" className="me-md-2">
-                  Button
-                </CButton>
-                <CButton color="primary">Button</CButton>
-              </div>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Buttons" />
+      <CardContent>
+        <DocsExample href="components/buttons">
+          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+            <Button variant="contained" color="primary">
+              Primary
+            </Button>
+            <Button variant="contained" color="secondary">
+              Secondary
+            </Button>
+            <Button variant="contained" color="success">
+              Success
+            </Button>
+            <Button variant="contained" color="error">
+              Danger
+            </Button>
+            <Button variant="contained" color="warning">
+              Warning
+            </Button>
+            <Button variant="contained" color="info">
+              Info
+            </Button>
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/buttons#outline-buttons">
+          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap sx={{ mt: 3 }}>
+            <Button variant="outlined" color="primary">
+              Primary
+            </Button>
+            <Button variant="outlined" color="secondary">
+              Secondary
+            </Button>
+            <Button variant="outlined" color="success">
+              Success
+            </Button>
+            <Button variant="outlined" color="error">
+              Danger
+            </Button>
+            <Button variant="outlined" color="warning">
+              Warning
+            </Button>
+            <Button variant="outlined" color="info">
+              Info
+            </Button>
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/buttons#sizes">
+          <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 3 }}>
+            <Button variant="contained" size="small">
+              Small
+            </Button>
+            <Button variant="contained" size="medium">
+              Medium
+            </Button>
+            <Button variant="contained" size="large">
+              Large
+            </Button>
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/buttons#disabled-state">
+          <Stack direction="row" spacing={1} sx={{ mt: 3 }}>
+            <Button variant="contained" disabled>
+              Disabled
+            </Button>
+            <Button variant="outlined" disabled>
+              Disabled
+            </Button>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js
index a6885a416a..fcc468acba 100644
--- a/src/views/buttons/dropdowns/Dropdowns.js
+++ b/src/views/buttons/dropdowns/Dropdowns.js
@@ -1,338 +1,46 @@
 import React from 'react'
-import {
-  CButton,
-  CButtonGroup,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Dropdowns = () => {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/dropdown/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Single button</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
-              elements:
-            </p>
-            <DocsExample href="components/dropdown#single-button">
-              <CDropdown>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              The best part is you can do this with any button variant, too:
-            </p>
-            <DocsExample href="components/dropdown#single-button">
-              <>
-                {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
-                  (color, index) => (
-                    <CDropdown variant="btn-group" key={index}>
-                      <CDropdownToggle color={color}>{color}</CDropdownToggle>
-                      <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider />
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                      </CDropdownMenu>
-                    </CDropdown>
-                  ),
-                )}
-              </>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Split button</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Similarly, create split button dropdowns with virtually the same markup as single
-              button dropdowns, but with the addition of boolean prop <code>split</code> for proper
-              spacing around the dropdown caret.
-            </p>
-            <p className="text-body-secondary small">
-              We use this extra class to reduce the horizontal <code>padding</code> on either side
-              of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
-              normal button dropdowns. Those additional changes hold the caret centered in the split
-              button and implement a more properly sized hit area next to the main button.
-            </p>
-            <DocsExample href="components/dropdown#split-button">
-              <>
-                {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
-                  (color, index) => (
-                    <CDropdown variant="btn-group" key={index}>
-                      <CButton color={color}>{color}</CButton>
-                      <CDropdownToggle color={color} split />
-                      <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#">Something else here</CDropdownItem>
-                        <CDropdownDivider />
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                      </CDropdownMenu>
-                    </CDropdown>
-                  ),
-                )}
-              </>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Button dropdowns work with buttons of all sizes, including default and split dropdown
-              buttons.
-            </p>
-            <DocsExample href="components/dropdown#sizing">
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="secondary" size="lg">
-                  Large button
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CDropdown variant="btn-group">
-                <CButton color="secondary" size="lg">
-                  Large split button
-                </CButton>
-                <CDropdownToggle color="secondary" size="lg" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </DocsExample>
-            <DocsExample href="components/dropdown#sizing">
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="secondary" size="sm">
-                  Small button
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CDropdown variant="btn-group">
-                <CButton color="secondary" size="sm">
-                  Small split button
-                </CButton>
-                <CDropdownToggle color="secondary" size="sm" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Single button</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
-              <code>dark</code> property. No changes are required to the dropdown items.
-            </p>
-            <DocsExample href="components/dropdown#dark-dropdowns">
-              <CDropdown dark>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </DocsExample>
-            <p className="text-body-secondary small">And putting it to use in a navbar:</p>
-            <DocsExample href="components/dropdown#dark-dropdowns">
-              <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
-                <div className="container-fluid">
-                  <a className="navbar-brand" href="https://coreui.io/react/">
-                    Navbar
-                  </a>
-                  <button
-                    className="navbar-toggler"
-                    type="button"
-                    data-coreui-toggle="collapse"
-                    data-coreui-target="#navbarNavDarkDropdown"
-                    aria-controls="navbarNavDarkDropdown"
-                    aria-expanded="false"
-                    aria-label="Toggle navigation"
-                  >
-                    <span className="navbar-toggler-icon"></span>
-                  </button>
-                  <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
-                    <ul className="navbar-nav">
-                      <CDropdown dark as="li" variant="nav-item">
-                        <CDropdownToggle>Dropdown</CDropdownToggle>
-                        <CDropdownMenu>
-                          <CDropdownItem href="#">Action</CDropdownItem>
-                          <CDropdownItem href="#">Another action</CDropdownItem>
-                          <CDropdownItem href="#">Something else here</CDropdownItem>
-                          <CDropdownDivider />
-                          <CDropdownItem href="#">Separated link</CDropdownItem>
-                        </CDropdownMenu>
-                      </CDropdown>
-                    </ul>
-                  </div>
-                </div>
-              </nav>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Dropup</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Trigger dropdown menus above elements by adding{' '}
-              <code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
-              component.
-            </p>
-            <DocsExample href="components/dropdown#dropup">
-              <CDropdown variant="btn-group" direction="dropup">
-                <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CDropdown variant="btn-group" direction="dropup">
-                <CButton color="secondary">Small split button</CButton>
-                <CDropdownToggle color="secondary" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Dropright</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Trigger dropdown menus at the right of the elements by adding{' '}
-              <code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
-              component.
-            </p>
-            <DocsExample href="components/dropdown#dropright">
-              <CDropdown variant="btn-group" direction="dropend">
-                <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CDropdown variant="btn-group" direction="dropend">
-                <CButton color="secondary">Small split button</CButton>
-                <CDropdownToggle color="secondary" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Dropdown</strong> <small>Dropleft</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Trigger dropdown menus at the left of the elements by adding{' '}
-              <code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
-              component.
-            </p>
-            <DocsExample href="components/dropdown#dropleft">
-              <CButtonGroup>
-                <CDropdown variant="btn-group" direction="dropstart">
-                  <CDropdownToggle color="secondary" split />
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CButton color="secondary">Small split button</CButton>
-              </CButtonGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Dropdowns" />
+      <CardContent>
+        <DocsExample href="components/dropdown">
+          <Stack direction="row" spacing={2}>
+            <div>
+              <Button variant="contained" onClick={handleClick}>
+                Dropdown button
+              </Button>
+              <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                <MenuItem onClick={handleClose}>Action</MenuItem>
+                <MenuItem onClick={handleClose}>Another action</MenuItem>
+                <MenuItem onClick={handleClose}>Something else here</MenuItem>
+              </Menu>
+            </div>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js
index d5df06bf70..fc0b7af5dd 100644
--- a/src/views/charts/Charts.js
+++ b/src/views/charts/Charts.js
@@ -1,182 +1,126 @@
 import React from 'react'
-import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import { useTheme } from '@mui/material/styles'
+import { Line, Bar, Doughnut, Pie, Radar, PolarArea } from 'react-chartjs-2'
 import {
-  CChartBar,
-  CChartDoughnut,
-  CChartLine,
-  CChartPie,
-  CChartPolarArea,
-  CChartRadar,
-} from '@coreui/react-chartjs'
-import { DocsLink } from 'src/components'
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  RadialLinearScale,
+  Filler,
+  Tooltip,
+  Legend,
+} from 'chart.js'
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  RadialLinearScale,
+  Filler,
+  Tooltip,
+  Legend,
+)
 
 const Charts = () => {
-  const random = () => Math.round(Math.random() * 100)
+  const theme = useTheme()
+  const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+
+  const lineData = {
+    labels,
+    datasets: [
+      {
+        label: 'Dataset 1',
+        backgroundColor: theme.palette.primary.main,
+        borderColor: theme.palette.primary.main,
+        data: [40, 20, 12, 39, 10, 40, 39],
+        fill: false,
+      },
+      {
+        label: 'Dataset 2',
+        backgroundColor: theme.palette.secondary.main,
+        borderColor: theme.palette.secondary.main,
+        data: [50, 12, 28, 29, 7, 25, 12],
+        fill: false,
+      },
+    ],
+  }
+
+  const barData = {
+    labels,
+    datasets: [
+      {
+        label: 'Dataset 1',
+        backgroundColor: theme.palette.info.main,
+        data: [40, 20, 12, 39, 10, 40, 39],
+      },
+      {
+        label: 'Dataset 2',
+        backgroundColor: theme.palette.error.main,
+        data: [50, 12, 28, 29, 7, 25, 12],
+      },
+    ],
+  }
+
+  const doughnutData = {
+    labels: ['Red', 'Green', 'Yellow'],
+    datasets: [
+      {
+        data: [300, 50, 100],
+        backgroundColor: [
+          theme.palette.error.main,
+          theme.palette.success.main,
+          theme.palette.warning.main,
+        ],
+      },
+    ],
+  }
 
   return (
-    <CRow>
-      <CCol xs={12}></CCol>
-      <CCol xs={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Bar Chart <DocsLink name="chart" />
-          </CCardHeader>
-          <CCardBody>
-            <CChartBar
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                  {
-                    label: 'GitHub Commits',
-                    backgroundColor: '#f87979',
-                    data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
-                  },
-                ],
-              }}
-              labels="months"
-            />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Line Chart <DocsLink name="chart" />
-          </CCardHeader>
-          <CCardBody>
-            <CChartLine
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                  {
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(220, 220, 220, 0.2)',
-                    borderColor: 'rgba(220, 220, 220, 1)',
-                    pointBackgroundColor: 'rgba(220, 220, 220, 1)',
-                    pointBorderColor: '#fff',
-                    data: [random(), random(), random(), random(), random(), random(), random()],
-                  },
-                  {
-                    label: 'My Second dataset',
-                    backgroundColor: 'rgba(151, 187, 205, 0.2)',
-                    borderColor: 'rgba(151, 187, 205, 1)',
-                    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
-                    pointBorderColor: '#fff',
-                    data: [random(), random(), random(), random(), random(), random(), random()],
-                  },
-                ],
-              }}
-            />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Doughnut Chart <DocsLink name="chart" />
-          </CCardHeader>
-          <CCardBody>
-            <CChartDoughnut
-              data={{
-                labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-                datasets: [
-                  {
-                    backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-                    data: [40, 20, 80, 10],
-                  },
-                ],
-              }}
-            />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Pie Chart <DocsLink name="chart" />{' '}
-          </CCardHeader>
-          <CCardBody>
-            <CChartPie
-              data={{
-                labels: ['Red', 'Green', 'Yellow'],
-                datasets: [
-                  {
-                    data: [300, 50, 100],
-                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-                    hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-                  },
-                ],
-              }}
-            />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Polar Area Chart
-            <DocsLink name="chart" />
-          </CCardHeader>
-          <CCardBody>
-            <CChartPolarArea
-              data={{
-                labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
-                datasets: [
-                  {
-                    data: [11, 16, 7, 3, 14],
-                    backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-                  },
-                ],
-              }}
-            />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Radar Chart <DocsLink name="chart" />
-          </CCardHeader>
-          <CCardBody>
-            <CChartRadar
-              data={{
-                labels: [
-                  'Eating',
-                  'Drinking',
-                  'Sleeping',
-                  'Designing',
-                  'Coding',
-                  'Cycling',
-                  'Running',
-                ],
-                datasets: [
-                  {
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(220, 220, 220, 0.2)',
-                    borderColor: 'rgba(220, 220, 220, 1)',
-                    pointBackgroundColor: 'rgba(220, 220, 220, 1)',
-                    pointBorderColor: '#fff',
-                    pointHighlightFill: '#fff',
-                    pointHighlightStroke: 'rgba(220, 220, 220, 1)',
-                    data: [65, 59, 90, 81, 56, 55, 40],
-                  },
-                  {
-                    label: 'My Second dataset',
-                    backgroundColor: 'rgba(151, 187, 205, 0.2)',
-                    borderColor: 'rgba(151, 187, 205, 1)',
-                    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
-                    pointBorderColor: '#fff',
-                    pointHighlightFill: '#fff',
-                    pointHighlightStroke: 'rgba(151, 187, 205, 1)',
-                    data: [28, 48, 40, 19, 96, 27, 100],
-                  },
-                ],
-              }}
-            />
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Grid container spacing={3}>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Card>
+          <CardHeader title="Line Chart" />
+          <CardContent>
+            <Line data={lineData} />
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Card>
+          <CardHeader title="Bar Chart" />
+          <CardContent>
+            <Bar data={barData} />
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Card>
+          <CardHeader title="Doughnut Chart" />
+          <CardContent>
+            <Doughnut data={doughnutData} />
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Card>
+          <CardHeader title="Pie Chart" />
+          <CardContent>
+            <Pie data={doughnutData} />
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
   )
 }
 
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 57a55290d9..1c730c6cb1 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -1,47 +1,30 @@
 import React from 'react'
-import classNames from 'classnames'
-
-import {
-  CAvatar,
-  CButton,
-  CButtonGroup,
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardHeader,
-  CCol,
-  CProgress,
-  CRow,
-  CTable,
-  CTableBody,
-  CTableDataCell,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import {
-  cibCcAmex,
-  cibCcApplePay,
-  cibCcMastercard,
-  cibCcPaypal,
-  cibCcStripe,
-  cibCcVisa,
-  cibGoogle,
-  cibFacebook,
-  cibLinkedin,
-  cifBr,
-  cifEs,
-  cifFr,
-  cifIn,
-  cifPl,
-  cifUs,
-  cibTwitter,
-  cilCloudDownload,
-  cilPeople,
-  cilUser,
-  cilUserFemale,
-} from '@coreui/icons'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import LinearProgress from '@mui/material/LinearProgress'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Avatar from '@mui/material/Avatar'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import PersonIcon from '@mui/icons-material/Person'
+import GoogleIcon from '@mui/icons-material/Google'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import MaleIcon from '@mui/icons-material/Male'
+import FemaleIcon from '@mui/icons-material/Female'
 
 import avatar1 from 'src/assets/images/avatars/1.jpg'
 import avatar2 from 'src/assets/images/avatars/2.jpg'
@@ -50,8 +33,6 @@ import avatar4 from 'src/assets/images/avatars/4.jpg'
 import avatar5 from 'src/assets/images/avatars/5.jpg'
 import avatar6 from 'src/assets/images/avatars/6.jpg'
 
-import WidgetsBrand from '../widgets/WidgetsBrand'
-import WidgetsDropdown from '../widgets/WidgetsDropdown'
 import MainChart from './MainChart'
 
 const Dashboard = () => {
@@ -59,7 +40,7 @@ const Dashboard = () => {
     { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' },
     { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' },
     { title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' },
-    { title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' },
+    { title: 'New Users', value: '22.123 Users', percent: 80, color: 'error' },
     { title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' },
   ]
 
@@ -74,313 +55,373 @@ const Dashboard = () => {
   ]
 
   const progressGroupExample2 = [
-    { title: 'Male', icon: cilUser, value: 53 },
-    { title: 'Female', icon: cilUserFemale, value: 43 },
+    { title: 'Male', icon: MaleIcon, value: 53 },
+    { title: 'Female', icon: FemaleIcon, value: 43 },
   ]
 
   const progressGroupExample3 = [
-    { title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' },
-    { title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' },
-    { title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' },
-    { title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' },
+    { title: 'Organic Search', icon: GoogleIcon, percent: 56, value: '191,235' },
+    { title: 'Facebook', icon: FacebookIcon, percent: 15, value: '51,223' },
+    { title: 'Twitter', icon: TwitterIcon, percent: 11, value: '37,564' },
+    { title: 'LinkedIn', icon: LinkedInIcon, percent: 8, value: '27,319' },
   ]
 
   const tableExample = [
     {
-      avatar: { src: avatar1, status: 'success' },
-      user: {
-        name: 'Yiorgos Avraamu',
-        new: true,
-        registered: 'Jan 1, 2023',
-      },
-      country: { name: 'USA', flag: cifUs },
-      usage: {
-        value: 50,
-        period: 'Jun 11, 2023 - Jul 10, 2023',
-        color: 'success',
-      },
-      payment: { name: 'Mastercard', icon: cibCcMastercard },
+      avatar: avatar1,
+      user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2023' },
+      country: 'USA',
+      usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' },
+      payment: 'Mastercard',
       activity: '10 sec ago',
     },
     {
-      avatar: { src: avatar2, status: 'danger' },
-      user: {
-        name: 'Avram Tarasios',
-        new: false,
-        registered: 'Jan 1, 2023',
-      },
-      country: { name: 'Brazil', flag: cifBr },
-      usage: {
-        value: 22,
-        period: 'Jun 11, 2023 - Jul 10, 2023',
-        color: 'info',
-      },
-      payment: { name: 'Visa', icon: cibCcVisa },
+      avatar: avatar2,
+      user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' },
+      country: 'Brazil',
+      usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' },
+      payment: 'Visa',
       activity: '5 minutes ago',
     },
     {
-      avatar: { src: avatar3, status: 'warning' },
+      avatar: avatar3,
       user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
-      country: { name: 'India', flag: cifIn },
-      usage: {
-        value: 74,
-        period: 'Jun 11, 2023 - Jul 10, 2023',
-        color: 'warning',
-      },
-      payment: { name: 'Stripe', icon: cibCcStripe },
+      country: 'India',
+      usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' },
+      payment: 'Stripe',
       activity: '1 hour ago',
     },
     {
-      avatar: { src: avatar4, status: 'secondary' },
+      avatar: avatar4,
       user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
-      country: { name: 'France', flag: cifFr },
-      usage: {
-        value: 98,
-        period: 'Jun 11, 2023 - Jul 10, 2023',
-        color: 'danger',
-      },
-      payment: { name: 'PayPal', icon: cibCcPaypal },
+      country: 'France',
+      usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'error' },
+      payment: 'PayPal',
       activity: 'Last month',
     },
     {
-      avatar: { src: avatar5, status: 'success' },
-      user: {
-        name: 'Agapetus Tadeáš',
-        new: true,
-        registered: 'Jan 1, 2023',
-      },
-      country: { name: 'Spain', flag: cifEs },
-      usage: {
-        value: 22,
-        period: 'Jun 11, 2023 - Jul 10, 2023',
-        color: 'primary',
-      },
-      payment: { name: 'Google Wallet', icon: cibCcApplePay },
+      avatar: avatar5,
+      user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2023' },
+      country: 'Spain',
+      usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' },
+      payment: 'Google Wallet',
       activity: 'Last week',
     },
     {
-      avatar: { src: avatar6, status: 'danger' },
-      user: {
-        name: 'Friderik Dávid',
-        new: true,
-        registered: 'Jan 1, 2023',
-      },
-      country: { name: 'Poland', flag: cifPl },
-      usage: {
-        value: 43,
-        period: 'Jun 11, 2023 - Jul 10, 2023',
-        color: 'success',
-      },
-      payment: { name: 'Amex', icon: cibCcAmex },
+      avatar: avatar6,
+      user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2023' },
+      country: 'Poland',
+      usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' },
+      payment: 'Amex',
       activity: 'Last week',
     },
   ]
 
+  const getColorValue = (color) => {
+    const colorMap = {
+      success: 'success.main',
+      info: 'info.main',
+      warning: 'warning.main',
+      error: 'error.main',
+      primary: 'primary.main',
+    }
+    return colorMap[color] || 'primary.main'
+  }
+
   return (
-    <>
-      <WidgetsDropdown className="mb-4" />
-      <CCard className="mb-4">
-        <CCardBody>
-          <CRow>
-            <CCol sm={5}>
-              <h4 id="traffic" className="card-title mb-0">
-                Traffic
-              </h4>
-              <div className="small text-body-secondary">January - July 2023</div>
-            </CCol>
-            <CCol sm={7} className="d-none d-md-block">
-              <CButton color="primary" className="float-end">
-                <CIcon icon={cilCloudDownload} />
-              </CButton>
-              <CButtonGroup className="float-end me-3">
+    <Box>
+      <Grid container spacing={3} sx={{ mb: 3 }}>
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <Card>
+            <CardContent>
+              <Typography variant="h4" color="primary">
+                26K
+              </Typography>
+              <Typography color="text.secondary">Users</Typography>
+              <LinearProgress variant="determinate" value={25} color="primary" sx={{ mt: 1 }} />
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <Card>
+            <CardContent>
+              <Typography variant="h4" color="info.main">
+                $6,200
+              </Typography>
+              <Typography color="text.secondary">Income</Typography>
+              <LinearProgress variant="determinate" value={50} color="info" sx={{ mt: 1 }} />
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <Card>
+            <CardContent>
+              <Typography variant="h4" color="warning.main">
+                2.49%
+              </Typography>
+              <Typography color="text.secondary">Conversion Rate</Typography>
+              <LinearProgress variant="determinate" value={75} color="warning" sx={{ mt: 1 }} />
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <Card>
+            <CardContent>
+              <Typography variant="h4" color="error.main">
+                44K
+              </Typography>
+              <Typography color="text.secondary">Sessions</Typography>
+              <LinearProgress variant="determinate" value={90} color="error" sx={{ mt: 1 }} />
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+
+      <Card sx={{ mb: 3 }}>
+        <CardContent>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'flex-start',
+              mb: 2,
+            }}
+          >
+            <Box>
+              <Typography variant="h5">Traffic</Typography>
+              <Typography color="text.secondary" variant="body2">
+                January - July 2023
+              </Typography>
+            </Box>
+            <Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 1 }}>
+              <ButtonGroup size="small">
                 {['Day', 'Month', 'Year'].map((value) => (
-                  <CButton
-                    color="outline-secondary"
-                    key={value}
-                    className="mx-0"
-                    active={value === 'Month'}
-                  >
+                  <Button key={value} variant={value === 'Month' ? 'contained' : 'outlined'}>
                     {value}
-                  </CButton>
+                  </Button>
                 ))}
-              </CButtonGroup>
-            </CCol>
-          </CRow>
+              </ButtonGroup>
+              <Button variant="contained" startIcon={<CloudDownloadIcon />}>
+                Download
+              </Button>
+            </Box>
+          </Box>
           <MainChart />
-        </CCardBody>
-        <CCardFooter>
-          <CRow
-            xs={{ cols: 1, gutter: 4 }}
-            sm={{ cols: 2 }}
-            lg={{ cols: 4 }}
-            xl={{ cols: 5 }}
-            className="mb-2 text-center"
-          >
-            {progressExample.map((item, index, items) => (
-              <CCol
-                className={classNames({
-                  'd-none d-xl-block': index + 1 === items.length,
-                })}
-                key={index}
-              >
-                <div className="text-body-secondary">{item.title}</div>
-                <div className="fw-semibold text-truncate">
-                  {item.value} ({item.percent}%)
-                </div>
-                <CProgress thin className="mt-2" color={item.color} value={item.percent} />
-              </CCol>
+        </CardContent>
+        <Divider />
+        <CardContent>
+          <Grid container spacing={2}>
+            {progressExample.map((item, index) => (
+              <Grid size={{ xs: 12, sm: 6, lg: 2.4 }} key={index}>
+                <Box sx={{ textAlign: 'center' }}>
+                  <Typography color="text.secondary" variant="body2">
+                    {item.title}
+                  </Typography>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
+                    {item.value} ({item.percent}%)
+                  </Typography>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.percent}
+                    color={item.color}
+                    sx={{ mt: 1, height: 4 }}
+                  />
+                </Box>
+              </Grid>
             ))}
-          </CRow>
-        </CCardFooter>
-      </CCard>
-      <WidgetsBrand className="mb-4" withCharts />
-      <CRow>
-        <CCol xs>
-          <CCard className="mb-4">
-            <CCardHeader>Traffic {' & '} Sales</CCardHeader>
-            <CCardBody>
-              <CRow>
-                <CCol xs={12} md={6} xl={6}>
-                  <CRow>
-                    <CCol xs={6}>
-                      <div className="border-start border-start-4 border-start-info py-1 px-3">
-                        <div className="text-body-secondary text-truncate small">New Clients</div>
-                        <div className="fs-5 fw-semibold">9,123</div>
-                      </div>
-                    </CCol>
-                    <CCol xs={6}>
-                      <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
-                        <div className="text-body-secondary text-truncate small">
-                          Recurring Clients
-                        </div>
-                        <div className="fs-5 fw-semibold">22,643</div>
-                      </div>
-                    </CCol>
-                  </CRow>
-                  <hr className="mt-0" />
-                  {progressGroupExample1.map((item, index) => (
-                    <div className="progress-group mb-4" key={index}>
-                      <div className="progress-group-prepend">
-                        <span className="text-body-secondary small">{item.title}</span>
-                      </div>
-                      <div className="progress-group-bars">
-                        <CProgress thin color="info" value={item.value1} />
-                        <CProgress thin color="danger" value={item.value2} />
-                      </div>
-                    </div>
-                  ))}
-                </CCol>
-                <CCol xs={12} md={6} xl={6}>
-                  <CRow>
-                    <CCol xs={6}>
-                      <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
-                        <div className="text-body-secondary text-truncate small">Pageviews</div>
-                        <div className="fs-5 fw-semibold">78,623</div>
-                      </div>
-                    </CCol>
-                    <CCol xs={6}>
-                      <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
-                        <div className="text-body-secondary text-truncate small">Organic</div>
-                        <div className="fs-5 fw-semibold">49,123</div>
-                      </div>
-                    </CCol>
-                  </CRow>
+          </Grid>
+        </CardContent>
+      </Card>
 
-                  <hr className="mt-0" />
-
-                  {progressGroupExample2.map((item, index) => (
-                    <div className="progress-group mb-4" key={index}>
-                      <div className="progress-group-header">
-                        <CIcon className="me-2" icon={item.icon} size="lg" />
-                        <span>{item.title}</span>
-                        <span className="ms-auto fw-semibold">{item.value}%</span>
-                      </div>
-                      <div className="progress-group-bars">
-                        <CProgress thin color="warning" value={item.value} />
-                      </div>
-                    </div>
-                  ))}
-
-                  <div className="mb-5"></div>
-
-                  {progressGroupExample3.map((item, index) => (
-                    <div className="progress-group" key={index}>
-                      <div className="progress-group-header">
-                        <CIcon className="me-2" icon={item.icon} size="lg" />
-                        <span>{item.title}</span>
-                        <span className="ms-auto fw-semibold">
-                          {item.value}{' '}
-                          <span className="text-body-secondary small">({item.percent}%)</span>
-                        </span>
-                      </div>
-                      <div className="progress-group-bars">
-                        <CProgress thin color="success" value={item.percent} />
-                      </div>
-                    </div>
-                  ))}
-                </CCol>
-              </CRow>
+      <Card sx={{ mb: 3 }}>
+        <CardHeader title="Traffic & Sales" />
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Grid container spacing={2} sx={{ mb: 2 }}>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'info.main', pl: 2, py: 1 }}>
+                    <Typography color="text.secondary" variant="body2">
+                      New Clients
+                    </Typography>
+                    <Typography variant="h6">9,123</Typography>
+                  </Box>
+                </Grid>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'error.main', pl: 2, py: 1 }}>
+                    <Typography color="text.secondary" variant="body2">
+                      Recurring Clients
+                    </Typography>
+                    <Typography variant="h6">22,643</Typography>
+                  </Box>
+                </Grid>
+              </Grid>
+              <Divider sx={{ mb: 2 }} />
+              {progressGroupExample1.map((item, index) => (
+                <Box key={index} sx={{ mb: 2 }}>
+                  <Typography color="text.secondary" variant="body2" sx={{ mb: 0.5 }}>
+                    {item.title}
+                  </Typography>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.value1}
+                    color="info"
+                    sx={{ mb: 0.5, height: 4 }}
+                  />
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.value2}
+                    color="error"
+                    sx={{ height: 4 }}
+                  />
+                </Box>
+              ))}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Grid container spacing={2} sx={{ mb: 2 }}>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'warning.main', pl: 2, py: 1 }}>
+                    <Typography color="text.secondary" variant="body2">
+                      Pageviews
+                    </Typography>
+                    <Typography variant="h6">78,623</Typography>
+                  </Box>
+                </Grid>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'success.main', pl: 2, py: 1 }}>
+                    <Typography color="text.secondary" variant="body2">
+                      Organic
+                    </Typography>
+                    <Typography variant="h6">49,123</Typography>
+                  </Box>
+                </Grid>
+              </Grid>
+              <Divider sx={{ mb: 2 }} />
+              {progressGroupExample2.map((item, index) => (
+                <Box key={index} sx={{ mb: 2 }}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      mb: 0.5,
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <item.icon fontSize="small" />
+                      <Typography variant="body2">{item.title}</Typography>
+                    </Box>
+                    <Typography variant="body2" fontWeight="bold">
+                      {item.value}%
+                    </Typography>
+                  </Box>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.value}
+                    color="warning"
+                    sx={{ height: 4 }}
+                  />
+                </Box>
+              ))}
+              <Box sx={{ mb: 3 }} />
+              {progressGroupExample3.map((item, index) => (
+                <Box key={index} sx={{ mb: 2 }}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      mb: 0.5,
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <item.icon fontSize="small" />
+                      <Typography variant="body2">{item.title}</Typography>
+                    </Box>
+                    <Typography variant="body2">
+                      <strong>{item.value}</strong>{' '}
+                      <Typography component="span" color="text.secondary" variant="body2">
+                        ({item.percent}%)
+                      </Typography>
+                    </Typography>
+                  </Box>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.percent}
+                    color="success"
+                    sx={{ height: 4 }}
+                  />
+                </Box>
+              ))}
+            </Grid>
+          </Grid>
 
-              <br />
+          <Divider sx={{ my: 3 }} />
 
-              <CTable align="middle" className="mb-0 border" hover responsive>
-                <CTableHead className="text-nowrap">
-                  <CTableRow>
-                    <CTableHeaderCell className="bg-body-tertiary text-center">
-                      <CIcon icon={cilPeople} />
-                    </CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary">User</CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary text-center">
-                      Country
-                    </CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary text-center">
-                      Payment Method
-                    </CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
-                  {tableExample.map((item, index) => (
-                    <CTableRow v-for="item in tableItems" key={index}>
-                      <CTableDataCell className="text-center">
-                        <CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
-                      </CTableDataCell>
-                      <CTableDataCell>
-                        <div>{item.user.name}</div>
-                        <div className="small text-body-secondary text-nowrap">
-                          <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
-                          {item.user.registered}
-                        </div>
-                      </CTableDataCell>
-                      <CTableDataCell className="text-center">
-                        <CIcon size="xl" icon={item.country.flag} title={item.country.name} />
-                      </CTableDataCell>
-                      <CTableDataCell>
-                        <div className="d-flex justify-content-between text-nowrap">
-                          <div className="fw-semibold">{item.usage.value}%</div>
-                          <div className="ms-3">
-                            <small className="text-body-secondary">{item.usage.period}</small>
-                          </div>
-                        </div>
-                        <CProgress thin color={item.usage.color} value={item.usage.value} />
-                      </CTableDataCell>
-                      <CTableDataCell className="text-center">
-                        <CIcon size="xl" icon={item.payment.icon} />
-                      </CTableDataCell>
-                      <CTableDataCell>
-                        <div className="small text-body-secondary text-nowrap">Last login</div>
-                        <div className="fw-semibold text-nowrap">{item.activity}</div>
-                      </CTableDataCell>
-                    </CTableRow>
-                  ))}
-                </CTableBody>
-              </CTable>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </>
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell align="center">
+                    <PersonIcon />
+                  </TableCell>
+                  <TableCell>User</TableCell>
+                  <TableCell align="center">Country</TableCell>
+                  <TableCell>Usage</TableCell>
+                  <TableCell align="center">Payment Method</TableCell>
+                  <TableCell>Activity</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {tableExample.map((item, index) => (
+                  <TableRow key={index} hover>
+                    <TableCell align="center">
+                      <Avatar src={item.avatar} sx={{ width: 40, height: 40 }} />
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2">{item.user.name}</Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        {item.user.new ? 'New' : 'Recurring'} | Registered: {item.user.registered}
+                      </Typography>
+                    </TableCell>
+                    <TableCell align="center">
+                      <Typography variant="body2">{item.country}</Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+                        <Typography variant="body2" fontWeight="bold">
+                          {item.usage.value}%
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {item.usage.period}
+                        </Typography>
+                      </Box>
+                      <LinearProgress
+                        variant="determinate"
+                        value={item.usage.value}
+                        color={item.usage.color}
+                        sx={{ height: 4 }}
+                      />
+                    </TableCell>
+                    <TableCell align="center">
+                      <Chip label={item.payment} size="small" variant="outlined" />
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="caption" color="text.secondary">
+                        Last login
+                      </Typography>
+                      <Typography variant="body2" fontWeight="bold">
+                        {item.activity}
+                      </Typography>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </CardContent>
+      </Card>
+    </Box>
   )
 }
 
diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js
index 98b7eec3cf..7eb269bc41 100644
--- a/src/views/dashboard/MainChart.js
+++ b/src/views/dashboard/MainChart.js
@@ -1,136 +1,131 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useMemo } from 'react'
+import { useTheme } from '@mui/material/styles'
+import { Line } from 'react-chartjs-2'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+} from 'chart.js'
 
-import { CChartLine } from '@coreui/react-chartjs'
-import { getStyle } from '@coreui/utils'
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+)
 
 const MainChart = () => {
+  const theme = useTheme()
   const chartRef = useRef(null)
 
-  useEffect(() => {
-    const handleColorSchemeChange = () => {
-      if (chartRef.current) {
-        setTimeout(() => {
-          chartRef.current.options.scales.x.grid.borderColor = getStyle(
-            '--cui-border-color-translucent',
-          )
-          chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-          chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-          chartRef.current.options.scales.y.grid.borderColor = getStyle(
-            '--cui-border-color-translucent',
-          )
-          chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-          chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-          chartRef.current.update()
-        })
-      }
-    }
-
-    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
-    return () =>
-      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
-  }, [chartRef])
-
-  const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min
+  const data = useMemo(
+    () => ({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          backgroundColor:
+            theme.palette.mode === 'dark' ? 'rgba(33, 150, 243, 0.1)' : 'rgba(33, 150, 243, 0.1)',
+          borderColor: theme.palette.info.main,
+          pointHoverBackgroundColor: theme.palette.info.main,
+          borderWidth: 2,
+          data: [165, 89, 132, 156, 78, 145, 198],
+          fill: true,
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'transparent',
+          borderColor: theme.palette.success.main,
+          pointHoverBackgroundColor: theme.palette.success.main,
+          borderWidth: 2,
+          data: [92, 178, 125, 67, 189, 112, 156],
+        },
+        {
+          label: 'My Third dataset',
+          backgroundColor: 'transparent',
+          borderColor: theme.palette.error.main,
+          pointHoverBackgroundColor: theme.palette.error.main,
+          borderWidth: 1,
+          borderDash: [8, 5],
+          data: [65, 65, 65, 65, 65, 65, 65],
+        },
+      ],
+    }),
+    [theme],
+  )
 
-  return (
-    <>
-      <CChartLine
-        ref={chartRef}
-        style={{ height: '300px', marginTop: '40px' }}
-        data={{
-          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-          datasets: [
-            {
-              label: 'My First dataset',
-              backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
-              borderColor: getStyle('--cui-info'),
-              pointHoverBackgroundColor: getStyle('--cui-info'),
-              borderWidth: 2,
-              data: [
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-              ],
-              fill: true,
-            },
-            {
-              label: 'My Second dataset',
-              backgroundColor: 'transparent',
-              borderColor: getStyle('--cui-success'),
-              pointHoverBackgroundColor: getStyle('--cui-success'),
-              borderWidth: 2,
-              data: [
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-                random(50, 200),
-              ],
-            },
-            {
-              label: 'My Third dataset',
-              backgroundColor: 'transparent',
-              borderColor: getStyle('--cui-danger'),
-              pointHoverBackgroundColor: getStyle('--cui-danger'),
-              borderWidth: 1,
-              borderDash: [8, 5],
-              data: [65, 65, 65, 65, 65, 65, 65],
-            },
-          ],
-        }}
-        options={{
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              display: false,
-            },
+  const options = useMemo(
+    () => ({
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        x: {
+          grid: {
+            color: theme.palette.divider,
+            drawOnChartArea: false,
+          },
+          ticks: {
+            color: theme.palette.text.secondary,
           },
-          scales: {
-            x: {
-              grid: {
-                color: getStyle('--cui-border-color-translucent'),
-                drawOnChartArea: false,
-              },
-              ticks: {
-                color: getStyle('--cui-body-color'),
-              },
-            },
-            y: {
-              beginAtZero: true,
-              border: {
-                color: getStyle('--cui-border-color-translucent'),
-              },
-              grid: {
-                color: getStyle('--cui-border-color-translucent'),
-              },
-              max: 250,
-              ticks: {
-                color: getStyle('--cui-body-color'),
-                maxTicksLimit: 5,
-                stepSize: Math.ceil(250 / 5),
-              },
-            },
+        },
+        y: {
+          beginAtZero: true,
+          border: {
+            color: theme.palette.divider,
           },
-          elements: {
-            line: {
-              tension: 0.4,
-            },
-            point: {
-              radius: 0,
-              hitRadius: 10,
-              hoverRadius: 4,
-              hoverBorderWidth: 3,
-            },
+          grid: {
+            color: theme.palette.divider,
           },
-        }}
-      />
-    </>
+          max: 250,
+          ticks: {
+            color: theme.palette.text.secondary,
+            maxTicksLimit: 5,
+            stepSize: Math.ceil(250 / 5),
+          },
+        },
+      },
+      elements: {
+        line: {
+          tension: 0.4,
+        },
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+          hoverBorderWidth: 3,
+        },
+      },
+    }),
+    [theme],
+  )
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.update()
+    }
+  }, [theme.palette.mode])
+
+  return (
+    <Line
+      ref={chartRef}
+      data={data}
+      options={options}
+      style={{ height: '300px', marginTop: '40px' }}
+    />
   )
 }
 
diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js
index ef073dee55..2f54f631f4 100644
--- a/src/views/forms/checks-radios/ChecksRadios.js
+++ b/src/views/forms/checks-radios/ChecksRadios.js
@@ -1,392 +1,47 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import Switch from '@mui/material/Switch'
+import Grid from '@mui/material/Grid'
+
+import { DocsExample } from 'src/components'
 
 const ChecksRadios = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/checks-radios/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Checkbox</strong>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/checks-radios">
-              <CFormCheck id="flexCheckDefault" label="Default checkbox" />
-              <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Checkbox</strong> <small>Disabled</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
-              are automatically styled to match with a lighter color to help indicate the
-              input&#39;s state.
-            </p>
-            <DocsExample href="forms/checks-radios#disabled">
-              <CFormCheck label="Disabled checkbox" disabled />
-              <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Radio</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
-              are automatically styled to match with a lighter color to help indicate the
-              input&#39;s state.
-            </p>
-            <DocsExample href="forms/checks-radios#radios">
-              <CFormCheck
-                type="radio"
-                name="flexRadioDefault"
-                id="flexRadioDefault1"
-                label="Default radio"
-              />
-              <CFormCheck
-                type="radio"
-                name="flexRadioDefault"
-                id="flexRadioDefault2"
-                label="Checked radio"
-                defaultChecked
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Radio</strong> <small>Disabled</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/checks-radios#disabled-1">
-              <CFormCheck
-                type="radio"
-                name="flexRadioDisabled"
-                id="flexRadioDisabled"
-                label="Disabled radio"
-                disabled
-              />
-              <CFormCheck
-                type="radio"
-                name="flexRadioDisabled"
-                id="flexRadioCheckedDisabled"
-                label="Disabled checked radio"
-                defaultChecked
-                disabled
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Switches</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean
-              properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
-              attribute.
-            </p>
-            <DocsExample href="forms/checks-radios#switches">
-              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
-              <CFormSwitch
-                label="Checked switch checkbox input"
-                id="formSwitchCheckChecked"
-                defaultChecked
-              />
-              <CFormSwitch
-                label="Disabled switch checkbox input"
-                id="formSwitchCheckDisabled"
-                disabled
-              />
-              <CFormSwitch
-                label="Disabled checked switch checkbox input"
-                id="formSwitchCheckCheckedDisabled"
-                defaultChecked
-                disabled
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Switches</strong> <small>Sizes</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/checks-radios#sizes">
-              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
-              <CFormSwitch
-                size="lg"
-                label="Large switch checkbox input"
-                id="formSwitchCheckDefaultLg"
-              />
-              <CFormSwitch
-                size="xl"
-                label="Extra large switch checkbox input"
-                id="formSwitchCheckDefaultXL"
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              By default, any number of checkboxes and radios that are immediate sibling will be
-              vertically stacked and appropriately spaced.
-            </p>
-            <DocsExample href="forms/checks-radios#default-stacked">
-              <CFormCheck id="defaultCheck1" label="Default checkbox" />
-              <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
-            </DocsExample>
-            <DocsExample href="forms/checks-radios#default-stacked">
-              <CFormCheck
-                type="radio"
-                name="exampleRadios"
-                id="exampleRadios1"
-                value="option1"
-                label="Default radio"
-                defaultChecked
-              />
-              <CFormCheck
-                type="radio"
-                name="exampleRadios"
-                id="exampleRadios2"
-                value="option2"
-                label="Second default radio"
-              />
-              <CFormCheck
-                type="radio"
-                name="exampleRadios"
-                id="exampleRadios3"
-                value="option3"
-                label="Disabled radio"
-                disabled
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Checks and Radios</strong> <small>Inline</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
-              boolean property to any <code>&lt;CFormCheck&gt;</code>.
-            </p>
-            <DocsExample href="forms/checks-radios#inline">
-              <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
-              <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
-              <CFormCheck
-                inline
-                id="inlineCheckbox3"
-                value="option3"
-                label="3 (disabled)"
-                disabled
-              />
-            </DocsExample>
-            <DocsExample href="forms/checks-radios#inline">
-              <CFormCheck
-                inline
-                type="radio"
-                name="inlineRadioOptions"
-                id="inlineCheckbox1"
-                value="option1"
-                label="1"
-              />
-              <CFormCheck
-                inline
-                type="radio"
-                name="inlineRadioOptions"
-                id="inlineCheckbox2"
-                value="option2"
-                label="2"
-              />
-              <CFormCheck
-                inline
-                type="radio"
-                name="inlineRadioOptions"
-                id="inlineCheckbox3"
-                value="option3"
-                label="3 (disabled)"
-                disabled
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Checks and Radios</strong> <small>Without labels</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Remember to still provide some form of accessible name for assistive technologies (for
-              instance, using <code>aria-label</code>).
-            </p>
-            <DocsExample href="forms/checks-radios#without-labels">
-              <div>
-                <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
-              </div>
-              <div>
-                <CFormCheck
-                  type="radio"
-                  name="radioNoLabel"
-                  id="radioNoLabel"
-                  value=""
-                  aria-label="..."
-                />
-              </div>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Toggle buttons</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create button-like checkboxes and radio buttons by using <code>button</code> boolean
-              property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
-              further be grouped in a button group if needed.
-            </p>
-            <DocsExample href="forms/checks-radios#toggle-buttons">
-              <CFormCheck
-                button={{ color: 'primary ' }}
-                id="btn-check"
-                autoComplete="off"
-                label="Single toggle"
-              />
-            </DocsExample>
-            <DocsExample href="forms/checks-radios#toggle-buttons">
-              <CFormCheck
-                button={{ color: 'primary ' }}
-                id="btn-check-2"
-                autoComplete="off"
-                label="Checked"
-                defaultChecked
-              />
-            </DocsExample>
-            <DocsExample href="forms/checks-radios#toggle-buttons">
-              <CFormCheck
-                button={{ color: 'primary ' }}
-                id="btn-check-3"
-                autoComplete="off"
-                label="Disabled"
-                disabled
-              />
-            </DocsExample>
-            <h3>Radio toggle buttons</h3>
-            <DocsExample href="forms/checks-radios#toggle-buttons">
-              <CFormCheck
-                button={{ color: 'secondary' }}
-                type="radio"
-                name="options"
-                id="option1"
-                autoComplete="off"
-                label="Checked"
-                defaultChecked
-              />
-              <CFormCheck
-                button={{ color: 'secondary' }}
-                type="radio"
-                name="options"
-                id="option2"
-                autoComplete="off"
-                label="Radio"
-              />
-              <CFormCheck
-                button={{ color: 'secondary' }}
-                type="radio"
-                name="options"
-                id="option3"
-                autoComplete="off"
-                label="Radio"
-                disabled
-              />
-              <CFormCheck
-                button={{ color: 'secondary' }}
-                type="radio"
-                name="options"
-                id="option4"
-                autoComplete="off"
-                label="Radio"
-              />
-            </DocsExample>
-            <h3>Outlined styles</h3>
-            <p className="text-body-secondary small">
-              Different variants of button, such at the various outlined styles, are supported.
-            </p>
-            <DocsExample href="forms/checks-radios#toggle-buttons">
-              <div>
-                <CFormCheck
-                  button={{ color: 'primary', variant: 'outline' }}
-                  id="btn-check-outlined"
-                  autoComplete="off"
-                  label="Single toggle"
-                />
-              </div>
-              <div>
-                <CFormCheck
-                  button={{ color: 'secondary', variant: 'outline' }}
-                  id="btn-check-2-outlined"
-                  autoComplete="off"
-                  label="Checked"
-                  defaultChecked
-                />
-              </div>
-              <div>
-                <CFormCheck
-                  button={{ color: 'success', variant: 'outline' }}
-                  type="radio"
-                  name="options-outlined"
-                  id="success-outlined"
-                  autoComplete="off"
-                  label="Radio"
-                  defaultChecked
-                />
-                <CFormCheck
-                  button={{ color: 'danger', variant: 'outline' }}
-                  type="radio"
-                  name="options-outlined"
-                  id="danger-outlined"
-                  autoComplete="off"
-                  label="Radio"
-                />
-              </div>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Checks and Radios" />
+      <CardContent>
+        <DocsExample href="forms/checks-radios">
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <FormGroup>
+                <FormControlLabel control={<Checkbox defaultChecked />} label="Default checkbox" />
+                <FormControlLabel control={<Checkbox />} label="Checked checkbox" />
+              </FormGroup>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <RadioGroup defaultValue="option1">
+                <FormControlLabel value="option1" control={<Radio />} label="Default radio" />
+                <FormControlLabel value="option2" control={<Radio />} label="Second radio" />
+              </RadioGroup>
+            </Grid>
+          </Grid>
+        </DocsExample>
+        <DocsExample href="forms/checks-radios#switches">
+          <FormGroup sx={{ mt: 3 }}>
+            <FormControlLabel control={<Switch defaultChecked />} label="Default switch checkbox" />
+            <FormControlLabel control={<Switch />} label="Checked switch checkbox" />
+            <FormControlLabel control={<Switch disabled />} label="Disabled switch checkbox" />
+          </FormGroup>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js
index 2a637fd21c..245dd754d4 100644
--- a/src/views/forms/floating-labels/FloatingLabels.js
+++ b/src/views/forms/floating-labels/FloatingLabels.js
@@ -1,170 +1,26 @@
 import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CFormInput,
-  CFormLabel,
-  CFormFloating,
-  CFormSelect,
-  CFormTextarea,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const FloatingLabels = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/floating-labels/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Floating labels</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
-              elements in <code>CFormFloating</code> to enable floating labels with textual form
-              fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
-              as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
-              pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
-              we can utilize a sibling selector (e.g., <code>~</code>).
-            </p>
-            <DocsExample href="forms/floating-labels">
-              <CFormFloating className="mb-3">
-                <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
-                <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
-              </CFormFloating>
-              <CFormFloating>
-                <CFormInput type="password" id="floatingPassword" placeholder="Password" />
-                <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
-              </CFormFloating>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
-              s will automatically adjust to their floated position.
-            </p>
-            <DocsExample href="forms/floating-labels">
-              <CFormFloating>
-                <CFormInput
-                  type="email"
-                  id="floatingInputValue"
-                  placeholder="name@example.com"
-                  defaultValue="test@example.com"
-                />
-                <CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
-              </CFormFloating>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Floating labels</strong> <small>Textareas</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
-              <code>&lt;CFormInput&gt;</code>s.
-            </p>
-            <DocsExample href="forms/floating-labels#textareas">
-              <CFormFloating>
-                <CFormTextarea
-                  id="floatingTextarea"
-                  placeholder="Leave a comment here"
-                ></CFormTextarea>
-                <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
-              </CFormFloating>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
-              <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
-              inline or via custom CSS).
-            </p>
-            <DocsExample href="forms/floating-labels#textareas">
-              <CFormFloating>
-                <CFormTextarea
-                  placeholder="Leave a comment here"
-                  id="floatingTextarea2"
-                  style={{ height: '100px' }}
-                ></CFormTextarea>
-                <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
-              </CFormFloating>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Floating labels</strong> <small>Selects</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
-              <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
-              <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
-              <code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
-              <strong>
-                Selects with <code>size</code> and <code>multiple</code> are not supported.
-              </strong>
-            </p>
-            <DocsExample href="forms/floating-labels#selects">
-              <CFormFloating>
-                <CFormSelect id="floatingSelect" aria-label="Floating label select example">
-                  <option>Open this select menu</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
-              </CFormFloating>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Floating labels</strong> <small>Layout</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              When working with the CoreUI for Bootstrap grid system, be sure to place form elements
-              within column classes.
-            </p>
-            <DocsExample href="forms/floating-labels#layout">
-              <CRow xs={{ gutter: 2 }}>
-                <CCol md>
-                  <CFormFloating>
-                    <CFormInput
-                      type="email"
-                      id="floatingInputGrid"
-                      placeholder="name@example.com"
-                      defaultValue="email@example.com"
-                    />
-                    <CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
-                  </CFormFloating>
-                </CCol>
-                <CCol md>
-                  <CFormFloating>
-                    <CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
-                      <option>Open this select menu</option>
-                      <option value="1">One</option>
-                      <option value="2">Two</option>
-                      <option value="3">Three</option>
-                    </CFormSelect>
-                    <CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
-                  </CFormFloating>
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Floating Labels" />
+      <CardContent>
+        <DocsExample href="forms/floating-labels">
+          <Stack spacing={2}>
+            <TextField label="Email address" variant="outlined" fullWidth />
+            <TextField label="Password" type="password" variant="outlined" fullWidth />
+            <TextField label="Comments" multiline rows={3} variant="outlined" fullWidth />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js
index 7b972ffd86..b53a51e6b6 100644
--- a/src/views/forms/form-control/FormControl.js
+++ b/src/views/forms/form-control/FormControl.js
@@ -1,248 +1,42 @@
 import React from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CForm,
-  CFormInput,
-  CFormLabel,
-  CFormTextarea,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const FormControl = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/form-control/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/form-control">
-              <CForm>
-                <div className="mb-3">
-                  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
-                  <CFormInput
-                    type="email"
-                    id="exampleFormControlInput1"
-                    placeholder="name@example.com"
-                  />
-                </div>
-                <div className="mb-3">
-                  <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-                  <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
-                </div>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong> <small>Sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '}
-              <code>size=&#34;sm&#34;</code>.
-            </p>
-            <DocsExample href="forms/form-control#sizing">
-              <CFormInput
-                type="text"
-                size="lg"
-                placeholder="Large input"
-                aria-label="lg input example"
-              />
-              <br />
-              <CFormInput
-                type="text"
-                placeholder="Default input"
-                aria-label="default input example"
-              />
-              <br />
-              <CFormInput
-                type="text"
-                size="sm"
-                placeholder="Small input"
-                aria-label="sm input example"
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong> <small>Disabled</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
-              appearance and remove pointer events.
-            </p>
-            <DocsExample href="forms/form-control#disabled">
-              <CFormInput
-                type="text"
-                placeholder="Disabled input"
-                aria-label="Disabled input example"
-                disabled
-              />
-              <br />
-              <CFormInput
-                type="text"
-                placeholder="Disabled readonly input"
-                aria-label="Disabled input example"
-                disabled
-                readOnly
-              />
-              <br />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong> <small>Readonly</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>readOnly</code> boolean attribute on an input to prevent modification of
-              the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs),
-              but retain the standard cursor.
-            </p>
-            <DocsExample href="forms/form-control#readonly">
-              <CFormInput
-                type="text"
-                placeholder="Readonly input here..."
-                aria-label="readonly input example"
-                readOnly
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong> <small>Readonly plain text</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled
-              as plain text, use the <code>plainText</code> boolean property to remove the default
-              form field styling and preserve the correct margin and padding.
-            </p>
-            <DocsExample href="components/accordion">
-              <CRow className="mb-3">
-                <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
-                  Email
-                </CFormLabel>
-                <div className="col-sm-10">
-                  <CFormInput
-                    type="text"
-                    id="staticEmail"
-                    defaultValue="email@example.com"
-                    readOnly
-                    plainText
-                  />
-                </div>
-              </CRow>
-              <CRow className="mb-3">
-                <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
-                  Password
-                </CFormLabel>
-                <div className="col-sm-10">
-                  <CFormInput type="password" id="inputPassword" />
-                </div>
-              </CRow>
-            </DocsExample>
-            <DocsExample href="components/accordion">
-              <CForm className="row g-3">
-                <div className="col-auto">
-                  <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
-                    Email
-                  </CFormLabel>
-                  <CFormInput
-                    type="text"
-                    id="staticEmail2"
-                    defaultValue="email@example.com"
-                    readOnly
-                    plainText
-                  />
-                </div>
-                <div className="col-auto">
-                  <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
-                    Password
-                  </CFormLabel>
-                  <CFormInput type="password" id="inputPassword2" placeholder="Password" />
-                </div>
-                <div className="col-auto">
-                  <CButton color="primary" type="submit" className="mb-3">
-                    Confirm identity
-                  </CButton>
-                </div>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong> <small>File input</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/form-control#file-input">
-              <div className="mb-3">
-                <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
-                <CFormInput type="file" id="formFile" />
-              </div>
-              <div className="mb-3">
-                <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
-                <CFormInput type="file" id="formFileMultiple" multiple />
-              </div>
-              <div className="mb-3">
-                <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
-                <CFormInput type="file" id="formFileDisabled" disabled />
-              </div>
-              <div className="mb-3">
-                <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
-                <CFormInput type="file" size="sm" id="formFileSm" />
-              </div>
-              <div>
-                <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
-                <CFormInput type="file" size="lg" id="formFileLg" />
-              </div>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Form Control</strong> <small>Color</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/form-control#color">
-              <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
-              <CFormInput
-                type="color"
-                id="exampleColorInput"
-                defaultValue="#563d7c"
-                title="Choose your color"
-              />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Form Control" />
+      <CardContent>
+        <DocsExample href="forms/form-control">
+          <Stack spacing={2}>
+            <TextField label="Email address" placeholder="name@example.com" fullWidth />
+            <TextField label="Example textarea" multiline rows={3} fullWidth />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="forms/form-control#sizing">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <TextField label="Small" size="small" fullWidth />
+            <TextField label="Default" fullWidth />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="forms/form-control#disabled">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <TextField label="Disabled input" disabled fullWidth />
+            <TextField
+              label="Disabled readonly input"
+              disabled
+              value="Disabled readonly input"
+              fullWidth
+            />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js
index 73ccac2629..75d528c0ed 100644
--- a/src/views/forms/input-group/InputGroup.js
+++ b/src/views/forms/input-group/InputGroup.js
@@ -1,503 +1,37 @@
 import React from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CFormCheck,
-  CFormInput,
-  CFormLabel,
-  CFormSelect,
-  CFormTextarea,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import InputAdornment from '@mui/material/InputAdornment'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const InputGroup = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/input-group/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Basic example</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Place one add-on or button on either side of an input. You may also place one on both
-              sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
-              input group.
-            </p>
-            <DocsExample href="forms/input-group">
-              <CInputGroup className="mb-3">
-                <CInputGroupText id="basic-addon1">@</CInputGroupText>
-                <CFormInput
-                  placeholder="Username"
-                  aria-label="Username"
-                  aria-describedby="basic-addon1"
-                />
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CFormInput
-                  placeholder="Recipient&#39;s username"
-                  aria-label="Recipient&#39;s username"
-                  aria-describedby="basic-addon2"
-                />
-                <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
-              </CInputGroup>
-              <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
-              <CInputGroup className="mb-3">
-                <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
-                <CFormInput id="basic-url" aria-describedby="basic-addon3" />
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CInputGroupText>$</CInputGroupText>
-                <CFormInput aria-label="Amount (to the nearest dollar)" />
-                <CInputGroupText>.00</CInputGroupText>
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CFormInput placeholder="Username" aria-label="Username" />
-                <CInputGroupText>@</CInputGroupText>
-                <CFormInput placeholder="Server" aria-label="Server" />
-              </CInputGroup>
-              <CInputGroup>
-                <CInputGroupText>With textarea</CInputGroupText>
-                <CFormTextarea aria-label="With textarea"></CFormTextarea>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Wrapping</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
-              custom form field validation within an input group. You may disable this with{' '}
-              <code>.flex-nowrap</code>.
-            </p>
-            <DocsExample href="forms/input-group#wrapping">
-              <CInputGroup className="flex-nowrap">
-                <CInputGroupText id="addon-wrapping">@</CInputGroupText>
-                <CFormInput
-                  placeholder="Username"
-                  aria-label="Username"
-                  aria-describedby="addon-wrapping"
-                />
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
-              and contents within will automatically resize—no need for repeating the form control
-              size classes on each element.
-            </p>
-            <p className="text-body-secondary small">
-              <strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
-            </p>
-            <DocsExample href="forms/input-group#sizing">
-              <CInputGroup size="sm" className="mb-3">
-                <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
-                <CFormInput
-                  aria-label="Sizing example input"
-                  aria-describedby="inputGroup-sizing-sm"
-                />
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
-                <CFormInput
-                  aria-label="Sizing example input"
-                  aria-describedby="inputGroup-sizing-default"
-                />
-              </CInputGroup>
-              <CInputGroup size="lg">
-                <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
-                <CFormInput
-                  aria-label="Sizing example input"
-                  aria-describedby="inputGroup-sizing-lg"
-                />
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Checkboxes and radios</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Place any checkbox or radio option within an input group&#39;s addon instead of text.
-            </p>
-            <DocsExample href="forms/input-group#checkboxes-and-radios">
-              <CInputGroup className="mb-3">
-                <CInputGroupText>
-                  <CFormCheck
-                    type="checkbox"
-                    value=""
-                    aria-label="Checkbox for following text input"
-                  />
-                </CInputGroupText>
-                <CFormInput aria-label="Text input with checkbox" />
-              </CInputGroup>
-              <CInputGroup>
-                <CInputGroupText>
-                  <CFormCheck
-                    type="radio"
-                    value=""
-                    aria-label="Radio button for following text input"
-                  />
-                </CInputGroupText>
-                <CFormInput aria-label="Text input with radio button" />
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Multiple inputs</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
-              styles are only available for input groups with a single{' '}
-              <code>&lt;CFormInput&gt;</code>.
-            </p>
-            <DocsExample href="forms/input-group#multiple-inputs">
-              <CInputGroup>
-                <CInputGroupText>First and last name</CInputGroupText>
-                <CFormInput aria-label="First name" />
-                <CFormInput aria-label="Last name" />
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Multiple addons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Multiple add-ons are supported and can be mixed with checkbox and radio input
-              versions..
-            </p>
-            <DocsExample href="forms/input-group#multiple-addons">
-              <CInputGroup className="mb-3">
-                <CInputGroupText>$</CInputGroupText>
-                <CInputGroupText>0.00</CInputGroupText>
-                <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
-                <CInputGroupText>$</CInputGroupText>
-                <CInputGroupText>0.00</CInputGroupText>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Button addons</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Multiple add-ons are supported and can be mixed with checkbox and radio input
-              versions..
-            </p>
-            <DocsExample href="forms/input-group#button-addons">
-              <CInputGroup className="mb-3">
-                <CButton type="button" color="secondary" variant="outline" id="button-addon1">
-                  Button
-                </CButton>
-                <CFormInput
-                  placeholder=""
-                  aria-label="Example text with button addon"
-                  aria-describedby="button-addon1"
-                />
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CFormInput
-                  placeholder="Recipient's username"
-                  aria-label="Recipient's username"
-                  aria-describedby="button-addon2"
-                />
-                <CButton type="button" color="secondary" variant="outline" id="button-addon2">
-                  Button
-                </CButton>
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CButton type="button" color="secondary" variant="outline">
-                  Button
-                </CButton>
-                <CButton type="button" color="secondary" variant="outline">
-                  Button
-                </CButton>
-                <CFormInput placeholder="" aria-label="Example text with two button addons" />
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput
-                  placeholder="Recipient's username"
-                  aria-label="Recipient's username with two button addons"
-                />
-                <CButton type="button" color="secondary" variant="outline">
-                  Button
-                </CButton>
-                <CButton type="button" color="secondary" variant="outline">
-                  Button
-                </CButton>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Buttons with dropdowns</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/input-group#buttons-with-dropdowns">
-              <CInputGroup className="mb-3">
-                <CDropdown variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">
-                    Dropdown
-                  </CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CFormInput aria-label="Text input with dropdown button" />
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CFormInput aria-label="Text input with dropdown button" />
-                <CDropdown alignment="end" variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">
-                    Dropdown
-                  </CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CInputGroup>
-              <CInputGroup>
-                <CDropdown variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">
-                    Dropdown
-                  </CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CFormInput aria-label="Text input with 2 dropdown buttons" />
-                <CDropdown alignment="end" variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">
-                    Dropdown
-                  </CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Segmented buttons</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/input-group#segmented-buttons">
-              <CInputGroup className="mb-3">
-                <CDropdown variant="input-group">
-                  <CButton type="button" color="secondary" variant="outline">
-                    Action
-                  </CButton>
-                  <CDropdownToggle color="secondary" variant="outline" split />
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CFormInput aria-label="Text input with segmented dropdown button" />
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput aria-label="Text input with segmented dropdown button" />
-                <CDropdown alignment="end" variant="input-group">
-                  <CButton type="button" color="secondary" variant="outline">
-                    Action
-                  </CButton>
-                  <CDropdownToggle color="secondary" variant="outline" split />
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider />
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Custom select</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/input-group#custom-select">
-              <CInputGroup className="mb-3">
-                <CInputGroupText as="label" htmlFor="inputGroupSelect01">
-                  Options
-                </CInputGroupText>
-                <CFormSelect id="inputGroupSelect01">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CFormSelect id="inputGroupSelect02">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CInputGroupText as="label" htmlFor="inputGroupSelect02">
-                  Options
-                </CInputGroupText>
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CButton type="button" color="secondary" variant="outline">
-                  Button
-                </CButton>
-                <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CInputGroup>
-              <CInputGroup>
-                <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CButton type="button" color="secondary" variant="outline">
-                  Button
-                </CButton>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Input group</strong> <small>Custom file input</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/input-group#custom-file-input">
-              <CInputGroup className="mb-3">
-                <CInputGroupText as="label" htmlFor="inputGroupFile01">
-                  Upload
-                </CInputGroupText>
-                <CFormInput type="file" id="inputGroupFile01" />
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CFormInput type="file" id="inputGroupFile02" />
-                <CInputGroupText as="label" htmlFor="inputGroupFile02">
-                  Upload
-                </CInputGroupText>
-              </CInputGroup>
-              <CInputGroup className="mb-3">
-                <CButton
-                  type="button"
-                  color="secondary"
-                  variant="outline"
-                  id="inputGroupFileAddon03"
-                >
-                  Button
-                </CButton>
-                <CFormInput
-                  type="file"
-                  id="inputGroupFile03"
-                  aria-describedby="inputGroupFileAddon03"
-                  aria-label="Upload"
-                />
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput
-                  type="file"
-                  id="inputGroupFile04"
-                  aria-describedby="inputGroupFileAddon04"
-                  aria-label="Upload"
-                />
-                <CButton
-                  type="button"
-                  color="secondary"
-                  variant="outline"
-                  id="inputGroupFileAddon04"
-                >
-                  Button
-                </CButton>
-              </CInputGroup>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Input Group" />
+      <CardContent>
+        <DocsExample href="forms/input-group">
+          <Stack spacing={2}>
+            <TextField
+              label="Username"
+              InputProps={{ startAdornment: <InputAdornment position="start">@</InputAdornment> }}
+              fullWidth
+            />
+            <TextField
+              label="Amount"
+              InputProps={{
+                startAdornment: <InputAdornment position="start">$</InputAdornment>,
+                endAdornment: <InputAdornment position="end">.00</InputAdornment>,
+              }}
+              fullWidth
+            />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js
index 6a6bf56451..c13046785a 100644
--- a/src/views/forms/layout/Layout.js
+++ b/src/views/forms/layout/Layout.js
@@ -1,424 +1,46 @@
 import React from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CForm,
-  CFormCheck,
-  CFormInput,
-  CFormLabel,
-  CFormSelect,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Layout = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/layout/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Form grid</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              More complex forms can be built using our grid classes. Use these for form layouts
-              that require multiple columns, varied widths, and additional alignment options.
-            </p>
-            <DocsExample href="forms/layout#form-grid">
-              <CRow>
-                <CCol xs>
-                  <CFormInput placeholder="First name" aria-label="First name" />
-                </CCol>
-                <CCol xs>
-                  <CFormInput placeholder="Last name" aria-label="Last name" />
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Gutters</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
-              , you can have control over the gutter width in as well the inline as block direction.
-            </p>
-            <DocsExample href="forms/layout#gutters">
-              <CRow className="g-3">
-                <CCol xs>
-                  <CFormInput placeholder="First name" aria-label="First name" />
-                </CCol>
-                <CCol xs>
-                  <CFormInput placeholder="Last name" aria-label="Last name" />
-                </CCol>
-              </CRow>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              More complex layouts can also be created with the grid system.
-            </p>
-            <DocsExample href="forms/layout#gutters">
-              <CForm className="row g-3">
-                <CCol md={6}>
-                  <CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
-                  <CFormInput type="email" id="inputEmail4" />
-                </CCol>
-                <CCol md={6}>
-                  <CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
-                  <CFormInput type="password" id="inputPassword4" />
-                </CCol>
-                <CCol xs={12}>
-                  <CFormLabel htmlFor="inputAddress">Address</CFormLabel>
-                  <CFormInput id="inputAddress" placeholder="1234 Main St" />
-                </CCol>
-                <CCol xs={12}>
-                  <CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
-                  <CFormInput id="inputAddress2" placeholder="Apartment, studio, or floor" />
-                </CCol>
-                <CCol md={6}>
-                  <CFormLabel htmlFor="inputCity">City</CFormLabel>
-                  <CFormInput id="inputCity" />
-                </CCol>
-                <CCol md={4}>
-                  <CFormLabel htmlFor="inputState">State</CFormLabel>
-                  <CFormSelect id="inputState">
-                    <option>Choose...</option>
-                    <option>...</option>
-                  </CFormSelect>
-                </CCol>
-                <CCol md={2}>
-                  <CFormLabel htmlFor="inputZip">Zip</CFormLabel>
-                  <CFormInput id="inputZip" />
-                </CCol>
-                <CCol xs={12}>
-                  <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
-                </CCol>
-                <CCol xs={12}>
-                  <CButton color="primary" type="submit">
-                    Sign in
-                  </CButton>
-                </CCol>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Horizontal form</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create horizontal forms with the grid by adding the <code>.row</code> class to form
-              groups and using the <code>.col-*-*</code> classes to specify the width of your labels
-              and controls. Be sure to add <code>.col-form-label</code> to your{' '}
-              <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically centered with their
-              associated form controls.
-            </p>
-            <p className="text-body-secondary small">
-              At times, you maybe need to use margin or padding utilities to create that perfect
-              alignment you need. For example, we&#39;ve removed the <code>padding-top</code> on our
-              stacked radio inputs label to better align the text baseline.
-            </p>
-            <DocsExample href="forms/layout#horizontal-form">
-              <CForm>
-                <CRow className="mb-3">
-                  <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
-                    Email
-                  </CFormLabel>
-                  <CCol sm={10}>
-                    <CFormInput type="email" id="inputEmail3" />
-                  </CCol>
-                </CRow>
-                <CRow className="mb-3">
-                  <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
-                    Password
-                  </CFormLabel>
-                  <CCol sm={10}>
-                    <CFormInput type="password" id="inputPassword3" />
-                  </CCol>
-                </CRow>
-                <fieldset className="row mb-3">
-                  <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
-                  <CCol sm={10}>
-                    <CFormCheck
-                      type="radio"
-                      name="gridRadios"
-                      id="gridRadios1"
-                      value="option1"
-                      label="First radio"
-                      defaultChecked
-                    />
-                    <CFormCheck
-                      type="radio"
-                      name="gridRadios"
-                      id="gridRadios2"
-                      value="option2"
-                      label="Second radio"
-                    />
-                    <CFormCheck
-                      type="radio"
-                      name="gridRadios"
-                      id="gridRadios3"
-                      value="option3"
-                      label="Third disabled radio"
-                      disabled
-                    />
-                  </CCol>
-                </fieldset>
-                <CRow className="mb-3">
-                  <div className="col-sm-10 offset-sm-2">
-                    <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
-                  </div>
-                </CRow>
-                <CButton color="primary" type="submit">
-                  Sign in
-                </CButton>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Horizontal form label sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to
-              your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly
-              follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
-            </p>
-            <DocsExample href="forms/layout#horizontal-form-label-sizing">
-              <CRow className="mb-3">
-                <CFormLabel
-                  htmlFor="colFormLabelSm"
-                  className="col-sm-2 col-form-label col-form-label-sm"
-                >
-                  Email
-                </CFormLabel>
-                <CCol sm={10}>
-                  <CFormInput
-                    type="email"
-                    className="form-control form-control-sm"
-                    id="colFormLabelSm"
-                    placeholder="col-form-label-sm"
-                  />
-                </CCol>
-              </CRow>
-              <CRow className="mb-3">
-                <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
-                  Email
-                </CFormLabel>
-                <CCol sm={10}>
-                  <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
-                </CCol>
-              </CRow>
-              <CRow>
-                <CFormLabel
-                  htmlFor="colFormLabelLg"
-                  className="col-sm-2 col-form-label col-form-label-lg"
-                >
-                  Email
-                </CFormLabel>
-                <CCol sm={10}>
-                  <CFormInput
-                    type="email"
-                    className="form-control form-control-lg"
-                    id="colFormLabelLg"
-                    placeholder="col-form-label-lg"
-                  />
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Column sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              As shown in the previous examples, our grid system allows you to place any number of{' '}
-              <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They&#39;ll split the
-              available width equally between them. You may also pick a subset of your columns to
-              take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally
-              split the rest, with specific column classes like{' '}
-              <code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
-            </p>
-            <DocsExample href="forms/layout#column-sizing">
-              <CRow className="g-3">
-                <CCol sm={7}>
-                  <CFormInput placeholder="City" aria-label="City" />
-                </CCol>
-                <CCol sm>
-                  <CFormInput placeholder="State" aria-label="State" />
-                </CCol>
-                <CCol sm>
-                  <CFormInput placeholder="Zip" aria-label="Zip" />
-                </CCol>
-              </CRow>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Auto-sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              The example below uses a flexbox utility to vertically center the contents and changes{' '}
-              <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your
-              columns only take up as much space as needed. Put another way, the column sizes itself
-              based on the contents.
-            </p>
-            <DocsExample href="forms/layout#auto-sizing">
-              <CForm className="row gy-2 gx-3 align-items-center">
-                <CCol xs="auto">
-                  <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
-                    Name
-                  </CFormLabel>
-                  <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
-                </CCol>
-                <CCol xs="auto">
-                  <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
-                    Username
-                  </CFormLabel>
-                  <CInputGroup>
-                    <CInputGroupText>@</CInputGroupText>
-                    <CFormInput id="autoSizingInputGroup" placeholder="Username" />
-                  </CInputGroup>
-                </CCol>
-                <CCol xs="auto">
-                  <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
-                    Preference
-                  </CFormLabel>
-                  <CFormSelect id="autoSizingSelect">
-                    <option>Choose...</option>
-                    <option value="1">One</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                  </CFormSelect>
-                </CCol>
-                <CCol xs="auto">
-                  <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
-                </CCol>
-                <CCol xs="auto">
-                  <CButton color="primary" type="submit">
-                    Submit
-                  </CButton>
-                </CCol>
-              </CForm>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              You can then remix that once again with size-specific column classes.
-            </p>
-            <DocsExample href="forms/layout#auto-sizing">
-              <CForm className="row gx-3 gy-2 align-items-center">
-                <CCol sm={3}>
-                  <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
-                    Name
-                  </CFormLabel>
-                  <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
-                </CCol>
-                <CCol sm={3}>
-                  <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
-                    Username
-                  </CFormLabel>
-                  <CInputGroup>
-                    <CInputGroupText>@</CInputGroupText>
-                    <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
-                  </CInputGroup>
-                </CCol>
-                <CCol sm={3}>
-                  <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
-                    Preference
-                  </CFormLabel>
-                  <CFormSelect id="specificSizeSelect">
-                    <option>Choose...</option>
-                    <option value="1">One</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                  </CFormSelect>
-                </CCol>
-                <CCol xs="auto">
-                  <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
-                </CCol>
-                <CCol xs="auto">
-                  <CButton color="primary" type="submit">
-                    Submit
-                  </CButton>
-                </CCol>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Layout</strong> <small>Inline forms</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create horizontal
-              layouts. By adding{' '}
-              <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>, we will
-              have gutters in horizontal and vertical directions. The{' '}
-              <code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
-              <code>&lt;CFormCheck&gt;</code> align properly.
-            </p>
-            <DocsExample href="forms/layout#inline-forms">
-              <CForm className="row row-cols-lg-auto g-3 align-items-center">
-                <CCol xs={12}>
-                  <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
-                    Username
-                  </CFormLabel>
-                  <CInputGroup>
-                    <CInputGroupText>@</CInputGroupText>
-                    <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
-                  </CInputGroup>
-                </CCol>
-                <CCol xs={12}>
-                  <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
-                    Preference
-                  </CFormLabel>
-                  <CFormSelect id="inlineFormSelectPref">
-                    <option>Choose...</option>
-                    <option value="1">One</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                  </CFormSelect>
-                </CCol>
-                <CCol xs={12}>
-                  <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
-                </CCol>
-                <CCol xs={12}>
-                  <CButton color="primary" type="submit">
-                    Submit
-                  </CButton>
-                </CCol>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Form Layout" />
+      <CardContent>
+        <DocsExample href="forms/layout">
+          <Grid container spacing={2}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField label="Email" fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField label="Password" type="password" fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <TextField label="Address" fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField label="City" fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12, md: 4 }}>
+              <TextField label="State" fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12, md: 2 }}>
+              <TextField label="Zip" fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <Button variant="contained">Sign in</Button>
+            </Grid>
+          </Grid>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js
index 78a43dbfd2..5d57cd6e6b 100644
--- a/src/views/forms/range/Range.js
+++ b/src/views/forms/range/Range.js
@@ -1,82 +1,44 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Slider from '@mui/material/Slider'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+
+import { DocsExample } from 'src/components'
 
 const Range = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/range/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Range</strong> <small></small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
-              <code>&lt;CFormRange&gt;</code>.
-            </p>
-            <DocsExample href="forms/range" tabContentClassName="bg-opacity-10">
-              <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
-              <CFormRange id="customRange1" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Range</strong> <small>Disabled</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
-              appearance and remove pointer events.
-            </p>
-            <DocsExample href="forms/range#disabled" tabContentClassName="bg-opacity-10">
-              <CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
-              <CFormRange id="disabledRange" disabled />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Range</strong> <small>Min and max</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Range inputs have implicit values for <code>min</code> and <code>max</code>—
-              <code>0</code> and <code>100</code>, respectively. You may specify new values for
-              those using the <code>min</code> and <code>max</code> attributes.
-            </p>
-            <DocsExample href="forms/range#min-and-max" tabContentClassName="bg-opacity-10">
-              <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
-              <CFormRange min={0} max={5} defaultValue="3" id="customRange2" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Range</strong> <small>Steps</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              By default, range inputs &#34;snap&#34; to integer values. To change this, you can
-              specify a <code>step</code> value. In the example below, we double the number of steps
-              by using <code>step=&#34;0.5&#34;</code>.
-            </p>
-            <DocsExample href="forms/range#steps" tabContentClassName="bg-opacity-10">
-              <CFormLabel htmlFor="customRange3">Example range</CFormLabel>
-              <CFormRange min={0} max={5} step={0.5} defaultValue="3" id="customRange3" />
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Range" />
+      <CardContent>
+        <DocsExample href="forms/range">
+          <Stack spacing={2}>
+            <Typography gutterBottom>Example range</Typography>
+            <Slider defaultValue={50} />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="forms/range#disabled">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <Typography gutterBottom>Disabled range</Typography>
+            <Slider defaultValue={50} disabled />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="forms/range#min-and-max">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <Typography gutterBottom>Min and max</Typography>
+            <Slider defaultValue={3} min={0} max={5} />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="forms/range#steps">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <Typography gutterBottom>Steps</Typography>
+            <Slider defaultValue={2} step={0.5} min={0} max={5} marks />
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js
index d817644493..7ac78f5b42 100644
--- a/src/views/forms/select/Select.js
+++ b/src/views/forms/select/Select.js
@@ -1,99 +1,40 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import MuiSelect from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Select = () => {
+  const [value, setValue] = React.useState('')
+
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/select/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Select</strong> <small>Default</small>
-          </CCardHeader>
-          <CCardBody>
-            <DocsExample href="forms/select">
-              <CFormSelect aria-label="Default select example">
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Select</strong> <small>Sizing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You may also choose from small and large custom selects to match our similarly sized
-              text inputs.
-            </p>
-            <DocsExample href="forms/select#sizing">
-              <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-              <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              The <code>multiple</code> attribute is also supported:
-            </p>
-            <DocsExample href="forms/select#sizing">
-              <CFormSelect size="lg" multiple aria-label="Multiple select example">
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              As is the <code>htmlSize</code> property:
-            </p>
-            <DocsExample href="forms/select#sizing">
-              <CFormSelect size="lg" multiple aria-label="Multiple select example">
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Select</strong> <small>Disabled</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
-              appearance and remove pointer events.
-            </p>
-            <DocsExample href="forms/select#disabled">
-              <CFormSelect aria-label="Disabled select example" disabled>
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Select" />
+      <CardContent>
+        <DocsExample href="forms/select">
+          <Stack spacing={2}>
+            <FormControl fullWidth>
+              <InputLabel>Open this select menu</InputLabel>
+              <MuiSelect
+                value={value}
+                label="Open this select menu"
+                onChange={(e) => setValue(e.target.value)}
+              >
+                <MenuItem value={1}>One</MenuItem>
+                <MenuItem value={2}>Two</MenuItem>
+                <MenuItem value={3}>Three</MenuItem>
+              </MuiSelect>
+            </FormControl>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js
index d0017b6b2c..391a854c7b 100644
--- a/src/views/forms/validation/Validation.js
+++ b/src/views/forms/validation/Validation.js
@@ -1,503 +1,77 @@
-import React, { useState } from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CForm,
-  CFormCheck,
-  CFormInput,
-  CFormFeedback,
-  CFormLabel,
-  CFormSelect,
-  CFormTextarea,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import React from 'react'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
 
-const CustomStyles = () => {
-  const [validated, setValidated] = useState(false)
-  const handleSubmit = (event) => {
-    const form = event.currentTarget
-    if (form.checkValidity() === false) {
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    setValidated(true)
-  }
-  return (
-    <CForm
-      className="row g-3 needs-validation"
-      noValidate
-      validated={validated}
-      onSubmit={handleSubmit}
-    >
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
-        <CFormInput type="text" id="validationCustom01" defaultValue="Mark" required />
-        <CFormFeedback valid>Looks good!</CFormFeedback>
-      </CCol>
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
-        <CFormInput type="text" id="validationCustom02" defaultValue="Otto" required />
-        <CFormFeedback valid>Looks good!</CFormFeedback>
-      </CCol>
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
-        <CInputGroup className="has-validation">
-          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-          <CFormInput
-            type="text"
-            id="validationCustomUsername"
-            defaultValue=""
-            aria-describedby="inputGroupPrepend"
-            required
-          />
-          <CFormFeedback invalid>Please choose a username.</CFormFeedback>
-        </CInputGroup>
-      </CCol>
-      <CCol md={6}>
-        <CFormLabel htmlFor="validationCustom03">City</CFormLabel>
-        <CFormInput type="text" id="validationCustom03" required />
-        <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-      </CCol>
-      <CCol md={3}>
-        <CFormLabel htmlFor="validationCustom04">City</CFormLabel>
-        <CFormSelect id="validationCustom04">
-          <option disabled>Choose...</option>
-          <option>...</option>
-        </CFormSelect>
-        <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-      </CCol>
-      <CCol md={3}>
-        <CFormLabel htmlFor="validationCustom05">City</CFormLabel>
-        <CFormInput type="text" id="validationCustom05" required />
-        <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
-      </CCol>
-      <CCol xs={12}>
-        <CFormCheck
-          type="checkbox"
-          id="invalidCheck"
-          label="Agree to terms and conditions"
-          required
-        />
-        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-      </CCol>
-      <CCol xs={12}>
-        <CButton color="primary" type="submit">
-          Submit form
-        </CButton>
-      </CCol>
-    </CForm>
-  )
-}
-
-const BrowserDefaults = () => {
-  const [validated, setValidated] = useState(false)
-  const handleSubmit = (event) => {
-    const form = event.currentTarget
-    if (form.checkValidity() === false) {
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    setValidated(true)
-  }
-  return (
-    <CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
-        <CFormInput type="text" id="validationDefault01" defaultValue="Mark" required />
-        <CFormFeedback valid>Looks good!</CFormFeedback>
-      </CCol>
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
-        <CFormInput type="text" id="validationDefault02" defaultValue="Otto" required />
-        <CFormFeedback valid>Looks good!</CFormFeedback>
-      </CCol>
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
-        <CInputGroup className="has-validation">
-          <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
-          <CFormInput
-            type="text"
-            id="validationDefaultUsername"
-            defaultValue=""
-            aria-describedby="inputGroupPrepend02"
-            required
-          />
-          <CFormFeedback invalid>Please choose a username.</CFormFeedback>
-        </CInputGroup>
-      </CCol>
-      <CCol md={6}>
-        <CFormLabel htmlFor="validationDefault03">City</CFormLabel>
-        <CFormInput type="text" id="validationDefault03" required />
-        <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-      </CCol>
-      <CCol md={3}>
-        <CFormLabel htmlFor="validationDefault04">City</CFormLabel>
-        <CFormSelect id="validationDefault04">
-          <option disabled>Choose...</option>
-          <option>...</option>
-        </CFormSelect>
-        <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-      </CCol>
-      <CCol md={3}>
-        <CFormLabel htmlFor="validationDefault05">City</CFormLabel>
-        <CFormInput type="text" id="validationDefault05" required />
-        <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
-      </CCol>
-      <CCol xs={12}>
-        <CFormCheck
-          type="checkbox"
-          id="invalidCheck"
-          label="Agree to terms and conditions"
-          required
-        />
-        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-      </CCol>
-      <CCol xs={12}>
-        <CButton color="primary" type="submit">
-          Submit form
-        </CButton>
-      </CCol>
-    </CForm>
-  )
-}
-
-const Tooltips = () => {
-  const [validated, setValidated] = useState(false)
-  const handleSubmit = (event) => {
-    const form = event.currentTarget
-    if (form.checkValidity() === false) {
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    setValidated(true)
-  }
-  return (
-    <CForm
-      className="row g-3 needs-validation"
-      noValidate
-      validated={validated}
-      onSubmit={handleSubmit}
-    >
-      <CCol md={4} className="position-relative">
-        <CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
-        <CFormInput type="text" id="validationTooltip01" defaultValue="Mark" required />
-        <CFormFeedback tooltip valid>
-          Looks good!
-        </CFormFeedback>
-      </CCol>
-      <CCol md={4} className="position-relative">
-        <CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
-        <CFormInput type="text" id="validationTooltip02" defaultValue="Otto" required />
-        <CFormFeedback tooltip valid>
-          Looks good!
-        </CFormFeedback>
-      </CCol>
-      <CCol md={4} className="position-relative">
-        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
-        <CInputGroup className="has-validation">
-          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-          <CFormInput
-            type="text"
-            id="validationTooltipUsername"
-            defaultValue=""
-            aria-describedby="inputGroupPrepend"
-            required
-          />
-          <CFormFeedback tooltip invalid>
-            Please choose a username.
-          </CFormFeedback>
-        </CInputGroup>
-      </CCol>
-      <CCol md={6} className="position-relative">
-        <CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
-        <CFormInput type="text" id="validationTooltip03" required />
-        <CFormFeedback tooltip invalid>
-          Please provide a valid city.
-        </CFormFeedback>
-      </CCol>
-      <CCol md={3} className="position-relative">
-        <CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
-        <CFormSelect id="validationTooltip04" required>
-          <option disabled defaultValue="">
-            Choose...
-          </option>
-          <option>...</option>
-        </CFormSelect>
-        <CFormFeedback tooltip invalid>
-          Please provide a valid city.
-        </CFormFeedback>
-      </CCol>
-      <CCol md={3} className="position-relative">
-        <CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
-        <CFormInput type="text" id="validationTooltip05" required />
-        <CFormFeedback tooltip invalid>
-          Please provide a valid zip.
-        </CFormFeedback>
-      </CCol>
-      <CCol xs={12} className="position-relative">
-        <CButton color="primary" type="submit">
-          Submit form
-        </CButton>
-      </CCol>
-    </CForm>
-  )
-}
+import { DocsExample } from 'src/components'
 
 const Validation = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="forms/validation/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Validation</strong> <small>Custom styles</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              For custom CoreUI form validation messages, you&#39;ll need to add the{' '}
-              <code>noValidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
-              disables the browser default feedback tooltips, but still provides access to the form
-              validation APIs in JavaScript. Try to submit the form below; our JavaScript will
-              intercept the submit button and relay feedback to you. When attempting to submit,
-              you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to
-              your form controls.
-            </p>
-            <p className="text-body-secondary small">
-              Custom feedback styles apply custom colors, borders, focus styles, and background
-              icons to better communicate feedback.{' '}
-            </p>
-            <DocsExample href="forms/validation">{CustomStyles()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Validation</strong> <small>Browser defaults</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Not interested in custom validation feedback messages or writing JavaScript to change
-              form behaviors? All good, you can use the browser defaults. Try submitting the form
-              below. Depending on your browser and OS, you&#39;ll see a slightly different style of
-              feedback.
-            </p>
-            <p className="text-body-secondary small">
-              While these feedback styles cannot be styled with CSS, you can still customize the
-              feedback text through JavaScript.
-            </p>
-            <DocsExample href="forms/validation#browser-defaults">{BrowserDefaults()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Validation</strong> <small>Server side</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              We recommend using client-side validation, but in case you require server-side
-              validation, you can indicate invalid and valid form fields with <code>invalid</code>{' '}
-              and <code>valid</code> boolean properties.
-            </p>
-            <p className="text-body-secondary small">
-              For invalid fields, ensure that the invalid feedback/error message is associated with
-              the relevant form field using <code>aria-describedby</code> (noting that this
-              attribute allows more than one <code>id</code> to be referenced, in case the field
-              already points to additional form text).
-            </p>
-            <DocsExample href="forms/validation#server-side">
-              <CForm className="row g-3 needs-validation">
-                <CCol md={4}>
-                  <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
-                  <CFormInput
-                    type="text"
-                    id="validationServer01"
-                    defaultValue="Mark"
-                    valid
-                    required
-                  />
-                  <CFormFeedback valid>Looks good!</CFormFeedback>
-                </CCol>
-                <CCol md={4}>
-                  <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
-                  <CFormInput
-                    type="text"
-                    id="validationServer02"
-                    defaultValue="Otto"
-                    valid
-                    required
-                  />
-                  <CFormFeedback valid>Looks good!</CFormFeedback>
-                </CCol>
-                <CCol md={4}>
-                  <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
-                  <CInputGroup className="has-validation">
-                    <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
-                    <CFormInput
-                      type="text"
-                      id="validationServerUsername"
-                      defaultValue=""
-                      aria-describedby="inputGroupPrepend03"
-                      invalid
-                      required
-                    />
-                    <CFormFeedback invalid>Please choose a username.</CFormFeedback>
-                  </CInputGroup>
-                </CCol>
-                <CCol md={6}>
-                  <CFormLabel htmlFor="validationServer03">City</CFormLabel>
-                  <CFormInput type="text" id="validationServer03" invalid required />
-                  <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-                </CCol>
-                <CCol md={3}>
-                  <CFormLabel htmlFor="validationServer04">City</CFormLabel>
-                  <CFormSelect id="validationServer04" invalid>
-                    <option disabled>Choose...</option>
-                    <option>...</option>
-                  </CFormSelect>
-                  <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-                </CCol>
-                <CCol md={3}>
-                  <CFormLabel htmlFor="validationServer05">City</CFormLabel>
-                  <CFormInput type="text" id="validationServer05" invalid required />
-                  <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
-                </CCol>
-                <CCol xs={12}>
-                  <CFormCheck
-                    type="checkbox"
-                    id="invalidCheck"
-                    label="Agree to terms and conditions"
-                    invalid
-                    required
-                  />
-                  <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-                </CCol>
-                <CCol xs={12}>
-                  <CButton color="primary" type="submit">
-                    Submit form
-                  </CButton>
-                </CCol>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Validation</strong> <small>Supported elements</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Validation styles are available for the following form controls and components:
-            </p>
-            <ul>
-              <li>
-                <code>&lt;CFormInput&gt;</code>s
-              </li>
-              <li>
-                <code>&lt;CFormSelect&gt;</code>s
-              </li>
-              <li>
-                <code>&lt;CFormCheck&gt;</code>s
-              </li>
-            </ul>
-            <DocsExample href="forms/validation#supported-elements">
-              <CForm validated={true}>
-                <div className="mb-3">
-                  <CFormLabel htmlFor="validationTextarea" className="form-label">
-                    Textarea
-                  </CFormLabel>
-                  <CFormTextarea
-                    id="validationTextarea"
-                    placeholder="Required example textarea"
-                    invalid
-                    required
-                  ></CFormTextarea>
-                  <CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
-                </div>
-                <CFormCheck
-                  className="mb-3"
-                  id="validationFormCheck1"
-                  label="Check this checkbox"
-                  required
-                />
-                <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
-
-                <CFormCheck
-                  type="radio"
-                  name="radio-stacked"
-                  id="validationFormCheck2"
-                  label="Check this checkbox"
-                  required
-                />
-
-                <CFormCheck
-                  className="mb-3"
-                  type="radio"
-                  name="radio-stacked"
-                  id="validationFormCheck3"
-                  label="Or toggle this other radio"
-                  required
-                />
-                <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
-
-                <div className="mb-3">
-                  <CFormSelect required aria-label="select example">
-                    <option>Open this select menu</option>
-                    <option value="1">One</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                  </CFormSelect>
-                  <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
-                </div>
-
-                <div className="mb-3">
-                  <CFormInput
-                    type="file"
-                    id="validationTextarea"
-                    aria-label="file example"
-                    required
-                  />
-                  <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
-                </div>
-
-                <div className="mb-3">
-                  <CButton type="submit" color="primary" disabled>
-                    Submit form
-                  </CButton>
-                </div>
-              </CForm>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>Validation</strong> <small>Tooltips</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If your form layout allows it, you can swap the text for the tooltip to display
-              validation feedback in a styled tooltip. Be sure to have a parent with{' '}
-              <code>position: relative</code> on it for tooltip positioning. In the example below,
-              our column classes have this already, but your project may require an alternative
-              setup.
-            </p>
-            <DocsExample href="forms/validation#tooltips">{Tooltips()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Validation" />
+      <CardContent>
+        <DocsExample href="forms/validation">
+          <Grid container spacing={2}>
+            <Grid size={{ xs: 12, md: 4 }}>
+              <TextField label="First name" defaultValue="Mark" required fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12, md: 4 }}>
+              <TextField label="Last name" defaultValue="Otto" required fullWidth />
+            </Grid>
+            <Grid size={{ xs: 12, md: 4 }}>
+              <TextField
+                label="Username"
+                required
+                error
+                helperText="Please choose a username."
+                fullWidth
+              />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField
+                label="City"
+                required
+                error
+                helperText="Please provide a valid city."
+                fullWidth
+              />
+            </Grid>
+            <Grid size={{ xs: 12, md: 3 }}>
+              <TextField
+                label="State"
+                required
+                error
+                helperText="Please provide a valid state."
+                fullWidth
+              />
+            </Grid>
+            <Grid size={{ xs: 12, md: 3 }}>
+              <TextField
+                label="Zip"
+                required
+                error
+                helperText="Please provide a valid zip."
+                fullWidth
+              />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <FormControlLabel
+                control={<Checkbox required />}
+                label="Agree to terms and conditions"
+              />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <Button variant="contained">Submit form</Button>
+            </Grid>
+          </Grid>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js
index e46ce6fedb..4971263258 100644
--- a/src/views/icons/brands/Brands.js
+++ b/src/views/icons/brands/Brands.js
@@ -1,34 +1,58 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { brandSet } from '@coreui/icons'
-import { DocsIcons } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import YouTubeIcon from '@mui/icons-material/YouTube'
+import InstagramIcon from '@mui/icons-material/Instagram'
+import RedditIcon from '@mui/icons-material/Reddit'
+import PinterestIcon from '@mui/icons-material/Pinterest'
 
-const toKebabCase = (str) => {
-  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
-}
-
-export const getIconsView = (iconset) => {
-  return Object.entries(iconset).map(([name, value]) => (
-    <CCol className="mb-5" xs={6} sm={4} md={3} xl={2} key={name}>
-      <CIcon icon={value} size="xxl" />
-      <div>{toKebabCase(name)}</div>
-    </CCol>
-  ))
-}
+const Brands = () => {
+  const icons = [
+    { icon: <FacebookIcon />, name: 'Facebook' },
+    { icon: <TwitterIcon />, name: 'Twitter' },
+    { icon: <LinkedInIcon />, name: 'LinkedIn' },
+    { icon: <GitHubIcon />, name: 'GitHub' },
+    { icon: <YouTubeIcon />, name: 'YouTube' },
+    { icon: <InstagramIcon />, name: 'Instagram' },
+    { icon: <RedditIcon />, name: 'Reddit' },
+    { icon: <PinterestIcon />, name: 'Pinterest' },
+  ]
 
-const CoreUIIcons = () => {
   return (
-    <>
-      <DocsIcons />
-      <CCard className="mb-4">
-        <CCardHeader>Brand Icons</CCardHeader>
-        <CCardBody>
-          <CRow className="text-center">{getIconsView(brandSet)}</CRow>
-        </CCardBody>
-      </CCard>
-    </>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Brand Icons" subheader="MUI provides popular brand icons" />
+      <CardContent>
+        <Grid container spacing={2}>
+          {icons.map((item, index) => (
+            <Grid size={{ xs: 6, sm: 4, md: 3, lg: 2 }} key={index}>
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  p: 2,
+                  border: 1,
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                }}
+              >
+                {item.icon}
+                <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+                  {item.name}
+                </Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
   )
 }
 
-export default CoreUIIcons
+export default Brands
diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js
index 08fe176f76..8948efc9c9 100644
--- a/src/views/icons/coreui-icons/CoreUIIcons.js
+++ b/src/views/icons/coreui-icons/CoreUIIcons.js
@@ -1,20 +1,61 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
-import { freeSet } from '@coreui/icons'
-import { getIconsView } from '../brands/Brands.js'
-import { DocsIcons } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import HomeIcon from '@mui/icons-material/Home'
+import SettingsIcon from '@mui/icons-material/Settings'
+import PersonIcon from '@mui/icons-material/Person'
+import SearchIcon from '@mui/icons-material/Search'
+import MailIcon from '@mui/icons-material/Mail'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import FavoriteIcon from '@mui/icons-material/Favorite'
+import StarIcon from '@mui/icons-material/Star'
 
 const CoreUIIcons = () => {
+  const icons = [
+    { icon: <HomeIcon />, name: 'Home' },
+    { icon: <SettingsIcon />, name: 'Settings' },
+    { icon: <PersonIcon />, name: 'Person' },
+    { icon: <SearchIcon />, name: 'Search' },
+    { icon: <MailIcon />, name: 'Mail' },
+    { icon: <NotificationsIcon />, name: 'Notifications' },
+    { icon: <FavoriteIcon />, name: 'Favorite' },
+    { icon: <StarIcon />, name: 'Star' },
+  ]
+
   return (
-    <>
-      <DocsIcons />
-      <CCard className="mb-4">
-        <CCardHeader>Free Icons</CCardHeader>
-        <CCardBody>
-          <CRow className="text-center">{getIconsView(freeSet)}</CRow>
-        </CCardBody>
-      </CCard>
-    </>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="MUI Icons" subheader="Material UI provides a rich set of icons" />
+      <CardContent>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+          MUI uses @mui/icons-material package for icons. Visit the MUI Icons documentation for the
+          full list.
+        </Typography>
+        <Grid container spacing={2}>
+          {icons.map((item, index) => (
+            <Grid size={{ xs: 6, sm: 4, md: 3, lg: 2 }} key={index}>
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  p: 2,
+                  border: 1,
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                }}
+              >
+                {item.icon}
+                <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+                  {item.name}
+                </Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js
index 5db7e56705..a0ab4ac2c1 100644
--- a/src/views/icons/flags/Flags.js
+++ b/src/views/icons/flags/Flags.js
@@ -1,21 +1,54 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
-import { getIconsView } from '../brands/Brands.js'
-import { flagSet } from '@coreui/icons'
-import { DocsIcons } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import FlagIcon from '@mui/icons-material/Flag'
+import PublicIcon from '@mui/icons-material/Public'
+import LanguageIcon from '@mui/icons-material/Language'
+import PlaceIcon from '@mui/icons-material/Place'
+
+const Flags = () => {
+  const icons = [
+    { icon: <FlagIcon />, name: 'Flag' },
+    { icon: <PublicIcon />, name: 'Public' },
+    { icon: <LanguageIcon />, name: 'Language' },
+    { icon: <PlaceIcon />, name: 'Place' },
+  ]
 
-const CoreUIIcons = () => {
   return (
-    <>
-      <DocsIcons />
-      <CCard className="mb-4">
-        <CCardHeader>Flag Icons</CCardHeader>
-        <CCardBody>
-          <CRow className="text-center">{getIconsView(flagSet)}</CRow>
-        </CCardBody>
-      </CCard>
-    </>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Flag Icons" subheader="MUI provides location and flag-related icons" />
+      <CardContent>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+          For country flags, consider using a dedicated flag icon library like react-world-flags or
+          flag-icons.
+        </Typography>
+        <Grid container spacing={2}>
+          {icons.map((item, index) => (
+            <Grid size={{ xs: 6, sm: 4, md: 3, lg: 2 }} key={index}>
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  p: 2,
+                  border: 1,
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                }}
+              >
+                {item.icon}
+                <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+                  {item.name}
+                </Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
   )
 }
 
-export default CoreUIIcons
+export default Flags
diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js
index 70e1108a11..3321f807ca 100644
--- a/src/views/notifications/alerts/Alerts.js
+++ b/src/views/notifications/alerts/Alerts.js
@@ -1,145 +1,40 @@
 import React from 'react'
-import {
-  CAlert,
-  CAlertHeading,
-  CAlertLink,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CRow,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Alert from '@mui/material/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Alerts = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/alert/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Alert</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              React Alert is prepared for any length of text, as well as an optional close button.
-              For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
-              props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
-              <a href="https://coreui.io/react/docs/components/alert#dismissing">dismissing prop</a>
-              .
-            </p>
-            <DocsExample href="components/alert">
-              <CAlert color="primary">A simple primary alert—check it out!</CAlert>
-              <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
-              <CAlert color="success">A simple success alert—check it out!</CAlert>
-              <CAlert color="danger">A simple danger alert—check it out!</CAlert>
-              <CAlert color="warning">A simple warning alert—check it out!</CAlert>
-              <CAlert color="info">A simple info alert—check it out!</CAlert>
-              <CAlert color="light">A simple light alert—check it out!</CAlert>
-              <CAlert color="dark">A simple dark alert—check it out!</CAlert>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Alert</strong> <small>Link color</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored
-              links inside any alert.
-            </p>
-            <DocsExample href="components/alert#link-color">
-              <CAlert color="primary">
-                A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
-                it a click if you like.
-              </CAlert>
-              <CAlert color="secondary">
-                A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>.
-                Give it a click if you like.
-              </CAlert>
-              <CAlert color="success">
-                A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give
-                it a click if you like.
-              </CAlert>
-              <CAlert color="danger">
-                A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give
-                it a click if you like.
-              </CAlert>
-              <CAlert color="warning">
-                A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give
-                it a click if you like.
-              </CAlert>
-              <CAlert color="info">
-                A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
-                a click if you like.
-              </CAlert>
-              <CAlert color="light">
-                A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
-                a click if you like.
-              </CAlert>
-              <CAlert color="dark">
-                A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
-                a click if you like.
-              </CAlert>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Alert</strong> <small>Additional content</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Alert can also incorporate supplementary components &amp; elements like heading,
-              paragraph, and divider.
-            </p>
-            <DocsExample href="components/alert#additional-content">
-              <CAlert color="success">
-                <CAlertHeading as="h4">Well done!</CAlertHeading>
-                <p>
-                  Aww yeah, you successfully read this important alert message. This example text is
-                  going to run a bit longer so that you can see how spacing within an alert works
-                  with this kind of content.
-                </p>
-                <hr />
-                <p className="mb-0">
-                  Whenever you need to, be sure to use margin utilities to keep things nice and
-                  tidy.
-                </p>
-              </CAlert>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Alert</strong> <small>Dismissing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
-            </p>
-            <DocsExample href="components/alert#dismissing">
-              <CAlert
-                color="warning"
-                dismissible
-                onClose={() => {
-                  alert('👋 Well, hi there! Thanks for dismissing me.')
-                }}
-              >
-                <strong>Go right ahead</strong> and click that dimiss over there on the right.
-              </CAlert>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Alerts" />
+      <CardContent>
+        <DocsExample href="components/alert">
+          <Stack spacing={2}>
+            <Alert severity="success">This is a success alert</Alert>
+            <Alert severity="info">This is an info alert</Alert>
+            <Alert severity="warning">This is a warning alert</Alert>
+            <Alert severity="error">This is an error alert</Alert>
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/alert#additional-content">
+          <Stack spacing={2} sx={{ mt: 3 }}>
+            <Alert severity="success">
+              <AlertTitle>Success</AlertTitle>
+              This is a success alert with a title
+            </Alert>
+            <Alert severity="error">
+              <AlertTitle>Error</AlertTitle>
+              This is an error alert with a title
+            </Alert>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js
index 81dd6b5ac4..2a7d4db637 100644
--- a/src/views/notifications/badges/Badges.js
+++ b/src/views/notifications/badges/Badges.js
@@ -1,124 +1,48 @@
 import React from 'react'
-import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Badge from '@mui/material/Badge'
+import Chip from '@mui/material/Chip'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import MailIcon from '@mui/icons-material/Mail'
+
+import { DocsExample } from 'src/components'
 
 const Badges = () => {
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/badge/" />
-      </CCol>
-      <CCol lg={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Badges</strong> <small>Dismissing</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Bootstrap badge scale to suit the size of the parent element by using relative font
-              sizing and <code>em</code> units.
-            </p>
-            <DocsExample href="components/badge">
-              <h1>
-                Example heading <CBadge color="secondary">New</CBadge>
-              </h1>
-              <h2>
-                Example heading <CBadge color="secondary">New</CBadge>
-              </h2>
-              <h3>
-                Example heading <CBadge color="secondary">New</CBadge>
-              </h3>
-              <h4>
-                Example heading <CBadge color="secondary">New</CBadge>
-              </h4>
-              <h5>
-                Example heading <CBadge color="secondary">New</CBadge>
-              </h5>
-              <h6>
-                Example heading <CBadge color="secondary">New</CBadge>
-              </h6>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Badges can be used as part of links or buttons to provide a counter.
-            </p>
-            <DocsExample href="components/badge">
-              <CButton color="primary">
-                Notifications <CBadge color="secondary">4</CBadge>
-              </CButton>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Remark that depending on how you use them, badges may be complicated for users of
-              screen readers and related assistive technologies.
-            </p>
-            <p className="text-body-secondary small">
-              Unless the context is clear, consider including additional context with a visually
-              hidden piece of additional text.
-            </p>
-            <DocsExample href="components/badge">
-              <CButton color="primary">
-                Profile <CBadge color="secondary">9</CBadge>
-                <span className="visually-hidden">unread messages</span>
-              </CButton>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol lg={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Badges</strong> <small>Contextual variations</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add any of the below-mentioned <code>color</code> props to modify the presentation of
-              a badge.
-            </p>
-            <DocsExample href="components/badge#contextual-variations">
-              <CBadge color="primary">primary</CBadge>
-              <CBadge color="success">success</CBadge>
-              <CBadge color="danger">danger</CBadge>
-              <CBadge color="warning">warning</CBadge>
-              <CBadge color="info">info</CBadge>
-              <CBadge color="light">light</CBadge>
-              <CBadge color="dark">dark</CBadge>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Badges</strong> <small>Pill badges</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded.
-            </p>
-            <DocsExample href="components/badge#pill-badges">
-              <CBadge color="primary" shape="rounded-pill">
-                primary
-              </CBadge>
-              <CBadge color="success" shape="rounded-pill">
-                success
-              </CBadge>
-              <CBadge color="danger" shape="rounded-pill">
-                danger
-              </CBadge>
-              <CBadge color="warning" shape="rounded-pill">
-                warning
-              </CBadge>
-              <CBadge color="info" shape="rounded-pill">
-                info
-              </CBadge>
-              <CBadge color="light" shape="rounded-pill">
-                light
-              </CBadge>
-              <CBadge color="dark" shape="rounded-pill">
-                dark
-              </CBadge>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Badges" />
+      <CardContent>
+        <DocsExample href="components/badge">
+          <Stack direction="row" spacing={2}>
+            <Chip label="Primary" color="primary" />
+            <Chip label="Secondary" color="secondary" />
+            <Chip label="Success" color="success" />
+            <Chip label="Error" color="error" />
+            <Chip label="Warning" color="warning" />
+            <Chip label="Info" color="info" />
+          </Stack>
+        </DocsExample>
+        <DocsExample href="components/badge#pill-badges">
+          <Stack direction="row" spacing={2} sx={{ mt: 3 }}>
+            <Badge badgeContent={4} color="primary">
+              <MailIcon />
+            </Badge>
+            <Badge badgeContent={4} color="secondary">
+              <MailIcon />
+            </Badge>
+            <Badge badgeContent={4} color="success">
+              <MailIcon />
+            </Badge>
+            <Badge badgeContent={4} color="error">
+              <MailIcon />
+            </Badge>
+          </Stack>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js
index 7be7294a12..2cc1481e94 100644
--- a/src/views/notifications/modals/Modals.js
+++ b/src/views/notifications/modals/Modals.js
@@ -1,752 +1,45 @@
-import React, { useState } from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CLink,
-  CModal,
-  CModalBody,
-  CModalFooter,
-  CModalHeader,
-  CModalTitle,
-  CPopover,
-  CRow,
-  CTooltip,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
-
-const LiveDemo = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Launch demo modal
-      </CButton>
-      <CModal visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>Woohoo, you&#39;re reading this text in a modal!</CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const StaticBackdrop = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Launch static backdrop modal
-      </CButton>
-      <CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          I will not close if you click outside me. Don&#39;teven try to press escape key.
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const ScrollingLongContent = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Launch demo modal
-      </CButton>
-      <CModal visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const ScrollingLongContent2 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Launch demo modal
-      </CButton>
-      <CModal scrollable visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const VerticallyCentered = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Vertically centered modal
-      </CButton>
-      <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const VerticallyCentered2 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Vertically centered scrollable modal
-      </CButton>
-      <CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const TooltipsPopovers = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Launch demo modal
-      </CButton>
-      <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <h5>Popover in a modal</h5>
-          <p>
-            This
-            <CPopover title="Popover title" content="Popover body content is set in this property.">
-              <CButton color="primary">button</CButton>
-            </CPopover>{' '}
-            triggers a popover on click.
-          </p>
-          <hr />
-          <h5>Tooltips in a modal</h5>
-          <p>
-            <CTooltip content="Tooltip">
-              <CLink>This link</CLink>
-            </CTooltip>{' '}
-            and
-            <CTooltip content="Tooltip">
-              <CLink>that link</CLink>
-            </CTooltip>{' '}
-            have tooltips on hover.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-const OptionalSizes = () => {
-  const [visibleXL, setVisibleXL] = useState(false)
-  const [visibleLg, setVisibleLg] = useState(false)
-  const [visibleSm, setVisibleSm] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
-        Extra large modal
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
-        Large modal
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
-        Small large modal
-      </CButton>
-      <CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
-        <CModalHeader>
-          <CModalTitle>Extra large modal</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
-        <CModalHeader>
-          <CModalTitle>Large modal</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
-        <CModalHeader>
-          <CModalTitle>Small modal</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-    </>
-  )
-}
-
-const FullscreenModal = () => {
-  const [visible, setVisible] = useState(false)
-  const [visibleSm, setVisibleSm] = useState(false)
-  const [visibleMd, setVisibleMd] = useState(false)
-  const [visibleLg, setVisibleLg] = useState(false)
-  const [visibleXL, setVisibleXL] = useState(false)
-  const [visibleXXL, setVisibleXXL] = useState(false)
-
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Full screen
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
-        Full screen below sm
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
-        Full screen below md
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
-        Full screen below lg
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
-        Full screen below xl
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
-        Full screen below xxl
-      </CButton>
-      <CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
-        <CModalHeader>
-          <CModalTitle>Full screen</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
-        <CModalHeader>
-          <CModalTitle>Full screen below sm</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
-        <CModalHeader>
-          <CModalTitle>Full screen below md</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
-        <CModalHeader>
-          <CModalTitle>Full screen below lg</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
-        <CModalHeader>
-          <CModalTitle>Full screen below xl</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
-        <CModalHeader>
-          <CModalTitle>Full screen below xxl</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-    </>
-  )
-}
+import React from 'react'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogActions from '@mui/material/DialogActions'
+import Stack from '@mui/material/Stack'
+
+import { DocsExample } from 'src/components'
 
 const Modals = () => {
-  return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/modal/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Below is a static modal example (meaning its <code>position</code> and{' '}
-              <code>display</code> have been overridden). Included are the modal header, modal body
-              (required for <code>padding</code>), and modal footer (optional). We ask that you
-              include modal headers with dismiss actions whenever possible, or provide another
-              explicit dismiss action.
-            </p>
-            <DocsExample href="components/modal">
-              <CModal
-                className="show d-block position-static"
-                backdrop={false}
-                keyboard={false}
-                portal={false}
-                visible
-              >
-                <CModalHeader>
-                  <CModalTitle>Modal title</CModalTitle>
-                </CModalHeader>
-                <CModalBody>Modal body text goes here.</CModalBody>
-                <CModalFooter>
-                  <CButton color="secondary">Close</CButton>
-                  <CButton color="primary">Save changes</CButton>
-                </CModalFooter>
-              </CModal>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Live demo</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Toggle a working modal demo by clicking the button below. It will slide down and fade
-              in from the top of the page.
-            </p>
-            <DocsExample href="components/modal#live-demo">{LiveDemo()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Static backdrop</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
-              modal will behave as though the backdrop is static, meaning it will not close when
-              clicking outside it. Click the button below to try it.
-            </p>
-            <DocsExample href="components/modal#static-backdrop">{StaticBackdrop()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Scrolling long content</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
-              modal will behave as though the backdrop is static, meaning it will not close when
-              clicking outside it. Click the button below to try it.
-            </p>
-            <DocsExample href="components/modal#scrolling-long-content">
-              {ScrollingLongContent()}
-            </DocsExample>
-            <p className="text-body-secondary small">
-              You can also create a scrollable modal that allows scroll the modal body by adding{' '}
-              <code>scrollable</code> prop.
-            </p>
-            <DocsExample href="components/modal#scrolling-long-content">
-              {ScrollingLongContent2()}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Vertically centered</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
-              vertically center the modal.
-            </p>
-            <DocsExample href="components/modal#vertically-centered">
-              {VerticallyCentered()}
-            </DocsExample>
-            <DocsExample href="components/modal#vertically-centered">
-              {VerticallyCentered2()}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Tooltips and popovers</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
-              modals as needed. When modals are closed, any tooltips and popovers within are also
-              automatically dismissed.
-            </p>
-            <DocsExample href="components/modal#tooltips-and-popovers">
-              {TooltipsPopovers()}
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Optional sizes</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Modals have three optional sizes, available via modifier classes to be placed on a{' '}
-              <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
-              horizontal scrollbars on narrower viewports.
-            </p>
-            <table className="table">
-              <thead>
-                <tr>
-                  <th>Size</th>
-                  <th>Property size</th>
-                  <th>Modal max-width</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>Small</td>
-                  <td>
-                    <code>&#39;sm&#39;</code>
-                  </td>
-                  <td>
-                    <code>300px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>Default</td>
-                  <td className="text-body-secondary">None</td>
-                  <td>
-                    <code>500px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>Large</td>
-                  <td>
-                    <code>&#39;lg&#39;</code>
-                  </td>
-                  <td>
-                    <code>800px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>Extra large</td>
-                  <td>
-                    <code>&#39;xl&#39;</code>
-                  </td>
-                  <td>
-                    <code>1140px</code>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <DocsExample href="components/modal#optional-sizes">{OptionalSizes()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Modal</strong> <small>Fullscreen Modal</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Another override is the option to pop up a modal that covers the user viewport,
-              available via property <code>fullscrean</code>.
-            </p>
-            <table className="table">
-              <thead>
-                <tr>
-                  <th>Property fullscrean</th>
-                  <th>Availability</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <code>true</code>
-                  </td>
-                  <td>Always</td>
-                </tr>
-                <tr>
-                  <td>
-                    <code>&#39;sm&#39;</code>
-                  </td>
-                  <td>
-                    Below <code>576px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <code>&#39;md&#39;</code>
-                  </td>
-                  <td>
-                    Below <code>768px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <code>&#39;lg&#39;</code>
-                  </td>
-                  <td>
-                    Below <code>992px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <code>&#39;xl&#39;</code>
-                  </td>
-                  <td>
-                    Below <code>1200px</code>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <code>&#39;xxl&#39;</code>
-                  </td>
-                  <td>
-                    Below <code>1400px</code>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <DocsExample href="components/modal#fullscreen-modal">{FullscreenModal()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Modals" />
+      <CardContent>
+        <DocsExample href="components/modal">
+          <Button variant="contained" onClick={() => setOpen(true)}>
+            Launch demo modal
+          </Button>
+          <Dialog open={open} onClose={() => setOpen(false)}>
+            <DialogTitle>Modal title</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                This is a modal dialog. You can do whatever you want here.
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={() => setOpen(false)}>Close</Button>
+              <Button variant="contained" onClick={() => setOpen(false)}>
+                Save changes
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index 9ccf859ad3..b99c61d504 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -1,252 +1,35 @@
-import React, { useRef, useState } from 'react'
-import {
-  CCard,
-  CCardHeader,
-  CCardBody,
-  CButton,
-  CRow,
-  CCol,
-  CToast,
-  CToastBody,
-  CToastClose,
-  CToastHeader,
-  CToaster,
-} from '@coreui/react'
-import { DocsComponents, DocsExample } from 'src/components'
+import React from 'react'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import Stack from '@mui/material/Stack'
 
-const ExampleToast = () => {
-  const [toast, addToast] = useState(0)
-  const toaster = useRef()
-  const exampleToast = (
-    <CToast>
-      <CToastHeader closeButton>
-        <svg
-          className="rounded me-2"
-          width="20"
-          height="20"
-          xmlns="http://www.w3.org/2000/svg"
-          preserveAspectRatio="xMidYMid slice"
-          focusable="false"
-          role="img"
-        >
-          <rect width="100%" height="100%" fill="#007aff"></rect>
-        </svg>
-        <strong className="me-auto">CoreUI for React.js</strong>
-        <small>7 min ago</small>
-      </CToastHeader>
-      <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    </CToast>
-  )
-  return (
-    <>
-      <CButton color="primary" onClick={() => addToast(exampleToast)}>
-        Send a toast
-      </CButton>
-      <CToaster ref={toaster} push={toast} placement="top-end" />
-    </>
-  )
-}
+import { DocsExample } from 'src/components'
 
 const Toasts = () => {
+  const [open, setOpen] = React.useState(false)
+
   return (
-    <CRow>
-      <CCol xs={12}>
-        <DocsComponents href="components/toast/" />
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Toast</strong> <small>Basic</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Toasts are as flexible as you need and have very little required markup. At a minimum,
-              we require a single element to contain your “toasted” content and strongly encourage a
-              dismiss button.
-            </p>
-            <DocsExample href="components/toast">
-              <CToast autohide={false} visible={true}>
-                <CToastHeader closeButton>
-                  <svg
-                    className="rounded me-2"
-                    width="20"
-                    height="20"
-                    xmlns="http://www.w3.org/2000/svg"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                    role="img"
-                  >
-                    <rect width="100%" height="100%" fill="#007aff"></rect>
-                  </svg>
-                  <strong className="me-auto">CoreUI for React.js</strong>
-                  <small>7 min ago</small>
-                </CToastHeader>
-                <CToastBody>Hello, world! This is a toast message.</CToastBody>
-              </CToast>
-            </DocsExample>
-            <DocsExample href="components/toast">{ExampleToast()}</DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Toast</strong> <small>Translucent</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Toasts are slightly translucent to blend in with what&#39;s below them.
-            </p>
-            <DocsExample href="components/toast#translucent" tabContentClassName="bg-dark">
-              <CToast autohide={false} visible={true}>
-                <CToastHeader closeButton>
-                  <svg
-                    className="rounded me-2"
-                    width="20"
-                    height="20"
-                    xmlns="http://www.w3.org/2000/svg"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                    role="img"
-                  >
-                    <rect width="100%" height="100%" fill="#007aff"></rect>
-                  </svg>
-                  <strong className="me-auto">CoreUI for React.js</strong>
-                  <small>7 min ago</small>
-                </CToastHeader>
-                <CToastBody>Hello, world! This is a toast message.</CToastBody>
-              </CToast>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Toast</strong> <small>Stacking</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              You can stack toasts by wrapping them in a toast container, which will vertically add
-              some spacing.
-            </p>
-            <DocsExample href="components/toast#stacking">
-              <CToaster className="position-static">
-                <CToast autohide={false} visible={true}>
-                  <CToastHeader closeButton>
-                    <svg
-                      className="rounded me-2"
-                      width="20"
-                      height="20"
-                      xmlns="http://www.w3.org/2000/svg"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                      role="img"
-                    >
-                      <rect width="100%" height="100%" fill="#007aff"></rect>
-                    </svg>
-                    <strong className="me-auto">CoreUI for React.js</strong>
-                    <small>7 min ago</small>
-                  </CToastHeader>
-                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-                </CToast>
-                <CToast autohide={false} visible={true}>
-                  <CToastHeader closeButton>
-                    <svg
-                      className="rounded me-2"
-                      width="20"
-                      height="20"
-                      xmlns="http://www.w3.org/2000/svg"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                      role="img"
-                    >
-                      <rect width="100%" height="100%" fill="#007aff"></rect>
-                    </svg>
-                    <strong className="me-auto">CoreUI for React.js</strong>
-                    <small>7 min ago</small>
-                  </CToastHeader>
-                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-                </CToast>
-              </CToaster>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Toast</strong> <small>Custom content</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Customize your toasts by removing sub-components, tweaking them with{' '}
-              <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
-              markup. Here we&#39;ve created a simpler toast by removing the default{' '}
-              <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from{' '}
-              <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some{' '}
-              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
-              layout.
-            </p>
-            <DocsExample href="components/toast#custom-content">
-              <CToast autohide={false} className="align-items-center" visible={true}>
-                <div className="d-flex">
-                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-                  <CToastClose className="me-2 m-auto" />
-                </div>
-              </CToast>
-            </DocsExample>
-            <p className="text-body-secondary small">
-              Alternatively, you can also add additional controls and components to toasts.
-            </p>
-            <DocsExample href="components/toast#custom-content">
-              <CToast autohide={false} visible={true}>
-                <CToastBody>
-                  Hello, world! This is a toast message.
-                  <div className="mt-2 pt-2 border-top">
-                    <CButton type="button" color="primary" size="sm">
-                      Take action
-                    </CButton>
-                    <CToastClose as={CButton} color="secondary" size="sm" className="ms-1">
-                      Close
-                    </CToastClose>
-                  </div>
-                </CToastBody>
-              </CToast>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs={12}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            <strong>React Toast</strong> <small>Custom content</small>
-          </CCardHeader>
-          <CCardBody>
-            <p className="text-body-secondary small">
-              Building on the above example, you can create different toast color schemes with our{' '}
-              <a href="https://coreui.io/docs/utilities/colors">color</a> and{' '}
-              <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
-              we&#39;ve set <code>color=&#34;primary&#34;</code> and added <code>.text-white</code>{' '}
-              class to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to
-              our close button. For a crisp edge, we remove the default border with{' '}
-              <code>.border-0</code>.
-            </p>
-            <DocsExample href="components/toast#color-schemes">
-              <CToast
-                autohide={false}
-                color="primary"
-                className="text-white align-items-center"
-                visible={true}
-              >
-                <div className="d-flex">
-                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-                  <CToastClose className="me-2 m-auto" white />
-                </div>
-              </CToast>
-            </DocsExample>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Toasts" />
+      <CardContent>
+        <DocsExample href="components/toast">
+          <Stack direction="row" spacing={2}>
+            <Button variant="contained" onClick={() => setOpen(true)}>
+              Show Toast
+            </Button>
+          </Stack>
+          <Snackbar open={open} autoHideDuration={6000} onClose={() => setOpen(false)}>
+            <Alert onClose={() => setOpen(false)} severity="success" sx={{ width: '100%' }}>
+              This is a success message!
+            </Alert>
+          </Snackbar>
+        </DocsExample>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index 1b2ee0baa2..dd2837959c 100644
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -1,85 +1,112 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardGroup,
-  CCol,
-  CContainer,
-  CForm,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilLockLocked, cilUser } from '@coreui/icons'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import InputAdornment from '@mui/material/InputAdornment'
+import PersonIcon from '@mui/icons-material/Person'
+import LockIcon from '@mui/icons-material/Lock'
 
 const Login = () => {
   return (
-    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
-      <CContainer>
-        <CRow className="justify-content-center">
-          <CCol md={8}>
-            <CCardGroup>
-              <CCard className="p-4">
-                <CCardBody>
-                  <CForm>
-                    <h1>Login</h1>
-                    <p className="text-body-secondary">Sign In to your account</p>
-                    <CInputGroup className="mb-3">
-                      <CInputGroupText>
-                        <CIcon icon={cilUser} />
-                      </CInputGroupText>
-                      <CFormInput placeholder="Username" autoComplete="username" />
-                    </CInputGroup>
-                    <CInputGroup className="mb-4">
-                      <CInputGroupText>
-                        <CIcon icon={cilLockLocked} />
-                      </CInputGroupText>
-                      <CFormInput
-                        type="password"
-                        placeholder="Password"
-                        autoComplete="current-password"
-                      />
-                    </CInputGroup>
-                    <CRow>
-                      <CCol xs={6}>
-                        <CButton color="primary" className="px-4">
-                          Login
-                        </CButton>
-                      </CCol>
-                      <CCol xs={6} className="text-right">
-                        <CButton color="link" className="px-0">
-                          Forgot password?
-                        </CButton>
-                      </CCol>
-                    </CRow>
-                  </CForm>
-                </CCardBody>
-              </CCard>
-              <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
-                <CCardBody className="text-center">
-                  <div>
-                    <h2>Sign up</h2>
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                      tempor incididunt ut labore et dolore magna aliqua.
-                    </p>
-                    <Link to="/register">
-                      <CButton color="primary" className="mt-3" active tabIndex={-1}>
-                        Register Now!
-                      </CButton>
-                    </Link>
-                  </div>
-                </CCardBody>
-              </CCard>
-            </CCardGroup>
-          </CCol>
-        </CRow>
-      </CContainer>
-    </div>
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        bgcolor: 'background.default',
+      }}
+    >
+      <Container maxWidth="md">
+        <Grid container>
+          <Grid size={{ xs: 12, md: 7 }}>
+            <Card sx={{ height: '100%' }}>
+              <CardContent sx={{ p: 4 }}>
+                <Typography variant="h4" component="h1" gutterBottom>
+                  Login
+                </Typography>
+                <Typography color="text.secondary" sx={{ mb: 3 }}>
+                  Sign In to your account
+                </Typography>
+                <TextField
+                  fullWidth
+                  placeholder="Username"
+                  autoComplete="username"
+                  sx={{ mb: 2 }}
+                  slotProps={{
+                    input: {
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <PersonIcon />
+                        </InputAdornment>
+                      ),
+                    },
+                  }}
+                />
+                <TextField
+                  fullWidth
+                  type="password"
+                  placeholder="Password"
+                  autoComplete="current-password"
+                  sx={{ mb: 3 }}
+                  slotProps={{
+                    input: {
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <LockIcon />
+                        </InputAdornment>
+                      ),
+                    },
+                  }}
+                />
+                <Box
+                  sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+                >
+                  <Button variant="contained" color="primary">
+                    Login
+                  </Button>
+                  <Button color="primary">Forgot password?</Button>
+                </Box>
+              </CardContent>
+            </Card>
+          </Grid>
+          <Grid size={{ xs: 12, md: 5 }}>
+            <Card
+              sx={{
+                height: '100%',
+                bgcolor: 'primary.main',
+                color: 'white',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <CardContent sx={{ textAlign: 'center', p: 4 }}>
+                <Typography variant="h5" component="h2" gutterBottom>
+                  Sign up
+                </Typography>
+                <Typography sx={{ mb: 3 }}>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua.
+                </Typography>
+                <Button
+                  component={Link}
+                  to="/register"
+                  variant="outlined"
+                  sx={{ color: 'white', borderColor: 'white' }}
+                >
+                  Register Now!
+                </Button>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
   )
 }
 
diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js
index d7fe9a0a25..325f39627b 100644
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -1,40 +1,59 @@
 import React from 'react'
-import {
-  CButton,
-  CCol,
-  CContainer,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilMagnifyingGlass } from '@coreui/icons'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import InputAdornment from '@mui/material/InputAdornment'
+import SearchIcon from '@mui/icons-material/Search'
 
 const Page404 = () => {
   return (
-    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
-      <CContainer>
-        <CRow className="justify-content-center">
-          <CCol md={6}>
-            <div className="clearfix">
-              <h1 className="float-start display-3 me-4">404</h1>
-              <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
-              <p className="text-body-secondary float-start">
-                The page you are looking for was not found.
-              </p>
-            </div>
-            <CInputGroup className="input-prepend">
-              <CInputGroupText>
-                <CIcon icon={cilMagnifyingGlass} />
-              </CInputGroupText>
-              <CFormInput type="text" placeholder="What are you looking for?" />
-              <CButton color="info">Search</CButton>
-            </CInputGroup>
-          </CCol>
-        </CRow>
-      </CContainer>
-    </div>
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        bgcolor: 'background.default',
+      }}
+    >
+      <Container maxWidth="sm">
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 3 }}>
+          <Typography
+            variant="h1"
+            sx={{ fontSize: '4rem', fontWeight: 'bold', mr: 3, color: 'text.primary' }}
+          >
+            404
+          </Typography>
+          <Box>
+            <Typography variant="h5" gutterBottom>
+              Oops! You&apos;re lost.
+            </Typography>
+            <Typography color="text.secondary">
+              The page you are looking for was not found.
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <TextField
+            fullWidth
+            placeholder="What are you looking for?"
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+          <Button variant="contained" color="info">
+            Search
+          </Button>
+        </Box>
+      </Container>
+    </Box>
   )
 }
 
diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js
index ea11a0cb2d..ba5dc58c92 100644
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -1,40 +1,59 @@
 import React from 'react'
-import {
-  CButton,
-  CCol,
-  CContainer,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilMagnifyingGlass } from '@coreui/icons'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import InputAdornment from '@mui/material/InputAdornment'
+import SearchIcon from '@mui/icons-material/Search'
 
 const Page500 = () => {
   return (
-    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
-      <CContainer>
-        <CRow className="justify-content-center">
-          <CCol md={6}>
-            <span className="clearfix">
-              <h1 className="float-start display-3 me-4">500</h1>
-              <h4 className="pt-3">Houston, we have a problem!</h4>
-              <p className="text-body-secondary float-start">
-                The page you are looking for is temporarily unavailable.
-              </p>
-            </span>
-            <CInputGroup className="input-prepend">
-              <CInputGroupText>
-                <CIcon icon={cilMagnifyingGlass} />
-              </CInputGroupText>
-              <CFormInput type="text" placeholder="What are you looking for?" />
-              <CButton color="info">Search</CButton>
-            </CInputGroup>
-          </CCol>
-        </CRow>
-      </CContainer>
-    </div>
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        bgcolor: 'background.default',
+      }}
+    >
+      <Container maxWidth="sm">
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 3 }}>
+          <Typography
+            variant="h1"
+            sx={{ fontSize: '4rem', fontWeight: 'bold', mr: 3, color: 'text.primary' }}
+          >
+            500
+          </Typography>
+          <Box>
+            <Typography variant="h5" gutterBottom>
+              Houston, we have a problem!
+            </Typography>
+            <Typography color="text.secondary">
+              The page you are looking for is temporarily unavailable.
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <TextField
+            fullWidth
+            placeholder="What are you looking for?"
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+          <Button variant="contained" color="info">
+            Search
+          </Button>
+        </Box>
+      </Container>
+    </Box>
   )
 }
 
diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js
index d78b24c8fd..d197ae6749 100644
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -1,70 +1,104 @@
 import React from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCol,
-  CContainer,
-  CForm,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-  CRow,
-} from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cilLockLocked, cilUser } from '@coreui/icons'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import InputAdornment from '@mui/material/InputAdornment'
+import PersonIcon from '@mui/icons-material/Person'
+import EmailIcon from '@mui/icons-material/Email'
+import LockIcon from '@mui/icons-material/Lock'
 
 const Register = () => {
   return (
-    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
-      <CContainer>
-        <CRow className="justify-content-center">
-          <CCol md={9} lg={7} xl={6}>
-            <CCard className="mx-4">
-              <CCardBody className="p-4">
-                <CForm>
-                  <h1>Register</h1>
-                  <p className="text-body-secondary">Create your account</p>
-                  <CInputGroup className="mb-3">
-                    <CInputGroupText>
-                      <CIcon icon={cilUser} />
-                    </CInputGroupText>
-                    <CFormInput placeholder="Username" autoComplete="username" />
-                  </CInputGroup>
-                  <CInputGroup className="mb-3">
-                    <CInputGroupText>@</CInputGroupText>
-                    <CFormInput placeholder="Email" autoComplete="email" />
-                  </CInputGroup>
-                  <CInputGroup className="mb-3">
-                    <CInputGroupText>
-                      <CIcon icon={cilLockLocked} />
-                    </CInputGroupText>
-                    <CFormInput
-                      type="password"
-                      placeholder="Password"
-                      autoComplete="new-password"
-                    />
-                  </CInputGroup>
-                  <CInputGroup className="mb-4">
-                    <CInputGroupText>
-                      <CIcon icon={cilLockLocked} />
-                    </CInputGroupText>
-                    <CFormInput
-                      type="password"
-                      placeholder="Repeat password"
-                      autoComplete="new-password"
-                    />
-                  </CInputGroup>
-                  <div className="d-grid">
-                    <CButton color="success">Create Account</CButton>
-                  </div>
-                </CForm>
-              </CCardBody>
-            </CCard>
-          </CCol>
-        </CRow>
-      </CContainer>
-    </div>
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        bgcolor: 'background.default',
+      }}
+    >
+      <Container maxWidth="sm">
+        <Card>
+          <CardContent sx={{ p: 4 }}>
+            <Typography variant="h4" component="h1" gutterBottom>
+              Register
+            </Typography>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>
+              Create your account
+            </Typography>
+            <TextField
+              fullWidth
+              placeholder="Username"
+              autoComplete="username"
+              sx={{ mb: 2 }}
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <PersonIcon />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+            <TextField
+              fullWidth
+              placeholder="Email"
+              autoComplete="email"
+              sx={{ mb: 2 }}
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <EmailIcon />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+            <TextField
+              fullWidth
+              type="password"
+              placeholder="Password"
+              autoComplete="new-password"
+              sx={{ mb: 2 }}
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <LockIcon />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+            <TextField
+              fullWidth
+              type="password"
+              placeholder="Repeat password"
+              autoComplete="new-password"
+              sx={{ mb: 3 }}
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <LockIcon />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+            <Button fullWidth variant="contained" color="success">
+              Create Account
+            </Button>
+          </CardContent>
+        </Card>
+      </Container>
+    </Box>
   )
 }
 
diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js
index ef844e1637..a08d7e6236 100644
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -1,90 +1,50 @@
-import React, { useEffect, useState, createRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
-import { rgbToHex } from '@coreui/utils'
-import { DocsLink } from 'src/components'
+import React from 'react'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
 
-const ThemeView = () => {
-  const [color, setColor] = useState('rgb(255, 255, 255)')
-  const ref = createRef()
-
-  useEffect(() => {
-    const el = ref.current.parentNode.firstChild
-    const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
-    setColor(varColor)
-  }, [ref])
-
-  return (
-    <table className="table w-100" ref={ref}>
-      <tbody>
-        <tr>
-          <td className="text-body-secondary">HEX:</td>
-          <td className="font-weight-bold">{rgbToHex(color)}</td>
-        </tr>
-        <tr>
-          <td className="text-body-secondary">RGB:</td>
-          <td className="font-weight-bold">{color}</td>
-        </tr>
-      </tbody>
-    </table>
-  )
-}
-
-const ThemeColor = ({ className, children }) => {
-  const classes = classNames(className, 'theme-color w-75 rounded mb-3')
-  return (
-    <CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
-      <div className={classes} style={{ paddingTop: '75%' }}></div>
-      {children}
-      <ThemeView />
-    </CCol>
-  )
-}
+const Colors = () => {
+  const theme = useTheme()
 
-ThemeColor.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
+  const colors = [
+    { name: 'Primary', color: theme.palette.primary.main },
+    { name: 'Secondary', color: theme.palette.secondary.main },
+    { name: 'Success', color: theme.palette.success.main },
+    { name: 'Error', color: theme.palette.error.main },
+    { name: 'Warning', color: theme.palette.warning.main },
+    { name: 'Info', color: theme.palette.info.main },
+  ]
 
-const Colors = () => {
   return (
-    <>
-      <CCard className="mb-4">
-        <CCardHeader>
-          Theme colors
-          <DocsLink href="https://coreui.io/docs/utilities/colors/" />
-        </CCardHeader>
-        <CCardBody>
-          <CRow>
-            <ThemeColor className="bg-primary">
-              <h6>Brand Primary Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-secondary">
-              <h6>Brand Secondary Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-success">
-              <h6>Brand Success Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-danger">
-              <h6>Brand Danger Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-warning">
-              <h6>Brand Warning Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-info">
-              <h6>Brand Info Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-light">
-              <h6>Brand Light Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-dark">
-              <h6>Brand Dark Color</h6>
-            </ThemeColor>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Theme Colors" subheader="MUI theme palette colors" />
+      <CardContent>
+        <Grid container spacing={2}>
+          {colors.map((item, index) => (
+            <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }} key={index}>
+              <Box
+                sx={{
+                  bgcolor: item.color,
+                  color: 'white',
+                  p: 3,
+                  borderRadius: 1,
+                  textAlign: 'center',
+                }}
+              >
+                <Typography variant="subtitle1" fontWeight="bold">
+                  {item.name}
+                </Typography>
+                <Typography variant="caption">{item.color}</Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js
index 1cae4f6c99..ed109a3259 100644
--- a/src/views/theme/typography/Typography.js
+++ b/src/views/theme/typography/Typography.js
@@ -1,228 +1,42 @@
 import React from 'react'
-import { CCard, CCardHeader, CCardBody } from '@coreui/react'
-import { DocsLink } from 'src/components'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import MuiTypography from '@mui/material/Typography'
+import Stack from '@mui/material/Stack'
 
 const Typography = () => {
   return (
-    <>
-      <CCard className="mb-4">
-        <CCardHeader>
-          Headings
-          <DocsLink href="https://coreui.io/docs/content/typography/" />
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Documentation and examples for Bootstrap typography, including global settings,
-            headings, body text, lists, and more.
-          </p>
-          <table className="table">
-            <thead>
-              <tr>
-                <th>Heading</th>
-                <th>Example</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <p>
-                    <code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code>
-                  </p>
-                </td>
-                <td>
-                  <span className="h1">h1. Bootstrap heading</span>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <p>
-                    <code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code>
-                  </p>
-                </td>
-                <td>
-                  <span className="h2">h2. Bootstrap heading</span>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <p>
-                    <code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code>
-                  </p>
-                </td>
-                <td>
-                  <span className="h3">h3. Bootstrap heading</span>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <p>
-                    <code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code>
-                  </p>
-                </td>
-                <td>
-                  <span className="h4">h4. Bootstrap heading</span>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <p>
-                    <code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code>
-                  </p>
-                </td>
-                <td>
-                  <span className="h5">h5. Bootstrap heading</span>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <p>
-                    <code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code>
-                  </p>
-                </td>
-                <td>
-                  <span className="h6">h6. Bootstrap heading</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </CCardBody>
-      </CCard>
-      <CCard className="mb-4">
-        <CCardHeader>Headings</CCardHeader>
-        <CCardBody>
-          <p>
-            <code className="highlighter-rouge">.h1</code> through
-            <code className="highlighter-rouge">.h6</code>
-            classes are also available, for when you want to match the font styling of a heading but
-            cannot use the associated HTML element.
-          </p>
-          <div className="bd-example">
-            <p className="h1">h1. Bootstrap heading</p>
-            <p className="h2">h2. Bootstrap heading</p>
-            <p className="h3">h3. Bootstrap heading</p>
-            <p className="h4">h4. Bootstrap heading</p>
-            <p className="h5">h5. Bootstrap heading</p>
-            <p className="h6">h6. Bootstrap heading</p>
-          </div>
-        </CCardBody>
-      </CCard>
-      <CCard className="mb-4">
-        <div className="card-header">Display headings</div>
-        <div className="card-body">
-          <p>
-            Traditional heading elements are designed to work best in the meat of your page content.
-            When you need a heading to stand out, consider using a <strong>display heading</strong>
-            —a larger, slightly more opinionated heading style.
-          </p>
-          <div className="bd-example bd-example-type">
-            <table className="table">
-              <tbody>
-                <tr>
-                  <td>
-                    <span className="display-1">Display 1</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span className="display-2">Display 2</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span className="display-3">Display 3</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span className="display-4">Display 4</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </CCard>
-      <CCard className="mb-4">
-        <CCardHeader>Inline text elements</CCardHeader>
-        <CCardBody>
-          <p>
-            Traditional heading elements are designed to work best in the meat of your page content.
-            When you need a heading to stand out, consider using a <strong>display heading</strong>
-            —a larger, slightly more opinionated heading style.
-          </p>
-          <div className="bd-example">
-            <p>
-              You can use the mark tag to <mark>highlight</mark> text.
-            </p>
-            <p>
-              <del>This line of text is meant to be treated as deleted text.</del>
-            </p>
-            <p>
-              <s>This line of text is meant to be treated as no longer accurate.</s>
-            </p>
-            <p>
-              <ins>This line of text is meant to be treated as an addition to the document.</ins>
-            </p>
-            <p>
-              <u>This line of text will render as underlined</u>
-            </p>
-            <p>
-              <small>This line of text is meant to be treated as fine print.</small>
-            </p>
-            <p>
-              <strong>This line rendered as bold text.</strong>
-            </p>
-            <p>
-              <em>This line rendered as italicized text.</em>
-            </p>
-          </div>
-        </CCardBody>
-      </CCard>
-      <CCard className="mb-4">
-        <CCardHeader>Description list alignment</CCardHeader>
-        <CCardBody>
-          <p>
-            Align terms and descriptions horizontally by using our grid system’s predefined classes
-            (or semantic mixins). For longer terms, you can optionally add a{' '}
-            <code className="highlighter-rouge">.text-truncate</code> class to truncate the text
-            with an ellipsis.
-          </p>
-          <div className="bd-example">
-            <dl className="row">
-              <dt className="col-sm-3">Description lists</dt>
-              <dd className="col-sm-9">A description list is perfect for defining terms.</dd>
-
-              <dt className="col-sm-3">Euismod</dt>
-              <dd className="col-sm-9">
-                <p>
-                  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
-                </p>
-                <p>Donec id elit non mi porta gravida at eget metus.</p>
-              </dd>
-
-              <dt className="col-sm-3">Malesuada porta</dt>
-              <dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
-
-              <dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
-              <dd className="col-sm-9">
-                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
-                fermentum massa justo sit amet risus.
-              </dd>
-
-              <dt className="col-sm-3">Nesting</dt>
-              <dd className="col-sm-9">
-                <dl className="row">
-                  <dt className="col-sm-4">Nested definition list</dt>
-                  <dd className="col-sm-8">
-                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
-                  </dd>
-                </dl>
-              </dd>
-            </dl>
-          </div>
-        </CCardBody>
-      </CCard>
-    </>
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Typography" subheader="MUI typography variants" />
+      <CardContent>
+        <Stack spacing={2}>
+          <MuiTypography variant="h1">h1. Heading</MuiTypography>
+          <MuiTypography variant="h2">h2. Heading</MuiTypography>
+          <MuiTypography variant="h3">h3. Heading</MuiTypography>
+          <MuiTypography variant="h4">h4. Heading</MuiTypography>
+          <MuiTypography variant="h5">h5. Heading</MuiTypography>
+          <MuiTypography variant="h6">h6. Heading</MuiTypography>
+          <MuiTypography variant="subtitle1">subtitle1. Lorem ipsum dolor sit amet</MuiTypography>
+          <MuiTypography variant="subtitle2">subtitle2. Lorem ipsum dolor sit amet</MuiTypography>
+          <MuiTypography variant="body1">
+            body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </MuiTypography>
+          <MuiTypography variant="body2">
+            body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </MuiTypography>
+          <MuiTypography variant="button" display="block">
+            button text
+          </MuiTypography>
+          <MuiTypography variant="caption" display="block">
+            caption text
+          </MuiTypography>
+          <MuiTypography variant="overline" display="block">
+            overline text
+          </MuiTypography>
+        </Stack>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js
index 4a34afe4c0..f0d0d2c295 100644
--- a/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@@ -1,897 +1,195 @@
 import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardGroup,
-  CCardHeader,
-  CCol,
-  CLink,
-  CRow,
-  CWidgetStatsB,
-  CWidgetStatsC,
-  CWidgetStatsE,
-  CWidgetStatsF,
-} from '@coreui/react'
-import { getStyle } from '@coreui/utils'
-import CIcon from '@coreui/icons-react'
-import {
-  cilArrowRight,
-  cilBasket,
-  cilBell,
-  cilChartPie,
-  cilMoon,
-  cilLaptop,
-  cilPeople,
-  cilSettings,
-  cilSpeech,
-  cilSpeedometer,
-  cilUser,
-  cilUserFollow,
-} from '@coreui/icons'
-import { CChartBar, CChartLine } from '@coreui/react-chartjs'
-import { DocsExample } from 'src/components'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Typography from '@mui/material/Typography'
+import LinearProgress from '@mui/material/LinearProgress'
+import SettingsIcon from '@mui/icons-material/Settings'
+import PersonIcon from '@mui/icons-material/Person'
+import NightlightIcon from '@mui/icons-material/Nightlight'
+import NotificationsIcon from '@mui/icons-material/Notifications'
 
 import WidgetsBrand from './WidgetsBrand'
 import WidgetsDropdown from './WidgetsDropdown'
 
-const Widgets = () => {
-  const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
+const WidgetStatsB = ({ value, title, text, progress, color, inverse }) => (
+  <Card
+    sx={{
+      bgcolor: inverse ? `${color}.main` : 'background.paper',
+      color: inverse ? 'white' : 'text.primary',
+    }}
+  >
+    <CardContent>
+      <Typography variant="h5" fontWeight="bold">
+        {value}
+      </Typography>
+      <Typography variant="body2" color={inverse ? 'inherit' : 'text.secondary'}>
+        {title}
+      </Typography>
+      <LinearProgress
+        variant="determinate"
+        value={progress?.value || 0}
+        color={progress?.color || color || 'primary'}
+        sx={{ my: 1, height: 6, borderRadius: 1 }}
+      />
+      <Typography variant="caption" color={inverse ? 'inherit' : 'text.secondary'}>
+        {text}
+      </Typography>
+    </CardContent>
+  </Card>
+)
+
+const WidgetStatsF = ({ icon, title, value, color }) => (
+  <Card>
+    <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Box sx={{ bgcolor: `${color}.main`, color: 'white', p: 2, borderRadius: 1 }}>{icon}</Box>
+      <Box>
+        <Typography variant="h6" fontWeight="bold">
+          {value}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" textTransform="uppercase">
+          {title}
+        </Typography>
+      </Box>
+    </CardContent>
+  </Card>
+)
 
+const Widgets = () => {
   return (
-    <CCard className="mb-4">
-      <CCardHeader>Widgets</CCardHeader>
-      <CCardBody>
-        <DocsExample href="components/widgets/#cwidgetstatsa">
-          <WidgetsDropdown />
-        </DocsExample>
-        <DocsExample href="components/widgets/#cwidgetstatsb">
-          <CRow xs={{ gutter: 4 }}>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsB
-                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} xl={4} xxl={3}>
-              <CWidgetStatsB
-                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} xl={4} xxl={3}>
-              <CWidgetStatsB
-                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} xl={4} xxl={3}>
-              <CWidgetStatsB
-                value="2 TB"
-                title="Widget title"
-                progress={{ color: 'primary', value: 89.9 }}
-                text="Lorem ipsum dolor sit amet enim."
-              />
-            </CCol>
-          </CRow>
-        </DocsExample>
-        <DocsExample href="components/widgets/#cwidgetstatsb">
-          <CRow xs={{ gutter: 4 }}>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsB
-                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} xl={4} xxl={3}>
-              <CWidgetStatsB
-                color="info"
-                inverse
-                value="12.124"
-                title="Widget title"
-                progress={{ value: 89.9 }}
-                text="Lorem ipsum dolor sit amet enim."
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsB
-                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} xl={4} xxl={3}>
-              <CWidgetStatsB
-                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 xs={{ gutter: 4 }}>
-            <CCol sm={4} md={3} xl={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,
-                        },
-                      },
-                    }}
-                  />
-                }
-                title="title"
-                value="1,123"
-              />
-            </CCol>
-            <CCol sm={4} md={3} xl={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,
-                        },
-                      },
-                    }}
-                  />
-                }
-                title="title"
-                value="1,123"
-              />
-            </CCol>
-            <CCol sm={4} md={3} xl={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,
-                        },
-                      },
-                    }}
-                  />
-                }
-                title="title"
-                value="1,123"
-              />
-            </CCol>
-            <CCol sm={4} md={3} xl={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,
-                        },
-                      },
-                    }}
-                  />
-                }
-                title="title"
-                value="1,123"
-              />
-            </CCol>
-            <CCol sm={4} md={3} xl={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,
-                        },
-                      },
-                    }}
-                  />
-                }
-                title="title"
-                value="1,123"
-              />
-            </CCol>
-            <CCol sm={4} md={3} xl={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,
-                        },
-                      },
-                    }}
-                  />
-                }
-                title="title"
-                value="1,123"
-              />
-            </CCol>
-          </CRow>
-        </DocsExample>
-        <DocsExample href="components/widgets/#cwidgetstatsf">
-          <CRow xs={{ gutter: 4 }}>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-                title="income"
-                value="$1.999,50"
-                color="primary"
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                icon={<CIcon width={24} icon={cilUser} size="xl" />}
-                title="income"
-                value="$1.999,50"
-                color="info"
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-                title="income"
-                value="$1.999,50"
-                color="warning"
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                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 xs={{ gutter: 4 }}>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                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-body-secondary"
-                    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} xl={4} xxl={3}>
-              <CWidgetStatsF
-                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-body-secondary"
-                    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} xl={4} xxl={3}>
-              <CWidgetStatsF
-                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-body-secondary"
-                    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} xl={4} xxl={3}>
-              <CWidgetStatsF
-                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-body-secondary"
-                    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 xs={{ gutter: 4 }}>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-                padding={false}
-                title="income"
-                value="$1.999,50"
-                color="primary"
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                icon={<CIcon width={24} icon={cilUser} size="xl" />}
-                padding={false}
-                title="income"
-                value="$1.999,50"
-                color="info"
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-                padding={false}
-                title="income"
-                value="$1.999,50"
-                color="warning"
-              />
-            </CCol>
-            <CCol xs={12} sm={6} xl={4} xxl={3}>
-              <CWidgetStatsF
-                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 }}
+    <Card sx={{ mb: 3 }}>
+      <CardHeader title="Widgets" />
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Widget Stats A
+        </Typography>
+        <WidgetsDropdown />
+
+        <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>
+          Widget Stats B
+        </Typography>
+        <Grid container spacing={3}>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              progress={{ color: 'success', value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
+              title="Widget title"
+              value="89.9%"
             />
-            <CWidgetStatsC
-              icon={<CIcon icon={cilUserFollow} height={36} />}
-              value="385"
-              title="New Clients"
-              progress={{ color: 'success', value: 75 }}
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              value="12.124"
+              title="Widget title"
+              progress={{ color: 'info', value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
             />
-            <CWidgetStatsC
-              icon={<CIcon icon={cilBasket} height={36} />}
-              value="1238"
-              title="Products sold"
-              progress={{ color: 'warning', value: 75 }}
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              value="$98.111,00"
+              title="Widget title"
+              progress={{ color: 'warning', value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              value="2 TB"
+              title="Widget title"
+              progress={{ color: 'primary', value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
+            />
+          </Grid>
+        </Grid>
+
+        <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>
+          Widget Stats B (Inverse)
+        </Typography>
+        <Grid container spacing={3}>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              color="success"
+              inverse
+              value="89.9%"
+              title="Widget title"
+              progress={{ value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
             />
-            <CWidgetStatsC
-              icon={<CIcon icon={cilChartPie} height={36} />}
-              value="28%"
-              title="Returning Visitors"
-              progress={{ color: 'primary', value: 75 }}
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              color="info"
+              inverse
+              value="12.124"
+              title="Widget title"
+              progress={{ value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
             />
-            <CWidgetStatsC
-              icon={<CIcon icon={cilSpeedometer} height={36} />}
-              value="5:34:11"
-              title="Avg. Time"
-              progress={{ color: 'danger', value: 75 }}
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              color="warning"
+              inverse
+              value="$98.111,00"
+              title="Widget title"
+              progress={{ value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
             />
-          </CCardGroup>
-        </DocsExample>
-        <DocsExample href="components/widgets/#cwidgetstatsc">
-          <CRow xs={{ gutter: 4 }}>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                icon={<CIcon icon={cilPeople} height={36} />}
-                value="87.500"
-                title="Visitors"
-                progress={{ color: 'info', value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                icon={<CIcon icon={cilUserFollow} height={36} />}
-                value="385"
-                title="New Clients"
-                progress={{ color: 'success', value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                icon={<CIcon icon={cilBasket} height={36} />}
-                value="1238"
-                title="Products sold"
-                progress={{ color: 'warning', value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                icon={<CIcon icon={cilChartPie} height={36} />}
-                value="28%"
-                title="Returning Visitors"
-                progress={{ color: 'primary', value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                icon={<CIcon icon={cilSpeedometer} height={36} />}
-                value="5:34:11"
-                title="Avg. Time"
-                progress={{ color: 'danger', value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                icon={<CIcon icon={cilSpeech} height={36} />}
-                value="972"
-                title="Comments"
-                progress={{ color: 'info', value: 75 }}
-              />
-            </CCol>
-          </CRow>
-        </DocsExample>
-        <DocsExample href="components/widgets/#cwidgetstatsc">
-          <CRow xs={{ gutter: 4 }}>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                color="info"
-                icon={<CIcon icon={cilPeople} height={36} />}
-                value="87.500"
-                title="Visitors"
-                inverse
-                progress={{ value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                color="success"
-                icon={<CIcon icon={cilUserFollow} height={36} />}
-                value="385"
-                title="New Clients"
-                inverse
-                progress={{ value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                color="warning"
-                icon={<CIcon icon={cilBasket} height={36} />}
-                value="1238"
-                title="Products sold"
-                inverse
-                progress={{ value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                color="primary"
-                icon={<CIcon icon={cilChartPie} height={36} />}
-                value="28%"
-                title="Returning Visitors"
-                inverse
-                progress={{ value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                color="danger"
-                icon={<CIcon icon={cilSpeedometer} height={36} />}
-                value="5:34:11"
-                title="Avg. Time"
-                inverse
-                progress={{ value: 75 }}
-              />
-            </CCol>
-            <CCol xs={6} lg={4} xxl={2}>
-              <CWidgetStatsC
-                color="info"
-                icon={<CIcon icon={cilSpeech} height={36} />}
-                value="972"
-                title="Comments"
-                inverse
-                progress={{ value: 75 }}
-              />
-            </CCol>
-          </CRow>
-        </DocsExample>
-      </CCardBody>
-    </CCard>
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsB
+              color="primary"
+              inverse
+              value="2 TB"
+              title="Widget title"
+              progress={{ value: 89.9 }}
+              text="Lorem ipsum dolor sit amet enim."
+            />
+          </Grid>
+        </Grid>
+
+        <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>
+          Widget Stats F
+        </Typography>
+        <Grid container spacing={3}>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsF
+              icon={<SettingsIcon />}
+              title="income"
+              value="$1.999,50"
+              color="primary"
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsF icon={<PersonIcon />} title="income" value="$1.999,50" color="info" />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsF
+              icon={<NightlightIcon />}
+              title="income"
+              value="$1.999,50"
+              color="warning"
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+            <WidgetStatsF
+              icon={<NotificationsIcon />}
+              title="income"
+              value="$1.999,50"
+              color="error"
+            />
+          </Grid>
+        </Grid>
+
+        <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>
+          Widget Stats D (Brand)
+        </Typography>
+        <WidgetsBrand withCharts />
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
index 03eea83efd..6bf6441269 100644
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@@ -1,176 +1,148 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { CWidgetStatsD, CRow, CCol } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
-import { CChart } from '@coreui/react-chartjs'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
+import { Line } from 'react-chartjs-2'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+} from 'chart.js'
 
-const WidgetsBrand = (props) => {
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler)
+
+const BrandCard = ({ icon: Icon, bgColor, values, chartData, withCharts }) => {
   const chartOptions = {
     elements: {
-      line: {
-        tension: 0.4,
-      },
-      point: {
-        radius: 0,
-        hitRadius: 10,
-        hoverRadius: 4,
-        hoverBorderWidth: 3,
-      },
+      line: { tension: 0.4 },
+      point: { radius: 0, hitRadius: 10, hoverRadius: 4, hoverBorderWidth: 3 },
     },
     maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: false,
-      },
-    },
-    scales: {
-      x: {
-        display: false,
-      },
-      y: {
-        display: false,
-      },
-    },
+    plugins: { legend: { display: false } },
+    scales: { x: { display: false }, y: { display: false } },
   }
 
   return (
-    <CRow className={props.className} xs={{ gutter: 4 }}>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsD
-          {...(props.withCharts && {
-            chart: (
-              <CChart
-                className="position-absolute w-100 h-100"
-                type="line"
-                data={{
-                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                  datasets: [
-                    {
-                      backgroundColor: 'rgba(255,255,255,.1)',
-                      borderColor: 'rgba(255,255,255,.55)',
-                      pointHoverBackgroundColor: '#fff',
-                      borderWidth: 2,
-                      data: [65, 59, 84, 84, 51, 55, 40],
-                      fill: true,
-                    },
-                  ],
-                }}
-                options={chartOptions}
-              />
-            ),
-          })}
-          icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
+    <Card sx={{ overflow: 'hidden' }}>
+      <Box
+        sx={{
+          bgcolor: bgColor,
+          color: 'white',
+          p: 3,
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: 100,
+        }}
+      >
+        {withCharts && (
+          <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0.3 }}>
+            <Line data={chartData} options={chartOptions} />
+          </Box>
+        )}
+        <Icon sx={{ fontSize: 52, position: 'relative', zIndex: 1 }} />
+      </Box>
+      <CardContent sx={{ display: 'flex', justifyContent: 'space-around', py: 2 }}>
+        {values.map((item, index) => (
+          <Box key={index} sx={{ textAlign: 'center' }}>
+            <Typography variant="h6" fontWeight="bold">
+              {item.value}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {item.title}
+            </Typography>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+BrandCard.propTypes = {
+  icon: PropTypes.elementType.isRequired,
+  bgColor: PropTypes.string.isRequired,
+  values: PropTypes.array.isRequired,
+  chartData: PropTypes.object,
+  withCharts: PropTypes.bool,
+}
+
+const WidgetsBrand = (props) => {
+  const createChartData = (data) => ({
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        backgroundColor: 'rgba(255,255,255,.1)',
+        borderColor: 'rgba(255,255,255,.55)',
+        pointHoverBackgroundColor: '#fff',
+        borderWidth: 2,
+        data,
+        fill: true,
+      },
+    ],
+  })
+
+  return (
+    <Grid container spacing={3} sx={{ mb: props.className ? 3 : 0 }}>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <BrandCard
+          icon={FacebookIcon}
+          bgColor="#3b5998"
           values={[
             { title: 'friends', value: '89K' },
             { title: 'feeds', value: '459' },
           ]}
-          style={{
-            '--cui-card-cap-bg': '#3b5998',
-          }}
+          chartData={createChartData([65, 59, 84, 84, 51, 55, 40])}
+          withCharts={props.withCharts}
         />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsD
-          {...(props.withCharts && {
-            chart: (
-              <CChart
-                className="position-absolute w-100 h-100"
-                type="line"
-                data={{
-                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                  datasets: [
-                    {
-                      backgroundColor: 'rgba(255,255,255,.1)',
-                      borderColor: 'rgba(255,255,255,.55)',
-                      pointHoverBackgroundColor: '#fff',
-                      borderWidth: 2,
-                      data: [1, 13, 9, 17, 34, 41, 38],
-                      fill: true,
-                    },
-                  ],
-                }}
-                options={chartOptions}
-              />
-            ),
-          })}
-          icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <BrandCard
+          icon={TwitterIcon}
+          bgColor="#00aced"
           values={[
             { title: 'followers', value: '973k' },
             { title: 'tweets', value: '1.792' },
           ]}
-          style={{
-            '--cui-card-cap-bg': '#00aced',
-          }}
+          chartData={createChartData([1, 13, 9, 17, 34, 41, 38])}
+          withCharts={props.withCharts}
         />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsD
-          {...(props.withCharts && {
-            chart: (
-              <CChart
-                className="position-absolute w-100 h-100"
-                type="line"
-                data={{
-                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                  datasets: [
-                    {
-                      backgroundColor: 'rgba(255,255,255,.1)',
-                      borderColor: 'rgba(255,255,255,.55)',
-                      pointHoverBackgroundColor: '#fff',
-                      borderWidth: 2,
-                      data: [78, 81, 80, 45, 34, 12, 40],
-                      fill: true,
-                    },
-                  ],
-                }}
-                options={chartOptions}
-              />
-            ),
-          })}
-          icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <BrandCard
+          icon={LinkedInIcon}
+          bgColor="#4875b4"
           values={[
             { title: 'contacts', value: '500' },
             { title: 'feeds', value: '1.292' },
           ]}
-          style={{
-            '--cui-card-cap-bg': '#4875b4',
-          }}
+          chartData={createChartData([78, 81, 80, 45, 34, 12, 40])}
+          withCharts={props.withCharts}
         />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsD
-          color="warning"
-          {...(props.withCharts && {
-            chart: (
-              <CChart
-                className="position-absolute w-100 h-100"
-                type="line"
-                data={{
-                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                  datasets: [
-                    {
-                      backgroundColor: 'rgba(255,255,255,.1)',
-                      borderColor: 'rgba(255,255,255,.55)',
-                      pointHoverBackgroundColor: '#fff',
-                      borderWidth: 2,
-                      data: [35, 23, 56, 22, 97, 23, 64],
-                      fill: true,
-                    },
-                  ],
-                }}
-                options={chartOptions}
-              />
-            ),
-          })}
-          icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <BrandCard
+          icon={CalendarMonthIcon}
+          bgColor="#ed6c02"
           values={[
             { title: 'events', value: '12+' },
             { title: 'meetings', value: '4' },
           ]}
+          chartData={createChartData([35, 23, 56, 22, 97, 23, 64])}
+          withCharts={props.withCharts}
         />
-      </CCol>
-    </CRow>
+      </Grid>
+    </Grid>
   )
 }
 
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index 85e2fc969d..92f83809b8 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -1,390 +1,203 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+import { useTheme } from '@mui/material/styles'
+import { Line, Bar } from 'react-chartjs-2'
 import {
-  CRow,
-  CCol,
-  CDropdown,
-  CDropdownMenu,
-  CDropdownItem,
-  CDropdownToggle,
-  CWidgetStatsA,
-} from '@coreui/react'
-import { getStyle } from '@coreui/utils'
-import { CChartBar, CChartLine } from '@coreui/react-chartjs'
-import CIcon from '@coreui/icons-react'
-import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Filler,
+} from 'chart.js'
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler)
+
+const WidgetCard = ({ color, value, change, changeDirection, title, chartData, chartType }) => {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const chartOptions = {
+    plugins: { legend: { display: false } },
+    maintainAspectRatio: false,
+    scales: {
+      x: { display: false },
+      y: { display: false },
+    },
+    elements: {
+      line: { borderWidth: 1, tension: 0.4 },
+      point: { radius: 4, hitRadius: 10, hoverRadius: 4 },
+    },
+  }
+
+  const ChartComponent = chartType === 'bar' ? Bar : Line
+
+  return (
+    <Card sx={{ bgcolor: `${color}.main`, color: 'white' }}>
+      <CardContent>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <Box>
+            <Typography variant="h4" component="div" sx={{ fontWeight: 'bold' }}>
+              {value}{' '}
+              <Typography component="span" variant="body2" sx={{ opacity: 0.8 }}>
+                ({change}{' '}
+                {changeDirection === 'down' ? (
+                  <ArrowDownwardIcon fontSize="small" />
+                ) : (
+                  <ArrowUpwardIcon fontSize="small" />
+                )}
+                )
+              </Typography>
+            </Typography>
+            <Typography variant="body2" sx={{ opacity: 0.8 }}>
+              {title}
+            </Typography>
+          </Box>
+          <IconButton size="small" sx={{ color: 'white' }} onClick={handleClick}>
+            <MoreVertIcon />
+          </IconButton>
+          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+            <MenuItem onClick={handleClose}>Action</MenuItem>
+            <MenuItem onClick={handleClose}>Another action</MenuItem>
+            <MenuItem onClick={handleClose}>Something else here...</MenuItem>
+            <MenuItem disabled>Disabled action</MenuItem>
+          </Menu>
+        </Box>
+        <Box sx={{ height: 70, mt: 2 }}>
+          <ChartComponent data={chartData} options={chartOptions} />
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+WidgetCard.propTypes = {
+  color: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  change: PropTypes.string.isRequired,
+  changeDirection: PropTypes.oneOf(['up', 'down']).isRequired,
+  title: PropTypes.string.isRequired,
+  chartData: PropTypes.object.isRequired,
+  chartType: PropTypes.oneOf(['line', 'bar']),
+}
 
 const WidgetsDropdown = (props) => {
-  const widgetChartRef1 = useRef(null)
-  const widgetChartRef2 = useRef(null)
+  const theme = useTheme()
+
+  const lineChartData1 = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        backgroundColor: 'transparent',
+        borderColor: 'rgba(255,255,255,.55)',
+        pointBackgroundColor: theme.palette.primary.main,
+        data: [65, 59, 84, 84, 51, 55, 40],
+      },
+    ],
+  }
+
+  const lineChartData2 = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        backgroundColor: 'transparent',
+        borderColor: 'rgba(255,255,255,.55)',
+        pointBackgroundColor: theme.palette.info.main,
+        data: [1, 18, 9, 17, 34, 22, 11],
+      },
+    ],
+  }
 
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (widgetChartRef1.current) {
-        setTimeout(() => {
-          widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
-          widgetChartRef1.current.update()
-        })
-      }
+  const lineChartData3 = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        backgroundColor: 'rgba(255,255,255,.2)',
+        borderColor: 'rgba(255,255,255,.55)',
+        data: [78, 81, 80, 45, 34, 12, 40],
+        fill: true,
+      },
+    ],
+  }
 
-      if (widgetChartRef2.current) {
-        setTimeout(() => {
-          widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
-          widgetChartRef2.current.update()
-        })
-      }
-    })
-  }, [widgetChartRef1, widgetChartRef2])
+  const barChartData = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    datasets: [
+      {
+        backgroundColor: 'rgba(255,255,255,.2)',
+        borderColor: 'rgba(255,255,255,.55)',
+        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98],
+        barPercentage: 0.6,
+      },
+    ],
+  }
 
   return (
-    <CRow className={props.className} xs={{ gutter: 4 }}>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
+    <Grid container spacing={3} sx={{ mb: props.className ? 3 : 0 }}>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <WidgetCard
           color="primary"
-          value={
-            <>
-              26K{' '}
-              <span className="fs-6 fw-normal">
-                (-12.4% <CIcon icon={cilArrowBottom} />)
-              </span>
-            </>
-          }
+          value="26K"
+          change="-12.4%"
+          changeDirection="down"
           title="Users"
-          action={
-            <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
-              </CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          }
-          chart={
-            <CChartLine
-              ref={widgetChartRef1}
-              className="mt-3 mx-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                  {
-                    label: 'My First dataset',
-                    backgroundColor: 'transparent',
-                    borderColor: 'rgba(255,255,255,.55)',
-                    pointBackgroundColor: getStyle('--cui-primary'),
-                    data: [65, 59, 84, 84, 51, 55, 40],
-                  },
-                ],
-              }}
-              options={{
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                maintainAspectRatio: false,
-                scales: {
-                  x: {
-                    border: {
-                      display: false,
-                    },
-                    grid: {
-                      display: false,
-                      drawBorder: false,
-                    },
-                    ticks: {
-                      display: false,
-                    },
-                  },
-                  y: {
-                    min: 30,
-                    max: 89,
-                    display: false,
-                    grid: {
-                      display: false,
-                    },
-                    ticks: {
-                      display: false,
-                    },
-                  },
-                },
-                elements: {
-                  line: {
-                    borderWidth: 1,
-                    tension: 0.4,
-                  },
-                  point: {
-                    radius: 4,
-                    hitRadius: 10,
-                    hoverRadius: 4,
-                  },
-                },
-              }}
-            />
-          }
+          chartData={lineChartData1}
+          chartType="line"
         />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <WidgetCard
           color="info"
-          value={
-            <>
-              $6.200{' '}
-              <span className="fs-6 fw-normal">
-                (40.9% <CIcon icon={cilArrowTop} />)
-              </span>
-            </>
-          }
+          value="$6.200"
+          change="40.9%"
+          changeDirection="up"
           title="Income"
-          action={
-            <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
-              </CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          }
-          chart={
-            <CChartLine
-              ref={widgetChartRef2}
-              className="mt-3 mx-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                  {
-                    label: 'My First dataset',
-                    backgroundColor: 'transparent',
-                    borderColor: 'rgba(255,255,255,.55)',
-                    pointBackgroundColor: getStyle('--cui-info'),
-                    data: [1, 18, 9, 17, 34, 22, 11],
-                  },
-                ],
-              }}
-              options={{
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                maintainAspectRatio: false,
-                scales: {
-                  x: {
-                    border: {
-                      display: false,
-                    },
-                    grid: {
-                      display: false,
-                      drawBorder: false,
-                    },
-                    ticks: {
-                      display: false,
-                    },
-                  },
-                  y: {
-                    min: -9,
-                    max: 39,
-                    display: false,
-                    grid: {
-                      display: false,
-                    },
-                    ticks: {
-                      display: false,
-                    },
-                  },
-                },
-                elements: {
-                  line: {
-                    borderWidth: 1,
-                  },
-                  point: {
-                    radius: 4,
-                    hitRadius: 10,
-                    hoverRadius: 4,
-                  },
-                },
-              }}
-            />
-          }
+          chartData={lineChartData2}
+          chartType="line"
         />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <WidgetCard
           color="warning"
-          value={
-            <>
-              2.49%{' '}
-              <span className="fs-6 fw-normal">
-                (84.7% <CIcon icon={cilArrowTop} />)
-              </span>
-            </>
-          }
+          value="2.49%"
+          change="84.7%"
+          changeDirection="up"
           title="Conversion Rate"
-          action={
-            <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
-              </CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          }
-          chart={
-            <CChartLine
-              className="mt-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                  {
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(255,255,255,.2)',
-                    borderColor: 'rgba(255,255,255,.55)',
-                    data: [78, 81, 80, 45, 34, 12, 40],
-                    fill: true,
-                  },
-                ],
-              }}
-              options={{
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                maintainAspectRatio: false,
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-                elements: {
-                  line: {
-                    borderWidth: 2,
-                    tension: 0.4,
-                  },
-                  point: {
-                    radius: 0,
-                    hitRadius: 10,
-                    hoverRadius: 4,
-                  },
-                },
-              }}
-            />
-          }
+          chartData={lineChartData3}
+          chartType="line"
         />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
-          color="danger"
-          value={
-            <>
-              44K{' '}
-              <span className="fs-6 fw-normal">
-                (-23.6% <CIcon icon={cilArrowBottom} />)
-              </span>
-            </>
-          }
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, xl: 3 }}>
+        <WidgetCard
+          color="error"
+          value="44K"
+          change="-23.6%"
+          changeDirection="down"
           title="Sessions"
-          action={
-            <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
-              </CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem>Action</CDropdownItem>
-                <CDropdownItem>Another action</CDropdownItem>
-                <CDropdownItem>Something else here...</CDropdownItem>
-                <CDropdownItem disabled>Disabled action</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          }
-          chart={
-            <CChartBar
-              className="mt-3 mx-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: [
-                  'January',
-                  'February',
-                  'March',
-                  'April',
-                  'May',
-                  'June',
-                  'July',
-                  'August',
-                  'September',
-                  'October',
-                  'November',
-                  'December',
-                  'January',
-                  'February',
-                  'March',
-                  'April',
-                ],
-                datasets: [
-                  {
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(255,255,255,.2)',
-                    borderColor: 'rgba(255,255,255,.55)',
-                    data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
-                    barPercentage: 0.6,
-                  },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                scales: {
-                  x: {
-                    grid: {
-                      display: false,
-                      drawTicks: false,
-                    },
-                    ticks: {
-                      display: false,
-                    },
-                  },
-                  y: {
-                    border: {
-                      display: false,
-                    },
-                    grid: {
-                      display: false,
-                      drawBorder: false,
-                      drawTicks: false,
-                    },
-                    ticks: {
-                      display: false,
-                    },
-                  },
-                },
-              }}
-            />
-          }
+          chartData={barChartData}
+          chartType="bar"
         />
-      </CCol>
-    </CRow>
+      </Grid>
+    </Grid>
   )
 }