diff --git a/wp-content/themes/ccat/app/components/site/SiteBreadcrumbs.vue b/wp-content/themes/ccat/app/components/site/SiteBreadcrumbs.vue
new file mode 100644
index 0000000..81eca59
--- /dev/null
+++ b/wp-content/themes/ccat/app/components/site/SiteBreadcrumbs.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { BreadcrumbItem } from "@nuxt/ui";
+
+defineProps<{ breadcrumbs: BreadcrumbItem[] }>();
+</script>
+
+<template>
+  <UContainer>
+    <UBreadcrumb :items="breadcrumbs" />
+  </UContainer>
+</template>
diff --git a/wp-content/themes/ccat/app/pages/[...uri].vue b/wp-content/themes/ccat/app/pages/[...uri].vue
index 8ec4e1c..fb23df7 100644
--- a/wp-content/themes/ccat/app/pages/[...uri].vue
+++ b/wp-content/themes/ccat/app/pages/[...uri].vue
@@ -6,9 +6,7 @@ useSeoMeta({ title: node?.title });
 
 <template>
   <div>
-    <UContainer>
-      <UBreadcrumb :items="breadcrumbs" />
-    </UContainer>
+    <SiteBreadcrumbs :breadcrumbs="breadcrumbs" />
     <component :is="component" :node="node" />
   </div>
 </template>
diff --git a/wp-content/themes/ccat/app/pages/devenir-membre.vue b/wp-content/themes/ccat/app/pages/devenir-membre.vue
index 8312cba..5c83b5c 100644
--- a/wp-content/themes/ccat/app/pages/devenir-membre.vue
+++ b/wp-content/themes/ccat/app/pages/devenir-membre.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import type { BreadcrumbItem } from "@nuxt/ui";
+
 useSeoMeta({ title: "Devenir membre" });
+const breadcrumbs = [] as BreadcrumbItem[];
 </script>
 
 <template>
   <div>
-    <h1>Devenir membre</h1>
+    <SiteBreadcrumbs :breadcrumbs="breadcrumbs" />
+    <UPage>
+      <UPageSection title="Devenir membre" />
+    </UPage>
   </div>
 </template>
diff --git a/wp-content/themes/ccat/app/pages/espace-membre.vue b/wp-content/themes/ccat/app/pages/espace-membre.vue
index 29cf0c6..822c774 100644
--- a/wp-content/themes/ccat/app/pages/espace-membre.vue
+++ b/wp-content/themes/ccat/app/pages/espace-membre.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import type { BreadcrumbItem } from "@nuxt/ui";
+
 useSeoMeta({ title: "Espace membre" });
+const breadcrumbs = [] as BreadcrumbItem[];
 </script>
 
 <template>
   <div>
-    <UContainer>
-      <h1>Espace membre</h1>
-    </UContainer>
+    <SiteBreadcrumbs :breadcrumbs="breadcrumbs" />
+    <UPage>
+      <UPageSection title="Espace membre" />
+    </UPage>
   </div>
 </template>