diff --git a/apps/docs/src/app/(docs)/[...slug]/page.tsx b/apps/docs/src/app/(docs)/[...slug]/page.tsx
index cc12824..8a1b6f4 100644
--- a/apps/docs/src/app/(docs)/[...slug]/page.tsx
+++ b/apps/docs/src/app/(docs)/[...slug]/page.tsx
@@ -9,6 +9,17 @@ type PageProps = {
     slug: string[]
   }
 }
+
+export const generateMetadata = ({ params }: PageProps) => {
+  const { slug } = params
+  const docs = getDocData(slug)
+
+  return {
+    title: docs?.title,
+    description: docs?.description
+  }
+}
+
 export async function generateStaticParams() {
   const slugs = getAllDocSlugs()
   return slugs
diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx
index 9731c1d..2e93195 100644
--- a/apps/docs/src/app/page.tsx
+++ b/apps/docs/src/app/page.tsx
@@ -4,6 +4,12 @@ import Link from 'next/link'
 import Logo from '@/components/Logo'
 import SyntaxHighlighter from '@/components/SyntaxHighlighter'
 
+export const generateMetadata = () => {
+  return {
+    title: 'Actify — 🌻React Material Design 3 Components Library'
+  }
+}
+
 export default function Page() {
   return (
     <main className="col-start-1 col-end-3 bg-surface">
diff --git a/apps/docs/src/lib/doc.ts b/apps/docs/src/lib/doc.ts
index 1fd2b6b..1919d29 100644
--- a/apps/docs/src/lib/doc.ts
+++ b/apps/docs/src/lib/doc.ts
@@ -33,6 +33,6 @@ export function getDocData(slugs: string[]) {
 
   return {
     content: matterResult.content,
-    ...(matterResult.data as { title: string })
+    ...(matterResult.data as { title: string; description?: string })
   }
 }