diff --git a/app/layouts/default/Breadcrumb.vue b/app/layouts/default/Breadcrumb.vue
index 75482ba..c4232a0 100644
--- a/app/layouts/default/Breadcrumb.vue
+++ b/app/layouts/default/Breadcrumb.vue
@@ -13,21 +13,23 @@ const breadcrumbStore = useBreadcrumbStore();
 </script>
 
 <template>
-  <Breadcrumb>
-    <BreadcrumbList>
-      <template v-for="i in breadcrumbStore.items.length - 1" :key="i">
-        <BreadcrumbItem class="hidden md:block">
-          <BreadcrumbLink :href="breadcrumbStore.items[i - 1]?.to || ''">
-            {{ breadcrumbStore.items[i - 1]?.label }}
-          </BreadcrumbLink>
+  <ClientOnly>
+    <Breadcrumb>
+      <BreadcrumbList>
+        <template v-for="i in breadcrumbStore.items.length - 1" :key="i">
+          <BreadcrumbItem class="hidden md:block">
+            <BreadcrumbLink :href="breadcrumbStore.items[i - 1]?.to || ''">
+              {{ breadcrumbStore.items[i - 1]?.label }}
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator class="hidden md:block" />
+        </template>
+        <BreadcrumbItem>
+          <BreadcrumbPage>
+            {{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label }}
+          </BreadcrumbPage>
         </BreadcrumbItem>
-        <BreadcrumbSeparator class="hidden md:block" />
-      </template>
-      <BreadcrumbItem>
-        <BreadcrumbPage>
-          {{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label }}
-        </BreadcrumbPage>
-      </BreadcrumbItem>
-    </BreadcrumbList>
-  </Breadcrumb>
+      </BreadcrumbList>
+    </Breadcrumb>
+  </ClientOnly>
 </template>