diff --git a/apps/docs/components/ExampleDocsPage.tsx b/apps/docs/components/ExampleDocsPage.tsx
index 0d3b1f1b6..ae7727f7c 100644
--- a/apps/docs/components/ExampleDocsPage.tsx
+++ b/apps/docs/components/ExampleDocsPage.tsx
@@ -28,9 +28,10 @@ export async function ExampleDocsPage({ article }: { article: Article }) {
 				<div className="page-header">
 					<Breadcrumb section={section} category={category} />
 					<h1>{article.title}</h1>
+					{article.description && <p>{article.description}</p>}
 				</div>
 				{article.hero && <Image alt="hero" title={article.title} src={`images/${article.hero}`} />}
-				{article.description && <Mdx content={article.description} />}
+				{article.content && <Mdx content={article.content} />}
 				{article.componentCode && (
 					<ExampleCodeBlock
 						articleId={article.id}
@@ -41,7 +42,6 @@ export async function ExampleDocsPage({ article }: { article: Article }) {
 						activeFile={'App.tsx'}
 					/>
 				)}
-				{article.content && <Mdx content={article.content} />}
 				{links && <ArticleNavLinks links={links} />}
 			</main>
 		</>
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 2141a86a9..1dd483cbf 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -549,6 +549,11 @@ body {
 	margin: 0;
 }
 
+.page-header > p {
+	margin-top: 1rem;
+	
+}
+
 .article table {
 	margin: 20px 0px;
 	border-radius: var(--border-radius-menu);