diff --git a/src/App.js b/src/App.js
index f5b22393e..83839fdee 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { useSelector } from 'react-redux'
+import { useNavigation } from './hooks/useNavigation'
 
 import { CSpinner, useColorModes } from '@coreui/react'
 import './scss/style.scss'
@@ -20,6 +21,7 @@ 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)
+  const { refreshAllAssets } = useNavigation()
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
@@ -35,6 +37,16 @@ const App = () => {
     setColorMode(storedTheme)
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
+  // useEffect for background refresh
+  useEffect(() => {
+    // Start background refresh after a short delay to allow initial load
+    const timer = setTimeout(() => {
+      refreshAllAssets()
+    }, 2000)
+
+    return () => clearTimeout(timer)
+  }, [refreshAllAssets])
+
   return (
     <HashRouter>
       <Suspense
diff --git a/src/_nav.js b/src/_nav.js
index 9f8ca150b..1e470c3b6 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -1,451 +1,139 @@
 import React from 'react'
-import CIcon from '@coreui/icons-react'
-import {
-  cilBell,
-  cilCalculator,
-  cilChartPie,
-  cilCursor,
-  cilDescription,
-  cilDrop,
-  cilExternalLink,
-  cilNotes,
-  cilPencil,
-  cilPuzzle,
+import { CNavItem, CNavTitle, CNavGroup } from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
+import { 
+  cilHome, 
+  cilSettings, 
+  cilAnimal,
+  cilChart,
   cilSpeedometer,
-  cilStar,
+  cilFolder,
+  cilDescription,
+  cilBug
 } from '@coreui/icons'
-import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
+import DynamicNavButtons from './components/DynamicNavButtons'
 
-const _nav = [
-  {
-    component: CNavItem,
-    name: 'Dashboard',
-    to: '/dashboard',
-    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
-    badge: {
-      color: 'info',
-      text: 'NEW',
-    },
-  },
+export const getNavigation = (departments, onAddDepartment, onAddAsset, dynamicNavItems) => [
+  // Main Navigation Title
   {
     component: CNavTitle,
-    name: 'Theme',
+    name: 'Security Dashboard',
   },
+
+  // Overview Page
   {
     component: CNavItem,
-    name: 'Colors',
-    to: '/theme/colors',
-    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+    name: 'Overview',
+    to: '/overview',
+    icon: <CIcon icon={cilChart} customClassName="nav-icon"/>,
   },
+
+  // Asset Management Buttons
   {
-    component: CNavItem,
-    name: 'Typography',
-    to: '/theme/typography',
-    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+    component: DynamicNavButtons,
+    props: {
+      onAddDepartment,
+      onAddAsset,
+      departments
+    }
   },
-  {
+
+  // Dynamic Department and Asset Items
+  ...dynamicNavItems,
+
+  // Management Section Title
+  ...(dynamicNavItems.length > 0 ? [{
     component: CNavTitle,
-    name: 'Components',
-  },
-  {
-    component: CNavGroup,
-    name: 'Base',
-    to: '/base',
-    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
-    items: [
-      {
-        component: CNavItem,
-        name: 'Accordion',
-        to: '/base/accordion',
-      },
-      {
-        component: CNavItem,
-        name: 'Breadcrumb',
-        to: '/base/breadcrumbs',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Calendar'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/calendar/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Cards',
-        to: '/base/cards',
-      },
-      {
-        component: CNavItem,
-        name: 'Carousel',
-        to: '/base/carousels',
-      },
-      {
-        component: CNavItem,
-        name: 'Collapse',
-        to: '/base/collapses',
-      },
-      {
-        component: CNavItem,
-        name: 'List group',
-        to: '/base/list-groups',
-      },
-      {
-        component: CNavItem,
-        name: 'Navs & Tabs',
-        to: '/base/navs',
-      },
-      {
-        component: CNavItem,
-        name: 'Pagination',
-        to: '/base/paginations',
-      },
-      {
-        component: CNavItem,
-        name: 'Placeholders',
-        to: '/base/placeholders',
-      },
-      {
-        component: CNavItem,
-        name: 'Popovers',
-        to: '/base/popovers',
-      },
-      {
-        component: CNavItem,
-        name: 'Progress',
-        to: '/base/progress',
-      },
-      {
-        component: CNavItem,
-        name: 'Smart Pagination',
-        href: 'https://coreui.io/react/docs/components/smart-pagination/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Smart Table'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/smart-table/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Spinners',
-        to: '/base/spinners',
-      },
-      {
-        component: CNavItem,
-        name: 'Tables',
-        to: '/base/tables',
-      },
-      {
-        component: CNavItem,
-        name: 'Tabs',
-        to: '/base/tabs',
-      },
-      {
-        component: CNavItem,
-        name: 'Tooltips',
-        to: '/base/tooltips',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Virtual Scroller'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/virtual-scroller/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-    ],
-  },
+    name: 'Management',
+  }] : []),
+
+  // Data Management
   {
-    component: CNavGroup,
-    name: 'Buttons',
-    to: '/buttons',
-    icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
-    items: [
-      {
-        component: CNavItem,
-        name: 'Buttons',
-        to: '/buttons/buttons',
-      },
-      {
-        component: CNavItem,
-        name: 'Buttons groups',
-        to: '/buttons/button-groups',
-      },
-      {
-        component: CNavItem,
-        name: 'Dropdowns',
-        to: '/buttons/dropdowns',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Loading Button'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/components/loading-button/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-    ],
+    component: CNavItem,
+    name: 'Data Management',
+    to: '/datamanagement',
+    icon: <CIcon icon={cilSettings} customClassName="nav-icon"/>,
   },
-  {
-    component: CNavGroup,
-    name: 'Forms',
-    icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-    items: [
-      {
-        component: CNavItem,
-        name: 'Form Control',
-        to: '/forms/form-control',
-      },
-      {
-        component: CNavItem,
-        name: 'Select',
-        to: '/forms/select',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Multi Select'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/multi-select/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: 'Checks & Radios',
-        to: '/forms/checks-radios',
-      },
-      {
-        component: CNavItem,
-        name: 'Range',
-        to: '/forms/range',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Range Slider'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/range-slider/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
-        },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Rating'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/rating/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
+
+  // Security Tools Section (if there are assets)
+  ...(dynamicNavItems.length > 0 ? [
+    {
+      component: CNavTitle,
+      name: 'Security Tools',
+    },
+    {
+      component: CNavGroup,
+      name: 'Vulnerability Management',
+      icon: <CIcon icon={cilBug} customClassName="nav-icon"/>,
+      items: [
+        {
+          component: CNavItem,
+          name: 'Scan Results',
+          to: '#',
+          disabled: true,
+          badge: {
+            color: 'secondary',
+            text: 'COMING SOON',
+          },
         },
-      },
-      {
-        component: CNavItem,
-        name: 'Input Group',
-        to: '/forms/input-group',
-      },
-      {
-        component: CNavItem,
-        name: 'Floating Labels',
-        to: '/forms/floating-labels',
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Date Picker'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/date-picker/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
+        {
+          component: CNavItem,
+          name: 'CVE Database',
+          to: '#',
+          disabled: true,
+          badge: {
+            color: 'secondary',
+            text: 'COMING SOON',
+          },
         },
-      },
-      {
-        component: CNavItem,
-        name: 'Date Range Picker',
-        href: 'https://coreui.io/react/docs/forms/date-range-picker/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
+        {
+          component: CNavItem,
+          name: 'Risk Assessment',
+          to: '#',
+          disabled: true,
+          badge: {
+            color: 'secondary',
+            text: 'COMING SOON',
+          },
+        }
+      ]
+    },
+    {
+      component: CNavGroup,
+      name: 'Security Analytics',
+      icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon"/>,
+      items: [
+        {
+          component: CNavItem,
+          name: 'Threat Intelligence',
+          to: '#',
+          disabled: true,
+          badge: {
+            color: 'secondary',
+            text: 'COMING SOON',
+          },
         },
-      },
-      {
-        component: CNavItem,
-        name: (
-          <React.Fragment>
-            {'Time Picker'}
-            <CIcon icon={cilExternalLink} size="sm" className="ms-2" />
-          </React.Fragment>
-        ),
-        href: 'https://coreui.io/react/docs/forms/time-picker/',
-        badge: {
-          color: 'danger',
-          text: 'PRO',
+        {
+          component: CNavItem,
+          name: 'Attack Patterns',
+          to: '#',
+          disabled: true,
+          badge: {
+            color: 'secondary',
+            text: 'COMING SOON',
+          },
         },
-      },
-      {
-        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" />,
-  },
-  {
-    component: CNavGroup,
-    name: 'Icons',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
-    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" />,
-    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" />,
-    badge: {
-      color: 'info',
-      text: 'NEW',
-    },
-  },
-  {
-    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: 'Docs',
-    href: 'https://coreui.io/react/docs/templates/installation/',
-    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
-  },
-]
-
-export default _nav
+        {
+          component: CNavItem,
+          name: 'Security Metrics',
+          to: '#',
+          disabled: true,
+          badge: {
+            color: 'secondary',
+            text: 'COMING SOON',
+          },
+        }
+      ]
+    }
+  ] : [])
+]
\ No newline at end of file
diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js
index d37de8ce9..7328ba8c3 100644
--- a/src/components/AppBreadcrumb.js
+++ b/src/components/AppBreadcrumb.js
@@ -1,12 +1,15 @@
 import React from 'react'
-import { useLocation } from 'react-router-dom'
-
-import routes from '../routes'
-
+import { useLocation, useParams } from 'react-router-dom'
 import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilHome, cilFolder, cilDescription, cilSettings } from '@coreui/icons'
+import routes from '../routes'
+import { useNavigation } from '../hooks/useNavigation'
 
 const AppBreadcrumb = () => {
   const currentLocation = useLocation().pathname
+  const { assetId } = useParams()
+  const { assets, departments } = useNavigation()
 
   const getRouteName = (pathname, routes) => {
     const currentRoute = routes.find((route) => route.path === pathname)
@@ -15,17 +18,78 @@ const AppBreadcrumb = () => {
 
   const getBreadcrumbs = (location) => {
     const breadcrumbs = []
-    location.split('/').reduce((prev, curr, index, array) => {
+    
+    // Handle root/overview case - don't add extra breadcrumbs
+    if (location === '/' || location === '/overview') {
+      return breadcrumbs // Return empty array, the "Overview" will be shown as base
+    }
+
+    // Handle special dynamic routes
+    if (location.startsWith('/asset/')) {
+      const asset = assets.find(a => a.id === assetId)
+      if (asset) {
+        // Add department breadcrumb
+        breadcrumbs.push({
+          pathname: '#',
+          name: asset.department,
+          active: false,
+          icon: cilFolder
+        })
+        // Add asset breadcrumb
+        breadcrumbs.push({
+          pathname: location,
+          name: asset.name,
+          active: true,
+          icon: cilDescription
+        })
+      }
+      return breadcrumbs
+    }
+
+    // Handle standard routes
+    const pathSegments = location.split('/').filter(segment => segment !== '')
+    
+    // Skip if this is just the overview page
+    if (pathSegments.length === 1 && pathSegments[0] === 'overview') {
+      return breadcrumbs
+    }
+    
+    pathSegments.reduce((prev, curr, index, array) => {
       const currentPathname = `${prev}/${curr}`
-      const routeName = getRouteName(currentPathname, routes)
-      routeName &&
+      let routeName = getRouteName(currentPathname, routes)
+      let icon = null
+
+      // Set appropriate icons for known routes
+      switch (currentPathname) {
+        case '/datamanagement':
+          icon = cilSettings
+          routeName = 'Data Management'
+          break
+        default:
+          if (departments.includes(curr)) {
+            icon = cilFolder
+          } else {
+            icon = cilDescription
+          }
+      }
+
+      // If route name not found, try to match department or asset names
+      if (!routeName && departments.includes(curr)) {
+        routeName = curr
+      }
+
+      if (routeName) {
         breadcrumbs.push({
           pathname: currentPathname,
           name: routeName,
-          active: index + 1 === array.length ? true : false,
+          active: index + 1 === array.length,
+          icon: icon
         })
+      }
+      
       return currentPathname
-    })
+    }, '')
+    
     return breadcrumbs
   }
 
@@ -33,13 +97,27 @@ const AppBreadcrumb = () => {
 
   return (
     <CBreadcrumb className="my-0">
-      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
+      {/* Home/Overview breadcrumb - only show if not already on overview */}
+      {currentLocation !== '/' && currentLocation !== '/overview' && (
+        <CBreadcrumbItem href="/#/overview" className="d-flex align-items-center">
+          <CIcon icon={cilHome} size="sm" className="me-1" />
+          Overview
+        </CBreadcrumbItem>
+      )}
+      
       {breadcrumbs.map((breadcrumb, index) => {
         return (
           <CBreadcrumbItem
-            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
+            {...(breadcrumb.active 
+              ? { active: true } 
+              : { href: `/#${breadcrumb.pathname}` }
+            )}
             key={index}
+            className="d-flex align-items-center"
           >
+            {breadcrumb.icon && (
+              <CIcon icon={breadcrumb.icon} size="sm" className="me-1" />
+            )}
             {breadcrumb.name}
           </CBreadcrumbItem>
         )
@@ -48,4 +126,4 @@ const AppBreadcrumb = () => {
   )
 }
 
-export default React.memo(AppBreadcrumb)
+export default React.memo(AppBreadcrumb)
\ No newline at end of file
diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js
index 217c5a04c..d0285fabf 100644
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -1,23 +1,83 @@
 import React from 'react'
-import { CFooter } from '@coreui/react'
+import { CFooter, CBadge } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilShieldAlt, cilCheckCircle } from '@coreui/icons'
+import { useNavigation } from '../hooks/useNavigation'
 
 const AppFooter = () => {
+  const { assets } = useNavigation()
+  
+  // Calculate security metrics for footer
+  const securityStatus = React.useMemo(() => {
+    if (assets.length === 0) return { status: 'unknown', message: 'No assets scanned' }
+    
+    const totalVulns = assets.reduce((sum, asset) => 
+      sum + (asset.vulnerabilities?.cves?.length || 0), 0
+    )
+    
+    const criticalVulns = assets.reduce((sum, asset) => 
+      sum + (asset.vulnerabilities?.cves?.filter(cve => cve.cvss_score >= 7.0)?.length || 0), 0
+    )
+    
+    if (criticalVulns > 0) {
+      return { status: 'critical', message: `${criticalVulns} critical vulnerabilities detected` }
+    } else if (totalVulns > 0) {
+      return { status: 'warning', message: `${totalVulns} vulnerabilities detected` }
+    } else {
+      return { status: 'secure', message: 'All systems secure' }
+    }
+  }, [assets])
+
+  const getStatusColor = () => {
+    switch (securityStatus.status) {
+      case 'secure': return 'success'
+      case 'warning': return 'warning'
+      case 'critical': return 'danger'
+      default: return 'secondary'
+    }
+  }
+
+  const getStatusIcon = () => {
+    switch (securityStatus.status) {
+      case 'secure': return cilCheckCircle
+      default: return cilShieldAlt
+    }
+  }
+
   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 className="d-flex align-items-center">
+        <CIcon icon={cilShieldAlt} className="me-2" />
+        <span className="me-2">CyberSec Dashboard</span>
+        <span className="text-muted">&copy; 2025 Security Operations.</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 className="ms-auto d-flex align-items-center gap-3">
+        {/* Security Status Indicator */}
+        <div className="d-flex align-items-center gap-2">
+          <CIcon 
+            icon={getStatusIcon()} 
+            size="sm" 
+            className={`text-${getStatusColor()}`}
+          />
+          <small className="text-muted">Status:</small>
+          <CBadge color={getStatusColor()} className="me-2">
+            {securityStatus.message}
+          </CBadge>
+        </div>
+        
+        {/* Asset Count */}
+        <div className="d-flex align-items-center gap-1">
+          <small className="text-muted">Assets:</small>
+          <CBadge color="info">{assets.length}</CBadge>
+        </div>
+        
+        {/* Last Updated */}
+        <small className="text-muted">
+          Updated: {new Date().toLocaleTimeString()}
+        </small>
       </div>
     </CFooter>
   )
 }
 
-export default React.memo(AppFooter)
+export default React.memo(AppFooter)
\ No newline at end of file
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index b10bd7e12..dbb3249e1 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import {
@@ -12,29 +12,54 @@ import {
   CHeaderToggler,
   CNavLink,
   CNavItem,
+  CBadge,
+  CButton,
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CModalFooter,
+  CAlert,
+  CListGroup,
+  CListGroupItem,
+  CProgress,
   useColorModes,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import {
-  cilBell,
+  cilAnimal,
+  cilShieldAlt,
+  cilBug,
   cilContrast,
-  cilEnvelopeOpen,
-  cilList,
   cilMenu,
   cilMoon,
   cilSun,
+  cilWarning,
+  cilCheckCircle,
+  cilTriangle,
+  cilSettings,
+  cilReload,
+  cilChart,
+  cilBell
 } from '@coreui/icons'
 
 import { AppBreadcrumb } from './index'
-import { AppHeaderDropdown } from './header/index'
+import { useNavigation } from '../hooks/useNavigation'
 
 const AppHeader = () => {
   const headerRef = useRef()
   const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-
+  const { assets } = useNavigation()
+  
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
 
+  // Security Status States
+  const [securityAlerts, setSecurityAlerts] = useState([])
+  const [showAlertsModal, setShowAlertsModal] = useState(false)
+  const [showSecurityStatus, setShowSecurityStatus] = useState(false)
+  const [lastScanTime, setLastScanTime] = useState(new Date())
+
   useEffect(() => {
     document.addEventListener('scroll', () => {
       headerRef.current &&
@@ -42,100 +67,380 @@ const AppHeader = () => {
     })
   }, [])
 
+  // Calculate security metrics from assets
+  const securityMetrics = React.useMemo(() => {
+    let totalVulns = 0
+    let criticalVulns = 0
+    let highRiskAssets = 0
+
+    assets.forEach(asset => {
+      if (asset.vulnerabilities?.cves) {
+        totalVulns += asset.vulnerabilities.cves.length
+        criticalVulns += asset.vulnerabilities.cves.filter(cve => 
+          cve.cvss_score >= 7.0
+        ).length
+      }
+      if (asset.risk_level >= 7) {
+        highRiskAssets++
+      }
+    })
+
+    const overallRisk = assets.length > 0 
+      ? Math.round(assets.reduce((sum, asset) => sum + (asset.risk_level || 0), 0) / assets.length)
+      : 0
+
+    return {
+      totalAssets: assets.length,
+      totalVulnerabilities: totalVulns,
+      criticalVulnerabilities: criticalVulns,
+      highRiskAssets,
+      overallRiskScore: overallRisk,
+      securityStatus: overallRisk <= 3 ? 'good' : overallRisk <= 6 ? 'warning' : 'critical'
+    }
+  }, [assets])
+
+  // Simulate security alerts (in real app, this would come from your backend)
+  useEffect(() => {
+    const alerts = []
+    
+    assets.forEach(asset => {
+      if (asset.vulnerabilities?.cves) {
+        asset.vulnerabilities.cves.forEach(cve => {
+          if (cve.cvss >= 7.0) { // Only show high/critical vulnerabilities
+            alerts.push({
+              id: `${asset.id}-${cve.cve_id}`,
+              type: cve.cvss >= 9.0 ? 'critical' : 'high',
+              title: `${cve.cve_id} - ${asset.name}`,
+              message: `CVSS: ${cve.cvss} - ${cve.description?.substring(0, 100)}...`,
+              timestamp: new Date(asset.last_updated || Date.now()),
+              assetId: asset.id,
+              assetName: asset.name,
+              cveId: cve.cve_id,
+              cvssScore: cve.cvss
+            })
+          }
+        })
+      }
+    })
+    
+    // Sort by CVSS score descending, then by timestamp
+    alerts.sort((a, b) => {
+      if (b.cvssScore !== a.cvssScore) {
+        return b.cvssScore - a.cvssScore
+      }
+      return b.timestamp - a.timestamp
+    })
+    
+    setSecurityAlerts(alerts.slice(0, 20)) // Limit to 20 most critical
+  }, [assets])
+
+  const getSecurityStatusColor = () => {
+    switch (securityMetrics.securityStatus) {
+      case 'good': return 'success'
+      case 'warning': return 'warning'
+      case 'critical': return 'danger'
+      default: return 'secondary'
+    }
+  }
+
+  const getSecurityStatusIcon = () => {
+    switch (securityMetrics.securityStatus) {
+      case 'good': return cilCheckCircle
+      case 'warning': return cilTriangle
+      case 'critical': return cilWarning
+      default: return cilShieldAlt
+    }
+  }
+
   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">
-          <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>
-          <AppHeaderDropdown />
-        </CHeaderNav>
-      </CContainer>
-      <CContainer className="px-4" fluid>
-        <AppBreadcrumb />
-      </CContainer>
-    </CHeader>
+    <>
+      <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>
+          
+          {/* Main Navigation */}
+          <CHeaderNav className="d-none d-md-flex">
+            <CNavItem>
+              <CNavLink to="/overview" as={NavLink}>
+                <CIcon icon={cilChart} className="me-1" />
+                Overview
+              </CNavLink>
+            </CNavItem>
+            <CNavItem>
+              <CNavLink to="/datamanagement" as={NavLink}>
+                <CIcon icon={cilSettings} className="me-1" />
+                Management
+              </CNavLink>
+            </CNavItem>
+          </CHeaderNav>
+
+          {/* Security Tools */}
+            <CHeaderNav className="ms-auto">
+              {/* Security Alerts */}
+              <CNavItem>
+                <CNavLink 
+                  href="#" 
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setShowAlertsModal(true)
+                  }}
+                  className="position-relative"
+                  title="Security Alerts"
+                >
+                  <CIcon icon={cilBell} size="lg" />
+                  {securityAlerts.length > 0 && (
+                    <CBadge 
+                      color="danger" 
+                      position="top-end" 
+                      shape="rounded-pill"
+                      className="position-absolute"
+                    >
+                      {securityAlerts.length}
+                    </CBadge>
+                  )}
+                </CNavLink>
+              </CNavItem>
+
+              {/* Security Status Indicator */}
+              <CNavItem>
+                <CNavLink 
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setShowSecurityStatus(true)
+                  }}
+                  className="position-relative"
+                  title="Security Status Overview"
+                >
+                  <CIcon 
+                    icon={getSecurityStatusIcon()} 
+                    size="lg" 
+                    className={`text-${getSecurityStatusColor()}`}
+                  />
+                  <CBadge 
+                    color={getSecurityStatusColor()} 
+                    className="position-absolute top-0 start-100 translate-middle"
+                    style={{ fontSize: '0.6rem', padding: '0.2rem 0.4rem' }}
+                  >
+                    {securityMetrics.overallRiskScore}
+                  </CBadge>
+                </CNavLink>
+              </CNavItem>
+            </CHeaderNav>
+
+          {/* Theme Switcher */}
+          <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>
+          </CHeaderNav>
+        </CContainer>
+        
+        {/* Security Status Bar */}
+        {securityMetrics.totalAssets > 0 && (
+          <CContainer className="px-4 py-2 bg-body-tertiary" fluid>
+            <div className="d-flex align-items-center justify-content-between">
+              <div className="d-flex align-items-center gap-3">
+                <small className="text-muted">Security Overview:</small>
+                <div className="d-flex align-items-center gap-1">
+                  <CIcon icon={cilShieldAlt} size="sm" />
+                  <small>{securityMetrics.totalAssets} Assets</small>
+                </div>
+                <div className="d-flex align-items-center gap-1">
+                  <CIcon icon={cilBug} size="sm" className="text-danger" />
+                  <small>{securityMetrics.totalVulnerabilities} Vulnerabilities</small>
+                </div>
+                {securityMetrics.criticalVulnerabilities > 0 && (
+                  <div className="d-flex align-items-center gap-1">
+                    <CIcon icon={cilWarning} size="sm" className="text-danger" />
+                    <small className="text-danger">{securityMetrics.criticalVulnerabilities} Critical</small>
+                  </div>
+                )}
+              </div>
+              <small className="text-muted">
+                Last scan: {lastScanTime.toLocaleTimeString()}
+              </small>
+            </div>
+          </CContainer>
+        )}
+        
+        {/* Breadcrumb */}
+        <CContainer className="px-4" fluid>
+          <AppBreadcrumb />
+        </CContainer>
+      </CHeader>
+
+      {/* Security Alerts Modal */}
+      <CModal visible={showAlertsModal} onClose={() => setShowAlertsModal(false)} size="lg">
+        <CModalHeader>
+          <CModalTitle>Security Alerts</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          {securityAlerts.length > 0 ? (
+            <CListGroup>
+              {securityAlerts.map(alert => (
+                <CListGroupItem key={alert.id} className="d-flex justify-content-between align-items-start">
+                  <div className="ms-2 me-auto">
+                    <div className="fw-bold d-flex align-items-center gap-2">
+                      <CIcon 
+                        icon={alert.type === 'critical' ? cilWarning : cilTriangle} 
+                        className={alert.type === 'critical' ? 'text-danger' : 'text-warning'}
+                      />
+                      <code className="text-primary">{alert.cveId}</code>
+                      <span>on {alert.assetName}</span>
+                    </div>
+                    <div className="d-flex gap-2 my-1">
+                      <CBadge 
+                        color={alert.cvssScore >= 9.0 ? 'danger' : 'warning'}
+                      >
+                        CVSS: {alert.cvssScore}
+                      </CBadge>
+                      <CBadge color={alert.type === 'critical' ? 'danger' : 'warning'}>
+                        {alert.type.toUpperCase()}
+                      </CBadge>
+                    </div>
+                    <p className="mb-1 small">{alert.message}</p>
+                    <small className="text-muted">
+                      {alert.timestamp.toLocaleString()}
+                    </small>
+                  </div>
+                  <CButton
+                    color="primary"
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      setShowAlertsModal(false)
+                      navigate(`/asset/${alert.assetId}`)
+                    }}
+                  >
+                    View Asset
+                  </CButton>
+                </CListGroupItem>
+              ))}
+            </CListGroup>
+          ) : (
+            <CAlert color="success">
+              <CIcon icon={cilCheckCircle} className="me-2" />
+              No critical or high-risk vulnerabilities found.
+            </CAlert>
+          )}
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setShowAlertsModal(false)}>
+            Close
+          </CButton>
+        </CModalFooter>
+      </CModal>
+
+      {/* Security Status Modal */}
+      <CModal visible={showSecurityStatus} onClose={() => setShowSecurityStatus(false)} size="lg">
+        <CModalHeader>
+          <CModalTitle>Security Status Dashboard</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <div className="row">
+            <div className="col-md-6 mb-3">
+              <div className="d-flex justify-content-between mb-2">
+                <span>Overall Security Score</span>
+                <strong className={`text-${getSecurityStatusColor()}`}>
+                  {securityMetrics.overallRiskScore}/10
+                </strong>
+              </div>
+              <CProgress 
+                color={getSecurityStatusColor()} 
+                value={securityMetrics.overallRiskScore * 10}
+              />
+            </div>
+            <div className="col-md-6 mb-3">
+              <div className="d-flex justify-content-between mb-2">
+                <span>High Risk Assets</span>
+                <strong className="text-danger">
+                  {securityMetrics.highRiskAssets}/{securityMetrics.totalAssets}
+                </strong>
+              </div>
+              <CProgress 
+                color="danger" 
+                value={securityMetrics.totalAssets > 0 ? (securityMetrics.highRiskAssets / securityMetrics.totalAssets) * 100 : 0}
+              />
+            </div>
+          </div>
+          
+          <div className="row mt-4">
+            <div className="col-6 col-md-3 text-center">
+              <div className="h4 mb-0">{securityMetrics.totalAssets}</div>
+              <small className="text-muted">Total Assets</small>
+            </div>
+            <div className="col-6 col-md-3 text-center">
+              <div className="h4 mb-0 text-warning">{securityMetrics.totalVulnerabilities}</div>
+              <small className="text-muted">Vulnerabilities</small>
+            </div>
+            <div className="col-6 col-md-3 text-center">
+              <div className="h4 mb-0 text-danger">{securityMetrics.criticalVulnerabilities}</div>
+              <small className="text-muted">Critical</small>
+            </div>
+            <div className="col-6 col-md-3 text-center">
+              <div className="h4 mb-0 text-danger">{securityMetrics.highRiskAssets}</div>
+              <small className="text-muted">High Risk</small>
+            </div>
+          </div>
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setShowSecurityStatus(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">
+            <CIcon icon={cilReload} className="me-2" />
+            Refresh Status
+          </CButton>
+        </CModalFooter>
+      </CModal>
+    </>
   )
 }
 
-export default AppHeader
+export default AppHeader
\ No newline at end of file
diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 021cb52c3..10dfc7f81 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-
 import {
   CCloseButton,
   CSidebar,
@@ -8,25 +7,49 @@ import {
   CSidebarFooter,
   CSidebarHeader,
   CSidebarToggler,
+  CBadge
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
-
+import { cilShieldAlt, cilBug } from '@coreui/icons'
 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'
+import { getNavigation } from '../_nav'
+import { useNavigation } from '../hooks/useNavigation'
 
 const AppSidebar = () => {
   const dispatch = useDispatch()
   const unfoldable = useSelector((state) => state.sidebarUnfoldable)
   const sidebarShow = useSelector((state) => state.sidebarShow)
+  
+  // Use our custom navigation hook
+  const { departments, assets, addDepartment, addAsset, dynamicNavItems } = useNavigation()
+  
+  // Get the complete navigation with dynamic items
+  const navigation = getNavigation(departments, addDepartment, addAsset, dynamicNavItems)
+
+  // Calculate security metrics for sidebar
+  const securityMetrics = React.useMemo(() => {
+    let totalVulns = 0
+    let criticalVulns = 0
+
+    assets.forEach(asset => {
+      if (asset.vulnerabilities?.cves) {
+        totalVulns += asset.vulnerabilities.cves.length
+        criticalVulns += asset.vulnerabilities.cves.filter(cve => 
+          cve.cvss_score >= 7.0
+        ).length
+      }
+    })
+
+    return {
+      totalAssets: assets.length,
+      totalVulnerabilities: totalVulns,
+      criticalVulnerabilities: criticalVulns
+    }
+  }, [assets])
 
   return (
     <CSidebar
-      className="border-end"
+      className="d-print-none sidebar sidebar-fixed"
       colorScheme="dark"
       position="fixed"
       unfoldable={unfoldable}
@@ -36,9 +59,12 @@ const AppSidebar = () => {
       }}
     >
       <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 to="/" className="d-flex align-items-center">
+          <CIcon icon={cilShieldAlt} height={32} className="me-2" />
+          <div className="sidebar-brand-full">
+            <div className="fw-bold text-light">CyberSec</div>
+            <small className="text-light-emphasis">Dashboard</small>
+          </div>
         </CSidebarBrand>
         <CCloseButton
           className="d-lg-none"
@@ -46,14 +72,54 @@ const AppSidebar = () => {
           onClick={() => dispatch({ type: 'set', sidebarShow: false })}
         />
       </CSidebarHeader>
+
+      {/* Security Metrics Header */}
+      {securityMetrics.totalAssets > 0 && (
+        <div className="px-3 py-2 border-bottom border-secondary">
+          <div className="d-flex justify-content-between align-items-center mb-2">
+            <small className="text-light-emphasis">Security Status</small>
+          </div>
+          <div className="row g-2">
+            <div className="col-6">
+              <div className="text-center">
+                <div className="fs-6 fw-semibold text-info">{securityMetrics.totalAssets}</div>
+                <small className="text-light-emphasis">Assets</small>
+              </div>
+            </div>
+            <div className="col-6">
+              <div className="text-center">
+                <div className="fs-6 fw-semibold text-warning">
+                  {securityMetrics.totalVulnerabilities}
+                </div>
+                <small className="text-light-emphasis">Vulns</small>
+              </div>
+            </div>
+          </div>
+          {securityMetrics.criticalVulnerabilities > 0 && (
+            <div className="mt-2 text-center">
+              <CBadge color="danger" className="d-flex align-items-center justify-content-center gap-1">
+                <CIcon icon={cilBug} size="sm" />
+                {securityMetrics.criticalVulnerabilities} Critical
+              </CBadge>
+            </div>
+          )}
+        </div>
+      )}
+
       <AppSidebarNav items={navigation} />
+      
       <CSidebarFooter className="border-top d-none d-lg-flex">
-        <CSidebarToggler
-          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
-        />
+        <div className="d-flex justify-content-between w-100 align-items-center px-3">
+          <small className="text-light-emphasis">
+            v1.0.0
+          </small>
+          <CSidebarToggler
+            onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+          />
+        </div>
       </CSidebarFooter>
     </CSidebar>
   )
 }
 
-export default React.memo(AppSidebar)
+export default React.memo(AppSidebar)
\ No newline at end of file
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 7583abf49..e63a9e897 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,11 +1,10 @@
 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'
+import DynamicNavButtons from './DynamicNavButtons'
 
 export const AppSidebarNav = ({ items }) => {
   const navLink = (name, icon, badge, indent = false) => {
@@ -20,7 +19,7 @@ export const AppSidebarNav = ({ items }) => {
             )}
         {name && name}
         {badge && (
-          <CBadge color={badge.color} className="ms-auto" size="sm">
+          <CBadge color={badge.color} className="ms-auto">
             {badge.text}
           </CBadge>
         )}
@@ -31,13 +30,18 @@ export const AppSidebarNav = ({ items }) => {
   const navItem = (item, index, indent = false) => {
     const { component, name, badge, icon, ...rest } = item
     const Component = component
+    
+    // Handle our custom DynamicNavButtons component
+    if (Component === DynamicNavButtons) {
+      return <Component key={index} {...item.props} />
+    }
+    
     return (
       <Component as="div" key={index}>
         {rest.to || rest.href ? (
           <CNavLink
-            {...(rest.to && { as: NavLink })}
-            {...(rest.href && { target: '_blank', rel: 'noopener noreferrer' })}
-            {...rest}
+            {...(rest.to && { as: NavLink, to: rest.to })}
+            {...(rest.href && { href: rest.href })}
           >
             {navLink(name, icon, badge, indent)}
           </CNavLink>
@@ -53,7 +57,7 @@ export const AppSidebarNav = ({ items }) => {
     const Component = component
     return (
       <Component compact as="div" key={index} toggler={navLink(name, icon)} {...rest}>
-        {items?.map((item, index) =>
+        {item.items?.map((item, index) =>
           item.items ? navGroup(item, index) : navItem(item, index, true),
         )}
       </Component>
diff --git a/src/components/DataManagement.js b/src/components/DataManagement.js
new file mode 100644
index 000000000..06d50fa58
--- /dev/null
+++ b/src/components/DataManagement.js
@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { 
+  CButton, 
+  CCard, 
+  CCardBody, 
+  CCardHeader,
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CModalFooter,
+  CListGroup,
+  CListGroupItem,
+  CBadge
+} from '@coreui/react'
+import { useNavigation } from '../hooks/useNavigation'
+
+const DataManagement = () => {
+  const { 
+    departments, 
+    assets, 
+    removeDepartment, 
+    removeAsset, 
+    clearAllData 
+  } = useNavigation()
+  
+  const [showClearModal, setShowClearModal] = useState(false)
+
+  const handleClearAll = () => {
+    clearAllData()
+    setShowClearModal(false)
+  }
+
+  return (
+    <>
+      <CCard>
+        <CCardHeader>
+          <h4>Data Management</h4>
+        </CCardHeader>
+        <CCardBody>
+          <div className="mb-4">
+            <h5>Departments <CBadge color="info">{departments.length}</CBadge></h5>
+            <CListGroup>
+              {departments.map((dept, index) => {
+                const deptAssets = assets.filter(asset => asset.department === dept)
+                return (
+                  <CListGroupItem key={index} className="d-flex justify-content-between align-items-center">
+                    <span>
+                      {dept} 
+                      <CBadge color="secondary" className="ms-2">
+                        {deptAssets.length} assets
+                      </CBadge>
+                    </span>
+                    <CButton 
+                      size="sm" 
+                      color="danger" 
+                      variant="outline"
+                      onClick={() => removeDepartment(dept)}
+                    >
+                      Remove
+                    </CButton>
+                  </CListGroupItem>
+                )
+              })}
+              {departments.length === 0 && (
+                <CListGroupItem>No departments created yet</CListGroupItem>
+              )}
+            </CListGroup>
+          </div>
+
+          <div className="mb-4">
+            <h5>Assets <CBadge color="info">{assets.length}</CBadge></h5>
+            <CListGroup>
+              {assets.map((asset) => (
+                <CListGroupItem key={asset.id} className="d-flex justify-content-between align-items-center">
+                  <div>
+                    <strong>{asset.name}</strong>
+                    <br />
+                    <small className="text-muted">
+                      Department: {asset.department} | Vendor: {asset.vendor}
+                    </small>
+                  </div>
+                  <CButton 
+                    size="sm" 
+                    color="danger" 
+                    variant="outline"
+                    onClick={() => removeAsset(asset.id)}
+                  >
+                    Remove
+                  </CButton>
+                </CListGroupItem>
+              ))}
+              {assets.length === 0 && (
+                <CListGroupItem>No assets created yet</CListGroupItem>
+              )}
+            </CListGroup>
+          </div>
+
+          <div className="mt-4">
+            <CButton 
+              color="danger" 
+              onClick={() => setShowClearModal(true)}
+              disabled={departments.length === 0 && assets.length === 0}
+            >
+              Clear All Data
+            </CButton>
+          </div>
+        </CCardBody>
+      </CCard>
+
+      {/* Clear All Confirmation Modal */}
+      <CModal visible={showClearModal} onClose={() => setShowClearModal(false)}>
+        <CModalHeader onClose={() => setShowClearModal(false)}>
+          <CModalTitle>Confirm Clear All Data</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          Are you sure you want to clear all departments and assets? This action cannot be undone.
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setShowClearModal(false)}>
+            Cancel
+          </CButton>
+          <CButton color="danger" onClick={handleClearAll}>
+            Clear All Data
+          </CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
+
+export default DataManagement
\ No newline at end of file
diff --git a/src/components/DynamicNavButtons.js b/src/components/DynamicNavButtons.js
new file mode 100644
index 000000000..b0fa86404
--- /dev/null
+++ b/src/components/DynamicNavButtons.js
@@ -0,0 +1,534 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import {
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CModalFooter,
+  CButton,
+  CRow,
+  CCol,
+  CFormLabel,
+  CFormInput,
+  CFormSelect,
+  CCard,
+  CCardBody,
+  CListGroup,
+  CListGroupItem,
+  CSpinner,
+  CAlert,
+  CBadge
+} from '@coreui/react';
+
+const DynamicNavButtons = ({ onAddDepartment, onAddAsset, departments }) => {
+  const [departmentDialogVisible, setDepartmentDialogVisible] = useState(false)
+  const [assetDialogVisible, setAssetDialogVisible] = useState(false)
+  const [departmentName, setDepartmentName] = useState('')
+  
+  // Asset form states
+  const [selectedDepartment, setSelectedDepartment] = useState('')
+
+  // OS Family states
+  const [osFamilies, setOsFamilies] = useState([]);
+  const [selectedOsFamily, setSelectedOsFamily] = useState('');
+  const [osVersion, setOsVersion] = useState('');
+  const [isLoadingOsFamilies, setIsLoadingOsFamilies] = useState(false);
+  
+  // Search and CPE matching states
+  const [searchQuery, setSearchQuery] = useState('');
+  const [cpeMatches, setCpeMatches] = useState([]);
+  const [selectedCpeMatch, setSelectedCpeMatch] = useState(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchError, setSearchError] = useState('');
+  const [showResults, setShowResults] = useState(false);
+  const [isScanning, setIsScanning] = useState(false);
+
+  // Debounced search function
+  const debounce = useCallback((func, delay) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => func.apply(null, args), delay);
+    };
+  }, []);
+
+  // API call to search CPE matches
+  const searchCpeMatches = async (query) => {
+    if (!query.trim()) {
+      setCpeMatches([]);
+      setShowResults(false);
+      return;
+    }
+
+    setIsSearching(true);
+    setSearchError('');
+
+    try {
+      const response = await fetch('http://localhost:8000/api/v1/security/cpe-search', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          device_name: query.trim()
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      setCpeMatches(data.matches || []);
+      setShowResults(true);
+    } catch (error) {
+      console.error('CPE search error:', error);
+      setSearchError('Failed to search devices. Please try again.');
+      setCpeMatches([]);
+      setShowResults(false);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  // Debounced search with 500ms delay
+  const debouncedSearch = useCallback(
+    debounce(searchCpeMatches, 500),
+    [debounce]
+  );
+
+  // Handle search input change
+  const handleSearchChange = (e) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    setSelectedCpeMatch(null); // Clear selection when typing
+    debouncedSearch(query);
+  };
+
+  // Handle CPE match selection
+  const handleCpeMatchSelect = async (cpeMatch) => {
+    setSelectedCpeMatch(cpeMatch);
+    setSearchQuery(cpeMatch.device_name);
+    setShowResults(false);
+    setSearchError('');
+
+    // Fetch OS families for the selected vendor
+    if (cpeMatch.vendor) {
+      await getOsFamilies(cpeMatch.vendor)
+    }
+  };
+
+  // API call to scan device by OS information
+  const scanDeviceByOs = async (deviceName, h_cpe, vendor, model, osFamily, version, department) => {
+    try {
+      const response = await fetch('http://localhost:8000/api/v1/security/scan-by-os', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          device_name: deviceName,
+          h_cpe: h_cpe,
+          vendor: vendor,
+          model: model,
+          os_family: osFamily,
+          version: version,
+          department: department
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const scanData = await response.json();
+      return scanData;
+    } catch (error) {
+      console.error('Error scanning device:', error);
+      throw error;
+    }
+  };
+
+  // API call to get OS families by vendor
+  const getOsFamilies = async (vendor) => {
+    setIsLoadingOsFamilies(true);
+    try {
+      const response = await fetch('http://localhost:8000/api/v1/security/get-os-families', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          vendor: vendor
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      setOsFamilies(data.os_families || []);
+      setSelectedOsFamily(data.default_os_family || '');
+      return data;
+    } catch (error) {
+      console.error('Error fetching OS families:', error);
+      setSearchError('Failed to fetch OS families. Please try again.');
+      setOsFamilies([]);
+      setSelectedOsFamily('');
+    } finally {
+      setIsLoadingOsFamilies(false);
+    }
+  };
+
+  const handleAssetConfirm = async () => {
+    if (!selectedCpeMatch || !selectedDepartment || !selectedOsFamily || !osVersion.trim()) return
+
+    setIsScanning(true)
+    setSearchError('')
+
+    try {
+      const scanResults = await scanDeviceByOs(
+        selectedCpeMatch.device_name,
+        selectedCpeMatch.cpe,
+        selectedCpeMatch.vendor,
+        selectedCpeMatch.model,
+        selectedOsFamily,
+        osVersion.trim(),
+        selectedDepartment
+      )
+      
+      if (!scanResults.success) {
+        throw new Error(scanResults.error_message || 'Scan failed')
+      }
+
+      // Store OS information in the scan results for future refreshes
+      const enhancedResults = {
+        ...scanResults,
+        device: {
+          ...scanResults.device,
+          department: selectedDepartment,
+          os_family: selectedOsFamily,
+          version: osVersion.trim()
+        },
+        // Store scanning parameters for background refreshes
+        scan_params: {
+          device_name: selectedCpeMatch.device_name,
+          vendor: selectedCpeMatch.vendor,
+          model: selectedCpeMatch.model,
+          os_family: selectedOsFamily,
+          version: osVersion.trim()
+        }
+      }
+      
+      // Pass the full API response to addAsset
+      onAddAsset(enhancedResults)
+      
+      // Reset form
+      resetAssetForm()
+      setAssetDialogVisible(false)
+    } catch (error) {
+      setSearchError(`Failed to scan device: ${error.message}`)
+    } finally {
+      setIsScanning(false)
+    }
+  }
+
+  // Reset asset form function
+  const resetAssetForm = () => {
+    setSearchQuery('');
+    setCpeMatches([]);
+    setSelectedCpeMatch(null);
+    setShowResults(false);
+    setSearchError('');
+    setOsFamilies([]);
+    setSelectedOsFamily('');
+    setOsVersion('');
+  };
+
+  // Handle asset dialog cancel
+  const handleAssetCancel = () => {
+    resetAssetForm();
+    setAssetDialogVisible(false);
+  };
+
+  // Department handlers
+  const handleAddDepartment = () => {
+    setDepartmentDialogVisible(true)
+  }
+
+  const handleAddAsset = () => {
+    setAssetDialogVisible(true)
+  }
+
+  const handleDepartmentConfirm = () => {
+    if (departmentName.trim()) {
+      onAddDepartment(departmentName.trim())
+      setDepartmentName('')
+      setDepartmentDialogVisible(false)
+    }
+  }
+
+  const handleDepartmentCancel = () => {
+    setDepartmentName('')
+    setDepartmentDialogVisible(false)
+  }
+
+  return (
+    <>
+      <div className="px-3 py-2">
+        <div className="d-flex gap-2">
+          <CButton 
+            size="sm" 
+            color="primary" 
+            variant="outline"
+            className="flex-fill"
+            onClick={handleAddDepartment}
+          >
+            Add Dept
+          </CButton>
+          <CButton 
+            size="sm" 
+            color="success" 
+            variant="outline"
+            className="flex-fill"
+            onClick={handleAddAsset}
+          >
+            Add Asset
+          </CButton>
+        </div>
+      </div>
+
+      {/* Department Dialog */}
+      <CModal visible={departmentDialogVisible} onClose={handleDepartmentCancel}>
+        <CModalHeader onClose={handleDepartmentCancel}>
+          <CModalTitle>Add Department</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <CFormLabel htmlFor="departmentInput">Department Name</CFormLabel>
+          <CFormInput
+            id="departmentInput"
+            type="text"
+            value={departmentName}
+            onChange={(e) => setDepartmentName(e.target.value)}
+            placeholder="Enter department name..."
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && departmentName.trim()) {
+                handleDepartmentConfirm()
+              }
+            }}
+          />
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={handleDepartmentCancel}>
+            Cancel
+          </CButton>
+          <CButton 
+            color="primary" 
+            onClick={handleDepartmentConfirm}
+            disabled={!departmentName.trim()}
+          >
+            Confirm
+          </CButton>
+        </CModalFooter>
+      </CModal>
+      
+      {/* Asset Dialog */}
+      <CModal visible={assetDialogVisible} onClose={handleAssetCancel} size="lg">
+        <CModalHeader onClose={handleAssetCancel}>
+          <CModalTitle>Add Asset - Security Scan</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          {/* Device Search Section */}
+          <CRow className="mb-4">
+            <CCol md={12}>
+              <CFormLabel htmlFor="deviceSearch">Search Devices</CFormLabel>
+              <div style={{ position: 'relative' }}>
+                <CFormInput
+                  id="deviceSearch"
+                  type="text"
+                  value={searchQuery}
+                  onChange={handleSearchChange}
+                  placeholder="Start typing device name (e.g., 'Cisco router', 'Windows Server')..."
+                  disabled={isScanning}
+                />
+                {isSearching && (
+                  <div style={{ 
+                    position: 'absolute', 
+                    right: '10px', 
+                    top: '50%', 
+                    transform: 'translateY(-50%)' 
+                  }}>
+                    <CSpinner size="sm" />
+                  </div>
+                )}
+              </div>
+              
+              {/* Search Error */}
+              {searchError && (
+                <CAlert color="danger" className="mt-2">
+                  {searchError}
+                </CAlert>
+              )}
+
+              {/* CPE Match Results */}
+              {showResults && cpeMatches.length > 0 && (
+                <CCard className="mt-2" style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                  <CCardBody className="p-0">
+                    <CListGroup flush>
+                      {cpeMatches.map((match, index) => (
+                        <CListGroupItem 
+                          key={index}
+                          action
+                          onClick={() => handleCpeMatchSelect(match)}
+                          style={{ cursor: 'pointer' }}
+                          className={selectedCpeMatch?.cpe === match.cpe ? 'bg-light' : ''}
+                        >
+                          <div className="d-flex justify-content-between align-items-start">
+                            <div className="flex-grow-1">
+                              <div className="fw-bold">{match.device_name}</div>
+                              <div className="text-muted small">
+                                <strong>Vendor:</strong> {match.vendor} | <strong>Model:</strong> {match.model}
+                              </div>
+                              
+                              <div className="text-muted small" style={{ fontSize: '0.75rem' }}>
+                                CPE: {match.cpe}
+                              </div>
+                              
+                            </div>
+                            {/*}
+                            <CBadge 
+                              color={match.score >= 80 ? 'success' : match.score >= 60 ? 'warning' : 'secondary'}
+                              className="ms-2"
+                            >
+                              {match.score}%
+                            </CBadge>
+                            */}
+                          </div>
+                        </CListGroupItem>
+                      ))}
+                    </CListGroup>
+                  </CCardBody>
+                </CCard>
+              )}
+
+              {/* No Results Message */}
+              {showResults && cpeMatches.length === 0 && !isSearching && searchQuery.trim() && (
+                <CAlert color="info" className="mt-2">
+                  No devices found matching your search. Try different keywords.
+                </CAlert>
+              )}
+            </CCol>
+          </CRow>
+
+          {/* Selected Device Info */}
+          {selectedCpeMatch && (
+            <CRow className="mb-3">
+              <CCol md={12}>
+                <CCard className="border-success">
+                  <CCardBody>
+                    <h6 className="text-success">Selected Device:</h6>
+                    <div><strong>Name:</strong> {selectedCpeMatch.device_name}</div>
+                    <div><strong>Vendor:</strong> {selectedCpeMatch.vendor}</div>
+                    <div><strong>Model:</strong> {selectedCpeMatch.model}</div>
+                    <div className="text-muted small mt-1">
+                      <strong>CPE:</strong> {selectedCpeMatch.cpe}
+                    </div>
+                  </CCardBody>
+                </CCard>
+              </CCol>
+            </CRow>
+          )}
+
+          {/* OS Family and Version Selection */}
+          {selectedCpeMatch && (
+            <CRow className="mb-3">
+              <CCol md={6}>
+                <CFormLabel htmlFor="osFamilySelect">Operating System Family *</CFormLabel>
+                <CFormSelect
+                  id="osFamilySelect"
+                  value={selectedOsFamily}
+                  onChange={(e) => setSelectedOsFamily(e.target.value)}
+                  disabled={isScanning || isLoadingOsFamilies}
+                >
+                  <option value="">Select OS family...</option>
+                  {osFamilies.map((family, index) => (
+                    <option key={index} value={family}>
+                      {family}
+                    </option>
+                  ))}
+                </CFormSelect>
+                {isLoadingOsFamilies && (
+                  <div className="mt-1">
+                    <CSpinner size="sm" className="me-2" />
+                    <small className="text-muted">Loading OS families...</small>
+                  </div>
+                )}
+              </CCol>
+              <CCol md={6}>
+                <CFormLabel htmlFor="osVersionInput">OS Version *</CFormLabel>
+                <CFormInput
+                  id="osVersionInput"
+                  type="text"
+                  value={osVersion}
+                  onChange={(e) => setOsVersion(e.target.value)}
+                  placeholder="Enter OS version (e.g., 10.1, 2019, 7.0)..."
+                  disabled={isScanning}
+                />
+              </CCol>
+            </CRow>
+          )}
+
+          {/* Department Selection */}
+          <CRow className="mb-3">
+            <CCol md={12}>
+              <CFormLabel htmlFor="departmentSelect">Department *</CFormLabel>
+              <CFormSelect
+                id="departmentSelect"
+                value={selectedDepartment}
+                onChange={(e) => setSelectedDepartment(e.target.value)}
+                disabled={isScanning}
+              >
+                <option value="">Select department...</option>
+                {departments.map((dept, index) => (
+                  <option key={index} value={dept}>
+                    {dept}
+                  </option>
+                ))}
+              </CFormSelect>
+            </CCol>
+          </CRow>
+
+          {/* Scanning Status */}
+          {isScanning && (
+            <CAlert color="info">
+              <CSpinner size="sm" className="me-2" />
+              Scanning device for vulnerabilities... This may take a few moments.
+            </CAlert>
+          )}
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={handleAssetCancel} disabled={isScanning}>
+            Cancel
+          </CButton>
+          <CButton 
+            color="primary" 
+            onClick={handleAssetConfirm}
+            disabled={!selectedCpeMatch || !selectedDepartment || !selectedOsFamily || !osVersion.trim() || isScanning}
+          >
+            {isScanning ? (
+              <>
+                <CSpinner size="sm" className="me-2" />
+                Scanning...
+              </>
+            ) : (
+              'Scan & Add Asset'
+            )}
+          </CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
+
+export default DynamicNavButtons
\ No newline at end of file
diff --git a/src/hooks/useNavigation.js b/src/hooks/useNavigation.js
new file mode 100644
index 000000000..79fa720eb
--- /dev/null
+++ b/src/hooks/useNavigation.js
@@ -0,0 +1,249 @@
+import { useState, useEffect, useMemo } from 'react'
+import { CNavGroup, CNavItem } from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
+import { cilFolder, cilDescription } from '@coreui/icons'
+
+const DEPARTMENTS_STORAGE_KEY = 'coreui_departments'
+const ASSETS_STORAGE_KEY = 'coreui_assets'
+
+export const useNavigation = () => {
+  // Initialize state from localStorage
+  const [departments, setDepartments] = useState(() => {
+    try {
+      const savedDepartments = localStorage.getItem(DEPARTMENTS_STORAGE_KEY)
+      return savedDepartments ? JSON.parse(savedDepartments) : []
+    } catch (error) {
+      console.error('Error loading departments from localStorage:', error)
+      return []
+    }
+  })
+
+  const [assets, setAssets] = useState(() => {
+    try {
+      const savedAssets = localStorage.getItem(ASSETS_STORAGE_KEY)
+      return savedAssets ? JSON.parse(savedAssets) : []
+    } catch (error) {
+      console.error('Error loading assets from localStorage:', error)
+      return []
+    }
+  })
+
+  // Save departments to localStorage whenever it changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(DEPARTMENTS_STORAGE_KEY, JSON.stringify(departments))
+    } catch (error) {
+      console.error('Error saving departments to localStorage:', error)
+    }
+  }, [departments])
+
+  // Save assets to localStorage whenever it changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(ASSETS_STORAGE_KEY, JSON.stringify(assets))
+    } catch (error) {
+      console.error('Error saving assets to localStorage:', error)
+    }
+  }, [assets])
+
+  const addDepartment = (departmentName) => {
+    if (!departments.includes(departmentName)) {
+      setDepartments(prev => [...prev, departmentName])
+    }
+  }
+
+  const addAsset = (apiResponse) => {
+    // Transform API response to match your current asset structure
+    const asset = {
+      id: apiResponse.device?.id?.toString() || `asset-${Date.now()}`,
+      name: apiResponse.device?.name || 'Unknown Device',
+      vendor: apiResponse.device?.vendor || 'Unknown Vendor',
+      model: apiResponse.device?.model || 'Unknown Model',
+      version: apiResponse.device?.version || '',
+      type: apiResponse.device?.type || 'Unknown',
+      department: apiResponse.device?.department || '',
+      description: apiResponse.device?.description || '',
+      risk_level: apiResponse.device?.risk_level || 0,
+      os_family: apiResponse.device?.os_family || '',
+
+      // Store scan parameters for background refreshes
+      scan_params: apiResponse.scan_params || {},
+      
+      // Store full API response for detailed view
+      vulnerabilities: {
+        cves: apiResponse.cves || [],
+        cwes: apiResponse.cwes || [],
+        capecs: apiResponse.capecs || [],
+        attacks: apiResponse.attacks || []
+      },
+      statistics: apiResponse.statistics || {},
+      scan_time: apiResponse.scan_time || 0,
+      last_updated: new Date().toISOString(),
+      
+      // Keep backward compatibility
+      deviceType: apiResponse.device?.type || 'Unknown'
+    }
+    
+    setAssets(prev => [...prev, asset])
+  }
+
+  // Add new function to update existing asset
+  const updateAsset = (assetId, apiResponse) => {
+    setAssets(prev => prev.map(asset => {
+      if (asset.id === assetId) {
+        return {
+          ...asset,
+          // Update vulnerability data
+          vulnerabilities: {
+            cves: apiResponse.cves || [],
+            cwes: apiResponse.cwes || [],
+            capecs: apiResponse.capecs || [],
+            attacks: apiResponse.attacks || []
+          },
+          statistics: apiResponse.statistics || {},
+          scan_time: apiResponse.scan_time || 0,
+          last_updated: new Date().toISOString(),
+          // Update device info if provided
+          ...(apiResponse.device && {
+            risk_level: apiResponse.device.risk_level,
+            description: apiResponse.device.description
+          })
+        }
+      }
+      return asset
+    }))
+  }
+
+  // Add background refresh function
+  const refreshAllAssets = async () => {
+    for (const asset of assets) {
+      try {
+        // Skip if recently updated (less than 5 minutes ago)
+        if (asset.last_updated) {
+          const lastUpdate = new Date(asset.last_updated)
+          const now = new Date()
+          const diffMinutes = (now - lastUpdate) / (1000 * 60)
+          if (diffMinutes < 5) continue
+        }
+
+        // Use the new scan-by-os endpoint if we have scan parameters
+        if (asset.scan_params && asset.scan_params.os_family) {
+          const response = await fetch('http://localhost:8000/api/v1/security/scan-by-os', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              device_name: asset.scan_params.device_name || asset.name,
+              vendor: asset.scan_params.vendor || asset.vendor,
+              model: asset.scan_params.model || asset.model,
+              os_family: asset.scan_params.os_family,
+              version: asset.scan_params.version || asset.version,
+              department: asset.department
+            })
+          })
+
+          if (response.ok) {
+            const apiResponse = await response.json()
+            if (apiResponse.success) {
+              updateAsset(asset.id, apiResponse)
+            }
+          }
+        }
+        // Fallback to old CPE method if no OS parameters available
+        else if (asset.cpe) {
+          const response = await fetch('http://localhost:8000/api/v1/security/scan-by-cpe', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              cpe: asset.cpe,
+              device_name: asset.name,
+              department: asset.department
+            })
+          })
+
+          if (response.ok) {
+            const apiResponse = await response.json()
+            if (apiResponse.success) {
+              updateAsset(asset.id, apiResponse)
+            }
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to refresh asset ${asset.name}:`, error)
+      }
+    }
+  }
+
+  // Function to clear all data (useful for testing or reset functionality)
+  const clearAllData = () => {
+    setDepartments([])
+    setAssets([])
+    localStorage.removeItem(DEPARTMENTS_STORAGE_KEY)
+    localStorage.removeItem(ASSETS_STORAGE_KEY)
+  }
+
+  // Function to remove a specific department and its assets
+  const removeDepartment = (departmentName) => {
+    setDepartments(prev => prev.filter(dept => dept !== departmentName))
+    setAssets(prev => prev.filter(asset => asset.department !== departmentName))
+  }
+
+  // Function to remove a specific asset
+  const removeAsset = (assetId) => {
+    setAssets(prev => prev.filter(asset => asset.id !== assetId))
+  }
+
+  const dynamicNavItems = useMemo(() => {
+    const navItems = []
+
+    departments.forEach(department => {
+      const departmentAssets = assets.filter(asset => asset.department === department)
+      
+      if (departmentAssets.length > 0) {
+        navItems.push({
+          component: CNavGroup,
+          name: department,
+          icon: <CIcon icon={cilFolder} customClassName="nav-icon"/>,
+          items: departmentAssets.map(asset => ({
+            component: CNavItem,
+            name: asset.name,
+            to: `/asset/${asset.id}`,
+            icon: <CIcon icon={cilDescription} customClassName="nav-icon"/>,
+          }))
+        })
+      } else {
+        // Show department even if no assets yet
+        navItems.push({
+          component: CNavGroup,
+          name: department,
+          icon: <CIcon icon={cilFolder} customClassName="nav-icon"/>,
+          items: [{
+            component: CNavItem,
+            name: 'No assets yet',
+            to: '#',
+            disabled: true,
+            style: { fontStyle: 'italic', opacity: 0.6 }
+          }]
+        })
+      }
+    })
+
+    return navItems
+  }, [departments, assets])
+
+  return {
+    departments,
+    assets,
+    addDepartment,
+    addAsset,
+    updateAsset,
+    refreshAllAssets,
+    removeDepartment,
+    removeAsset,
+    clearAllData,
+    dynamicNavItems
+  }
+}
\ No newline at end of file
diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js
index 19fbf225f..438a7c510 100644
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -1,3 +1,24 @@
+/*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*/
+
 import React from 'react'
 import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
 
@@ -16,4 +37,4 @@ const DefaultLayout = () => {
   )
 }
 
-export default DefaultLayout
+export default DefaultLayout
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
index d2e9d6479..0bfa3fcb7 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,5 +1,12 @@
+import { element } from 'prop-types'
 import React from 'react'
 
+// mine
+const Overview = React.lazy(() => import('./views/overview/Overview'))
+const AssetView = React.lazy(() => import('./views/assets/AssetView'))
+const DataManagement = React.lazy(() => import('./components/DataManagement'))
+
+// pre existent
 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'))
@@ -52,7 +59,13 @@ const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
 const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
 
 const routes = [
-  { path: '/', exact: true, name: 'Home' },
+  { path: '/', name: 'Overview', element: Overview },
+  // mine
+  { path: '/overview', name: 'Overview', element: Overview},
+  { path: '/asset/:assetId', name: 'Asset', element: AssetView },
+  { path: '/datamanagement', name: 'Data Management', element: DataManagement },
+
+  // pre existent
   { path: '/dashboard', name: 'Dashboard', element: Dashboard },
   { path: '/theme', name: 'Theme', element: Colors, exact: true },
   { path: '/theme/colors', name: 'Colors', element: Colors },
@@ -99,4 +112,4 @@ const routes = [
   { path: '/widgets', name: 'Widgets', element: Widgets },
 ]
 
-export default routes
+export default routes
\ No newline at end of file
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 6b8f2b2e5..fe1e843a2 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -65,3 +65,230 @@ body {
     --cui-footer-bg: var(--cui-body-bg);
   }
 }
+
+// Cybersecurity Theme Enhancements
+:root {
+  --cybersec-primary: #0066cc;
+  --cybersec-danger: #dc3545;
+  --cybersec-warning: #fd7e14;
+  --cybersec-success: #28a745;
+  --cybersec-dark: #1a1a1a;
+  --cybersec-light: #f8f9fa;
+}
+
+// Header enhancements
+.header {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  
+  .navbar-nav .nav-link {
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background-color: rgba(0, 102, 204, 0.1);
+      border-radius: 4px;
+    }
+  }
+}
+
+// Security status bar styling
+.security-status-bar {
+  background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.05) 100%);
+  border-bottom: 1px solid rgba(0, 102, 204, 0.2);
+}
+
+// Sidebar enhancements
+.sidebar {
+  .sidebar-brand {
+    background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
+    
+    .sidebar-brand-full {
+      font-weight: 600;
+      letter-spacing: 0.5px;
+    }
+  }
+  
+  // Security metrics section
+  .security-metrics-header {
+    background: rgba(0, 102, 204, 0.1);
+    backdrop-filter: blur(10px);
+    
+    .metric-item {
+      transition: transform 0.2s ease;
+      
+      &:hover {
+        transform: translateY(-1px);
+      }
+    }
+  }
+  
+  // Navigation enhancements
+  .nav-link {
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      transform: translateX(2px);
+    }
+    
+    &.active {
+      background-color: rgba(0, 102, 204, 0.2);
+      border-left: 3px solid var(--cybersec-primary);
+    }
+  }
+}
+
+// Footer enhancements
+.footer {
+  border-top: 1px solid rgba(0, 102, 204, 0.2);
+  background: linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(248, 249, 250, 0.95) 100%);
+  backdrop-filter: blur(10px);
+  
+  .security-status-indicator {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+}
+
+// Security badge animations
+.security-badge {
+  animation: pulse 2s infinite;
+  
+  &.critical {
+    animation: pulse-danger 1.5s infinite;
+  }
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
+@keyframes pulse-danger {
+  0% { 
+    opacity: 1; 
+    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
+  }
+  50% { 
+    opacity: 0.8; 
+    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
+  }
+  100% { 
+    opacity: 1; 
+    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
+  }
+}
+
+// Security alert styling
+.security-alert {
+  border-left: 4px solid var(--cybersec-danger);
+  background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
+  
+  &.warning {
+    border-left-color: var(--cybersec-warning);
+    background: linear-gradient(135deg, rgba(253, 126, 20, 0.1) 0%, rgba(253, 126, 20, 0.05) 100%);
+  }
+  
+  &.success {
+    border-left-color: var(--cybersec-success);
+    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
+  }
+}
+
+// Vulnerability severity indicators
+.vuln-severity {
+  &.critical {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+    color: white;
+    font-weight: 600;
+  }
+  
+  &.high {
+    background: linear-gradient(135deg, #fd7e14 0%, #e55a00 100%);
+    color: white;
+    font-weight: 600;
+  }
+  
+  &.medium {
+    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
+    color: #212529;
+    font-weight: 600;
+  }
+  
+  &.low {
+    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
+    color: white;
+    font-weight: 600;
+  }
+}
+
+// Dark mode adjustments
+@include color-mode(dark) {
+  .security-status-bar {
+    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2) 0%, rgba(0, 102, 204, 0.1) 100%);
+    border-bottom-color: rgba(0, 102, 204, 0.3);
+  }
+  
+  .footer {
+    background: linear-gradient(135deg, rgba(33, 37, 41, 0.9) 0%, rgba(33, 37, 41, 0.95) 100%);
+  }
+  
+  .security-alert {
+    &.critical {
+      background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.1) 100%);
+    }
+    
+    &.warning {
+      background: linear-gradient(135deg, rgba(253, 126, 20, 0.2) 0%, rgba(253, 126, 20, 0.1) 100%);
+    }
+    
+    &.success {
+      background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(40, 167, 69, 0.1) 100%);
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .header .security-status-bar {
+    .d-flex {
+      flex-direction: column;
+      gap: 0.5rem;
+      
+      .d-flex {
+        flex-direction: row;
+      }
+    }
+  }
+  
+  .sidebar .security-metrics-header {
+    .row {
+      margin: 0;
+      
+      .col-6 {
+        padding: 0.25rem;
+      }
+    }
+  }
+}
+
+// Loading states
+.loading-skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@include color-mode(dark) {
+  .loading-skeleton {
+    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
+    background-size: 200% 100%;
+  }
+}
diff --git a/src/views/assets/AssetView.js b/src/views/assets/AssetView.js
new file mode 100644
index 000000000..6750a9a7c
--- /dev/null
+++ b/src/views/assets/AssetView.js
@@ -0,0 +1,735 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { 
+  CCard, 
+  CCardBody, 
+  CCardHeader, 
+  CButton, 
+  CBadge,
+  CContainer,
+  CRow,
+  CCol,
+  CListGroup,
+  CListGroupItem,
+  CFormInput,
+  CTabs,
+  CTabList,
+  CTab,
+  CTabContent,
+  CTabPanel,
+  CAlert
+} from '@coreui/react'
+import { useNavigation } from '../../hooks/useNavigation'
+
+const AssetDetail = () => {
+  const { assetId } = useParams()
+  const navigate = useNavigate()
+  const { assets } = useNavigation()
+  const [expandedItems, setExpandedItems] = useState({})
+
+  const asset = assets.find(a => a.id === assetId)
+
+  // Generate the same random data as in Overview (consistent based on asset ID)
+  const enrichedAsset = useMemo(() => {
+    if (!asset) return null
+    
+    // Check if we have vulnerability data
+    const hasVulnerabilities = asset.vulnerabilities && (
+      (asset.vulnerabilities.cves && asset.vulnerabilities.cves.length > 0) ||
+      (asset.vulnerabilities.cwes && asset.vulnerabilities.cwes.length > 0) ||
+      (asset.vulnerabilities.capecs && asset.vulnerabilities.capecs.length > 0) ||
+      (asset.vulnerabilities.attacks && asset.vulnerabilities.attacks.length > 0)
+    )
+    
+    // Generate consistent mock network data based on asset ID
+    const seed = asset.id.split('').reduce((a, b) => a + b.charCodeAt(0), 0)
+    const serialNumber = `SN${(seed % 999999).toString().padStart(6, '0')}`
+    const ipAddress = `192.168.${(seed % 255) + 1}.${((seed * 7) % 255) + 1}`
+    const macAddress = `00:${((seed % 255).toString(16).padStart(2, '0'))}:${(((seed * 3) % 255).toString(16).padStart(2, '0'))}:${(((seed * 5) % 255).toString(16).padStart(2, '0'))}:${(((seed * 7) % 255).toString(16).padStart(2, '0'))}:${(((seed * 11) % 255).toString(16).padStart(2, '0'))}`
+    const lastScanDate = asset.last_updated ? new Date(asset.last_updated).toLocaleDateString() : new Date().toLocaleDateString()
+    const osVersion = asset.version || `${asset.vendor || 'Generic'} OS v${(seed % 5) + 1}.${(seed % 10)}`
+    
+    return {
+      ...asset,
+      hasVulnerabilities,
+      serialNumber,
+      ipAddress,
+      macAddress,
+      lastScanDate,
+      osVersion,
+      // Calculate risk level based on vulnerabilities if they exist
+      riskLevel: hasVulnerabilities && asset.vulnerabilities.cves?.length > 0 
+        ? (() => {
+            // Fix: Use risk_level instead of riskLevel
+            const maxRiskLevel = Math.max(...asset.vulnerabilities.cves.map(cve => cve.risk_level || cve.cvss || 0))
+            if (maxRiskLevel >= 9.0) return 'Critical'
+            if (maxRiskLevel >= 7.0) return 'High' 
+            if (maxRiskLevel >= 4.0) return 'Medium'
+            return 'Low'
+          })()
+        : 'Secure'
+    }
+  }, [asset])
+
+  const [activeTab, setActiveTab] = useState('cves')
+  useEffect(() => {
+    if(!enrichedAsset) return
+    const defaultTab = enrichedAsset.vulnerabilities.cves?.length ? 'cves'
+      : enrichedAsset.vulnerabilities.cwes?.length ? 'cwes'
+      : enrichedAsset.vulnerabilities.capecs?.length ? 'capecs'
+      : enrichedAsset.vulnerabilities.attacks?.length ? 'attacks'
+      : 'cves'
+    setActiveTab(defaultTab)
+  }, [enrichedAsset])
+
+  const [editableFields, setEditableFields] = useState({
+    ipAddress: enrichedAsset?.ipAddress || '',
+    macAddress: enrichedAsset?.macAddress || '',
+    osVersion: enrichedAsset?.osVersion || ''
+  })
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    if (enrichedAsset) {
+      setEditableFields({
+        ipAddress: enrichedAsset.ipAddress,
+        macAddress: enrichedAsset.macAddress,
+        osVersion: enrichedAsset.osVersion
+      })
+    }
+  }, [enrichedAsset])
+
+  const toggleItemExpansion = (type, index) => {
+    const key = `${type}-${index}`
+    setExpandedItems(prev => ({
+      ...prev,
+      [key]: !prev[key]
+    }))
+  }
+
+  if (!enrichedAsset) {
+    return (
+      <CContainer fluid>
+        <CRow>
+          <CCol>
+            <CCard>
+              <CCardHeader>
+                <div className="d-flex justify-content-between align-items-center">
+                  <h4>Asset Not Found</h4>
+                  <CButton 
+                    color="secondary" 
+                    variant="outline"
+                    onClick={() => navigate('/overview')}
+                  >
+                    Back to Overview
+                  </CButton>
+                </div>
+              </CCardHeader>
+              <CCardBody>
+                The requested asset could not be found.
+              </CCardBody>
+            </CCard>
+          </CCol>
+        </CRow>
+      </CContainer>
+    )
+  }
+
+  const getRiskBadgeVariant = (riskLevel) => {
+    switch (riskLevel) {
+      case 'Low': return 'success'
+      case 'Medium': return 'warning'
+      case 'High': return 'danger'
+      case 'Critical': return 'dark'
+      default: return 'secondary'
+    }
+  }
+
+  return (
+    <CContainer fluid>
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              <div className="d-flex justify-content-between align-items-center">
+                <div>
+                  <div className="d-flex align-items-center gap-2 mb-1">
+                    <h4 className="mb-0">{enrichedAsset.name}</h4>
+                    {enrichedAsset.hasVulnerabilities ? (
+                      <CBadge color="warning" size="sm">
+                        ⚠️ Vulnerabilities Found
+                      </CBadge>
+                    ) : (
+                      <CBadge color="success" size="sm">
+                        ✅ Secure
+                      </CBadge>
+                    )}
+                  </div>
+                  <div className="d-flex gap-2">
+                    <CBadge color="secondary">{enrichedAsset.department}</CBadge>
+                    <CBadge color="info">{enrichedAsset.type}</CBadge>
+                  </div>
+                </div>
+                <CButton 
+                  color="secondary" 
+                  variant="outline"
+                  onClick={() => navigate('/overview')}
+                >
+                  Back to Overview
+                </CButton>
+              </div>
+            </CCardHeader>
+            <CCardBody>
+              {/* Device Information Section */}
+              <CRow className="mb-4">
+                <CCol md={6}>
+                  <h5>Device Information</h5>
+                  <CListGroup flush>
+                    <CListGroupItem className="d-flex justify-content-between">
+                      <strong>Name:</strong>
+                      <span>{enrichedAsset.name}</span>
+                    </CListGroupItem>
+                    <CListGroupItem className="d-flex justify-content-between">
+                      <strong>Vendor:</strong>
+                      <span>{enrichedAsset.vendor}</span>
+                    </CListGroupItem>
+                    <CListGroupItem className="d-flex justify-content-between">
+                      <strong>Model:</strong>
+                      <span>{enrichedAsset.model}</span>
+                    </CListGroupItem>
+                    <CListGroupItem className="d-flex justify-content-between">
+                      <strong>Department:</strong>
+                      <CBadge color="secondary">{enrichedAsset.department}</CBadge>
+                    </CListGroupItem>
+                  </CListGroup>
+                </CCol>
+                
+                <CCol md={6}>
+                  <div className="d-flex justify-content-between align-items-start mb-3">
+                    <h5>Network & System Info</h5>
+                    <CButton 
+                      size="sm" 
+                      color={isEditing ? "success" : "primary"} 
+                      variant="outline"
+                      onClick={() => {
+                        if (isEditing) {
+                          // Save logic here if needed
+                          setIsEditing(false)
+                        } else {
+                          setIsEditing(true)
+                        }
+                      }}
+                    >
+                      {isEditing ? "Save" : "Edit"}
+                    </CButton>
+                  </div>
+                  
+                  <CListGroup flush>
+                    <CListGroupItem className="d-flex justify-content-between align-items-center">
+                      <strong>IP Address:</strong>
+                      {isEditing ? (
+                        <CFormInput
+                          size="sm"
+                          value={editableFields.ipAddress}
+                          onChange={(e) => setEditableFields(prev => ({...prev, ipAddress: e.target.value}))}
+                          style={{ width: '150px' }}
+                        />
+                      ) : (
+                        <code>{editableFields.ipAddress}</code>
+                      )}
+                    </CListGroupItem>
+                    <CListGroupItem className="d-flex justify-content-between align-items-center">
+                      <strong>MAC Address:</strong>
+                      {isEditing ? (
+                        <CFormInput
+                          size="sm"
+                          value={editableFields.macAddress}
+                          onChange={(e) => setEditableFields(prev => ({...prev, macAddress: e.target.value}))}
+                          style={{ width: '150px' }}
+                        />
+                      ) : (
+                        <code>{editableFields.macAddress}</code>
+                      )}
+                    </CListGroupItem>
+                    <CListGroupItem className="d-flex justify-content-between align-items-center">
+                      <strong>OS Version:</strong>
+                      {isEditing ? (
+                        <CFormInput
+                          size="sm"
+                          value={editableFields.osVersion}
+                          onChange={(e) => setEditableFields(prev => ({...prev, osVersion: e.target.value}))}
+                          style={{ width: '150px' }}
+                        />
+                      ) : (
+                        <span>{editableFields.osVersion}</span>
+                      )}
+                    </CListGroupItem>
+                    <CListGroupItem className="d-flex justify-content-between">
+                      <strong>Last Scan:</strong>
+                      <span>{enrichedAsset.lastScanDate}</span>
+                    </CListGroupItem>
+                  </CListGroup>
+                </CCol>
+              </CRow>
+
+              {/* Security Status Section */}
+              <CRow className="mb-4">
+                <CCol xs={12}>
+                  <h5>Security Status</h5>
+                  {enrichedAsset.hasVulnerabilities ? (
+                    <CAlert color="warning">
+                      <strong>⚠️ Vulnerabilities Found</strong> - This device has known security vulnerabilities that require attention.
+                    </CAlert>
+                  ) : (
+                    <CAlert color="success">
+                      <strong>✅ No Vulnerabilities Found</strong> - This device appears to be secure with no known critical vulnerabilities.
+                    </CAlert>
+                  )}
+                </CCol>
+              </CRow>
+
+              {/* Vulnerability Details Section - Only show if vulnerabilities exist */}
+              {enrichedAsset.hasVulnerabilities && (
+                <CRow className="mb-4">
+                  <CCol xs={12}>
+                    <h5>Vulnerability Details</h5>
+                    <CTabs activeItemKey={activeTab} onChange={(newKey) => setActiveTab(newKey)}>
+                      <CTabList variant="pills" className="mb-3">
+                        {enrichedAsset.vulnerabilities.cves?.length > 0 && (
+                          <CTab itemKey='cves'>
+                            CVEs ({enrichedAsset.vulnerabilities.cves.length})
+                          </CTab>
+                        )}
+                        {enrichedAsset.vulnerabilities.cwes?.length > 0 && (
+                          <CTab itemKey='cwes'>
+                            CWEs ({enrichedAsset.vulnerabilities.cwes.length})
+                          </CTab>
+                        )}
+                        {enrichedAsset.vulnerabilities.capecs?.length > 0 && (
+                          <CTab itemKey='capecs'>
+                            CAPECs ({enrichedAsset.vulnerabilities.capecs.length})
+                          </CTab>
+                        )}
+                        {enrichedAsset.vulnerabilities.attacks?.length > 0 && (
+                          <CTab itemKey='attacks'>
+                            ATT&CK ({enrichedAsset.vulnerabilities.attacks.length})
+                          </CTab>
+                        )}
+                      </CTabList>
+                      
+                      <CTabContent>
+                        {enrichedAsset.vulnerabilities.cves?.length > 0 && (
+                          <CTabPanel className="py-3" itemKey='cves'>
+                            <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
+                              <CListGroup>
+                                {enrichedAsset.vulnerabilities.cves.map((cve, index) => {
+                                  const isExpanded = expandedItems[`cve-${index}`]
+                                  return (
+                                    <CListGroupItem key={index} className="border-0 border-bottom">
+                                      <div 
+                                        className="d-flex justify-content-between align-items-start cursor-pointer"
+                                        onClick={() => toggleItemExpansion('cve', index)}
+                                        style={{ cursor: 'pointer' }}
+                                      >
+                                        <div className="flex-grow-1">
+                                          <div className="d-flex align-items-center gap-2 mb-2">
+                                            <code className="text-primary fw-bold">{cve.cve_id}</code>
+                                            
+                                            {/* CVSS Score Badge */}
+                                            <CBadge 
+                                              color={
+                                                cve.cvss >= 9.0 ? 'danger' : 
+                                                cve.cvss >= 7.0 ? 'warning' : 
+                                                cve.cvss >= 4.0 ? 'info' : 'secondary'
+                                              }
+                                            >
+                                              CVSS: {cve.cvss || 'N/A'}
+                                            </CBadge>
+                                            
+                                            {/* Risk Level Badge - Fix the field name */}
+                                            {(cve.risk_level !== undefined && cve.risk_level !== null) && (
+                                              <CBadge color="danger" className="text-white">
+                                                Risk: {cve.risk_level.toFixed(2)}
+                                              </CBadge>
+                                            )}
+                                            
+                                            {/* EPSS Badge */}
+                                            {(cve.epss !== undefined && cve.epss !== null) && (
+                                              <CBadge color="warning">
+                                                EPSS: {(cve.epss * 100).toFixed(2)}%
+                                              </CBadge>
+                                            )}
+                                            
+                                            {/* Impact Score Badge - Fix the field name */}
+                                            {(cve.impact_score !== undefined && cve.impact_score !== null) && (
+                                              <CBadge color="info">
+                                                Impact: {cve.impact_score.toFixed(2)}
+                                              </CBadge>
+                                            )}
+                                            
+                                            {/* Exploitability Score Badge - Add this missing field */}
+                                            {(cve.exploitability_score !== undefined && cve.exploitability_score !== null) && (
+                                              <CBadge color="light" className="text-dark">
+                                                Exploit: {cve.exploitability_score.toFixed(2)}
+                                              </CBadge>
+                                            )}
+                                            
+                                            <CButton size="sm" color="link" className="p-0 ms-auto">
+                                              {isExpanded ? 'Less' : 'More'}
+                                            </CButton>
+                                          </div>
+                                          
+                                          <p className="mb-1 small text-muted">
+                                            {isExpanded 
+                                              ? cve.description 
+                                              : `${cve.description?.substring(0, 200)}${cve.description?.length > 200 ? '...' : ''}`
+                                            }
+                                          </p>
+                                          
+                                          {isExpanded && (
+                                            <div className="mt-3 p-3 bg-dark rounded">
+                                              <CRow>
+                                                <CCol md={6}>
+                                                  <strong>CVE ID:</strong> <code>{cve.cve_id}</code><br/>
+                                                  <strong>CVSS Score:</strong> {cve.cvss || 'N/A'}<br/>
+                                                  {/* Fix field names to match backend */}
+                                                  <strong>Risk Level:</strong> {cve.risk_level?.toFixed(2) || 'N/A'}<br/>
+                                                  <strong>EPSS:</strong> {cve.epss ? `${(cve.epss * 100).toFixed(2)}%` : 'N/A'}<br/>
+                                                  <strong>Impact Score:</strong> {cve.impact_score?.toFixed(2) || 'N/A'}<br/>
+                                                  <strong>Exploitability Score:</strong> {cve.exploitability_score?.toFixed(2) || 'N/A'}<br/>
+                                                  
+                                                  {cve.cvss_vector && (
+                                                    <>
+                                                      <strong>CVSS Vector:</strong> <code className="small">{cve.cvss_vector}</code><br/>
+                                                    </>
+                                                  )}
+                                                </CCol>
+                                                <CCol md={6}>
+                                                  {cve.published_date && (
+                                                    <>
+                                                      <strong>Published:</strong> {new Date(cve.published_date).toLocaleDateString()}<br/>
+                                                    </>
+                                                  )}
+                                                  {cve.last_modified_date && (
+                                                    <>
+                                                      <strong>Last Modified:</strong> {new Date(cve.last_modified_date).toLocaleDateString()}<br/>
+                                                    </>
+                                                  )}
+                                                  {cve.source && (
+                                                    <>
+                                                      <strong>Source:</strong> {cve.source}<br/>
+                                                    </>
+                                                  )}
+                                                </CCol>
+                                              </CRow>
+                                              {cve.references && cve.references.length > 0 && (
+                                                <div className="mt-2">
+                                                  <strong>References:</strong>
+                                                  <ul className="small mt-1">
+                                                    {cve.references.slice(0, 5).map((ref, refIndex) => (
+                                                      <li key={refIndex}>
+                                                        <a href={ref} target="_blank" rel="noopener noreferrer" className="text-decoration-none">
+                                                          {ref.length > 60 ? `${ref.substring(0, 60)}...` : ref}
+                                                        </a>
+                                                      </li>
+                                                    ))}
+                                                    {cve.references.length > 5 && (
+                                                      <li className="text-muted">... and {cve.references.length - 5} more</li>
+                                                    )}
+                                                  </ul>
+                                                </div>
+                                              )}
+                                            </div>
+                                          )}
+                                        </div>
+                                      </div>
+                                    </CListGroupItem>
+                                  )
+                                })}
+                              </CListGroup>
+                            </div>
+                          </CTabPanel>
+                        )}
+                        
+                        {enrichedAsset.vulnerabilities.cwes?.length > 0 && (
+                          <CTabPanel className="py-3" itemKey='cwes'>
+                            <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
+                              <CListGroup>
+                                {enrichedAsset.vulnerabilities.cwes.map((cwe, index) => {
+                                  const isExpanded = expandedItems[`cwe-${index}`]
+                                  return (
+                                    <CListGroupItem key={index} className="border-0 border-bottom">
+                                      <div 
+                                        className="cursor-pointer"
+                                        onClick={() => toggleItemExpansion('cwe', index)}
+                                        style={{ cursor: 'pointer' }}
+                                      >
+                                        <div className="d-flex align-items-center gap-2 mb-2">
+                                          <code className="text-info fw-bold">{cwe.cwe_id}</code>
+                                          <span className="fw-semibold">{cwe.name}</span>
+                                          <CButton size="sm" color="link" className="p-0 ms-auto">
+                                            {isExpanded ? 'Less' : 'More'}
+                                          </CButton>
+                                        </div>
+                                        <p className="mb-0 small text-muted">
+                                          {isExpanded 
+                                            ? cwe.description 
+                                            : `${cwe.description?.substring(0, 150)}${cwe.description?.length > 150 ? '...' : ''}`
+                                          }
+                                        </p>
+                                        
+                                        {isExpanded && (
+                                          <div className="mt-3 p-3 bg-dark rounded">
+                                            <strong>CWE ID:</strong> <code>{cwe.cwe_id}</code><br/>
+                                            <strong>Name:</strong> {cwe.name}<br/>
+                                            {cwe.weakness_abstraction && (
+                                              <>
+                                                <strong>Abstraction:</strong> {cwe.weakness_abstraction}<br/>
+                                              </>
+                                            )}
+                                            {cwe.status && (
+                                              <>
+                                                <strong>Status:</strong> {cwe.status}<br/>
+                                              </>
+                                            )}
+                                          </div>
+                                        )}
+                                      </div>
+                                    </CListGroupItem>
+                                  )
+                                })}
+                              </CListGroup>
+                            </div>
+                          </CTabPanel>
+                        )}
+                        
+                        {enrichedAsset.vulnerabilities.capecs?.length > 0 && (
+                          <CTabPanel className="py-3" itemKey='capecs'>
+                            <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
+                              <CListGroup>
+                                {enrichedAsset.vulnerabilities.capecs.map((capec, index) => {
+                                  const isExpanded = expandedItems[`capec-${index}`]
+                                  return (
+                                    <CListGroupItem key={index} className="border-0 border-bottom">
+                                      <div 
+                                        className="cursor-pointer"
+                                        onClick={() => toggleItemExpansion('capec', index)}
+                                        style={{ cursor: 'pointer' }}
+                                      >
+                                        <div className="d-flex justify-content-between align-items-start">
+                                          <div className="flex-grow-1">
+                                            <div className="d-flex align-items-center gap-2 mb-2">
+                                              <code className="text-warning fw-bold">{capec.capec_id}</code>
+                                              <span className="fw-semibold">{capec.name}</span>
+                                              <CButton size="sm" color="link" className="p-0 ms-auto">
+                                                {isExpanded ? 'Less' : 'More'}
+                                              </CButton>
+                                            </div>
+                                            <div className="d-flex gap-2 mb-2">
+                                              <CBadge color="secondary">
+                                                Severity: {capec.typical_severity || 'Unknown'}
+                                              </CBadge>
+                                              <CBadge color="light" className="text-dark">
+                                                Likelihood: {capec.likelihood_of_attack || 'Unknown'}
+                                              </CBadge>
+                                            </div>
+                                            <p className="mb-0 small text-muted">
+                                              {isExpanded 
+                                                ? capec.description 
+                                                : `${capec.description?.substring(0, 150)}${capec.description?.length > 150 ? '...' : ''}`
+                                              }
+                                            </p>
+                                            
+                                            {isExpanded && (
+                                              <div className="mt-3 p-3 bg-dark rounded">
+                                                <CRow>
+                                                  <CCol md={6}>
+                                                    <strong>CAPEC ID:</strong> <code>{capec.capec_id}</code><br/>
+                                                    <strong>Name:</strong> {capec.name}<br/>
+                                                    <strong>Abstraction:</strong> {capec.abstraction || 'N/A'}<br/>
+                                                  </CCol>
+                                                  <CCol md={6}>
+                                                    <strong>Severity:</strong> {capec.typical_severity || 'Unknown'}<br/>
+                                                    <strong>Likelihood:</strong> {capec.likelihood_of_attack || 'Unknown'}<br/>
+                                                    <strong>Status:</strong> {capec.status || 'N/A'}<br/>
+                                                  </CCol>
+                                                </CRow>
+                                              </div>
+                                            )}
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </CListGroupItem>
+                                  )
+                                })}
+                              </CListGroup>
+                            </div>
+                          </CTabPanel>
+                        )}
+                        
+                        {enrichedAsset.vulnerabilities.attacks?.length > 0 && (
+                          <CTabPanel className="py-3" itemKey='attacks'>
+                            <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
+                              <CListGroup>
+                                {enrichedAsset.vulnerabilities.attacks.map((attack, index) => {
+                                  const isExpanded = expandedItems[`attack-${index}`]
+                                  return (
+                                    <CListGroupItem key={index} className="border-0 border-bottom">
+                                      <div 
+                                        className="cursor-pointer"
+                                        onClick={() => toggleItemExpansion('attack', index)}
+                                        style={{ cursor: 'pointer' }}
+                                      >
+                                        <div className="d-flex justify-content-between align-items-start">
+                                          <div className="flex-grow-1">
+                                            <div className="d-flex align-items-center gap-2 mb-2">
+                                              <code className="text-danger fw-bold">{attack.technique_id}</code>
+                                              <span className="fw-semibold">{attack.name}</span>
+                                              <CButton size="sm" color="link" className="p-0 ms-auto">
+                                                {isExpanded ? 'Less' : 'More'}
+                                              </CButton>
+                                            </div>
+                                            <div className="d-flex flex-wrap gap-1 mb-2">
+                                              {attack.tactics && (
+                                                <CBadge color="danger" className="small">
+                                                  {attack.tactics}
+                                                </CBadge>
+                                              )}
+                                              {attack.platforms && (
+                                                <CBadge color="secondary" className="small">
+                                                  {attack.platforms.length > 20 ? attack.platforms.substring(0, 20) + '...' : attack.platforms}
+                                                </CBadge>
+                                              )}
+                                            </div>
+                                            <p className="mb-0 small text-muted">
+                                              {isExpanded 
+                                                ? attack.description 
+                                                : `${attack.description?.substring(0, 150)}${attack.description?.length > 150 ? '...' : ''}`
+                                              }
+                                            </p>
+                                            
+                                            {isExpanded && (
+                                              <div className="mt-3 p-3 bg-dark rounded">
+                                                <CRow>
+                                                  <CCol md={6}>
+                                                    <strong>Technique ID:</strong> <code>{attack.technique_id}</code><br/>
+                                                    <strong>Name:</strong> {attack.name}<br/>
+                                                    <strong>Tactics:</strong> {attack.tactics || 'N/A'}<br/>
+                                                  </CCol>
+                                                  <CCol md={6}>
+                                                    <strong>Platforms:</strong> {attack.platforms || 'N/A'}<br/>
+                                                    {attack.data_sources && (
+                                                      <>
+                                                        <strong>Data Sources:</strong> {attack.data_sources}<br/>
+                                                      </>
+                                                    )}
+                                                    {attack.detection && (
+                                                      <>
+                                                        <strong>Detection:</strong> {attack.detection.substring(0, 100)}...<br/>
+                                                      </>
+                                                    )}
+                                                  </CCol>
+                                                </CRow>
+                                              </div>
+                                            )}
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </CListGroupItem>
+                                  )
+                                })}
+                              </CListGroup>
+                            </div>
+                          </CTabPanel>
+                        )}
+                      </CTabContent>
+                    </CTabs>
+                  </CCol>
+                </CRow>
+              )}
+
+              {/* Summary Section */}
+              <CRow>
+                <CCol xs={12}>
+                  <hr />
+                  {enrichedAsset.hasVulnerabilities ? (
+                    <CAlert color="danger" className="mb-0">
+                      <strong>Action Required:</strong> This device has {
+                        (enrichedAsset.vulnerabilities.cves?.length || 0) + 
+                        (enrichedAsset.vulnerabilities.cwes?.length || 0) + 
+                        (enrichedAsset.vulnerabilities.capecs?.length || 0) + 
+                        (enrichedAsset.vulnerabilities.attacks?.length || 0)
+                      } security findings that should be reviewed and addressed.
+                    </CAlert>
+                  ) : (
+                    <CAlert color="success" className="mb-0">
+                      <strong>All Clear:</strong> No vulnerable CVEs were found for this device. Continue monitoring for new threats.
+                    </CAlert>
+                  )}
+                </CCol>
+              </CRow>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      {enrichedAsset.vulnerabilities && enrichedAsset.vulnerabilities.cves.length > 0 && (
+        <>
+          <hr className="my-4" />
+          <CRow>
+            <CCol xs={12}>
+              <h5>Vulnerability Details</h5>
+            </CCol>
+          </CRow>
+          
+          <CRow>
+            <CCol md={6}>
+              <h6>CVEs ({enrichedAsset.vulnerabilities.cves.length})</h6>
+              <CListGroup flush style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                {enrichedAsset.vulnerabilities.cves.slice(0, 10).map((cve, index) => (
+                  <CListGroupItem key={index}>
+                    <div className="d-flex justify-content-between align-items-start">
+                      <div>
+                        <code className="text-primary">{cve.cve_id}</code>
+                        <div className="small text-muted mt-1">
+                          {cve.description?.substring(0, 100)}...
+                        </div>
+                      </div>
+                      <div className="text-end">
+                        <CBadge color={cve.cvss >= 7 ? 'danger' : cve.cvss >= 4 ? 'warning' : 'info'}>
+                          CVSS: {cve.cvss}
+                        </CBadge>
+                      </div>
+                    </div>
+                  </CListGroupItem>
+                ))}
+                {enrichedAsset.vulnerabilities.cves.length > 10 && (
+                  <CListGroupItem className="text-center text-muted">
+                    ... and {enrichedAsset.vulnerabilities.cves.length - 10} more
+                  </CListGroupItem>
+                )}
+              </CListGroup>
+            </CCol>
+            
+            <CCol md={6}>
+              <h6>Attack Patterns ({enrichedAsset.vulnerabilities.capecs?.length || 0})</h6>
+              <CListGroup flush style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                {enrichedAsset.vulnerabilities.capecs?.slice(0, 5).map((capec, index) => (
+                  <CListGroupItem key={index}>
+                    <div>
+                      <strong>{capec.capec_id}</strong>: {capec.name}
+                      <div className="small text-muted mt-1">
+                        Severity: {capec.typical_severity}
+                      </div>
+                    </div>
+                  </CListGroupItem>
+                )) || <CListGroupItem className="text-muted">No attack patterns found</CListGroupItem>}
+              </CListGroup>
+            </CCol>
+          </CRow>
+        </>
+      )}
+    </CContainer>
+  )
+}
+
+export default AssetDetail
\ No newline at end of file
diff --git a/src/views/overview/Overview.js b/src/views/overview/Overview.js
new file mode 100644
index 000000000..915ec1aef
--- /dev/null
+++ b/src/views/overview/Overview.js
@@ -0,0 +1,375 @@
+import React, { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { 
+  CCard, 
+  CCardBody, 
+  CCardHeader, 
+  CTable, 
+  CTableHead, 
+  CTableRow, 
+  CTableHeaderCell, 
+  CTableBody, 
+  CTableDataCell, 
+  CButton, 
+  CBadge,
+  CContainer,
+  CRow,
+  CCol,
+  CAlert,
+  CListGroup,
+  CListGroupItem,
+  CCollapse
+} from '@coreui/react'
+import { useNavigation } from '../../hooks/useNavigation'
+
+const Overview = () => {
+  const navigate = useNavigate()
+  const { assets, departments } = useNavigation()
+  const [expandedAssets, setExpandedAssets] = React.useState({})
+
+  // Function to determine risk level based on CVSS score
+  const getCVSSRiskLevel = (riskLevel) => {
+    if (riskLevel >= 9.0) return 'Critical'
+    if (riskLevel >= 7.0) return 'High' 
+    if (riskLevel >= 4.0) return 'Medium'
+    if (riskLevel >= 0.1) return 'Low'
+    return 'None'
+  }
+
+  // Function to get badge color based on risk level
+  const getRiskBadgeColor = (riskLevel) => {
+    switch (riskLevel) {
+      case 'Critical': return 'danger'
+      case 'High': return 'warning'
+      case 'Medium': return 'info'
+      case 'Low': return 'success'
+      default: return 'secondary'
+    }
+  }
+
+  // Function to get CVSS badge color
+  const getCVSSBadgeColor = (riskLevel) => {
+    if (riskLevel >= 9.0) return 'danger'
+    if (riskLevel >= 7.0) return 'warning' 
+    if (riskLevel >= 4.0) return 'info'
+    return 'success'
+  }
+
+  // Process assets to include vulnerability summary
+  const processedAssets = useMemo(() => {
+    return assets.map(asset => {
+      const cves = asset.vulnerabilities?.cves || []
+      const hasCVEs = cves.length > 0
+      
+      // Calculate highest risk level - Fix field names
+      let highestRisk = 'None'
+      let maxRiskLevel = 0
+      
+      if (hasCVEs) {
+        // Fix: Use risk_level instead of riskLevel, fallback to cvss
+        maxRiskLevel = Math.max(...cves.map(cve => cve.risk_level || cve.cvss || 0))
+        highestRisk = getCVSSRiskLevel(maxRiskLevel)
+      }
+
+      return {
+        ...asset,
+        cveCount: cves.length,
+        hasCVEs,
+        highestRisk,
+        maxRiskLevel,
+        // Fix: Sort by risk_level instead of riskLevel
+        cves: cves.sort((a, b) => (b.risk_level || b.cvss || 0) - (a.risk_level || a.cvss || 0))
+      }
+    })
+  }, [assets])
+
+  // Calculate summary statistics
+  const summary = useMemo(() => {
+    const total = processedAssets.length
+    const vulnerable = processedAssets.filter(asset => asset.hasCVEs).length
+    const safe = total - vulnerable
+    const critical = processedAssets.filter(asset => asset.highestRisk === 'Critical').length
+    const high = processedAssets.filter(asset => asset.highestRisk === 'High').length
+    const medium = processedAssets.filter(asset => asset.highestRisk === 'Medium').length
+    const low = processedAssets.filter(asset => asset.highestRisk === 'Low').length
+
+    return { total, vulnerable, safe, critical, high, medium, low }
+  }, [processedAssets])
+
+  const handleViewAsset = (assetId) => {
+    navigate(`/asset/${assetId}`)
+  }
+
+  const toggleAssetExpansion = (assetId) => {
+    setExpandedAssets(prev => ({
+      ...prev,
+      [assetId]: !prev[assetId]
+    }))
+  }
+/*
+  const handleReset = () => {
+    localStorage.clear()
+    sessionStorage.clear()
+    window.location.reload()
+  }
+*/
+  return (
+    <CContainer fluid>
+      {/* Summary Dashboard */}
+      <CRow className="mb-4">
+        <CCol sm={6} lg={2}>
+          <CCard className="text-white bg-primary">
+            <CCardBody className="pb-0">
+              <div className="fs-4 fw-semibold">{summary.total}</div>
+              <div>Total Assets</div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol sm={6} lg={2}>
+          <CCard className="text-white bg-success">
+            <CCardBody className="pb-0">
+              <div className="fs-4 fw-semibold">{summary.safe}</div>
+              <div>Safe Assets</div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol sm={6} lg={2}>
+          <CCard className="text-white bg-warning">
+            <CCardBody className="pb-0">
+              <div className="fs-4 fw-semibold">{summary.vulnerable}</div>
+              <div>Vulnerable</div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol sm={6} lg={2}>
+          <CCard className="text-white bg-danger">
+            <CCardBody className="pb-0">
+              <div className="fs-4 fw-semibold">{summary.critical + summary.high}</div>
+              <div>Critical/High</div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol sm={6} lg={2}>
+          <CCard className="text-white bg-info">
+            <CCardBody className="pb-0">
+              <div className="fs-4 fw-semibold">{summary.medium}</div>
+              <div>Medium Risk</div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol sm={6} lg={2}>
+          <CCard className="text-white bg-secondary">
+            <CCardBody className="pb-0">
+              <div className="fs-4 fw-semibold">{summary.low}</div>
+              <div>Low Risk</div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      {/* Main Assets Table */}
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              <div className="d-flex justify-content-between align-items-center">
+                <h4 className="mb-0">Security Dashboard - Asset Overview</h4>
+                <CBadge color="info" shape="rounded-pill">
+                  {summary.total} Total Assets
+                </CBadge>
+              </div>
+            </CCardHeader>
+            <CCardBody>
+              {processedAssets.length === 0 ? (
+                <div className="text-center py-5">
+                  <h5 className="text-muted">No Assets Found</h5>
+                  <p className="text-muted">Start by adding departments and assets using the sidebar buttons.</p>
+                </div>
+              ) : (
+                <>
+                  {/* High Priority Alerts */}
+                  {summary.critical > 0 && (
+                    <CAlert color="danger" className="mb-4">
+                      <strong>🚨 Critical Alert:</strong> {summary.critical} asset(s) have CRITICAL vulnerabilities that require immediate attention!
+                    </CAlert>
+                  )}
+                  {summary.high > 0 && (
+                    <CAlert color="warning" className="mb-4">
+                      <strong>⚠️ High Priority:</strong> {summary.high} asset(s) have HIGH risk vulnerabilities.
+                    </CAlert>
+                  )}
+
+                  <CTable hover responsive>
+                    <CTableHead>
+                      <CTableRow>
+                        <CTableHeaderCell scope="col">Asset Details</CTableHeaderCell>
+                        <CTableHeaderCell scope="col">Department</CTableHeaderCell>
+                        <CTableHeaderCell scope="col">Security Status</CTableHeaderCell>
+                        <CTableHeaderCell scope="col">Vulnerability Count</CTableHeaderCell>
+                        <CTableHeaderCell scope="col">Risk Level</CTableHeaderCell>
+                        <CTableHeaderCell scope="col" className="text-center">Actions</CTableHeaderCell>
+                      </CTableRow>
+                    </CTableHead>
+                    <CTableBody>
+                      {processedAssets.map((asset) => (
+                        <React.Fragment key={asset.id}>
+                          <CTableRow className={asset.highestRisk === 'Critical' ? 'table-danger' : asset.highestRisk === 'High' ? 'table-warning' : ''}>
+                            <CTableDataCell>
+                              <div>
+                                <strong>{asset.name}</strong>
+                                <br />
+                                <small className="text-dark">
+                                  {asset.vendor} {asset.model && `- ${asset.model}`}
+                                </small>
+                              </div>
+                            </CTableDataCell>
+                            <CTableDataCell>
+                              <CBadge color="secondary">
+                                {asset.department}
+                              </CBadge>
+                            </CTableDataCell>
+                            <CTableDataCell>
+                              {asset.hasCVEs ? (
+                                <CBadge color="danger" className="me-1">
+                                  🔓 Vulnerable
+                                </CBadge>
+                              ) : (
+                                <CBadge color="success" className="me-1">
+                                  🔒 Secure
+                                </CBadge>
+                              )}
+                            </CTableDataCell>
+                            <CTableDataCell>
+                              {asset.hasCVEs ? (
+                                <div>
+                                  <CBadge color="warning" className="me-2">
+                                    {asset.cveCount} CVEs
+                                  </CBadge>
+                                  {asset.cveCount > 0 && (
+                                    <CButton
+                                      size="sm"
+                                      color="link"
+                                      className="p-0"
+                                      onClick={() => toggleAssetExpansion(asset.id)}
+                                    >
+                                      {expandedAssets[asset.id] ? 'Hide Details' : 'Show Details'}
+                                    </CButton>
+                                  )}
+                                </div>
+                              ) : (
+                                <CBadge color="success">No CVEs</CBadge>
+                              )}
+                            </CTableDataCell>
+                            <CTableDataCell>
+                              <CBadge color={getRiskBadgeColor(asset.highestRisk)} className="me-1">
+                                {asset.highestRisk}
+                              </CBadge>
+                              {asset.maxRiskLevel > 0 && (
+                                <small className="text-dark">
+                                  (CVSS: {asset.maxRiskLevel})
+                                </small>
+                              )}
+                            </CTableDataCell>
+                            <CTableDataCell className="text-center">
+                              <CButton
+                                color="primary"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => handleViewAsset(asset.id)}
+                              >
+                                Full Details
+                              </CButton>
+                            </CTableDataCell>
+                          </CTableRow>
+{/*
+                          <CButton color="danger" onClick={handleReset}>
+                            Reset App
+                          </CButton>
+*/}
+                          {/* Expandable CVE Details */}
+                          {asset.hasCVEs && (
+                            <CTableRow>
+                              <CTableDataCell colSpan={6} className="p-0">
+                                <CCollapse visible={expandedAssets[asset.id]}>
+                                  <div className="p-3 bg-light">
+                                    <h6>CVE Details for {asset.name}:</h6>
+                                    <CListGroup flush>
+                                      {asset.cves.slice(0, 10).map((cve, index) => (
+                                        <CListGroupItem key={index} className="d-flex justify-content-between align-items-start">
+                                          <div className="flex-grow-1">
+                                            <div className="d-flex align-items-center gap-2 mb-2">
+                                              <code className="text-primary me-2">{cve.cve_id}</code>
+                                              
+                                              {/* CVSS Badge */}
+                                              <CBadge color={getCVSSBadgeColor(cve.cvss)} className="me-2">
+                                                CVSS: {cve.cvss || 'N/A'}
+                                              </CBadge>
+                                              
+                                              {/* Risk Level Badge - Fix field name */}
+                                              {(cve.risk_level !== undefined && cve.risk_level !== null) && (
+                                                <CBadge color="danger" className="me-2">
+                                                  Risk: {cve.risk_level.toFixed(2)}
+                                                </CBadge>
+                                              )}
+                                              
+                                              {/* EPSS Badge */}
+                                              {(cve.epss !== undefined && cve.epss !== null) && (
+                                                <CBadge color="warning" className="me-2">
+                                                  EPSS: {(cve.epss * 100).toFixed(2)}%
+                                                </CBadge>
+                                              )}
+                                              
+                                              {/* Impact Score Badge */}
+                                              {(cve.impact_score !== undefined && cve.impact_score !== null) && (
+                                                <CBadge color="info" className="me-2">
+                                                  Impact: {cve.impact_score.toFixed(2)}
+                                                </CBadge>
+                                              )}
+                                              
+                                              {/* Exploitability Score Badge - Add this missing field */}
+                                              {(cve.exploitability_score !== undefined && cve.exploitability_score !== null) && (
+                                                <CBadge color="secondary" className="me-2">
+                                                  Exploit: {cve.exploitability_score.toFixed(2)}
+                                                </CBadge>
+                                              )}
+                                              
+                                              {/* Overall Risk Level Badge */}
+                                              <CBadge color={getRiskBadgeColor(getCVSSRiskLevel(cve.risk_level || cve.cvss))}>
+                                                {getCVSSRiskLevel(cve.risk_level || cve.cvss)}
+                                              </CBadge>
+                                            </div>
+                                            
+                                            {/* Description */}
+                                            <div className="small text-muted mt-1">
+                                              {cve.description?.substring(0, 150)}
+                                              {cve.description?.length > 150 ? '...' : ''}
+                                            </div>
+                                          </div>
+                                        </CListGroupItem>
+                                      ))}
+                                      {asset.cves.length > 10 && (
+                                        <CListGroupItem className="text-center text-muted">
+                                          <small>... and {asset.cves.length - 10} more CVEs</small>
+                                        </CListGroupItem>
+                                      )}
+                                    </CListGroup>
+                                  </div>
+                                </CCollapse>
+                              </CTableDataCell>
+                            </CTableRow>
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </CTableBody>
+                  </CTable>
+                </>
+              )}
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </CContainer>
+  )
+}
+
+export default Overview
\ No newline at end of file