diff --git a/src/templates/MarkdownTemplate.jsx b/src/templates/MarkdownTemplate.jsx
index dda0e2bb..286a3fe2 100644
--- a/src/templates/MarkdownTemplate.jsx
+++ b/src/templates/MarkdownTemplate.jsx
@@ -1,12 +1,18 @@
 import { graphql } from 'gatsby'
 import React from 'react'
+import DocToc from '../components/DocToc'
+import DocHeader from '../components/DocHeader'
+import DocContent from '../components/DocContent'
 import Layout from '../components/Layout'
 
 export default function MarkdownTemplate({data}) {
     const post = data.markdownRemark
   return (
     <Layout>
-        <div dangerouslySetInnerHTML={{__html:post.html}}></div>
+        {/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
+        <DocHeader title={post.frontmatter.title}/>
+        {post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}
+        <DocContent html={post.html} htmlAst={post.htmlAst} />
     </Layout>
   )
 }
@@ -15,10 +21,21 @@ export const postQuery = graphql`
   query BlogPostByPath($path: String!) {
     markdownRemark(frontmatter: { slug: { eq: $path } }) {
       html
+      htmlAst
+      tableOfContents(maxDepth: 2)
       frontmatter {
         slug
         title
       }
+      ...PageFooter
+    }
+  }
+  fragment PageFooter on MarkdownRemark {
+    parent {
+      ... on File {
+        relativePath
+        sourceInstanceName
+      }
     }
   }
 `