diff --git a/theme/src/client/components/VPDocBreadcrumbs.vue b/theme/src/client/components/VPDocBreadcrumbs.vue
index 54112db9..4345f147 100644
--- a/theme/src/client/components/VPDocBreadcrumbs.vue
+++ b/theme/src/client/components/VPDocBreadcrumbs.vue
@@ -60,7 +60,11 @@ const breadcrumbList = computed<Breadcrumb[]>(() => {
       list.push(...(resolveSidebar(sidebar.value) || []))
     }
   }
-  list.push({ text: page.value.title, link: page.value.path, current: true })
+  list.push({
+    text: page.value.frontmatter.title || page.value.title,
+    link: page.value.path,
+    current: true,
+  })
 
   return list.reduce<Breadcrumb[]>((acc, item, index) => {
     const prev = acc[index - 1]
diff --git a/theme/src/client/components/VPDocMeta.vue b/theme/src/client/components/VPDocMeta.vue
index bbb03769..a1154e64 100644
--- a/theme/src/client/components/VPDocMeta.vue
+++ b/theme/src/client/components/VPDocMeta.vue
@@ -65,8 +65,8 @@ const hasMeta = computed(() =>
   <div class="vp-doc-title">
     <slot name="doc-title-before" />
     <h1 class="page-title" :class="{ padding: !hasMeta }">
-      <VPBadge v-if="page.frontmatter.draft" type="warning" text="DRAFT" />
-      {{ page.title }}
+      <VPBadge v-if="matter.draft" type="warning" text="DRAFT" />
+      {{ matter.title || page.title }}
       <VPBadge v-if="badge" :type="badge.type || 'tip'" :text="badge.text" />
     </h1>
     <slot name="doc-title-after" />
diff --git a/theme/src/node/pages/extendsPage.ts b/theme/src/node/pages/extendsPage.ts
index 3e65d2f7..ab2bcbd2 100644
--- a/theme/src/node/pages/extendsPage.ts
+++ b/theme/src/node/pages/extendsPage.ts
@@ -1,5 +1,6 @@
 import type { Page } from 'vuepress/core'
 import type { ThemePageData } from '../../shared/index.js'
+import { findCollection } from '../collections/findCollection.js'
 import { autoCategory } from './autoCategory.js'
 import { encryptPage } from './encryptPage.js'
 import { enableBulletin } from './pageBulletin.js'
@@ -58,4 +59,16 @@ function cleanPageData(page: Page<ThemePageData>) {
     page.frontmatter.externalLinkIcon = page.frontmatter.externalLink
     delete page.frontmatter.externalLink
   }
+
+  // is markdown file
+  if (page.data.filePathRelative?.endsWith('.md')) {
+    if (!(page as any)._rawTitle)
+      (page as any)._rawTitle = page.frontmatter.title || page.data.title || page.title
+    const title = (page as any)._rawTitle
+    const collection = findCollection(page)
+    if (collection) {
+      const newTitle = `${title} | ${collection.title}`
+      page.data.title = newTitle
+    }
+  }
 }