최초 commit/push

2025-12-30 16:48:25 +09:00
commit a99165e4d7
61 changed files with 2517 additions and 0 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,59 @@
+import React, { Suspense, useEffect } from 'react'
+import { HashRouter, Route, Routes } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+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 App = () => {
+  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const storedTheme = useSelector((state) => state.theme)
+
+  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
+
+  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>
+  )
+}
+
+export default App
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -0,0 +1,99 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import {
+  cilBell,
+  cilBrowser,
+  cilBoatAlt,
+  cilCalculator,
+  cilChartPie,
+  cilCursor,
+  cilDescription,
+  cilDrop,
+  cilExternalLink,
+  cilNotes,
+  cilPencil,
+  cilPuzzle,
+  cilSpeedometer,
+  cilStar,
+} from '@coreui/icons'
+import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
+
+const _nav = [
+  {
+    component: CNavItem,
+    name: 'Dashboard',
+    to: '/dashboard',
+    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
+    badge: {
+      color: 'info',
+      text: 'NEW',
+    },
+  },
+  {
+    component: CNavTitle,
+    name: 'Theme',
+  },
+  {
+    component: CNavItem,
+    name: 'Colors',
+    to: '/theme/colors',
+    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Typography',
+    to: '/theme/typography',
+    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavTitle,
+    name: 'Extras',
+  },
+  {
+    component: CNavGroup,
+    name: 'Pages',
+    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    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: 'Demo',
+    href: 'https://coreui.io/demos/react/5.5/free/?theme=light#/dashboard',
+    icon: <CIcon icon={cilBrowser} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Docs',
+    href: 'https://coreui.io/react/docs/templates/installation/',
+    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Src',
+    href: 'https://github.com/coreui/coreui-free-react-admin-template',
+    icon: <CIcon icon={cilBoatAlt} customClassName="nav-icon" />,
+  },
+]
+
+export default _nav
--- a/src/assets/brand/logo.js
+++ b/src/assets/brand/logo.js
@@ -0,0 +1,18 @@
+export const logo = [
+  '599 116',
+  `<g>
+    <g fill="none" fill-rule="nonzero">
+      <g style="fill:#80d0ff;">
+        <path d="m358.773 79.151-8.768-20.736a.25.25 0 0 0-.255-.191h-9.985a.226.226 0 0 0-.256.255v20.543a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h12.544a9.979 9.979 0 0 1 7.744 3.23 12.204 12.204 0 0 1 2.944 8.546 12.439 12.439 0 0 1-2.24 7.584 9.37 9.37 0 0 1-6.08 3.744c-.17.086-.214.191-.127.32l8.704 20.608.064.255c0 .342-.192.512-.576.512h-1.152a.703.703 0 0 1-.705-.51Zm-19.264-41.793v18.496a.226.226 0 0 0 .256.257h10.304a7.669 7.669 0 0 0 6.017-2.592 9.878 9.878 0 0 0 2.303-6.816 10.286 10.286 0 0 0-2.272-6.976 7.601 7.601 0 0 0-6.048-2.624h-10.304a.226.226 0 0 0-.256.255ZM398.082 37.102H378.05a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.257h13.824a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64H378.05a.226.226 0 0 0-.256.256v18.56a.226.226 0 0 0 .256.256h20.032a.567.567 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64h-22.144a.566.566 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.144a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM435.802 79.151l-2.431-8.832a.296.296 0 0 0-.32-.192h-16.768a.295.295 0 0 0-.32.192l-2.368 8.768a.658.658 0 0 1-.704.576h-1.216a.588.588 0 0 1-.48-.191.582.582 0 0 1-.096-.513l12.031-43.584a.644.644 0 0 1 .704-.512h1.6a.644.644 0 0 1 .704.512l12.16 43.584.065.192c0 .342-.214.512-.64.512h-1.217a.643.643 0 0 1-.704-.512ZM416.7 67.92a.303.303 0 0 0 .223.096h15.489a.304.304 0 0 0 .223-.096c.065-.065.075-.117.033-.16l-7.873-28.928c-.043-.085-.085-.128-.127-.128-.042 0-.086.043-.128.128l-7.872 28.928c-.043.043-.033.095.032.16ZM453.357 76.911a11.637 11.637 0 0 1-3.328-8.704V46.19a11.414 11.414 0 0 1 3.36-8.575 12.09 12.09 0 0 1 8.8-3.265 12.253 12.253 0 0 1 8.865 3.233 11.39 11.39 0 0 1 3.36 8.607v.64a.566.566 0 0 1-.641.641l-1.28.064c-.427 0-.64-.192-.64-.576v-.833a9.287 9.287 0 0 0-2.656-6.912 10.67 10.67 0 0 0-14.016 0 9.284 9.284 0 0 0-2.656 6.913v22.272a9.282 9.282 0 0 0 2.656 6.912 10.673 10.673 0 0 0 14.016 0 9.286 9.286 0 0 0 2.656-6.912v-.768c0-.384.213-.576.64-.575l1.28.063a.566.566 0 0 1 .64.64v.511a11.498 11.498 0 0 1-3.36 8.64 13.626 13.626 0 0 1-17.696 0v.001ZM511.193 35.503v.96a.565.565 0 0 1-.64.64H499.8a.226.226 0 0 0-.256.256v41.663a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64V37.357a.227.227 0 0 0-.256-.255h-10.176a.565.565 0 0 1-.64-.64v-.96a.566.566 0 0 1 .64-.64h23.936a.566.566 0 0 1 .64.64ZM518.822 78.51a2.835 2.835 0 0 1-.8-2.047 2.923 2.923 0 0 1 .8-2.112c.544-.56 1.3-.862 2.08-.832a2.847 2.847 0 0 1 2.944 2.944c.03.78-.273 1.536-.832 2.08a2.921 2.921 0 0 1-2.112.8 2.754 2.754 0 0 1-2.08-.832ZM539.16 77.007a11.31 11.31 0 0 1-3.2-8.416v-5.44a.566.566 0 0 1 .64-.64h1.217a.567.567 0 0 1 .64.64v5.504a9.144 9.144 0 0 0 2.528 6.72 8.974 8.974 0 0 0 6.687 2.56 8.79 8.79 0 0 0 9.28-9.28V35.504a.565.565 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64V68.59a11.252 11.252 0 0 1-3.233 8.416 13.062 13.062 0 0 1-17.055 0ZM577.106 77.102a10.482 10.482 0 0 1-3.36-8.127v-1.792a.565.565 0 0 1 .64-.64h1.088a.566.566 0 0 1 .64.64v1.6a8.544 8.544 0 0 0 2.752 6.655 10.536 10.536 0 0 0 7.36 2.496 9.876 9.876 0 0 0 6.976-2.367 8.215 8.215 0 0 0 2.56-6.336 8.397 8.397 0 0 0-1.12-4.416 11.383 11.383 0 0 0-3.328-3.392 71.626 71.626 0 0 0-6.176-3.712 71.302 71.302 0 0 1-6.24-3.84 12.174 12.174 0 0 1-3.424-3.68 10.257 10.257 0 0 1-1.28-5.345 9.86 9.86 0 0 1 3.072-7.744 12.012 12.012 0 0 1 8.32-2.752c3.796 0 6.783 1.035 8.96 3.105a10.823 10.823 0 0 1 3.264 8.224v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.471a8.865 8.865 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.232-2.528 9.365 9.365 0 0 0-6.528 2.144 7.822 7.822 0 0 0-2.368 6.112 7.8 7.8 0 0 0 1.024 4.16 10.376 10.376 0 0 0 3.008 3.04 62.829 62.829 0 0 0 5.952 3.488 71.058 71.058 0 0 1 6.72 4.256 13.454 13.454 0 0 1 3.648 3.936 10.049 10.049 0 0 1 1.28 5.184 10.714 10.714 0 0 1-3.264 8.191c-2.175 2.05-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z"/>
+      </g>
+      <g style="fill:currentColor;">
+        <path d="m96.59 25.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V35.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V35.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464v45.033Z"/>
+        <path d="M74.612 71.005h-2.866c-.673 0-1.335.17-1.925.493l-17.28 9.485L32.59 69.465V46.487L52.54 34.97l17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L56.383 27.952a8.039 8.039 0 0 0-7.842.09L28.59 39.56a8.025 8.025 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-1.999-2Z"/>
+        <g transform="translate(118 34)">
+          <path d="M51.335.362c-8.28.009-14.99 6.719-15 15v17.277c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15V15.36c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.36a7 7 0 0 1 14 0V32.64ZM14.67 8.421a7.01 7.01 0 0 1 7.867 6.075.99.99 0 0 0 .985.865h6.03a1.01 1.01 0 0 0 .998-1.097C29.945 6.14 22.971-.02 14.834.381 6.751.932.504 7.696.59 15.796v16.407C.503 40.305 6.752 47.068 14.835 47.62c8.137.401 15.11-5.76 15.716-13.884a1.01 1.01 0 0 0-.999-1.097h-6.03a.99.99 0 0 0-.984.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.08-7.184v-16.79a7.164 7.164 0 0 1 6.08-7.184ZM97.513 27.928a12.158 12.158 0 0 0 7.184-11.077v-3.702C104.697 6.44 99.257 1 92.547 1H75.59a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V29h6.621l7.916 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414l-8.025-17.658Zm-.816-11.077A4.154 4.154 0 0 1 92.547 21h-9.85V9h9.85a4.154 4.154 0 0 1 4.15 4.15v3.7ZM139.59 1h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V27h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V9h19a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM177.59 1h-6a1 1 0 0 0-1 1v22.648a7.007 7.007 0 1 1-14 0V2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.648a15.003 15.003 0 1 0 30 0V2a1 1 0 0 0-1-1Z"/>
+          <rect width="8" height="38" x="186.59" y="1" rx="1"/>
+        </g>
+      </g>
+    </g>
+  </g>`,
+]
--- a/src/assets/brand/sygnet.js
+++ b/src/assets/brand/sygnet.js
@@ -0,0 +1,7 @@
+export const sygnet = [
+  '102 115',
+  `<g style="fill: currentColor">
+    <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"/>
+    <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"/>
+  </g>`,
+]
--- a/src/assets/images/angular.jpg
+++ b/src/assets/images/angular.jpg
--- a/src/assets/images/avatars/1.jpg
+++ b/src/assets/images/avatars/1.jpg
--- a/src/assets/images/avatars/2.jpg
+++ b/src/assets/images/avatars/2.jpg
--- a/src/assets/images/avatars/3.jpg
+++ b/src/assets/images/avatars/3.jpg
--- a/src/assets/images/avatars/4.jpg
+++ b/src/assets/images/avatars/4.jpg
--- a/src/assets/images/avatars/5.jpg
+++ b/src/assets/images/avatars/5.jpg
--- a/src/assets/images/avatars/6.jpg
+++ b/src/assets/images/avatars/6.jpg
--- a/src/assets/images/avatars/7.jpg
+++ b/src/assets/images/avatars/7.jpg
--- a/src/assets/images/avatars/8.jpg
+++ b/src/assets/images/avatars/8.jpg
--- a/src/assets/images/avatars/9.jpg
+++ b/src/assets/images/avatars/9.jpg
--- a/src/assets/images/components.webp
+++ b/src/assets/images/components.webp
--- a/src/assets/images/icons.webp
+++ b/src/assets/images/icons.webp
--- a/src/assets/images/react.jpg
+++ b/src/assets/images/react.jpg
--- a/src/assets/images/vue.jpg
+++ b/src/assets/images/vue.jpg
--- a/src/components/AppBreadcrumb.js
+++ b/src/components/AppBreadcrumb.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+
+import routes from '../routes'
+
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+const AppBreadcrumb = () => {
+  const currentLocation = useLocation().pathname
+
+  const getRouteName = (pathname, routes) => {
+    const currentRoute = routes.find((route) => route.path === pathname)
+    return currentRoute ? currentRoute.name : false
+  }
+
+  const getBreadcrumbs = (location) => {
+    const breadcrumbs = []
+    location.split('/').reduce((prev, curr, index, array) => {
+      const currentPathname = `${prev}/${curr}`
+      const routeName = getRouteName(currentPathname, routes)
+      routeName &&
+        breadcrumbs.push({
+          pathname: currentPathname,
+          name: routeName,
+          active: index + 1 === array.length ? true : false,
+        })
+      return currentPathname
+    })
+    return breadcrumbs
+  }
+
+  const breadcrumbs = getBreadcrumbs(currentLocation)
+
+  return (
+    <CBreadcrumb className="my-0">
+      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
+      {breadcrumbs.map((breadcrumb, index) => {
+        return (
+          <CBreadcrumbItem
+            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
+            key={index}
+          >
+            {breadcrumb.name}
+          </CBreadcrumbItem>
+        )
+      })}
+    </CBreadcrumb>
+  )
+}
+
+export default React.memo(AppBreadcrumb)
--- a/src/components/AppContent.js
+++ b/src/components/AppContent.js
@@ -0,0 +1,33 @@
+import React, { Suspense } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+import { CContainer, CSpinner } from '@coreui/react'
+
+// routes config
+import routes from '../routes'
+
+const AppContent = () => {
+  return (
+    <CContainer className="px-4" lg>
+      <Suspense fallback={<CSpinner color="primary" />}>
+        <Routes>
+          {routes.map((route, idx) => {
+            return (
+              route.element && (
+                <Route
+                  key={idx}
+                  path={route.path}
+                  exact={route.exact}
+                  name={route.name}
+                  element={<route.element />}
+                />
+              )
+            )
+          })}
+          <Route path="/" element={<Navigate to="dashboard" replace />} />
+        </Routes>
+      </Suspense>
+    </CContainer>
+  )
+}
+
+export default React.memo(AppContent)
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CFooter } from '@coreui/react'
+
+const AppFooter = () => {
+  return (
+    <CFooter className="px-4">
+      <div>
+        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
+          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">
+          CoreUI React Admin &amp; Dashboard Template
+        </a>
+      </div>
+    </CFooter>
+  )
+}
+
+export default React.memo(AppFooter)
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -0,0 +1,131 @@
+import React, { useEffect, useRef } 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 { AppBreadcrumb } from './index'
+import { AppHeaderDropdown } from './header/index'
+
+const AppHeader = () => {
+  const headerRef = useRef()
+  const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+
+  const dispatch = useDispatch()
+  const sidebarShow = useSelector((state) => state.sidebarShow)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      headerRef.current &&
+        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
+    }
+
+    document.addEventListener('scroll', handleScroll)
+    return () => document.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
+      <CContainer className="border-bottom px-4" fluid>
+        <CHeaderToggler
+          onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          style={{ marginInlineStart: '-14px' }}
+        >
+          <CIcon icon={cilMenu} size="lg" />
+        </CHeaderToggler>
+        <CHeaderNav className="d-none d-md-flex">
+          <AppBreadcrumb />
+        </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>
+          <AppHeaderDropdown />
+        </CHeaderNav>
+      </CContainer>
+    </CHeader>
+  )
+}
+
+export default AppHeader
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -0,0 +1,59 @@
+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 { 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 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>
+      <AppSidebarNav items={navigation} />
+      <CSidebarFooter className="border-top d-none d-lg-flex">
+        <CSidebarToggler
+          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+        />
+      </CSidebarFooter>
+    </CSidebar>
+  )
+}
+
+export default React.memo(AppSidebar)
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -0,0 +1,73 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+import SimpleBar from 'simplebar-react'
+import 'simplebar-react/dist/simplebar.min.css'
+
+import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
+
+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>
+        )}
+      </>
+    )
+  }
+
+  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 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 (
+    <CSidebarNav as={SimpleBar}>
+      {items &&
+        items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
+    </CSidebarNav>
+  )
+}
+
+AppSidebarNav.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+}
--- a/src/components/DocsComponents.js
+++ b/src/components/DocsComponents.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ComponentsImg from 'src/assets/images/components.webp'
+
+const DocsComponents = (props) => (
+  <div className="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div className="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div className="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          className="img-fluid"
+          src={ComponentsImg}
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div className="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s{' '}
+        <strong>
+          the only open-source React dashboard built on a professional, enterprise-grade UI
+          Components Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div className="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          className="btn btn-primary text-nowrap text-white"
+          href={`https://coreui.io/react/docs/${props.href}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+DocsComponents.propTypes = {
+  href: PropTypes.string,
+}
+
+export default DocsComponents
--- a/src/components/DocsExample.js
+++ b/src/components/DocsExample.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilCode, cilMediaPlay } from '@coreui/icons'
+
+const DocsExample = (props) => {
+  const { children, href, tabContentClassName } = props
+
+  const _href = `https://coreui.io/react/docs/${href}`
+
+  return (
+    <div className="example">
+      <CNav variant="underline-border">
+        <CNavItem>
+          <CNavLink href="#" active>
+            <CIcon icon={cilMediaPlay} className="me-2" />
+            Preview
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href={_href} target="_blank">
+            <CIcon icon={cilCode} className="me-2" />
+            Code
+          </CNavLink>
+        </CNavItem>
+      </CNav>
+      <CTabContent className={`rounded-bottom ${tabContentClassName ? tabContentClassName : ''}`}>
+        <CTabPane className="p-3 preview" visible>
+          {children}
+        </CTabPane>
+      </CTabContent>
+    </div>
+  )
+}
+
+DocsExample.propTypes = {
+  children: PropTypes.node,
+  href: PropTypes.string,
+  tabContentClassName: PropTypes.string,
+}
+
+export default React.memo(DocsExample)
--- a/src/components/DocsIcons.js
+++ b/src/components/DocsIcons.js
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import IconsImg from 'src/assets/images/icons.webp'
+
+const DocsIcons = () => (
+  <div className="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div className="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div className="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img className="img-fluid" src={IconsImg} width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div className="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div className="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          className="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/react/docs/components/icon/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+export default DocsIcons
--- a/src/components/DocsLink.js
+++ b/src/components/DocsLink.js
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CLink } from '@coreui/react'
+
+const DocsLink = (props) => {
+  const { href, name, text, ...rest } = props
+
+  const _href = name ? `https://coreui.io/react/docs/components/${name}` : href
+
+  return (
+    <div className="float-end">
+      <CLink
+        {...rest}
+        href={_href}
+        rel="noreferrer noopener"
+        target="_blank"
+        className="card-header-action"
+      >
+        <small className="text-body-secondary">{text || 'docs'}</small>
+      </CLink>
+    </div>
+  )
+}
+
+DocsLink.propTypes = {
+  href: PropTypes.string,
+  name: PropTypes.string,
+  text: PropTypes.string,
+}
+
+export default React.memo(DocsLink)
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -0,0 +1,96 @@
+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 avatar8 from './../../assets/images/avatars/8.jpg'
+
+const AppHeaderDropdown = () => {
+  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>
+  )
+}
+
+export default AppHeaderDropdown
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -0,0 +1,3 @@
+import AppHeaderDropdown from './AppHeaderDropdown'
+
+export { AppHeaderDropdown }
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,23 @@
+import AppBreadcrumb from './AppBreadcrumb'
+import AppContent from './AppContent'
+import AppFooter from './AppFooter'
+import AppHeader from './AppHeader'
+import AppHeaderDropdown from './header/AppHeaderDropdown'
+import AppSidebar from './AppSidebar'
+import DocsComponents from './DocsComponents'
+import DocsIcons from './DocsIcons'
+import DocsLink from './DocsLink'
+import DocsExample from './DocsExample'
+
+export {
+  AppBreadcrumb,
+  AppContent,
+  AppFooter,
+  AppHeader,
+  AppHeaderDropdown,
+  AppSidebar,
+  DocsComponents,
+  DocsIcons,
+  DocsLink,
+  DocsExample,
+}
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
+import 'core-js'
+
+import App from './App'
+import store from './store'
+
+createRoot(document.getElementById('root')).render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+)
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
+
+const DefaultLayout = () => {
+  return (
+    <div>
+      <AppSidebar />
+      <div className="wrapper d-flex flex-column min-vh-100">
+        <AppHeader />
+        <div className="body flex-grow-1">
+          <AppContent />
+        </div>
+        <AppFooter />
+      </div>
+    </div>
+  )
+}
+
+export default DefaultLayout
--- a/src/routes.js
+++ b/src/routes.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
+const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
+const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
+
+const routes = [
+  { path: '/', exact: true, name: 'Home' },
+  { path: '/dashboard', name: 'Dashboard', element: Dashboard },
+  { path: '/theme', name: 'Theme', element: Colors, exact: true },
+  { path: '/theme/colors', name: 'Colors', element: Colors },
+  { path: '/theme/typography', name: 'Typography', element: Typography },
+]
+
+export default routes
--- a/src/scss/examples.scss
+++ b/src/scss/examples.scss
@@ -0,0 +1,116 @@
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
+@use "@coreui/coreui/scss/variables" as * with (
+  $enable-deprecation-messages: false
+);
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
+.example {
+  &:not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
+  .tab-content {
+    background-color: var(--#{$prefix}tertiary-bg);
+  }
+
+  & + p {
+    margin-top: 1.5rem;
+  }
+
+  // Components examples
+  .preview {
+    + p {
+      margin-top: 2rem;
+    }
+
+    > .form-control {
+      + .form-control {
+        margin-top: .5rem;
+      }
+    }
+
+    > .nav + .nav,
+    > .alert + .alert,
+    > .navbar + .navbar,
+    > .progress + .progress {
+      margin-top: 1rem;
+    }
+
+    > .dropdown-menu {
+      position: static;
+      display: block;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    // Images
+    > svg + svg,
+    > img + img {
+      margin-left: .5rem;
+    }
+
+    // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    > .btn,
+    > .btn-group {
+      margin: .25rem .125rem;
+    }
+    > .btn-toolbar + .btn-toolbar {
+      margin-top: .5rem;
+    }
+
+    // List groups
+    > .list-group {
+      max-width: 400px;
+    }
+
+    > [class*="list-group-horizontal"] {
+      max-width: 100%;
+    }
+
+    // Navbars
+    .fixed-top,
+    .sticky-top {
+      position: static;
+      margin: -1rem -1rem 1rem;
+    }
+
+    .fixed-bottom {
+      position: static;
+      margin: 1rem -1rem -1rem;
+    }
+
+    @include media-breakpoint-up(sm) {
+      .fixed-top,
+      .sticky-top {
+        margin: -1.5rem -1.5rem 1rem;
+      }
+      .fixed-bottom {
+        margin: 1rem -1.5rem -1.5rem;
+      }
+    }
+
+    // Pagination
+    .pagination {
+      margin-top: .5rem;
+      margin-bottom: .5rem;
+    }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
+  }
+}
+
+@include color-mode(dark) {
+  .example .tab-content {
+    background-color: var(--#{$prefix}secondary-bg);
+  }
+}
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -0,0 +1,67 @@
+@use "@coreui/coreui/scss/coreui" as * with ( 
+  $enable-deprecation-messages: false,
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "vendors/simplebar";
+
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
+
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  margin-inline-start: auto;
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    margin-inline-end: auto;
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@include color-mode(dark) {
+  body {
+    background-color: var(--cui-dark-bg-subtle);
+  }
+
+  .footer {
+    --cui-footer-bg: var(--cui-body-bg);
+  }
+}
--- a/src/scss/vendors/simplebar.scss
+++ b/src/scss/vendors/simplebar.scss
@@ -0,0 +1,5 @@
+.simplebar-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
--- a/src/store.js
+++ b/src/store.js
@@ -0,0 +1,18 @@
+import { legacy_createStore as createStore } from 'redux'
+
+const initialState = {
+  sidebarShow: true,
+  theme: 'light',
+}
+
+const changeState = (state = initialState, { type, ...rest }) => {
+  switch (type) {
+    case 'set':
+      return { ...state, ...rest }
+    default:
+      return state
+  }
+}
+
+const store = createStore(changeState)
+export default store
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -0,0 +1,211 @@
+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 avatar1 from 'src/assets/images/avatars/1.jpg'
+import avatar2 from 'src/assets/images/avatars/2.jpg'
+import avatar3 from 'src/assets/images/avatars/3.jpg'
+import avatar4 from 'src/assets/images/avatars/4.jpg'
+import avatar5 from 'src/assets/images/avatars/5.jpg'
+import avatar6 from 'src/assets/images/avatars/6.jpg'
+
+import MainChart from './MainChart'
+
+const Dashboard = () => {
+  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 },
+      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 },
+      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 },
+      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 },
+      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 },
+      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 },
+      activity: 'Last week',
+    },
+  ]
+
+  return (
+    <>
+      <CCard className="mb-4">
+        <CCardHeader>Traffic {' & '} Sales</CCardHeader>
+        <CCardBody>
+          <CTable align="middle" className="mb-0 border" hover responsive>
+            <CTableHead className="text-nowrap">
+              <CTableRow>
+                <CTableHeaderCell className="bg-body-tertiary text-center">
+                  <CIcon icon={cilPeople} />
+                </CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary">User</CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary text-center">
+                  Country
+                </CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary text-center">
+                  Payment Method
+                </CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
+              </CTableRow>
+            </CTableHead>
+            <CTableBody>
+              {tableExample.map((item, index) => (
+                <CTableRow v-for="item in tableItems" key={index}>
+                  <CTableDataCell className="text-center">
+                    <CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    <div>{item.user.name}</div>
+                    <div className="small text-body-secondary text-nowrap">
+                      <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
+                      {item.user.registered}
+                    </div>
+                  </CTableDataCell>
+                  <CTableDataCell className="text-center">
+                    <CIcon size="xl" icon={item.country.flag} title={item.country.name} />
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    <div className="d-flex justify-content-between text-nowrap">
+                      <div className="fw-semibold">{item.usage.value}%</div>
+                      <div className="ms-3">
+                        <small className="text-body-secondary">{item.usage.period}</small>
+                      </div>
+                    </div>
+                    <CProgress thin color={item.usage.color} value={item.usage.value} />
+                  </CTableDataCell>
+                  <CTableDataCell className="text-center">
+                    <CIcon size="xl" icon={item.payment.icon} />
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    <div className="small text-body-secondary text-nowrap">Last login</div>
+                    <div className="fw-semibold text-nowrap">{item.activity}</div>
+                  </CTableDataCell>
+                </CTableRow>
+              ))}
+            </CTableBody>
+          </CTable>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Dashboard
--- a/src/views/dashboard/MainChart.js
+++ b/src/views/dashboard/MainChart.js
@@ -0,0 +1,137 @@
+import React, { useEffect, useRef } from 'react'
+
+import { CChartLine } from '@coreui/react-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const MainChart = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      if (chartRef.current) {
+        setTimeout(() => {
+          chartRef.current.options.scales.x.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.options.scales.y.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.update()
+        })
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+    return () =>
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+  }, [chartRef])
+
+  const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min
+
+  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,
+            },
+          },
+          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),
+              },
+            },
+          },
+          elements: {
+            line: {
+              tension: 0.4,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+              hoverBorderWidth: 3,
+            },
+          },
+        }}
+      />
+    </>
+  )
+}
+
+export default MainChart
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -0,0 +1,86 @@
+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'
+
+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>
+  )
+}
+
+export default Login
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -0,0 +1,41 @@
+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'
+
+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>
+  )
+}
+
+export default Page404
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -0,0 +1,41 @@
+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'
+
+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>
+  )
+}
+
+export default Page500
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -0,0 +1,71 @@
+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'
+
+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>
+  )
+}
+
+export default Register
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useState, createRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
+import { rgbToHex } from '@coreui/utils'
+import { DocsLink } from 'src/components'
+
+const ThemeView = () => {
+  const [color, setColor] = useState('rgb(255, 255, 255)')
+  const ref = createRef()
+
+  useEffect(() => {
+    const el = ref.current.parentNode.firstChild
+    const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
+    setColor(varColor)
+  }, [ref])
+
+  return (
+    <table className="table w-100" ref={ref}>
+      <tbody>
+        <tr>
+          <td className="text-body-secondary">HEX:</td>
+          <td className="font-weight-bold">{rgbToHex(color)}</td>
+        </tr>
+        <tr>
+          <td className="text-body-secondary">RGB:</td>
+          <td className="font-weight-bold">{color}</td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}
+
+const ThemeColor = ({ className, children }) => {
+  const classes = classNames(className, 'theme-color w-75 rounded mb-3')
+  return (
+    <CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
+      <div className={classes} style={{ paddingTop: '75%' }}></div>
+      {children}
+      <ThemeView />
+    </CCol>
+  )
+}
+
+ThemeColor.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+const Colors = () => {
+  return (
+    <>
+      <CCard className="mb-4">
+        <CCardHeader>
+          Theme colors
+          <DocsLink href="https://coreui.io/docs/utilities/colors/" />
+        </CCardHeader>
+        <CCardBody>
+          <CRow>
+            <ThemeColor className="bg-primary">
+              <h6>Brand Primary Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-secondary">
+              <h6>Brand Secondary Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-success">
+              <h6>Brand Success Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-danger">
+              <h6>Brand Danger Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-warning">
+              <h6>Brand Warning Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-info">
+              <h6>Brand Info Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-light">
+              <h6>Brand Light Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-dark">
+              <h6>Brand Dark Color</h6>
+            </ThemeColor>
+          </CRow>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Colors
--- a/src/views/theme/typography/Typography.js
+++ b/src/views/theme/typography/Typography.js
@@ -0,0 +1,229 @@
+import React from 'react'
+import { CCard, CCardHeader, CCardBody } from '@coreui/react'
+import { DocsLink } from 'src/components'
+
+const Typography = () => {
+  return (
+    <>
+      <CCard className="mb-4">
+        <CCardHeader>
+          Headings
+          <DocsLink href="https://coreui.io/docs/content/typography/" />
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Documentation and examples for Bootstrap typography, including global settings,
+            headings, body text, lists, and more.
+          </p>
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Heading</th>
+                <th>Example</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h1">h1. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h2">h2. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h3">h3. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h4">h4. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h5">h5. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h6">h6. Bootstrap heading</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-4">
+        <CCardHeader>Headings</CCardHeader>
+        <CCardBody>
+          <p>
+            <code className="highlighter-rouge">.h1</code> through
+            <code className="highlighter-rouge">.h6</code>
+            classes are also available, for when you want to match the font styling of a heading but
+            cannot use the associated HTML element.
+          </p>
+          <div className="bd-example">
+            <p className="h1">h1. Bootstrap heading</p>
+            <p className="h2">h2. Bootstrap heading</p>
+            <p className="h3">h3. Bootstrap heading</p>
+            <p className="h4">h4. Bootstrap heading</p>
+            <p className="h5">h5. Bootstrap heading</p>
+            <p className="h6">h6. Bootstrap heading</p>
+          </div>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-4">
+        <div className="card-header">Display headings</div>
+        <div className="card-body">
+          <p>
+            Traditional heading elements are designed to work best in the meat of your page content.
+            When you need a heading to stand out, consider using a <strong>display heading</strong>
+            —a larger, slightly more opinionated heading style.
+          </p>
+          <div className="bd-example bd-example-type">
+            <table className="table">
+              <tbody>
+                <tr>
+                  <td>
+                    <span className="display-1">Display 1</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className="display-2">Display 2</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className="display-3">Display 3</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className="display-4">Display 4</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </CCard>
+      <CCard className="mb-4">
+        <CCardHeader>Inline text elements</CCardHeader>
+        <CCardBody>
+          <p>
+            Traditional heading elements are designed to work best in the meat of your page content.
+            When you need a heading to stand out, consider using a <strong>display heading</strong>
+            —a larger, slightly more opinionated heading style.
+          </p>
+          <div className="bd-example">
+            <p>
+              You can use the mark tag to <mark>highlight</mark> text.
+            </p>
+            <p>
+              <del>This line of text is meant to be treated as deleted text.</del>
+            </p>
+            <p>
+              <s>This line of text is meant to be treated as no longer accurate.</s>
+            </p>
+            <p>
+              <ins>This line of text is meant to be treated as an addition to the document.</ins>
+            </p>
+            <p>
+              <u>This line of text will render as underlined</u>
+            </p>
+            <p>
+              <small>This line of text is meant to be treated as fine print.</small>
+            </p>
+            <p>
+              <strong>This line rendered as bold text.</strong>
+            </p>
+            <p>
+              <em>This line rendered as italicized text.</em>
+            </p>
+          </div>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-4">
+        <CCardHeader>Description list alignment</CCardHeader>
+        <CCardBody>
+          <p>
+            Align terms and descriptions horizontally by using our grid system’s predefined classes
+            (or semantic mixins). For longer terms, you can optionally add a{' '}
+            <code className="highlighter-rouge">.text-truncate</code> class to truncate the text
+            with an ellipsis.
+          </p>
+          <div className="bd-example">
+            <dl className="row">
+              <dt className="col-sm-3">Description lists</dt>
+              <dd className="col-sm-9">A description list is perfect for defining terms.</dd>
+
+              <dt className="col-sm-3">Euismod</dt>
+              <dd className="col-sm-9">
+                <p>
+                  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+                </p>
+                <p>Donec id elit non mi porta gravida at eget metus.</p>
+              </dd>
+
+              <dt className="col-sm-3">Malesuada porta</dt>
+              <dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+
+              <dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
+              <dd className="col-sm-9">
+                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
+                fermentum massa justo sit amet risus.
+              </dd>
+
+              <dt className="col-sm-3">Nesting</dt>
+              <dd className="col-sm-9">
+                <dl className="row">
+                  <dt className="col-sm-4">Nested definition list</dt>
+                  <dd className="col-sm-8">
+                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+                  </dd>
+                </dl>
+              </dd>
+            </dl>
+          </div>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Typography