diff --git a/gatsby-node.js b/gatsby-node.js
index fe94cdd85..9eb81e796 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,7 +5,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMarkdownRemark(limit: 1000) {
+      allMdx(limit: 1000) {
         edges {
           node {
             frontmatter {
@@ -24,7 +24,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return;
   }
 
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+  result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: node.frontmatter.path,
       component: path.resolve(`src/templates/${node.frontmatter.template}.js`),
diff --git a/src/markdown-pages/example.md b/src/markdown-pages/example.mdx
similarity index 97%
rename from src/markdown-pages/example.md
rename to src/markdown-pages/example.mdx
index 5833d3053..cfcf05da3 100644
--- a/src/markdown-pages/example.md
+++ b/src/markdown-pages/example.mdx
@@ -5,7 +5,7 @@ title: 'GraphQL API'
 template: 'GuideTemplate'
 ---
 
-##Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+## Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 Vivamus sem dui, posuere et mattis eu,
 `laoreet eu sapien. Donec congue, leo vel cursus scelerisque, odio lacus gravida felis, ac finibus dui purus eget mi. Vivamus efficitur massa non nunc pharetra, ac aliquet purus condimentum. In egestas a velit non finibus. Duis tincidunt velit et fermentum porta. Duis pulvinar nunc at diam maximus mollis ut`
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index e321f2068..a42f77b2e 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
 import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
 import Container from '../components/Container';
@@ -9,8 +10,8 @@ import createBreadcrumbs from '../utils/create-breadcrumbs';
 import pages from '../data/sidenav.json';
 
 const GuideTemplate = ({ data }) => {
-  const { markdownRemark } = data;
-  const { frontmatter, html } = markdownRemark;
+  const { mdx } = data;
+  const { frontmatter, body } = mdx;
 
   const crumbs = createBreadcrumbs(frontmatter.path, pages);
 
@@ -21,10 +22,9 @@ const GuideTemplate = ({ data }) => {
         <div className="guideTemplate-container">
           <div>
             <h1>{frontmatter.title}</h1>
-            <div
-              className="guideTemplate-content"
-              dangerouslySetInnerHTML={{ __html: html }}
-            />
+            <div className="guideTemplate-content">
+              <MDXRenderer>{body}</MDXRenderer>
+            </div>
           </div>
         </div>
       </Container>
@@ -38,8 +38,8 @@ GuideTemplate.propTypes = {
 
 export const pageQuery = graphql`
   query($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
-      html
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
       frontmatter {
         duration
         path