diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
new file mode 100644
index 00000000..5e0b2d20
--- /dev/null
+++ b/src/components/AppBreadcrumb.vue
@@ -0,0 +1,46 @@
+<template>
+  <CBreadcrumb class="d-md-down-none me-auto mb-0">
+    <CBreadcrumbItem
+      v-for="item in breadcrumbs"
+      :href="item.active ? '' : item.path"
+      :active="item.active"
+      :key="item"
+    >
+      {{ item.name }}
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+export default {
+  name: 'AppBreadcrumb',
+  setup() {
+    const breadcrumbs = ref()
+
+    const getBreadcrumbs = () => {
+      return router.currentRoute.value.matched.map((route) => {
+        return {
+          active: route.path === router.currentRoute.value.fullPath,
+          name: route.name,
+          path: `${router.options.history.base}${route.path}`,
+        }
+      })
+    }
+
+    router.afterEach(() => {
+      breadcrumbs.value = getBreadcrumbs()
+    })
+
+    onMounted(() => {
+      breadcrumbs.value = getBreadcrumbs()
+    })
+
+    return {
+      breadcrumbs,
+    }
+  },
+}
+</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d6411627..ae964f93 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -39,68 +39,24 @@
     </CContainer>
     <CHeaderDivider />
     <CContainer fluid>
-      <CBreadcrumb class="d-md-down-none me-auto mb-0">
-        <CBreadcrumbItem
-          v-for="item in breadcrumbs"
-          :href="item.to"
-          :active="item.to === '' ? true : false"
-          :key="item"
-        >
-          {{ item.name }}
-        </CBreadcrumbItem>
-      </CBreadcrumb>
+      <AppBreadcrumb />
     </CContainer>
   </CHeader>
 </template>
 
 <script>
-import { onMounted, ref, watch } from 'vue'
-import { onBeforeRouteUpdate } from 'vue-router'
+import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-import router from '@/router'
 import { logo } from '@/assets/brand/logo'
 export default {
   name: 'AppHeader',
   components: {
+    AppBreadcrumb,
     AppHeaderDropdownAccnt,
   },
   setup() {
-    const upperCaseFirstChar = (string) =>
-      string.substr(0, 1).toUpperCase() + string.substr(1)
-
-    const makeCurrentRoute = () => {
-      let result = [
-        { to: '/', name: 'Home'}
-      ]
-      let path = router.currentRoute._value.path
-      let temp = path.split('/')
-      let to = ''
-      if (temp.length <= 2) {
-        result.push({ to: '', name: router.currentRoute._value.name })
-      } else {
-        for (let i = 1; i < temp.length - 1; i++) {
-          for (let j = 1; j <= i; j++) {
-            to += `/${temp[j]}`
-          }
-          result.push({ to: to, name: upperCaseFirstChar(temp[i]) })
-        }
-        result.push({ to: '', name: router.currentRoute._value.name })
-      }
-      return result
-    }
-
-    const breadcrumbs = ref([])
-
-    onBeforeRouteUpdate(() => {
-      breadcrumbs.value = makeCurrentRoute()
-    })
-
-    onMounted(() => {
-      breadcrumbs.value = makeCurrentRoute()
-    })
 
     return {
-      breadcrumbs,
       logo,
     }
   },