From d04452093f886902562324641a0966c864e9cd6c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:41:56 +0000
Subject: [PATCH 1/2] Migrate design library from Bootstrap/CoreUI to Material
 UI

- Replace CoreUI components with Material UI equivalents
- Update layout components (DefaultLayout, AppHeader, AppSidebar, AppFooter)
- Update navigation components (AppSidebarNav, AppBreadcrumb, AppContent)
- Migrate Dashboard view and widgets to Material UI
- Migrate authentication pages (Login, Register, 404, 500)
- Replace @coreui/icons with @mui/icons-material
- Replace @coreui/react-chartjs with react-chartjs-2
- Update theme configuration to use MUI ThemeProvider
- Add MUI dependencies and remove CoreUI dependencies
---
 package.json                               |  16 +-
 src/App.js                                 | 122 +++--
 src/_nav.js                                | 148 ++---
 src/components/AppBreadcrumb.js            |  35 +-
 src/components/AppContent.js               |  17 +-
 src/components/AppFooter.js                |  47 +-
 src/components/AppHeader.js                | 240 ++++-----
 src/components/AppSidebar.js               | 128 +++--
 src/components/AppSidebarNav.js            | 192 +++++--
 src/components/header/AppHeaderDropdown.js | 206 ++++---
 src/layout/DefaultLayout.js                |  28 +-
 src/views/dashboard/Dashboard.js           | 596 ++++++++++-----------
 src/views/dashboard/MainChart.js           | 245 +++++----
 src/views/pages/login/Login.js             | 181 ++++---
 src/views/pages/page404/Page404.js         |  82 +--
 src/views/pages/page500/Page500.js         |  82 +--
 src/views/pages/register/Register.js       | 160 +++---
 src/views/widgets/WidgetsBrand.js          | 339 ++++++------
 src/views/widgets/WidgetsDropdown.js       | 591 ++++++++------------
 19 files changed, 1780 insertions(+), 1675 deletions(-)

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..f520e6ffa5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,58 +1,100 @@
-import React, { Suspense, useEffect } from 'react'
+import React, { Suspense, useMemo, useState } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { useSelector } from 'react-redux'
+import { ThemeProvider, createTheme } 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'
-
-// 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 getInitialMode = (storedTheme) => {
+  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+  const urlTheme = urlParams.get('theme')?.match(/^[A-Za-z0-9\s]+/)?.[0]
+  if (urlTheme && (urlTheme === 'light' || urlTheme === 'dark')) {
+    return urlTheme
+  }
+  return storedTheme || 'light'
+}
+
 const App = () => {
-  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
   const storedTheme = useSelector((state) => state.theme)
+  const [mode] = useState(() => getInitialMode(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)
-    }
-
-    if (isColorModeSet()) {
-      return
-    }
-
-    setColorMode(storedTheme)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          primary: {
+            main: '#321fdb',
+          },
+          secondary: {
+            main: '#9da5b1',
+          },
+          success: {
+            main: '#2eb85c',
+          },
+          info: {
+            main: '#39f',
+          },
+          warning: {
+            main: '#f9b115',
+          },
+          error: {
+            main: '#e55353',
+          },
+        },
+        typography: {
+          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        },
+        components: {
+          MuiDrawer: {
+            styleOverrides: {
+              paper: {
+                backgroundColor: mode === 'dark' ? '#1e1e2d' : '#3c4b64',
+                color: 'rgba(255, 255, 255, 0.87)',
+              },
+            },
+          },
+        },
+      }),
+    [mode],
+  )
 
   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',
+                height: '100vh',
+              }}
+            >
+              <CircularProgress color="primary" />
+            </Box>
+          }
+        >
+          <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>
   )
 }
 
diff --git a/src/_nav.js b/src/_nav.js
index e43f1df1ee..bda4fa0c3e 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -1,74 +1,63 @@
 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 PaletteIcon from '@mui/icons-material/Palette'
+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 CalculateIcon from '@mui/icons-material/Calculate'
+import DescriptionIcon from '@mui/icons-material/Description'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
 const _nav = [
   {
-    component: CNavItem,
     name: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
+    icon: <DashboardIcon fontSize="small" />,
     badge: {
       color: 'info',
       text: 'NEW',
     },
   },
   {
-    component: CNavTitle,
+    title: true,
     name: 'Theme',
   },
   {
-    component: CNavItem,
     name: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+    icon: <PaletteIcon fontSize="small" />,
   },
   {
-    component: CNavItem,
     name: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+    icon: <TextFieldsIcon fontSize="small" />,
   },
   {
-    component: CNavTitle,
+    title: true,
     name: 'Components',
   },
   {
-    component: CNavGroup,
     name: 'Base',
     to: '/base',
-    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
+    icon: <ExtensionIcon fontSize="small" />,
     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" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/components/calendar/',
@@ -78,52 +67,42 @@ const _nav = [
         },
       },
       {
-        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: {
@@ -132,11 +111,10 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Smart Table'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/components/smart-table/',
@@ -146,31 +124,26 @@ const _nav = [
         },
       },
       {
-        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" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/components/virtual-scroller/',
@@ -182,32 +155,27 @@ const _nav = [
     ],
   },
   {
-    component: CNavGroup,
     name: 'Buttons',
     to: '/buttons',
-    icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
+    icon: <TouchAppIcon fontSize="small" />,
     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" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/components/loading-button/',
@@ -219,16 +187,14 @@ const _nav = [
     ],
   },
   {
-    component: CNavGroup,
     name: 'Forms',
-    icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
+    icon: <NotesIcon fontSize="small" />,
     items: [
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Autocomplete'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/autocomplete/',
@@ -238,16 +204,14 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: 'Checks & Radios',
         to: '/forms/checks-radios',
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Date Picker'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/date-picker/',
@@ -257,7 +221,6 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: 'Date Range Picker',
         href: 'https://coreui.io/react/docs/forms/date-range-picker/',
         badge: {
@@ -266,26 +229,22 @@ const _nav = [
         },
       },
       {
-        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" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/multi-select/',
@@ -295,11 +254,10 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'OTP Input'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/one-time-password-input/',
@@ -309,11 +267,10 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Password Input'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/password-input/',
@@ -323,16 +280,14 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: 'Range',
         to: '/forms/range',
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Range Slider'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/range-slider/',
@@ -342,11 +297,10 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Rating'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/rating/',
@@ -356,16 +310,14 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: 'Select',
         to: '/forms/select',
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Stepper'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/stepper/',
@@ -375,11 +327,10 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: (
           <React.Fragment>
             {'Time Picker'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
+            <OpenInNewIcon sx={{ fontSize: 12, ml: 1 }} />
           </React.Fragment>
         ),
         href: 'https://coreui.io/react/docs/forms/time-picker/',
@@ -389,118 +340,99 @@ const _nav = [
         },
       },
       {
-        component: CNavItem,
         name: 'Layout',
         to: '/forms/layout',
       },
       {
-        component: CNavItem,
         name: 'Validation',
         to: '/forms/validation',
       },
     ],
   },
   {
-    component: CNavItem,
     name: 'Charts',
     to: '/charts',
-    icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
+    icon: <PieChartIcon fontSize="small" />,
   },
   {
-    component: CNavGroup,
     name: 'Icons',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: <StarIcon fontSize="small" />,
     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',
       },
     ],
   },
   {
-    component: CNavGroup,
     name: 'Notifications',
-    icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
+    icon: <NotificationsIcon fontSize="small" />,
     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',
       },
     ],
   },
   {
-    component: CNavItem,
     name: 'Widgets',
     to: '/widgets',
-    icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
+    icon: <CalculateIcon fontSize="small" />,
     badge: {
       color: 'info',
       text: 'NEW',
     },
   },
   {
-    component: CNavTitle,
+    title: true,
     name: 'Extras',
   },
   {
-    component: CNavGroup,
     name: 'Pages',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: <StarIcon fontSize="small" />,
     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',
       },
     ],
   },
   {
-    component: CNavItem,
     name: 'Docs',
     href: 'https://coreui.io/react/docs/templates/installation/',
-    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
+    icon: <DescriptionIcon fontSize="small" />,
   },
 ]
 
diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js
index d37de8ce9b..61e550c02a 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 as RouterLink } from 'react-router-dom'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Link 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,28 @@ const AppBreadcrumb = () => {
   const breadcrumbs = getBreadcrumbs(currentLocation)
 
   return (
-    <CBreadcrumb className="my-0">
-      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
+    <Breadcrumbs aria-label="breadcrumb" sx={{ my: 0 }}>
+      <Link
+        component={RouterLink}
+        to="/"
+        color="inherit"
+        sx={{ display: 'flex', alignItems: 'center' }}
+      >
+        <HomeIcon sx={{ mr: 0.5 }} fontSize="small" />
+        Home
+      </Link>
       {breadcrumbs.map((breadcrumb, index) => {
-        return (
-          <CBreadcrumbItem
-            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
-            key={index}
-          >
+        return breadcrumb.active ? (
+          <Typography key={index} color="text.primary">
+            {breadcrumb.name}
+          </Typography>
+        ) : (
+          <Link key={index} component={RouterLink} to={breadcrumb.pathname} color="inherit">
             {breadcrumb.name}
-          </CBreadcrumbItem>
+          </Link>
         )
       })}
-    </CBreadcrumb>
+    </Breadcrumbs>
   )
 }
 
diff --git a/src/components/AppContent.js b/src/components/AppContent.js
index b9a39ef505..0e9df3ad01 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={{ py: 2 }}>
+      <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..113fa5e1f3 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',
+        bgcolor: 'background.paper',
+        borderTop: 1,
+        borderColor: 'divider',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Typography variant="body2" color="text.secondary">
+        <Link href="https://coreui.io" target="_blank" rel="noopener noreferrer" color="inherit">
           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"
+          color="inherit"
+        >
           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..5f62027fad 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -1,144 +1,138 @@
-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 PropTypes from 'prop-types'
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Badge from '@mui/material/Badge'
+import Divider from '@mui/material/Divider'
+import Button from '@mui/material/Button'
+import MenuIcon from '@mui/icons-material/Menu'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import MailIcon from '@mui/icons-material/Mail'
+import ListIcon from '@mui/icons-material/List'
+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 AppHeader = ({ drawerWidth }) => {
+  const [colorMode, setColorMode] = useState('light')
+  const [anchorEl, setAnchorEl] = useState(null)
 
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
 
-  useEffect(() => {
-    const handleScroll = () => {
-      headerRef.current &&
-        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
-    }
+  const handleThemeMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
 
-    document.addEventListener('scroll', handleScroll)
-    return () => document.removeEventListener('scroll', handleScroll)
-  }, [])
+  const handleThemeMenuClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleThemeChange = (mode) => {
+    setColorMode(mode)
+    handleThemeMenuClose()
+  }
 
   return (
-    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
-      <CContainer className="border-bottom px-4" fluid>
-        <CHeaderToggler
+    <AppBar
+      position="sticky"
+      sx={{
+        width: { sm: `calc(100% - ${drawerWidth}px)` },
+        ml: { sm: `${drawerWidth}px` },
+        bgcolor: 'background.paper',
+        color: 'text.primary',
+        boxShadow: 1,
+      }}
+    >
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
-          style={{ marginInlineStart: '-14px' }}
+          sx={{ mr: 2, display: { sm: 'none' } }}
         >
-          <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">
+            <Badge badgeContent={4} color="error">
+              <NotificationsIcon />
+            </Badge>
+          </IconButton>
+          <IconButton color="inherit">
+            <ListIcon />
+          </IconButton>
+          <IconButton color="inherit">
+            <Badge badgeContent={2} color="error">
+              <MailIcon />
+            </Badge>
+          </IconButton>
+
+          <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+          <IconButton color="inherit" onClick={handleThemeMenuOpen}>
+            {colorMode === 'dark' ? (
+              <DarkModeIcon />
+            ) : colorMode === 'auto' ? (
+              <ContrastIcon />
+            ) : (
+              <LightModeIcon />
+            )}
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleThemeMenuClose}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          >
+            <MenuItem selected={colorMode === 'light'} onClick={() => handleThemeChange('light')}>
+              <LightModeIcon sx={{ mr: 1 }} /> Light
+            </MenuItem>
+            <MenuItem selected={colorMode === 'dark'} onClick={() => handleThemeChange('dark')}>
+              <DarkModeIcon sx={{ mr: 1 }} /> Dark
+            </MenuItem>
+            <MenuItem selected={colorMode === 'auto'} onClick={() => handleThemeChange('auto')}>
+              <ContrastIcon sx={{ mr: 1 }} /> Auto
+            </MenuItem>
+          </Menu>
+
+          <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
           <AppHeaderDropdown />
-        </CHeaderNav>
-      </CContainer>
-      <CContainer className="px-4" fluid>
+        </Box>
+      </Toolbar>
+      <Toolbar variant="dense" sx={{ minHeight: 48, bgcolor: 'background.default' }}>
         <AppBreadcrumb />
-      </CContainer>
-    </CHeader>
+      </Toolbar>
+    </AppBar>
   )
 }
 
+AppHeader.propTypes = {
+  drawerWidth: PropTypes.number,
+}
+
 export default AppHeader
diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 021cb52c34..74d0f3ed0e 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -1,59 +1,101 @@
 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 PropTypes from 'prop-types'
+import Drawer from '@mui/material/Drawer'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import IconButton from '@mui/material/IconButton'
+import Divider from '@mui/material/Divider'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
 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 AppSidebar = () => {
+const AppSidebar = ({ drawerWidth }) => {
   const dispatch = useDispatch()
   const unfoldable = useSelector((state) => state.sidebarUnfoldable)
   const sidebarShow = useSelector((state) => state.sidebarShow)
 
-  return (
-    <CSidebar
-      className="border-end"
-      colorScheme="dark"
-      position="fixed"
-      unfoldable={unfoldable}
-      visible={sidebarShow}
-      onVisibleChange={(visible) => {
-        dispatch({ type: 'set', sidebarShow: visible })
-      }}
-    >
-      <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>
+  const handleDrawerClose = () => {
+    dispatch({ type: 'set', sidebarShow: false })
+  }
+
+  const handleToggleUnfoldable = () => {
+    dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })
+  }
+
+  const drawerContent = (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          p: 2,
+          minHeight: 64,
+        }}
+      >
+        <Typography variant="h6" noWrap component="div" sx={{ color: 'inherit' }}>
+          CoreUI
+        </Typography>
+        <IconButton onClick={handleDrawerClose} sx={{ color: 'inherit', display: { sm: 'none' } }}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </Box>
+      <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.12)' }} />
       <AppSidebarNav items={navigation} />
-      <CSidebarFooter className="border-top d-none d-lg-flex">
-        <CSidebarToggler
-          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
-        />
-      </CSidebarFooter>
-    </CSidebar>
+      <Box sx={{ flexGrow: 1 }} />
+      <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.12)' }} />
+      <Box sx={{ display: { xs: 'none', sm: 'flex' }, justifyContent: 'flex-end', p: 1 }}>
+        <IconButton onClick={handleToggleUnfoldable} sx={{ color: 'inherit' }}>
+          {unfoldable ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+        </IconButton>
+      </Box>
+    </>
   )
+
+  return (
+    <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}>
+      <Drawer
+        variant="temporary"
+        open={sidebarShow}
+        onClose={handleDrawerClose}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+          display: { xs: 'block', sm: 'none' },
+          '& .MuiDrawer-paper': {
+            boxSizing: 'border-box',
+            width: drawerWidth,
+            bgcolor: '#3c4b64',
+            color: 'rgba(255, 255, 255, 0.87)',
+          },
+        }}
+      >
+        {drawerContent}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: 'none', sm: 'block' },
+          '& .MuiDrawer-paper': {
+            boxSizing: 'border-box',
+            width: drawerWidth,
+            bgcolor: '#3c4b64',
+            color: 'rgba(255, 255, 255, 0.87)',
+          },
+        }}
+        open
+      >
+        {drawerContent}
+      </Drawer>
+    </Box>
+  )
+}
+
+AppSidebar.propTypes = {
+  drawerWidth: PropTypes.number,
 }
 
 export default React.memo(AppSidebar)
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 7583abf49e..6a82670c6b 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,70 +1,150 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { NavLink } 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 Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+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'
+const NavItemComponent = ({ item, indent = false }) => {
+  const { name, badge, icon, to, href } = item
 
-import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
+  const content = (
+    <ListItemButton
+      component={to ? NavLink : href ? 'a' : 'div'}
+      to={to}
+      href={href}
+      target={href ? '_blank' : undefined}
+      rel={href ? 'noopener noreferrer' : undefined}
+      sx={{
+        pl: indent ? 4 : 2,
+        color: 'inherit',
+        '&.active': {
+          bgcolor: 'rgba(255, 255, 255, 0.1)',
+        },
+        '&:hover': {
+          bgcolor: 'rgba(255, 255, 255, 0.08)',
+        },
+      }}
+    >
+      <ListItemIcon sx={{ color: 'inherit', minWidth: 40 }}>
+        {icon ? icon : indent ? <FiberManualRecordIcon sx={{ fontSize: 8 }} /> : null}
+      </ListItemIcon>
+      <ListItemText primary={name} primaryTypographyProps={{ fontSize: '0.875rem' }} />
+      {badge && (
+        <Chip
+          label={badge.text}
+          size="small"
+          color={badge.color === 'info' ? 'info' : badge.color === 'danger' ? 'error' : 'default'}
+          sx={{ ml: 1, height: 20, fontSize: '0.7rem' }}
+        />
+      )}
+    </ListItemButton>
+  )
 
-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>
-            )}
-        {name && name}
-        {badge && (
-          <CBadge color={badge.color} className="ms-auto" size="sm">
-            {badge.text}
-          </CBadge>
-        )}
-      </>
-    )
-  }
+  return <ListItem disablePadding>{content}</ListItem>
+}
+
+NavItemComponent.propTypes = {
+  item: PropTypes.object.isRequired,
+  indent: PropTypes.bool,
+}
+
+const NavGroupComponent = ({ item }) => {
+  const [open, setOpen] = useState(false)
+  const { name, icon, items } = item
 
-  const navItem = (item, index, indent = false) => {
-    const { component, name, badge, icon, ...rest } = item
-    const Component = component
-    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>
-    )
+  const handleClick = () => {
+    setOpen(!open)
   }
 
-  const navGroup = (item, index) => {
-    const { component, name, icon, items, to, ...rest } = item
-    const Component = component
-    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>
-    )
+  return (
+    <>
+      <ListItem disablePadding>
+        <ListItemButton
+          onClick={handleClick}
+          sx={{
+            color: 'inherit',
+            '&:hover': {
+              bgcolor: 'rgba(255, 255, 255, 0.08)',
+            },
+          }}
+        >
+          <ListItemIcon sx={{ color: 'inherit', minWidth: 40 }}>{icon}</ListItemIcon>
+          <ListItemText primary={name} primaryTypographyProps={{ fontSize: '0.875rem' }} />
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </ListItemButton>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {items?.map((subItem, index) =>
+            subItem.items ? (
+              <NavGroupComponent key={index} item={subItem} />
+            ) : (
+              <NavItemComponent key={index} item={subItem} indent />
+            ),
+          )}
+        </List>
+      </Collapse>
+    </>
+  )
+}
+
+NavGroupComponent.propTypes = {
+  item: PropTypes.object.isRequired,
+}
+
+const NavTitleComponent = ({ item }) => {
+  return (
+    <Box sx={{ px: 2, py: 1, mt: 2 }}>
+      <Typography
+        variant="overline"
+        sx={{
+          color: 'rgba(255, 255, 255, 0.6)',
+          fontSize: '0.7rem',
+          fontWeight: 600,
+          letterSpacing: '0.08em',
+        }}
+      >
+        {item.name}
+      </Typography>
+    </Box>
+  )
+}
+
+NavTitleComponent.propTypes = {
+  item: PropTypes.object.isRequired,
+}
+
+export const AppSidebarNav = ({ items }) => {
+  const renderNavItem = (item, index) => {
+    if (item.items) {
+      return <NavGroupComponent key={index} item={item} />
+    }
+    if (item.component?.displayName === 'CNavTitle' || item.title) {
+      return <NavTitleComponent key={index} item={item} />
+    }
+    return <NavItemComponent key={index} item={item} />
   }
 
   return (
-    <CSidebarNav as={SimpleBar}>
-      {items &&
-        items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
-    </CSidebarNav>
+    <List
+      sx={{
+        width: '100%',
+        overflow: 'auto',
+        flex: 1,
+      }}
+    >
+      {items && items.map((item, index) => renderNavItem(item, index))}
+    </List>
   )
 }
 
diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index 30c0df82ba..35bfbc7526 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -1,95 +1,127 @@
-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 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 Badge from '@mui/material/Badge'
+import Box from '@mui/material/Box'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import MailIcon from '@mui/icons-material/Mail'
+import TaskIcon from '@mui/icons-material/Task'
+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: 1 }}>
+        <Avatar src={avatar8} sx={{ width: 40, height: 40 }} />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        PaperProps={{
+          sx: { width: 280, maxHeight: 400 },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <Box sx={{ px: 2, py: 1, bgcolor: 'action.hover' }}>
+          <Typography variant="subtitle2" fontWeight={600}>
+            Account
+          </Typography>
+        </Box>
+        <MenuItem>
+          <ListItemIcon>
+            <NotificationsIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Updates</ListItemText>
+          <Badge badgeContent={42} color="info" sx={{ ml: 2 }} />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <MailIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Messages</ListItemText>
+          <Badge badgeContent={42} color="success" sx={{ ml: 2 }} />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <TaskIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Tasks</ListItemText>
+          <Badge badgeContent={42} color="error" sx={{ ml: 2 }} />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <CommentIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Comments</ListItemText>
+          <Badge badgeContent={42} color="warning" sx={{ ml: 2 }} />
+        </MenuItem>
+        <Box sx={{ px: 2, py: 1, bgcolor: 'action.hover' }}>
+          <Typography variant="subtitle2" fontWeight={600}>
+            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>
+          <Badge badgeContent={42} color="default" sx={{ ml: 2 }} />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <FolderIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Projects</ListItemText>
+          <Badge badgeContent={42} color="primary" sx={{ ml: 2 }} />
+        </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..cfc29c6ae5 100644
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -1,18 +1,30 @@
 import React from 'react'
+import Box from '@mui/material/Box'
 import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
 
+const drawerWidth = 256
+
 const DefaultLayout = () => {
   return (
-    <div>
-      <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100">
-        <AppHeader />
-        <div className="body flex-grow-1">
+    <Box sx={{ display: 'flex' }}>
+      <AppSidebar drawerWidth={drawerWidth} />
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+        }}
+      >
+        <AppHeader drawerWidth={drawerWidth} />
+        <Box sx={{ flexGrow: 1, p: 3 }}>
           <AppContent />
-        </div>
+        </Box>
         <AppFooter />
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }
 
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 57a55290d9..ab895e76f5 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -1,47 +1,29 @@
 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 Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Grid from '@mui/material/Grid'
+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 Divider from '@mui/material/Divider'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import PeopleIcon from '@mui/icons-material/People'
+import PersonIcon from '@mui/icons-material/Person'
+import Person2Icon from '@mui/icons-material/Person2'
+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 avatar1 from 'src/assets/images/avatars/1.jpg'
 import avatar2 from 'src/assets/images/avatars/2.jpg'
@@ -54,6 +36,15 @@ import WidgetsBrand from '../widgets/WidgetsBrand'
 import WidgetsDropdown from '../widgets/WidgetsDropdown'
 import MainChart from './MainChart'
 
+const colorMap = {
+  success: 'success',
+  info: 'info',
+  warning: 'warning',
+  danger: 'error',
+  primary: 'primary',
+  secondary: 'secondary',
+}
+
 const Dashboard = () => {
   const progressExample = [
     { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' },
@@ -74,313 +65,320 @@ const Dashboard = () => {
   ]
 
   const progressGroupExample2 = [
-    { title: 'Male', icon: cilUser, value: 53 },
-    { title: 'Female', icon: cilUserFemale, value: 43 },
+    { title: 'Male', icon: <PersonIcon />, value: 53 },
+    { title: 'Female', icon: <Person2Icon />, 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 },
+      user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2023' },
+      country: { name: 'USA', flag: '🇺🇸' },
+      usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' },
+      payment: { name: '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 },
+      user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' },
+      country: { name: 'Brazil', flag: '🇧🇷' },
+      usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' },
+      payment: { name: 'Visa' },
       activity: '5 minutes ago',
     },
     {
       avatar: { src: avatar3, status: 'warning' },
       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: { name: 'India', flag: '🇮🇳' },
+      usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' },
+      payment: { name: 'Stripe' },
       activity: '1 hour ago',
     },
     {
       avatar: { src: avatar4, status: 'secondary' },
       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: { name: 'France', flag: '🇫🇷' },
+      usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'danger' },
+      payment: { name: '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 },
+      user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2023' },
+      country: { name: 'Spain', flag: '🇪🇸' },
+      usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' },
+      payment: { name: '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 },
+      user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2023' },
+      country: { name: 'Poland', flag: '🇵🇱' },
+      usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' },
+      payment: { name: 'Amex' },
       activity: 'Last week',
     },
   ]
 
   return (
-    <>
-      <WidgetsDropdown className="mb-4" />
-      <CCard className="mb-4">
-        <CCardBody>
-          <CRow>
-            <CCol sm={5}>
-              <h4 id="traffic" className="card-title mb-0">
+    <Box>
+      <WidgetsDropdown sx={{ mb: 4 }} />
+
+      <Card sx={{ mb: 4 }}>
+        <CardContent>
+          <Grid container spacing={2} alignItems="center">
+            <Grid size={{ xs: 12, sm: 5 }}>
+              <Typography variant="h5" component="h4" gutterBottom>
                 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">
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                January - July 2023
+              </Typography>
+            </Grid>
+            <Grid
+              size={{ xs: 12, sm: 7 }}
+              sx={{ display: { xs: 'none', md: 'block' }, textAlign: 'right' }}
+            >
+              <Button variant="contained" color="primary" sx={{ ml: 2 }}>
+                <CloudDownloadIcon />
+              </Button>
+              <ButtonGroup variant="outlined" sx={{ mr: 2 }}>
                 {['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>
+            </Grid>
+          </Grid>
           <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,
-                })}
+        </CardContent>
+        <Divider />
+        <CardContent>
+          <Grid container spacing={2} sx={{ textAlign: 'center' }}>
+            {progressExample.map((item, index) => (
+              <Grid
                 key={index}
+                size={{ xs: 12, sm: 6, lg: 3, xl: 2.4 }}
+                sx={{
+                  display:
+                    index === progressExample.length - 1 ? { xs: 'none', xl: 'block' } : 'block',
+                }}
               >
-                <div className="text-body-secondary">{item.title}</div>
-                <div className="fw-semibold text-truncate">
+                <Typography variant="body2" color="text.secondary">
+                  {item.title}
+                </Typography>
+                <Typography variant="body1" fontWeight={600} noWrap>
                   {item.value} ({item.percent}%)
-                </div>
-                <CProgress thin className="mt-2" color={item.color} value={item.percent} />
-              </CCol>
+                </Typography>
+                <LinearProgress
+                  variant="determinate"
+                  value={item.percent}
+                  color={colorMap[item.color]}
+                  sx={{ mt: 1, height: 4, borderRadius: 2 }}
+                />
+              </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>
+      <WidgetsBrand sx={{ mb: 4 }} withCharts />
 
-              <br />
+      <Card sx={{ mb: 4 }}>
+        <CardHeader title="Traffic & Sales" />
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Grid container spacing={2}>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'info.main', py: 1, px: 2 }}>
+                    <Typography variant="body2" color="text.secondary" noWrap>
+                      New Clients
+                    </Typography>
+                    <Typography variant="h6" fontWeight={600}>
+                      9,123
+                    </Typography>
+                  </Box>
+                </Grid>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'error.main', py: 1, px: 2 }}>
+                    <Typography variant="body2" color="text.secondary" noWrap>
+                      Recurring Clients
+                    </Typography>
+                    <Typography variant="h6" fontWeight={600}>
+                      22,643
+                    </Typography>
+                  </Box>
+                </Grid>
+              </Grid>
+              <Divider sx={{ my: 2 }} />
+              {progressGroupExample1.map((item, index) => (
+                <Box key={index} sx={{ mb: 3 }}>
+                  <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                    {item.title}
+                  </Typography>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.value1}
+                    color="info"
+                    sx={{ height: 4, borderRadius: 2, mb: 0.5 }}
+                  />
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.value2}
+                    color="error"
+                    sx={{ height: 4, borderRadius: 2 }}
+                  />
+                </Box>
+              ))}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Grid container spacing={2}>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'warning.main', py: 1, px: 2 }}>
+                    <Typography variant="body2" color="text.secondary" noWrap>
+                      Pageviews
+                    </Typography>
+                    <Typography variant="h6" fontWeight={600}>
+                      78,623
+                    </Typography>
+                  </Box>
+                </Grid>
+                <Grid size={6}>
+                  <Box sx={{ borderLeft: 4, borderColor: 'success.main', py: 1, px: 2 }}>
+                    <Typography variant="body2" color="text.secondary" noWrap>
+                      Organic
+                    </Typography>
+                    <Typography variant="h6" fontWeight={600}>
+                      49,123
+                    </Typography>
+                  </Box>
+                </Grid>
+              </Grid>
+              <Divider sx={{ my: 2 }} />
+              {progressGroupExample2.map((item, index) => (
+                <Box key={index} sx={{ mb: 3 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                    {item.icon}
+                    <Typography variant="body2" sx={{ ml: 1 }}>
+                      {item.title}
+                    </Typography>
+                    <Typography variant="body2" fontWeight={600} sx={{ ml: 'auto' }}>
+                      {item.value}%
+                    </Typography>
+                  </Box>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.value}
+                    color="warning"
+                    sx={{ height: 4, borderRadius: 2 }}
+                  />
+                </Box>
+              ))}
+              <Box sx={{ mb: 4 }} />
+              {progressGroupExample3.map((item, index) => (
+                <Box key={index} sx={{ mb: 2 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                    {item.icon}
+                    <Typography variant="body2" sx={{ ml: 1 }}>
+                      {item.title}
+                    </Typography>
+                    <Typography variant="body2" fontWeight={600} sx={{ ml: 'auto' }}>
+                      {item.value}{' '}
+                      <Typography component="span" variant="body2" color="text.secondary">
+                        ({item.percent}%)
+                      </Typography>
+                    </Typography>
+                  </Box>
+                  <LinearProgress
+                    variant="determinate"
+                    value={item.percent}
+                    color="success"
+                    sx={{ height: 4, borderRadius: 2 }}
+                  />
+                </Box>
+              ))}
+            </Grid>
+          </Grid>
 
-              <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">
+          <Box sx={{ mt: 4 }}>
+            <TableContainer>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell align="center" sx={{ bgcolor: 'action.hover' }}>
+                      <PeopleIcon />
+                    </TableCell>
+                    <TableCell sx={{ bgcolor: 'action.hover' }}>User</TableCell>
+                    <TableCell align="center" sx={{ bgcolor: 'action.hover' }}>
                       Country
-                    </CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary text-center">
+                    </TableCell>
+                    <TableCell sx={{ bgcolor: 'action.hover' }}>Usage</TableCell>
+                    <TableCell align="center" sx={{ bgcolor: 'action.hover' }}>
                       Payment Method
-                    </CTableHeaderCell>
-                    <CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
-                  </CTableRow>
-                </CTableHead>
-                <CTableBody>
+                    </TableCell>
+                    <TableCell sx={{ bgcolor: 'action.hover' }}>Activity</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
                   {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>
+                    <TableRow key={index} hover>
+                      <TableCell align="center">
+                        <Avatar src={item.avatar.src} sx={{ width: 40, height: 40, mx: 'auto' }} />
+                      </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="h6">{item.country.flag}</Typography>
+                      </TableCell>
+                      <TableCell>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+                          <Typography variant="body2" fontWeight={600}>
+                            {item.usage.value}%
+                          </Typography>
+                          <Typography variant="caption" color="text.secondary">
+                            {item.usage.period}
+                          </Typography>
+                        </Box>
+                        <LinearProgress
+                          variant="determinate"
+                          value={item.usage.value}
+                          color={colorMap[item.usage.color]}
+                          sx={{ height: 4, borderRadius: 2 }}
+                        />
+                      </TableCell>
+                      <TableCell align="center">
+                        <Typography variant="body2">{item.payment.name}</Typography>
+                      </TableCell>
+                      <TableCell>
+                        <Typography variant="caption" color="text.secondary">
+                          Last login
+                        </Typography>
+                        <Typography variant="body2" fontWeight={600}>
+                          {item.activity}
+                        </Typography>
+                      </TableCell>
+                    </TableRow>
                   ))}
-                </CTableBody>
-              </CTable>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-    </>
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Box>
+        </CardContent>
+      </Card>
+    </Box>
   )
 }
 
diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js
index 98b7eec3cf..2e16792e2d 100644
--- a/src/views/dashboard/MainChart.js
+++ b/src/views/dashboard/MainChart.js
@@ -1,136 +1,133 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useMemo } from 'react'
+import { useTheme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+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 chartRef = useRef(null)
+const generateRandomData = (count, min, max) => {
+  const data = []
+  for (let i = 0; i < count; i++) {
+    data.push(Math.floor(Math.random() * (max - min + 1)) + min)
+  }
+  return data
+}
 
-  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()
-        })
-      }
-    }
+const initialData1 = generateRandomData(7, 50, 200)
+const initialData2 = generateRandomData(7, 50, 200)
 
-    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
-    return () =>
-      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
-  }, [chartRef])
+const MainChart = () => {
+  const theme = useTheme()
 
-  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(57, 153, 255, 0.1)' : 'rgba(57, 153, 255, 0.1)',
+          borderColor: theme.palette.info.main,
+          pointHoverBackgroundColor: theme.palette.info.main,
+          borderWidth: 2,
+          data: initialData1,
+          fill: true,
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'transparent',
+          borderColor: theme.palette.success.main,
+          pointHoverBackgroundColor: theme.palette.success.main,
+          borderWidth: 2,
+          data: initialData2,
+        },
+        {
+          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,
           },
-          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),
-              },
-            },
+          ticks: {
+            color: theme.palette.text.secondary,
           },
-          elements: {
-            line: {
-              tension: 0.4,
-            },
-            point: {
-              radius: 0,
-              hitRadius: 10,
-              hoverRadius: 4,
-              hoverBorderWidth: 3,
-            },
+        },
+        y: {
+          beginAtZero: true,
+          border: {
+            color: theme.palette.divider,
           },
-        }}
-      />
-    </>
+          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],
+  )
+
+  return (
+    <Box sx={{ height: 300, mt: 5 }}>
+      <Line data={data} options={options} />
+    </Box>
   )
 }
 
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index 1b2ee0baa2..7a8ff16ee4 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 Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+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={{
+        bgcolor: 'background.default',
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <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 variant="body2" 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={{
+                bgcolor: 'primary.main',
+                color: 'white',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <CardContent sx={{ textAlign: 'center', p: 4 }}>
+                <Typography variant="h5" component="h2" gutterBottom>
+                  Sign up
+                </Typography>
+                <Typography variant="body2" sx={{ mb: 3, opacity: 0.9 }}>
+                  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..7a32b17dbe 100644
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -1,40 +1,56 @@
 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={{
+        bgcolor: 'background.default',
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Container maxWidth="sm">
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 3 }}>
+          <Typography variant="h1" sx={{ fontSize: '6rem', fontWeight: 700, mr: 3 }}>
+            404
+          </Typography>
+          <Box sx={{ pt: 2 }}>
+            <Typography variant="h5" gutterBottom>
+              Oops! You{"'"}re lost.
+            </Typography>
+            <Typography variant="body2" 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..0f089cff89 100644
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -1,40 +1,56 @@
 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={{
+        bgcolor: 'background.default',
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Container maxWidth="sm">
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 3 }}>
+          <Typography variant="h1" sx={{ fontSize: '6rem', fontWeight: 700, mr: 3 }}>
+            500
+          </Typography>
+          <Box sx={{ pt: 2 }}>
+            <Typography variant="h5" gutterBottom>
+              Houston, we have a problem!
+            </Typography>
+            <Typography variant="body2" 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..cfd3ca182f 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 Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+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={{
+        bgcolor: 'background.default',
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Container maxWidth="sm">
+        <Card sx={{ mx: 2 }}>
+          <CardContent sx={{ p: 4 }}>
+            <Typography variant="h4" component="h1" gutterBottom>
+              Register
+            </Typography>
+            <Typography variant="body2" 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/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
index 03eea83efd..76b485706c 100644
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@@ -1,181 +1,200 @@
 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 { useTheme } from '@mui/material/styles'
+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 Box from '@mui/material/Box'
+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 BrandWidget = ({ icon, values, color, 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,
+    plugins: { legend: { display: false } },
+    scales: { x: { display: false }, y: { display: false } },
+  }
+
+  return (
+    <Card sx={{ height: '100%', overflow: 'hidden' }}>
+      <Box
+        sx={{
+          bgcolor: color,
+          color: 'white',
+          py: 3,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          position: 'relative',
+          minHeight: 100,
+        }}
+      >
+        {withCharts && (
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              opacity: 0.5,
+            }}
+          >
+            <Line data={chartData} options={chartOptions} />
+          </Box>
+        )}
+        <Box sx={{ position: 'relative', zIndex: 1 }}>{icon}</Box>
+      </Box>
+      <CardContent sx={{ display: 'flex', justifyContent: 'space-around', py: 2 }}>
+        {values.map((item, index) => (
+          <Box key={index} sx={{ textAlign: 'center' }}>
+            <Typography variant="h6" fontWeight={600}>
+              {item.value}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {item.title}
+            </Typography>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+BrandWidget.propTypes = {
+  icon: PropTypes.node.isRequired,
+  values: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ).isRequired,
+  color: PropTypes.string.isRequired,
+  chartData: PropTypes.object,
+  withCharts: PropTypes.bool,
+}
+
+const WidgetsBrand = (props) => {
+  const theme = useTheme()
+
+  const brands = [
+    {
+      icon: <FacebookIcon sx={{ fontSize: 52 }} />,
+      values: [
+        { title: 'friends', value: '89K' },
+        { title: 'feeds', value: '459' },
+      ],
+      color: '#3b5998',
+      chartData: {
+        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,
+          },
+        ],
       },
     },
-    scales: {
-      x: {
-        display: false,
+    {
+      icon: <TwitterIcon sx={{ fontSize: 52 }} />,
+      values: [
+        { title: 'followers', value: '973k' },
+        { title: 'tweets', value: '1.792' },
+      ],
+      color: '#00aced',
+      chartData: {
+        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,
+          },
+        ],
       },
-      y: {
-        display: false,
+    },
+    {
+      icon: <LinkedInIcon sx={{ fontSize: 52 }} />,
+      values: [
+        { title: 'contacts', value: '500' },
+        { title: 'feeds', value: '1.292' },
+      ],
+      color: '#4875b4',
+      chartData: {
+        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,
+          },
+        ],
       },
     },
-  }
+    {
+      icon: <CalendarMonthIcon sx={{ fontSize: 52 }} />,
+      values: [
+        { title: 'events', value: '12+' },
+        { title: 'meetings', value: '4' },
+      ],
+      color: theme.palette.warning.main,
+      chartData: {
+        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,
+          },
+        ],
+      },
+    },
+  ]
 
   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" />}
-          values={[
-            { title: 'friends', value: '89K' },
-            { title: 'feeds', value: '459' },
-          ]}
-          style={{
-            '--cui-card-cap-bg': '#3b5998',
-          }}
-        />
-      </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" />}
-          values={[
-            { title: 'followers', value: '973k' },
-            { title: 'tweets', value: '1.792' },
-          ]}
-          style={{
-            '--cui-card-cap-bg': '#00aced',
-          }}
-        />
-      </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" />}
-          values={[
-            { title: 'contacts', value: '500' },
-            { title: 'feeds', value: '1.292' },
-          ]}
-          style={{
-            '--cui-card-cap-bg': '#4875b4',
-          }}
-        />
-      </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" />}
-          values={[
-            { title: 'events', value: '12+' },
-            { title: 'meetings', value: '4' },
-          ]}
-        />
-      </CCol>
-    </CRow>
+    <Grid container spacing={3} sx={props.sx}>
+      {brands.map((brand, index) => (
+        <Grid key={index} size={{ xs: 12, sm: 6, xl: 3 }}>
+          <BrandWidget {...brand} withCharts={props.withCharts} />
+        </Grid>
+      ))}
+    </Grid>
   )
 }
 
 WidgetsBrand.propTypes = {
-  className: PropTypes.string,
+  sx: PropTypes.object,
   withCharts: PropTypes.bool,
 }
 
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index 85e2fc969d..03af6b88a2 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -1,395 +1,224 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-
+import { useTheme } from '@mui/material/styles'
+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 Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+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'
 
-const WidgetsDropdown = (props) => {
-  const widgetChartRef1 = useRef(null)
-  const widgetChartRef2 = useRef(null)
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler)
+
+const StatWidget = ({ title, value, change, changeType, color, chartData, chartType }) => {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
 
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (widgetChartRef1.current) {
-        setTimeout(() => {
-          widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
-          widgetChartRef1.current.update()
-        })
-      }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const chartOptions = {
+    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 },
+    },
+  }
+
+  return (
+    <Card sx={{ bgcolor: color, color: 'white', height: '100%' }}>
+      <CardContent sx={{ pb: 0 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <Box>
+            <Typography variant="h4" component="div" fontWeight={600}>
+              {value}{' '}
+              <Typography component="span" variant="body2" sx={{ opacity: 0.8 }}>
+                ({change}{' '}
+                {changeType === 'down' ? (
+                  <ArrowDownwardIcon fontSize="small" />
+                ) : (
+                  <ArrowUpwardIcon fontSize="small" />
+                )}
+                )
+              </Typography>
+            </Typography>
+            <Typography variant="body2" sx={{ opacity: 0.8, mt: 0.5 }}>
+              {title}
+            </Typography>
+          </Box>
+          <IconButton size="small" sx={{ color: 'white' }} onClick={handleClick}>
+            <MoreVertIcon />
+          </IconButton>
+          <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>
+            <MenuItem disabled>Disabled action</MenuItem>
+          </Menu>
+        </Box>
+      </CardContent>
+      <Box sx={{ height: 70, mt: 2, px: 2 }}>
+        {chartType === 'bar' ? (
+          <Bar data={chartData} options={chartOptions} />
+        ) : (
+          <Line data={chartData} options={chartOptions} />
+        )}
+      </Box>
+    </Card>
+  )
+}
+
+StatWidget.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  change: PropTypes.string.isRequired,
+  changeType: PropTypes.oneOf(['up', 'down']).isRequired,
+  color: PropTypes.string.isRequired,
+  chartData: PropTypes.object.isRequired,
+  chartType: PropTypes.oneOf(['line', 'bar']),
+}
+
+const WidgetsDropdown = (props) => {
+  const theme = useTheme()
 
-      if (widgetChartRef2.current) {
-        setTimeout(() => {
-          widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
-          widgetChartRef2.current.update()
-        })
-      }
-    })
-  }, [widgetChartRef1, widgetChartRef2])
+  const widgets = [
+    {
+      title: 'Users',
+      value: '26K',
+      change: '-12.4%',
+      changeType: 'down',
+      color: theme.palette.primary.main,
+      chartType: 'line',
+      chartData: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: 'Users',
+            backgroundColor: 'transparent',
+            borderColor: 'rgba(255,255,255,.55)',
+            pointBackgroundColor: theme.palette.primary.main,
+            data: [65, 59, 84, 84, 51, 55, 40],
+          },
+        ],
+      },
+    },
+    {
+      title: 'Income',
+      value: '$6.200',
+      change: '40.9%',
+      changeType: 'up',
+      color: theme.palette.info.main,
+      chartType: 'line',
+      chartData: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: 'Income',
+            backgroundColor: 'transparent',
+            borderColor: 'rgba(255,255,255,.55)',
+            pointBackgroundColor: theme.palette.info.main,
+            data: [1, 18, 9, 17, 34, 22, 11],
+          },
+        ],
+      },
+    },
+    {
+      title: 'Conversion Rate',
+      value: '2.49%',
+      change: '84.7%',
+      changeType: 'up',
+      color: theme.palette.warning.main,
+      chartType: 'line',
+      chartData: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: 'Conversion',
+            backgroundColor: 'rgba(255,255,255,.2)',
+            borderColor: 'rgba(255,255,255,.55)',
+            data: [78, 81, 80, 45, 34, 12, 40],
+            fill: true,
+          },
+        ],
+      },
+    },
+    {
+      title: 'Sessions',
+      value: '44K',
+      change: '-23.6%',
+      changeType: 'down',
+      color: theme.palette.error.main,
+      chartType: 'bar',
+      chartData: {
+        labels: [
+          'Jan',
+          'Feb',
+          'Mar',
+          'Apr',
+          'May',
+          'Jun',
+          'Jul',
+          'Aug',
+          'Sep',
+          'Oct',
+          'Nov',
+          'Dec',
+          'Jan',
+          'Feb',
+          'Mar',
+          'Apr',
+        ],
+        datasets: [
+          {
+            label: 'Sessions',
+            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,
+          },
+        ],
+      },
+    },
+  ]
 
   return (
-    <CRow className={props.className} xs={{ gutter: 4 }}>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
-          color="primary"
-          value={
-            <>
-              26K{' '}
-              <span className="fs-6 fw-normal">
-                (-12.4% <CIcon icon={cilArrowBottom} />)
-              </span>
-            </>
-          }
-          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,
-                  },
-                },
-              }}
-            />
-          }
-        />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
-          color="info"
-          value={
-            <>
-              $6.200{' '}
-              <span className="fs-6 fw-normal">
-                (40.9% <CIcon icon={cilArrowTop} />)
-              </span>
-            </>
-          }
-          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,
-                  },
-                },
-              }}
-            />
-          }
-        />
-      </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
-        <CWidgetStatsA
-          color="warning"
-          value={
-            <>
-              2.49%{' '}
-              <span className="fs-6 fw-normal">
-                (84.7% <CIcon icon={cilArrowTop} />)
-              </span>
-            </>
-          }
-          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,
-                  },
-                },
-              }}
-            />
-          }
-        />
-      </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>
-            </>
-          }
-          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,
-                    },
-                  },
-                },
-              }}
-            />
-          }
-        />
-      </CCol>
-    </CRow>
+    <Grid container spacing={3} sx={props.sx}>
+      {widgets.map((widget, index) => (
+        <Grid key={index} size={{ xs: 12, sm: 6, xl: 3 }}>
+          <StatWidget {...widget} />
+        </Grid>
+      ))}
+    </Grid>
   )
 }
 
 WidgetsDropdown.propTypes = {
-  className: PropTypes.string,
+  sx: PropTypes.object,
   withCharts: PropTypes.bool,
 }
 

From fb12b4b27f7621539858ffaf3ae99fbe730ffcdc Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:47:15 +0000
Subject: [PATCH 2/2] Re-add CoreUI dependencies for unmigrated files

The migration is partial - some views still use CoreUI components.
Re-added CoreUI dependencies to allow the app to run while
the unmigrated files are still present.
---
 package.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9c4709b678..f85415bce4 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,17 @@
     "start": "vite"
   },
   "dependencies": {
+    "@coreui/coreui": "^5.5.0",
+    "@coreui/icons": "^3.0.1",
+    "@coreui/icons-react": "^2.3.0",
+    "@coreui/react": "^5.6.0",
+    "@coreui/react-chartjs": "^3.0.0",
+    "@coreui/utils": "^2.0.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
+    "@popperjs/core": "^2.11.8",
     "chart.js": "^4.5.1",
     "classnames": "^2.5.1",
     "core-js": "^3.47.0",
@@ -32,7 +39,8 @@
     "react-dom": "^19.2.3",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.11.0",
-    "redux": "5.0.1"
+    "redux": "5.0.1",
+    "simplebar-react": "^3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.2",