diff --git a/app/layouts/Default.vue b/app/layouts/Default.vue
index a8a9b30..f82fff1 100644
--- a/app/layouts/Default.vue
+++ b/app/layouts/Default.vue
@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import { useAuthStore } from "~/stores/auth";
+
 import DefaultSidebar from "~/layouts/default/Sidebar.vue";
+import DefaultBreadcrumb from "~/layouts/default/Breadcrumb.vue";
 
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "~/components/ui/breadcrumb";
-
 import { Separator } from "~/components/ui/separator";
 
 import { useRuntimeConfig } from "#app";
@@ -32,17 +25,7 @@ await authStore.init();
       <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
         <SidebarTrigger class="-ml-1" />
         <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem class="hidden md:block">
-              <BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator class="hidden md:block" />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        <DefaultBreadcrumb />
       </header>
       <main class="flex flex-1 flex-col gap-4 p-4">
         <slot />
diff --git a/app/layouts/default/Breadcrumb.vue b/app/layouts/default/Breadcrumb.vue
new file mode 100644
index 0000000..3450b43
--- /dev/null
+++ b/app/layouts/default/Breadcrumb.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem class="hidden md:block">
+        <BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator class="hidden md:block" />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>