diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css
index b019638..f6a8b68 100644
--- a/packages/chronicle/src/themes/default/Page.module.css
+++ b/packages/chronicle/src/themes/default/Page.module.css
@@ -11,6 +11,10 @@
   max-width: 768px;
 }
 
+.title {
+  margin: 0 0 var(--rs-space-8) 0;
+}
+
 .content {
   line-height: 1.7;
 }
diff --git a/packages/chronicle/src/themes/default/Page.tsx b/packages/chronicle/src/themes/default/Page.tsx
index 194cd67..a1bbaad 100644
--- a/packages/chronicle/src/themes/default/Page.tsx
+++ b/packages/chronicle/src/themes/default/Page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex } from '@raystack/apsara';
+import { Flex, Headline } from '@raystack/apsara';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
 import { Toc } from './Toc';
@@ -9,6 +9,11 @@ export function Page({ page }: ThemePageProps) {
   return (
     <Flex className={styles.page}>
       <article className={styles.article} data-article-content>
+        {page.frontmatter.title && (
+          <Headline size="t2" render={<h1 />} className={styles.title}>
+            {page.frontmatter.title}
+          </Headline>
+        )}
         <div className={styles.content}>{page.content}</div>
       </article>
       <Toc items={page.toc} />