diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx
index bfc92fc18c..ed8f87144b 100644
--- a/src/components/MDXComponents.tsx
+++ b/src/components/MDXComponents.tsx
@@ -14,6 +14,7 @@ import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session'
 import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
 import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift';
 
+import { textStyles } from '../theme/foundations';
 // syntax highlighting languages supported
 SyntaxHighlighter.registerLanguage('bash', bash);
 SyntaxHighlighter.registerLanguage('go', go);
@@ -27,6 +28,7 @@ SyntaxHighlighter.registerLanguage('solidity', solidity);
 SyntaxHighlighter.registerLanguage('swift', swift);
 
 import { getProgrammingLanguageName } from '../utils';
+const { header1, header2, header3, header4 } = textStyles
 
 const MDXComponents = {
   // paragraphs
@@ -53,28 +55,28 @@ const MDXComponents = {
   // headings
   h1: ({ children }: any) => {
     return (
-      <Heading as='h1' textAlign='start' fontSize='4xl' mb={5}>
+      <Heading as='h1' textAlign='start' mb={5} {...header1}>
         {children}
       </Heading>
     );
   },
   h2: ({ children }: any) => {
     return (
-      <Heading as='h2' textAlign='start' fontSize='3xl' mb={4}>
+      <Heading as='h2' textAlign='start' mb={4} {...header2}>
         {children}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
     return (
-      <Heading as='h3' fontSize='2xl' mt={5} mb={2.5}>
+      <Heading as='h3' mt={5} mb={2.5} {...header3}>
         {children}
       </Heading>
     );
   },
   h4: ({ children }: any) => {
     return (
-      <Heading as='h4' fontSize='lg' mb={2.5}>
+      <Heading as='h4' mb={2.5} {...header4}>
         {children}
       </Heading>
     );
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index daeb911d84..b89f73ee5f 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -6,6 +6,7 @@ import { Heading } from '@chakra-ui/react';
 import MDXComponents from '../components/';
 import { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import { textStyles } from '../theme/foundations';
 
 const MATTER_OPTIONS = {
   engines: {
@@ -71,8 +72,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
   return (
     <>
       <main>
-        <Heading as='h1'>{frontmatter.title}</Heading>
-
+        <Heading as='h1' mb={5} {...textStyles.header1}>{frontmatter.title}</Heading>
         <ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
       </main>
     </>