diff --git a/docs/app/pages/pro/.content/templates.yml b/docs/app/pages/pro/.content/templates.yml
index 6ce05aa0..eeb3d537 100644
--- a/docs/app/pages/pro/.content/templates.yml
+++ b/docs/app/pages/pro/.content/templates.yml
@@ -1,7 +1,8 @@
-title: Official Nuxt UI [Pro]{.text-(--ui-primary)} Templates
-description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
-head.title: Templates
-head.description: 'Ready to use templates powered by our premium Vue components and Nuxt Content. The templates are responsive, accessible and easy to customize so you can get started in no time.'
+title: Official Nuxt UI Pro Templates
+description: 'Ready to use templates powered by our premium Vue components and Nuxt Content. The templates are responsive, accessible and easy to customize so you can get started in no time.'
+hero:
+  title: Official Nuxt UI [Pro]{.text-(--ui-primary)} Templates
+  description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
 navigation: false
 links:
   - label: Get started
diff --git a/docs/app/pages/pro/templates.vue b/docs/app/pages/pro/templates.vue
index 3010ee18..bfaf2e21 100644
--- a/docs/app/pages/pro/templates.vue
+++ b/docs/app/pages/pro/templates.vue
@@ -2,13 +2,11 @@
 // @ts-expect-error yaml is not typed
 import page from '.content/templates.yml'
 
-const title = page.head?.title || page.title
-const description = page.head?.description || page.description
 useSeoMeta({
-  title,
-  description,
-  ogTitle: `${title} - Nuxt UI Pro`,
-  ogDescription: description
+  title: page.title,
+  description: page.description,
+  ogTitle: page.title,
+  ogDescription: page.description
 })
 defineOgImageComponent('Docs', {
   headline: 'Pro'
@@ -25,11 +23,11 @@ defineOgImageComponent('Docs', {
       </template>
 
       <template #title>
-        <MDC :value="page.title" unwrap="p" />
+        <MDC :value="page.hero.title" unwrap="p" />
       </template>
 
       <template #description>
-        <MDC :value="page.description" unwrap="p" />
+        <MDC :value="page.hero.description" unwrap="p" />
       </template>
     </UPageHero>