diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index 58be8131a..2e8e1a558 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -47,6 +47,7 @@
   },
   {
     "displayName": "Build apps",
+    "url": "/build-apps",
     "children": [
       {
         "displayName": "Create a 'Hello, World!' app",
diff --git a/src/markdown-pages/build-apps/index.mdx b/src/markdown-pages/build-apps/index.mdx
new file mode 100644
index 000000000..2318bbb67
--- /dev/null
+++ b/src/markdown-pages/build-apps/index.mdx
@@ -0,0 +1,13 @@
+---
+path: '/build-apps'
+title: 'Build Custom New Relic Apps'
+template: 'OverviewTemplate'
+description: 'Learn how to build custom New Relic applications'
+---
+
+<Intro>
+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.
+
+<Video id="inyshp3m7r" type="wistia" />
+
+</Intro>
diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
new file mode 100644
index 000000000..6f434723b
--- /dev/null
+++ b/src/templates/OverviewTemplate.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+import { MDXProvider } from '@mdx-js/react';
+
+import { pageContext } from '../types';
+import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
+import Video from '../components/Video';
+import Step from '../components/Step';
+import Steps from '../components/Steps';
+import Caution from '../components/Caution';
+import Important from '../components/Important';
+import Tip from '../components/Tip';
+import Intro from '../components/Intro';
+import SEO from '../components/Seo';
+import { BreadcrumbContext } from '../components/BreadcrumbContext';
+import { PageContext } from '../components/PageContext';
+import createBreadcrumbs from '../utils/create-breadcrumbs';
+import pages from '../data/sidenav.json';
+import styles from './OverviewTemplate.module.scss';
+import CodeSnippet from '../components/CodeSnippet';
+
+/**
+ * TODO
+ * Confirm the open ended markdown space satisfies the design
+ * Add filtered guide listing
+ * Share markdown components collection
+ * Move contexts to wrapRootElement (and remove pageContext)
+ * Remove extra div from around PageTitle
+ */
+
+const components = {
+  Video,
+  Step,
+  Steps,
+  Caution,
+  Important,
+  Tip,
+  Intro,
+  code: (props) => <CodeSnippet {...props} />,
+};
+
+const OverviewTemplate = ({ data, pageContext }) => {
+  const { mdx } = data;
+  const { frontmatter, body } = mdx;
+  const { title, description } = frontmatter;
+  const crumbs = createBreadcrumbs(frontmatter.path, pages);
+
+  return (
+    <PageContext.Provider value={pageContext}>
+      <BreadcrumbContext.Provider value={crumbs}>
+        <Layout>
+          <SEO title={title} description={description} />
+          <div className={styles.header}>
+            <PageTitle>{title}</PageTitle>
+          </div>
+          <div className={styles.mdxContainer}>
+            <MDXProvider components={components}>
+              <MDXRenderer>{body}</MDXRenderer>
+            </MDXProvider>
+          </div>
+        </Layout>
+      </BreadcrumbContext.Provider>
+    </PageContext.Provider>
+  );
+};
+
+OverviewTemplate.propTypes = {
+  data: PropTypes.object,
+  pageContext,
+};
+
+export const pageQuery = graphql`
+  query($path: String!) {
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
+      frontmatter {
+        duration
+        path
+        title
+        description
+      }
+    }
+  }
+`;
+
+export default OverviewTemplate;
diff --git a/src/templates/OverviewTemplate.module.scss b/src/templates/OverviewTemplate.module.scss
new file mode 100644
index 000000000..e69de29bb