diff --git a/src/_nav.js b/src/_nav.js
index dd413f1..19d78f5 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -12,10 +12,11 @@ import {
   cilSpeedometer,
   cilStar,
 } from '@coreui/icons'
+import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
 
 const _nav = [
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Dashboard',
     to: '/dashboard',
     icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
@@ -25,204 +26,181 @@ const _nav = [
     },
   },
   {
-    component: 'CNavTitle',
+    component: CNavTitle,
     name: 'Theme',
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Colors',
     to: '/theme/colors',
     icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Typography',
     to: '/theme/typography',
     icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
   },
   {
-    component: 'CNavTitle',
+    component: CNavTitle,
     name: 'Components',
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Base',
     to: '/base',
     icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
+        component: CNavItem,
         name: 'Accordion',
         to: '/base/accordion',
       },
       {
-        component: 'CNavItem',
+        component: CNavItem,
         name: 'Breadcrumb',
         to: '/base/breadcrumbs',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Cards',
         to: '/base/cards',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Carousel',
         to: '/base/carousels',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Collapse',
         to: '/base/collapses',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'List group',
         to: '/base/list-groups',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Navs & Tabs',
         to: '/base/navs',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Pagination',
         to: '/base/paginations',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Popovers',
         to: '/base/popovers',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Progress',
         to: '/base/progress',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Spinners',
         to: '/base/spinners',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Tables',
         to: '/base/tables',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Tooltips',
         to: '/base/tooltips',
       },
     ],
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Buttons',
     to: '/buttons',
     icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Buttons',
         to: '/buttons/buttons',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Buttons groups',
         to: '/buttons/button-groups',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Dropdowns',
         to: '/buttons/dropdowns',
       },
     ],
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Forms',
     icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Form Control',
         to: '/forms/form-control',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Select',
         to: '/forms/select',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Checks & Radios',
         to: '/forms/checks-radios',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Range',
         to: '/forms/range',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Input Group',
         to: '/forms/input-group',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Floating Labels',
         to: '/forms/floating-labels',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Layout',
         to: '/forms/layout',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Validation',
         to: '/forms/validation',
       },
     ],
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Charts',
     to: '/charts',
     icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Icons',
     icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'CoreUI Free',
         to: '/icons/coreui-icons',
         badge: {
@@ -231,52 +209,46 @@ const _nav = [
         },
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'CoreUI Flags',
         to: '/icons/flags',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'CoreUI Brands',
         to: '/icons/brands',
       },
     ],
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Notifications',
     icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Alerts',
         to: '/notifications/alerts',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Badges',
         to: '/notifications/badges',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Modal',
         to: '/notifications/modals',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Toasts',
         to: '/notifications/toasts',
       },
     ],
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Widgets',
     to: '/widgets',
     icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
@@ -286,35 +258,31 @@ const _nav = [
     },
   },
   {
-    component: 'CNavTitle',
+    component: CNavTitle,
     name: 'Extras',
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Pages',
     icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Login',
         to: '/login',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Register',
         to: '/register',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Error 404',
         to: '/404',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Error 500',
         to: '/500',
       },
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 1fc32d1..db6e3bd 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -2,12 +2,10 @@ import React from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import { CBadge, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle } from '@coreui/react'
+import { CBadge } from '@coreui/react'
 
 export const AppSidebarNav = ({ items }) => {
-  const components = { CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }
   const location = useLocation()
-
   const navLink = (name, icon, badge) => {
     return (
       <>
@@ -24,13 +22,14 @@ export const AppSidebarNav = ({ items }) => {
 
   const navItem = (item, index) => {
     const { component, name, badge, icon, ...rest } = item
-    const Component = components[component] || component
+    const Component = component
     return (
       <Component
-        {...(component === 'CNavItem' && {
-          component: NavLink,
-          activeClassName: 'active',
-        })}
+        {...(rest.to &&
+          !rest.items && {
+            component: NavLink,
+            activeClassName: 'active',
+          })}
         key={index}
         {...rest}
       >
@@ -39,17 +38,17 @@ export const AppSidebarNav = ({ items }) => {
     )
   }
   const navGroup = (item, index) => {
-    const { component, name, icon, items, to, ...rest } = item
-    const Component = components[component] || component
+    const { component, name, icon, to, ...rest } = item
+    const Component = component
     return (
       <Component
-        toggler={navLink(name, icon)}
-        visible={location.pathname.startsWith(to)}
         idx={String(index)}
         key={index}
+        toggler={navLink(name, icon)}
+        visible={location.pathname.startsWith(to)}
         {...rest}
       >
-        {item.items.map((item, index) =>
+        {item.items?.map((item, index) =>
           item.items ? navGroup(item, index) : navItem(item, index),
         )}
       </Component>
diff --git a/src/routes.js b/src/routes.js
index f0b717e..8631058 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,10 +1,10 @@
 import React from 'react'
 
-// examples
-
+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'))
 
+// Base
 const Accordion = React.lazy(() => import('./views/components/base/accordion/Accordion'))
 const Breadcrumbs = React.lazy(() => import('./views/components/base/breadcrumbs/Breadcrumbs'))
 const Cards = React.lazy(() => import('./views/components/base/cards/Cards'))
@@ -19,12 +19,14 @@ const Spinners = React.lazy(() => import('./views/components/base/spinners/Spinn
 const Tables = React.lazy(() => import('./views/components/base/tables/Tables'))
 const Tooltips = React.lazy(() => import('./views/components/base/tooltips/Tooltips'))
 
+// Buttons
 const Buttons = React.lazy(() => import('./views/components/buttons/buttons/Buttons'))
 const ButtonGroups = React.lazy(() =>
   import('./views/components/buttons/button-groups/ButtonGroups'),
 )
 const Dropdowns = React.lazy(() => import('./views/components/buttons/dropdowns/Dropdowns'))
 
+//Forms
 const ChecksRadios = React.lazy(() => import('./views/components/forms/checks-radios/ChecksRadios'))
 const FloatingLabels = React.lazy(() =>
   import('./views/components/forms/floating-labels/FloatingLabels'),
@@ -36,25 +38,21 @@ const Range = React.lazy(() => import('./views/components/forms/range/Range'))
 const Select = React.lazy(() => import('./views/components/forms/select/Select'))
 const Validation = React.lazy(() => import('./views/components/forms/validation/Validation'))
 
+const Charts = React.lazy(() => import('./views/components/charts/Charts'))
+
+// Icons
 const CoreUIIcons = React.lazy(() => import('./views/components/icons/coreui-icons/CoreUIIcons'))
 const Flags = React.lazy(() => import('./views/components/icons/flags/Flags'))
 const Brands = React.lazy(() => import('./views/components/icons/brands/Brands'))
 
+// Notifications
 const Alerts = React.lazy(() => import('./views/components/notifications/alerts/Alerts'))
 const Badges = React.lazy(() => import('./views/components/notifications/badges/Badges'))
 const Modals = React.lazy(() => import('./views/components/notifications/modals/Modals'))
 const Toasts = React.lazy(() => import('./views/components/notifications/toasts/Toasts'))
 
-// const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
-// const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
-// const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
-// const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
-
 const Widgets = React.lazy(() => import('./views/components/widgets/Widgets'))
 
-const Charts = React.lazy(() => import('./views/components/charts/Charts'))
-const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
-
 const routes = [
   { path: '/', exact: true, name: 'Home' },
   { path: '/dashboard', name: 'Dashboard', component: Dashboard },
@@ -98,10 +96,6 @@ const routes = [
   { path: '/notifications/badges', name: 'Badges', component: Badges },
   { path: '/notifications/modals', name: 'Modals', component: Modals },
   { path: '/notifications/toasts', name: 'Toasts', component: Toasts },
-  // { path: '/login', name: 'Login', component: Login },
-  // { path: '/register', name: 'Register', component: Register },
-  // { path: '/404', name: '404', component: Page404 },
-  // { path: '/500', name: '500', component: Page500 },
   { path: '/widgets', name: 'Widgets', component: Widgets },
 ]