diff --git a/gatsby-node.js b/gatsby-node.js
index 9aa6484c0..fe94cdd85 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,10 +5,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___date] }
-        limit: 1000
-      ) {
+      allMarkdownRemark(limit: 1000) {
         edges {
           node {
             frontmatter {
diff --git a/src/components/BreadcrumbBar.js b/src/components/BreadcrumbBar.js
new file mode 100644
index 000000000..173b9fca6
--- /dev/null
+++ b/src/components/BreadcrumbBar.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import './BreadcrumbBar.scss';
+
+const BreadcrumbBar = () => {
+  return <div className="breadcrumbBar">hey</div>;
+};
+
+export default BreadcrumbBar;
diff --git a/src/components/BreadcrumbBar.scss b/src/components/BreadcrumbBar.scss
new file mode 100644
index 000000000..991ac07e0
--- /dev/null
+++ b/src/components/BreadcrumbBar.scss
@@ -0,0 +1,5 @@
+.breadcrumbBar {
+  background: rgb(202, 201, 201);
+  height: 50px;
+  width: 100%;
+}
diff --git a/src/markdown-pages/example.md b/src/markdown-pages/example.md
index afeb27ce6..f6fe9ec92 100644
--- a/src/markdown-pages/example.md
+++ b/src/markdown-pages/example.md
@@ -1,8 +1,8 @@
 ---
-path: "/docs/1"
-date: "2020-04-20"
-title: "My cool docs"
-template: "example-template"
+path: '/docs/1'
+duration: '30 min'
+title: 'Build an app'
+template: 'GuideTemplate'
 ---
 
 ### This doc is great
diff --git a/src/templates/example-template.js b/src/templates/GuideTemplate.js
similarity index 51%
rename from src/templates/example-template.js
rename to src/templates/GuideTemplate.js
index cabc60be3..77466e481 100644
--- a/src/templates/example-template.js
+++ b/src/templates/GuideTemplate.js
@@ -1,23 +1,28 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
+import Layout from '../components/Layout';
+import BreadcrumbBar from '../components/BreadcrumbBar';
 
-export default function Template({
+export default function GuideTemplate({
   data, // this prop will be injected by the GraphQL query below.
 }) {
   const { markdownRemark } = data; // data.markdownRemark holds your post data
   const { frontmatter, html } = markdownRemark;
   return (
-    <div className="doc-container">
-      <div className="doc">
-        <h1>{frontmatter.title}</h1>
-        <h2>{frontmatter.date}</h2>
-        <div
-          className="doc-content"
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
+    <Layout>
+      <BreadcrumbBar />
+      <div className="guideTemplate-container">
+        <div>
+          <h1>{frontmatter.title}</h1>
+          <h2>{frontmatter.duration}</h2>
+          <div
+            className="guideTemplate-content"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </div>
       </div>
-    </div>
+    </Layout>
   );
 }
 export const pageQuery = graphql`
@@ -25,13 +30,13 @@ export const pageQuery = graphql`
     markdownRemark(frontmatter: { path: { eq: $path } }) {
       html
       frontmatter {
-        date(formatString: "MMMM DD, YYYY")
+        duration
         path
         title
       }
     }
   }
 `;
-Template.propTypes = {
+GuideTemplate.propTypes = {
   data: PropTypes.object,
 };
diff --git a/src/templates/GuideTemplate.scss b/src/templates/GuideTemplate.scss
new file mode 100644
index 000000000..e69de29bb