diff --git a/src/components/RelatedContent.js b/src/components/RelatedContent.js
deleted file mode 100644
index 79b9c3798..000000000
--- a/src/components/RelatedContent.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
-import { graphql, useStaticQuery } from 'gatsby';
-import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic';
-import { PageContext } from './PageContext';
-
-const RelatedContent = ({ className, page }) => {
-  const { site } = useStaticQuery(graphql`
-    query {
-      site {
-        siteMetadata {
-          repository
-        }
-      }
-    }
-  `);
-  const { fileRelativePath } = useContext(PageContext);
-
-  const {
-    fields: { gitAuthorTime },
-  } = page;
-
-  const {
-    siteMetadata: { repository },
-  } = site;
-
-  return (
-    <aside className={className}>
-      <h4>Contribute</h4>
-      <Button
-        as={ExternalLink}
-        href={`${repository}/issues/new/choose`}
-        css={css`
-          margin-right: 0.5rem;
-        `}
-        variant={Button.VARIANT.PRIMARY}
-        size={Button.SIZE.SMALL}
-      >
-        <Icon
-          name={Icon.TYPE.GITHUB}
-          css={css`
-            margin-right: 0.5rem;
-          `}
-        />
-        File an issue
-      </Button>
-      <Button
-        as={ExternalLink}
-        href={`${repository}/tree/main/${fileRelativePath}`}
-        variant={Button.VARIANT.NORMAL}
-        size={Button.SIZE.SMALL}
-      >
-        <Icon
-          name={Icon.TYPE.EDIT}
-          css={css`
-            margin-right: 0.5rem;
-          `}
-        />
-        Edit this page
-      </Button>
-
-      <div
-        css={css`
-          font-size: 0.875rem;
-          font-style: italic;
-          margin-top: 1rem;
-          color: var(--color-neutrals-500);
-
-          .dark-mode & {
-            color: var(--color-dark-500);
-          }
-        `}
-      >
-        {`Page last modified on ${gitAuthorTime}`}
-      </div>
-    </aside>
-  );
-};
-
-RelatedContent.propTypes = {
-  className: PropTypes.string,
-  page: PropTypes.shape({
-    fields: PropTypes.shape({
-      gitAuthorTime: PropTypes.string,
-    }),
-  }),
-};
-
-export const query = graphql`
-  fragment RelatedContent_page on Mdx {
-    fields {
-      gitAuthorTime(formatString: "MMMM DD, YYYY")
-    }
-  }
-`;
-
-export default RelatedContent;
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 0a2447c9b..563008db0 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -2,11 +2,9 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import MDXContainer from '../components/MDXContainer';
 
+import PageLayout from '../components/PageLayout';
 import FeatherIcon from '../components/FeatherIcon';
-import RelatedContent from '../components/RelatedContent';
-import PageTitle from '../components/PageTitle';
 import SEO from '../components/Seo';
 
 const GuideTemplate = ({ data }) => {
@@ -17,39 +15,8 @@ const GuideTemplate = ({ data }) => {
   return (
     <>
       <SEO title={title} description={description} />
-      <div
-        css={css`
-          display: grid;
-          grid-template-areas:
-            'page-title page-title'
-            'content related-content';
-          grid-template-columns: minmax(0, 1fr) auto;
-          grid-gap: 2rem;
-
-          @media (max-width: 1240px) {
-            grid-template-areas:
-              'page-title'
-              'content';
-            grid-template-columns: minmax(0, 1fr);
-            grid-gap: 0;
-          }
-        `}
-      >
-        <div
-          css={css`
-            grid-area: page-title;
-            border-bottom: 1px solid var(--divider-color);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            @media screen and (max-width: 1080px) {
-              flex-direction: column;
-              align-items: flex-start;
-            }
-          `}
-        >
-          <PageTitle>{title}</PageTitle>
+      <PageLayout type={PageLayout.TYPE.RELATED_CONTENT}>
+        <PageLayout.Header title={title}>
           {duration && (
             <div
               css={css`
@@ -68,28 +35,10 @@ const GuideTemplate = ({ data }) => {
               {duration}
             </div>
           )}
-        </div>
-        <MDXContainer
-          css={css`
-            grid-area: content;
-          `}
-        >
-          {body}
-        </MDXContainer>
-        <RelatedContent
-          page={mdx}
-          css={css`
-            grid-area: related-content;
-            position: sticky;
-            top: calc(var(--global-header-height) + 2rem);
-            align-self: start;
-
-            @media (max-width: 1240px) {
-              display: none;
-            }
-          `}
-        />
-      </div>
+        </PageLayout.Header>
+        <PageLayout.MarkdownContent>{body}</PageLayout.MarkdownContent>
+        <PageLayout.RelatedContent page={mdx} />
+      </PageLayout>
     </>
   );
 };