diff --git a/docs/components/docs/DocsPageHeader.vue b/docs/components/docs/DocsPageHeader.vue
index bdbef3e1..cdbef571 100644
--- a/docs/components/docs/DocsPageHeader.vue
+++ b/docs/components/docs/DocsPageHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <header v-if="page" class="relative border-b border-gray-200 dark:border-gray-800 pb-8 mb-12">
     <p class="mb-4 text-sm leading-6 font-semibold text-primary-500 dark:text-primary-400 capitalize">
-      {{ useLowerCase(page._dir) }}
+      {{ page._dir?.title ? page._dir.title : useLowerCase(page._dir) }}
     </p>
     <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
       <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight dark:text-white">
diff --git a/docs/content/1.getting-started/_dir.yml b/docs/content/1.getting-started/_dir.yml
new file mode 100644
index 00000000..bcd2ba14
--- /dev/null
+++ b/docs/content/1.getting-started/_dir.yml
@@ -0,0 +1 @@
+title: Getting Started