diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ccfa4950f..e25e3fc73 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -28,7 +28,7 @@ you can use the Github `Edit This File` button to submit a change.
 
 To be able to [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) this repository and contribute you will need to be given write access to the repository. This is reserved for New Relic Employees only. Please contact the Developer Experience Team if you need write access.
 
-As a non New Relic Employee you can [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) the repository and contribute as needed. 
+As a non New Relic employee you can [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) the repository and contribute as needed. 
 
 ## Submitting a PR from a forked repo
 
@@ -112,4 +112,4 @@ When making educational guide contributions please follow these guidelines.
 
 ## Updating navigation
 
-@TODO Need to add how to update navigation when adding new content.
\ No newline at end of file
+@TODO Need to add how to update navigation when adding new content.
diff --git a/gatsby-config.js b/gatsby-config.js
index 62e4f274e..55f49cea0 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,6 +4,7 @@ module.exports = {
     description:
       'Do more on our platform and make New Relic your own with APIs, SDKs, code snippets, tutorials, and more developer tools.',
     author: 'New Relic',
+    siteUrl: 'https://developer.newrelic.com',
   },
   plugins: [
     'gatsby-plugin-react-helmet',
@@ -68,5 +69,6 @@ module.exports = {
         policy: [{ userAgent: '*', allow: '/' }],
       },
     },
+    'gatsby-plugin-sitemap',
   ],
 };
diff --git a/package-lock.json b/package-lock.json
index cbf1fde8b..f945679a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11245,6 +11245,27 @@
         }
       }
     },
+    "gatsby-plugin-sitemap": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-2.4.3.tgz",
+      "integrity": "sha512-XwtXRkUo1tFnr5PzwLlQqAD/Dbnrv0G9HjuUL24UhhCy0e5vqByohcewARUtySK0vSY1dr3msTO+UEKKuGWrFQ==",
+      "requires": {
+        "@babel/runtime": "^7.9.6",
+        "minimatch": "^3.0.4",
+        "pify": "^3.0.0",
+        "sitemap": "^1.13.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+          "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "gatsby-react-router-scroll": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.2.2.tgz",
@@ -23318,6 +23339,15 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "sitemap": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-1.13.0.tgz",
+      "integrity": "sha1-Vpy+IYAgKSamKiZs094Jyc60P4M=",
+      "requires": {
+        "underscore": "^1.7.0",
+        "url-join": "^1.1.0"
+      }
+    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -24981,6 +25011,11 @@
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
       "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo="
     },
+    "underscore": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.10.2.tgz",
+      "integrity": "sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg=="
+    },
     "underscore.string": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.5.tgz",
@@ -25531,6 +25566,11 @@
         }
       }
     },
+    "url-join": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-1.1.0.tgz",
+      "integrity": "sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg="
+    },
     "url-loader": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.2.tgz",
diff --git a/package.json b/package.json
index 4e000fd5d..27043ab2d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "gatsby-plugin-robots-txt": "^1.5.1",
     "gatsby-plugin-sass": "^2.2.3",
     "gatsby-plugin-sharp": "^2.5.6",
+    "gatsby-plugin-sitemap": "^2.4.3",
     "gatsby-remark-images": "^3.3.8",
     "gatsby-source-filesystem": "^2.2.4",
     "gatsby-transformer-remark": "^2.7.3",
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index 94f5df9a1..d5c365c15 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -1,17 +1,21 @@
 .container {
   height: 170px;
-  width: 50%;
   font-family: Menlo;
   line-height: 1rem;
   font-size: 0.75rem;
-  overflow-y: scroll;
+
   pre {
+    box-sizing: border-box;
     margin: 0;
     height: 100%;
+    overflow-y: auto;
+    padding: 20px 20px 20px 10px;
   }
 }
 
 .lineNumber {
+  display: inline-block;
+  width: 20px;
   text-align: right;
   padding-right: 1em;
   user-select: none;
@@ -23,13 +27,13 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  width: 50%;
   background: var(--color-neutrals-200);
   height: 35px;
   background-image: url('../images/copy.svg');
   background-size: 1rem;
   background-repeat: no-repeat;
   background-position: 83% 50%;
+
   button {
     padding-right: 1rem;
     font-size: 0.75rem;
diff --git a/src/components/Intro.js b/src/components/Intro.js
new file mode 100644
index 000000000..b1d5b0892
--- /dev/null
+++ b/src/components/Intro.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Intro.module.scss';
+import Proptypes from 'prop-types';
+
+const Intro = ({ children }) => (
+  <div className={styles.container}>{children}</div>
+);
+
+Intro.propTypes = {
+  children: Proptypes.node.isRequired,
+};
+
+export default Intro;
diff --git a/src/components/Intro.module.scss b/src/components/Intro.module.scss
new file mode 100644
index 000000000..96f9fe977
--- /dev/null
+++ b/src/components/Intro.module.scss
@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  p {
+    width: 50%;
+    color: var(--color-neutrals-600);
+    font-size: 1.125rem;
+    line-height: 2rem;
+    margin-right: 1rem;
+  }
+  div {
+    width: 50%;
+    margin-left: 1rem;
+  }
+}
diff --git a/src/components/Step.js b/src/components/Step.js
new file mode 100644
index 000000000..56c18f445
--- /dev/null
+++ b/src/components/Step.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './Step.module.scss';
+import Proptypes from 'prop-types';
+
+const Step = ({ children, number, total }) => {
+  const codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
+  const childrenWithoutCodeSnippet = children.filter(
+    (child) => child !== codeSnippet
+  );
+  return (
+    <div className={styles.wrapper}>
+      <p className={styles.stepNumber}>{`Step ${number} of ${total}`}</p>
+      <div className={styles.container}>
+        <div className={styles.stepDetails}>{childrenWithoutCodeSnippet}</div>
+        {codeSnippet}
+      </div>
+    </div>
+  );
+};
+
+Step.propTypes = {
+  children: Proptypes.node.isRequired,
+  number: Proptypes.number.isRequired,
+  total: Proptypes.number.isRequired,
+};
+
+export default Step;
diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss
new file mode 100644
index 000000000..94c9cef31
--- /dev/null
+++ b/src/components/Step.module.scss
@@ -0,0 +1,34 @@
+.wrapper {
+  border-top: solid 1px var(--color-neutrals-100);
+  box-sizing: border-box;
+  padding-top: 1.5rem;
+  margin-top: 2rem;
+  .stepNumber {
+    font-size: 0.75rem;
+    color: var(--color-neutrals-600);
+  }
+}
+.container {
+  display: flex;
+}
+.stepDetails {
+  margin-right: 1rem;
+  width: 50%;
+  line-height: 1.5rem;
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child,
+  h6:first-child {
+    color: var(--color-neutrals-900);
+    font-weight: bold;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+  }
+}
+.container > pre {
+  width: 50%;
+  margin-left: 1rem;
+}
diff --git a/src/components/Steps.js b/src/components/Steps.js
new file mode 100644
index 000000000..9e68e3151
--- /dev/null
+++ b/src/components/Steps.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Steps = ({ children }) => {
+  // get the number of steps
+  const totalSteps = children.filter(
+    (child) => child?.props?.mdxType === 'Step'
+  ).length;
+
+  // return the children with additional props
+  return (
+    <>
+      {children.map((child, index) => ({
+        ...child,
+        props: {
+          ...child.props,
+          number: index + 1,
+          total: totalSteps,
+        },
+      }))}
+    </>
+  );
+};
+
+Steps.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Steps;
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 26f69a486..cc82211b2 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -58,6 +58,8 @@ main {
 
 a {
   cursor: pointer;
+  text-decoration: none;
+  color: var(--color-brand-800);
 }
 
 img {
@@ -127,3 +129,15 @@ button,
     color: var(--color-brand-800);
   }
 }
+
+ul {
+  padding-left: 30px;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--color-neutrals-700);
+  font-size: 1rem;
+}
+
+li {
+  margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
index 29db1663a..a0fdf4feb 100644
--- a/src/markdown-pages/example.mdx
+++ b/src/markdown-pages/example.mdx
@@ -1,29 +1,88 @@
 ---
-path: '/guides/graphql-api'
+path: '/guides/example'
 duration: '30 min'
-title: 'GraphQL API'
+title: 'Example Guide'
 template: 'GuideTemplate'
 description: 'Example guide page'
 ---
 
-## Lorem ipsum
+<Intro>
 
-![image](../images/NewRelic-logo.png)
+This guide steps you through adding access to the New Relic time picker to a sample transaction overview application. You also add the selected time to the queries used in the application’s chart components. Start by setting up the sample application and running it locally. Then add the time picker, and some time picker features.
 
-Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis.
+<Video id="zxunt1u1as" type="wistia"/>
+</Intro>
+
+This guide requires that you have the following:
+
+- A github account
+- New Relic developer account
+- API Key
+- New Relic One CLI downloaded
+
+<br/>
+
+### Set up the sample application
+
+You can use this application for trying things out. Or, skip this section and start with "Add time picker" below, if you just want to add the time picker to an existing applicaiton. 
+
+<Steps>
+
+<Step>
+
+## Clone the example application
+This repo contains an example application and code that supports a handful of how to guides for cool and useful features you migth want in your applications. If you've tried other how to guides, you might have already cloned this repo, in which case, you should probably go ahead and update from master.
+
+```shell lineNumbers=false
+git clone https://github.com/newrelic/nr1-how-to.git
+```
+
+</Step>
+
+<Step>
+
+## Set up and run the application locally
+Use the New Relic One CLI to update the application UUID and run the application locally. In the terminal,  change to the time picker directory.
+
+```shell lineNumbers=false
+cd /nr1-howto/add-time-picker
+```
+</Step>
+
+<Step>
+
+## Make sure you're getting data from the right New Relic account
+In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI):
 
 ```jsx
-import React from 'react';
+this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
+```
+
+</Step>
+
+<Step>
 
-const FooBar = () => (
-  <div>Hello, World!</div>
-);
+Update the UUID and serve the application by running the following:
 
-export default FooBar;
+```shell lineNumbers=false
+nr1 nerdpack:uuid -gf
+nr1 nerdpack:serve
 ```
 
-Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis.
+</Step>
 
-<Video id="ZagZfNQYJEU" type="youtube" />
+</Steps>
 
-<Video id="zxunt1u1as" type="wistia"/>
+# Next Steps
+
+You'll get a URL to access New Relic One and see your application running locally: https://one.newrelic.com/?nerdpacks=local
+
+One the New Relic home page, there's a new launcher to the Add time picker application.
+
+Click the launcher, and the dashboard opens with your New Relic account transactions. 
+
+
+### Related info
+
+- [New Relic documentation](https://docs.newrelic.com)
+- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268)
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 5938798d3..b51cc9eb1 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -8,6 +8,9 @@ import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
 import Container from '../components/Container';
 import Video from '../components/Video';
+import Step from '../components/Step';
+import Steps from '../components/Steps';
+import Intro from '../components/Intro';
 import SEO from '../components/Seo';
 
 import createBreadcrumbs from '../utils/create-breadcrumbs';
@@ -16,6 +19,9 @@ import CodeSnippet from '../components/CodeSnippet';
 
 const components = {
   Video,
+  Step,
+  Steps,
+  Intro,
   code: (props) => <CodeSnippet {...props} />,
 };
 
@@ -31,16 +37,10 @@ const GuideTemplate = ({ data }) => {
       <SEO title={title} description={description} />
       <BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
       <Container>
-        <div>
-          <div>
-            <h1>{title}</h1>
-            <div>
-              <MDXProvider components={components}>
-                <MDXRenderer>{body}</MDXRenderer>
-              </MDXProvider>
-            </div>
-          </div>
-        </div>
+        <h1>{title}</h1>
+        <MDXProvider components={components}>
+          <MDXRenderer>{body}</MDXRenderer>
+        </MDXProvider>
       </Container>
     </Layout>
   );