diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js
index 3c097917..2c17c381 100644
--- a/src/components/Breadcrumbs.js
+++ b/src/components/Breadcrumbs.js
@@ -16,6 +16,7 @@ const Breadcrumbs = ({ segments, separator }) => {
           <Link
             to={segment.url}
             css={css`
+              color: var(--brand-highlight-green);
               text-decoration: none;
             `}
           >
diff --git a/src/components/GlobalStyles.js b/src/components/GlobalStyles.js
index f8262be2..297118c6 100644
--- a/src/components/GlobalStyles.js
+++ b/src/components/GlobalStyles.js
@@ -20,7 +20,19 @@ import {
   SohneLeichtKursiv,
 } from './fonts';
 
-const fonts = styled.div`
+const GlobalStyles = styled.div`
+  /* BRAND COLORS */
+  --brand-highlight-green: #1ce783;
+  --brand-grey-black: #1d252c;
+  --brand-white: #f9fafa;
+
+  --brand-primary-background-color: #e5e5e5;
+  --brand-secondary-background-color: var(--brand-grey-black);
+
+  --brand-primary-text-color: var(--brand-grey-black);
+  --brand-secondary-text-color: var(--brand-white);
+
+  /* FONTS */
   @font-face {
     font-family: 'Söhne-Buch';
     src: url(${SohneBuch});
@@ -95,4 +107,4 @@ const fonts = styled.div`
   }
 `;
 
-export default fonts;
+export default GlobalStyles;
diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
index beea8d59..8b1a61b8 100644
--- a/src/components/IOBanner.js
+++ b/src/components/IOBanner.js
@@ -128,7 +128,6 @@ const BannerHeaderContent = ({ search, setSearch, setIsSearchInputEmpty }) => {
     </div>
   );
 };
-
 const IOBanner = ({ search, setSearch, setIsSearchInputEmpty }) => {
   return (
     <div
@@ -138,6 +137,7 @@ const IOBanner = ({ search, setSearch, setIsSearchInputEmpty }) => {
         --left-margin: calc(50% - 50vw);
 
         position: absolute;
+        top: var(--global-header-height);
         width: 100vw;
         left: var(--left-margin);
         height: var(--banner-height);
diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
index 9b4849b9..78606c07 100644
--- a/src/components/InstallButton.js
+++ b/src/components/InstallButton.js
@@ -85,7 +85,12 @@ const createInstallLink = (
 const hasComponent = (quickstart, key) =>
   quickstart[key] && quickstart[key].length > 0;
 
-const InstallButton = ({ quickstart, location, ...props }) => {
+const InstallButton = ({
+  quickstart,
+  location,
+  style = 'PRIMARY',
+  ...props
+}) => {
   const { treatment } = useTreatment('super_tiles');
 
   const hasInstallableComponent =
@@ -271,17 +276,29 @@ const InstallButton = ({ quickstart, location, ...props }) => {
       onClick={handleInstallClick}
       variant={Button.VARIANT.PRIMARY}
       css={css`
-        --button-background: #1d252c;
-        border-radius: 4px;
-        padding: 1rem;
+        --button-background: var(
+          ${style === 'PRIMARY'
+            ? '--brand-white'
+            : '--brand-secondary-background-color'}
+        );
+        --button-text-color: var(
+          ${style === 'PRIMARY'
+            ? '--brand-primary-text-color'
+            : '--brand-secondary-text-color'}
+        );
         background-color: var(--button-background);
-        font-family: 'Söhne-Leicht';
+        border-radius: 4px;
+        color: var(--button-text-color);
         font-size: 14px;
+        line-height: 21px;
         font-weight: 400;
+        padding: 1rem;
 
         &:hover {
           background-color: var(--button-background);
+          color: var(--button-text-color);
         }
+
         ${hasInstallableComponent &&
         css`
           padding: 0;
@@ -302,6 +319,7 @@ InstallButton.propTypes = {
   quickstart: quickstart.isRequired,
   onClick: PropTypes.func.isRequired,
   location: PropTypes.object.isRequired,
+  style: PropTypes.oneOf(['PRIMARY', 'SECONDARY']),
 };
 
 export default InstallButton;
diff --git a/src/components/BannerBackground.js b/src/components/LandingBanner/BannerBackground.js
similarity index 78%
rename from src/components/BannerBackground.js
rename to src/components/LandingBanner/BannerBackground.js
index ebe3216d..12d55be4 100644
--- a/src/components/BannerBackground.js
+++ b/src/components/LandingBanner/BannerBackground.js
@@ -1,26 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-import bannerOverlayRight from '../images/io-banner/banner-style-right.svg';
-import bannerOverlayLeft from '../images/io-banner/banner-style-left.svg';
-import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
+import bannerOverlayRight from '../../images/io-banner/banner-style-right.svg';
+import bannerOverlayLeft from '../../images/io-banner/banner-style-left.svg';
+import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../../data/constants';
 
 const BannerBackground = ({ children }) => {
   return (
     <div
       css={css`
-        --banner-height: 368px;
+        --banner-height: 430px;
 
         --left-margin: calc(50% - 50vw);
 
-        position: absolute;
         width: 100vw;
         left: var(--left-margin);
         height: var(--banner-height);
         margin: 0 0 0 var(--left-margin);
-        padding: 0 40px;
 
-        background: #1d252c;
+        background: var(--brand-secondary-background-color);
         box-sizing: border-box;
         @media (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
           --banner-height: unset;
@@ -29,21 +27,20 @@ const BannerBackground = ({ children }) => {
     >
       <div
         css={css`
-          margin: 0 auto 88px;
+          height: 100%;
           position: relative;
           display: flex;
           justify-content: center;
           align-items: center;
           @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
             width: 100%;
-            height: unset;
             margin: 0 auto 0px;
           }
         `}
       >
         <div
           css={css`
-            margin-right: auto;
+            margin-left: auto;
 
             @media (max-width: 1440px) {
               display: none;
@@ -55,7 +52,7 @@ const BannerBackground = ({ children }) => {
               position: absolute;
               width: 157.03px;
               height: 148px;
-              left: 10px;
+              left: 5px;
               top: 50px;
               z-index: auto;
             `}
@@ -67,7 +64,7 @@ const BannerBackground = ({ children }) => {
         {children}
         <div
           css={css`
-            margin-left: auto;
+            margin-right: auto;
 
             @media (max-width: 1440px) {
               display: none;
@@ -77,8 +74,8 @@ const BannerBackground = ({ children }) => {
           <img
             css={css`
               position: absolute;
-              right: 10px;
-              top: 36px;
+              right: 5px;
+              top: 0px;
               z-index: auto;
             `}
             src={bannerOverlayRight}
@@ -90,8 +87,9 @@ const BannerBackground = ({ children }) => {
     </div>
   );
 };
+
 BannerBackground.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
 };
 
 export default BannerBackground;
diff --git a/src/components/LandingBanner.js b/src/components/LandingBanner/index.js
similarity index 71%
rename from src/components/LandingBanner.js
rename to src/components/LandingBanner/index.js
index 5a0e2f58..4dc4ecc3 100644
--- a/src/components/LandingBanner.js
+++ b/src/components/LandingBanner/index.js
@@ -1,19 +1,17 @@
-import { Button, Icon, Link, useTessen } from '@newrelic/gatsby-theme-newrelic';
-import { QUICKSTARTS_REPO, SHIELD_LEVELS } from '../data/constants';
 import React, { useEffect, useState } from 'react';
 
-import Breadcrumbs from '../components/Breadcrumbs';
-import InstallButton from '../components/InstallButton';
+import Breadcrumbs from '../../components/Breadcrumbs';
+import InstallButton from '../../components/InstallButton';
 import { css } from '@emotion/react';
-import { quickstart } from '../types';
-import defaultImage from '../images/defaultQuickstartImage.png';
+import { quickstart } from '../../types';
+import defaultImage from '../../images/defaultQuickstartImage.png';
 import BannerBackground from './BannerBackground';
 
+const IMAGE_DISPLAY_BREAKPOINT = '1200px';
+
 const LandingBanner = ({ quickstart, className }) => {
   const [imgStyle, setImgStyle] = useState({});
 
-  const quickstartUrl = quickstart.packUrl || QUICKSTARTS_REPO;
-  const tessen = useTessen();
   const breadcrumbs = [
     {
       name: 'Instant Observability',
@@ -24,15 +22,6 @@ const LandingBanner = ({ quickstart, className }) => {
     },
   ];
 
-  const trackQuickstart = (action, quickstart) => () =>
-    tessen.track({
-      eventName: 'instantObservability',
-      category: action,
-      quickstartName: quickstart.name,
-      quickstartId: quickstart.id,
-      quickstartUrl: quickstart.packUrl,
-    });
-
   // get image resolution from URL
   const getURLMeta = async (url) => {
     const img = new Image();
@@ -71,34 +60,37 @@ const LandingBanner = ({ quickstart, className }) => {
       <div
         className={className}
         css={css`
-          color: white;
-          h2 {
-            color: white;
-          }
-          z-index: 2;
-
           border-bottom: none;
+          color: var(--brand-secondary-text-color);
           display: grid;
           grid-column-gap: 1rem;
           grid-row-gap: 1rem;
-          grid-template-columns: 1fr 0.5fr 1fr;
           grid-template-areas:
             'breadcrumbs logo .'
             'title title image'
             'summ summ image'
-            'summ summ image'
             'cta . image';
+          grid-template-columns: 1fr 0.5fr 1fr;
+          grid-template-rows: 0.25fr 0.5fr auto auto;
+          height: 100%;
           justify-content: normal;
           justify-self: center;
+          padding-bottom: 1rem;
           row-gap: 1rem;
+          z-index: 2;
 
-          @media (max-width: 1300px) {
-            grid-template-columns: 1fr;
+          h2 {
+            color: white;
+          }
+
+          @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
             grid-template-areas:
               'breadcrumbs'
               'title'
               'summ'
               'cta';
+            grid-template-columns: 1fr;
+            grid-template-rows: 0.25fr 0.25fr auto auto;
           }
         `}
       >
@@ -106,13 +98,13 @@ const LandingBanner = ({ quickstart, className }) => {
         {quickstart.logoUrl && (
           <div
             css={css`
+              align-self: start;
               background-color: white;
               border-radius: 0 0 7px 7px;
               grid-area: logo;
-              align-self: center;
               justify-self: center;
               padding: 5px;
-              @media (max-width: 1300px) {
+              @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
                 display: none;
               }
             `}
@@ -135,8 +127,12 @@ const LandingBanner = ({ quickstart, className }) => {
             font-weight: normal;
             grid-area: title;
             margin-bottom: 0;
-            padding-bottom: 0;
-            align-self: end;
+
+            @media (max-width: 760px) {
+              font-size: 44px;
+              line-height: 46px;
+              letter-spacing: -0.015em;
+            }
           `}
         >
           {quickstart.title}
@@ -147,10 +143,12 @@ const LandingBanner = ({ quickstart, className }) => {
               grid-area: summ;
               font-size: 24px;
               line-height: 32px;
-              margin-right: 3rem;
 
               @media (max-width: 760px) {
                 max-width: 100%;
+                font-size: 18px;
+                line-height: 24px;
+                letter-spacing: -0.005em;
               }
             `}
           >
@@ -160,13 +158,10 @@ const LandingBanner = ({ quickstart, className }) => {
         <div
           css={css`
             grid-area: image;
-            align-self: center;
-            justify-self: center;
-            margin-bottom: 1rem;
-            border: 28px solid #000000;
-            border-radius: 26px;
+            align-self: start;
+            margin: 0 auto 1rem;
 
-            @media (max-width: 1300px) {
+            @media (max-width: ${IMAGE_DISPLAY_BREAKPOINT}) {
               display: none;
             }
           `}
@@ -175,8 +170,9 @@ const LandingBanner = ({ quickstart, className }) => {
             src={quickstart.dashboards[0]?.screenshots[0] ?? defaultImage}
             alt={quickstart.title}
             css={css`
-              height: 200px;
-              width: 100%;
+              border: 28px solid #000000;
+              border-radius: 26px;
+              height: 250px;
             `}
           />
         </div>
@@ -186,19 +182,10 @@ const LandingBanner = ({ quickstart, className }) => {
           `}
         >
           <InstallButton
-            css={css`
-              --button-background: #f9fafa;
-
-              background-color: var(--button-background);
-              color: #1d252c;
-
-              &:hover {
-                background-color: var(--button-background);
-                color: #1d252c;
-              }
-            `}
+            css={css``}
             quickstart={quickstart}
             location={location}
+            style="PRIMARY"
           />
         </div>
       </div>
diff --git a/src/components/LandingPageFooter.js b/src/components/LandingPageFooter.js
index 2ff39391..b152191e 100644
--- a/src/components/LandingPageFooter.js
+++ b/src/components/LandingPageFooter.js
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-    Link,
-    Button,
-    PageTools,
-} from '@newrelic/gatsby-theme-newrelic';
+import { Link, Button, PageTools } from '@newrelic/gatsby-theme-newrelic';
 import { css } from '@emotion/react';
 import { quickstart } from '../types';
 import SupportSection from './SupportSection';
@@ -13,158 +9,156 @@ import TickIconSVG from './Icons/TickIconSVG';
 import GitHubIconSVG from './Icons/GitHubIconSVG';
 
 const LandingPageFooter = ({
-    quickstart,
-    trackQuickstart,
-    tessenSupportTrack,
+  quickstart,
+  trackQuickstart,
+  tessenSupportTrack,
 }) => {
-    const quickstartUrl = quickstart.packUrl || QUICKSTARTS_REPO;
-    return (
-        <>
-            <div
-                css={css`
-                    display: grid;
-                    grid-template-columns: repeat(4, 1fr);
-                    gap: 10px;
-                    grid-auto-rows: minmax(100px, auto);
-                    font-size: 18px;
+  const quickstartUrl = quickstart.packUrl || QUICKSTARTS_REPO;
+  return (
+    <>
+      <div
+        css={css`
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 10px;
+          grid-auto-rows: minmax(100px, auto);
+          font-size: 18px;
 
-                    @media (max-width: 760px) {
-                        grid-template-columns: repeat(1, 1fr);
-                        margin-left: 40px;
-                      margin-right: 23px;
-                    }
+          @media (max-width: 760px) {
+            grid-template-columns: repeat(1, 1fr);
+          }
 
-                    @media (min-width: 760px) {
-                      margin-left: 156px;
-                        margin-right: 155px;
-                      h6 {
-                          margin-bottom: 66px;
-                            font-weight: 400;
-                        
-                      }
-                      .collaborate-section {
-                          margin-bottom: 34px !important;
-                      }
-                    }
+          @media (min-width: 760px) {
+            h6 {
+              margin-bottom: 66px;
+              font-weight: 400;
+            }
+            .collaborate-section {
+              margin-bottom: 34px !important;
+            }
+          }
 
-                    @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
-                        @media {
-                            grid-template-columns: repeat(1, 1fr);
-                            margin-left: 40px;
-                          margin-right: 23px;
-                        }}
-          `}>
-                <PageTools.Section>
-                    <h6>
-                        Authors
-                    </h6>
-                    <p>
-                        {quickstart.authors.join(', ')}
-                    </p>
-                </PageTools.Section>
+          @media not all and (min-resolution: 0.001dpcm) and max-width: 760px {
+            @media {
+              grid-template-columns: repeat(1, 1fr);
+              margin-left: 40px;
+              margin-right: 23px;
+            }
+          }
+          &: * {
+            padding: 1rem;
+          }
+        `}
+      >
+        <div>
+          <h6>Authors</h6>
+          <p>{quickstart.authors.join(', ')}</p>
+        </div>
 
-                <PageTools.Section>
-                    <h6>
-                        Support
-                    </h6>
-                    <div>
-                        <SupportSection
-                            supportLevel={quickstart.level}
-                            onClick={tessenSupportTrack(quickstart)}
-                        />
-                    </div>
-                </PageTools.Section>
+        <div
+          css={css`
+            padding-bottom: 2rem;
+          `}
+        >
+          <h6>Support</h6>
+          <div>
+            <SupportSection
+              supportLevel={quickstart.level}
+              onClick={tessenSupportTrack(quickstart)}
+            />
+          </div>
+        </div>
 
-                <PageTools.Section>
-                    <h6 className='collaborate-section'>
-                        Collaborate on this quickstart
-                    </h6>
-                    <div>
-                        <Button
-                            css={css`
-                                background: var(--background-color);
-                        
-                                color: var(--btn-text-color);
-                                border-radius: 4px;
-                                padding: 13.5px 20px 13.5px 22px;
-                                column-gap: 14.45px; 
-                                font-weight: 400; 
-                                &:hover{
-                                    color: var(--white-hover-color);
-                                  }
+        <div
+          css={css`
+            padding-bottom: 2rem;
+          `}
+        >
+          <h6 className="collaborate-section">
+            Collaborate on this quickstart
+          </h6>
+          <div>
+            <Button
+              css={css`
+                background: var(--background-color);
 
-                                @media (max-width: 760px) {
-                                    width: 100%;
-                                }
-                                `}
-                            as={Link}
-                            variant={Button.VARIANT.OUTLINE}
-                            to={quickstartUrl}
-                            rel="noopener noreferrer"
-                            onClick={trackQuickstart('QuickstartViewRepoClick', quickstart)}
-                        >
-                            <GitHubIconSVG className="ViewRepo" />
-                            View repo
-                        </Button>
-                    </div>
-                    <div
-                        css={css`
-                        margin-top: 14px;
-                        `}
-                    >
-                        <Button
-                            as={ExternalLink}
-                            variant={Button.VARIANT.OUTLINE}
-                            to="https://developer.newrelic.com/contribute-to-quickstarts/"
-                            instrumentation={{
-                                component: 'GlobalFooter',
-                                eventName: 'instantObservability',
-                                category: 'BuildYourOwnQuickstartClick',
-                            }}
-                            css={css`
-                                background: var(--background-color);
-                                color: var(--btn-text-color);
-                                border-radius: 4px;
-                                padding: 13.5px 20px 13.5px 22px;
-                                column-gap: 14.45px;   
-                                font-weight: 400; 
-                                &:hover{
-                                    color: var(--white-hover-color);
-                                }
+                color: var(--btn-text-color);
+                border-radius: 4px;
+                padding: 13.5px 20px 13.5px 22px;
+                column-gap: 14.45px;
+                font-weight: 400;
+                &:hover {
+                  color: var(--white-hover-color);
+                }
 
-                                @media (max-width: 760px) {
-                                    width: 100%;
-                                }
-                                `}
-                        >
-                            <TickIconSVG
-                                className="Tick" />
-                            Build your own
-                        </Button>
-                    </div>
-                </PageTools.Section>
+                @media (max-width: 760px) {
+                  width: 100%;
+                }
+              `}
+              as={Link}
+              variant={Button.VARIANT.OUTLINE}
+              to={quickstartUrl}
+              rel="noopener noreferrer"
+              onClick={trackQuickstart('QuickstartViewRepoClick', quickstart)}
+            >
+              <GitHubIconSVG className="ViewRepo" />
+              View repo
+            </Button>
+          </div>
+          <div
+            css={css`
+              margin-top: 14px;
+            `}
+          >
+            <Button
+              as={ExternalLink}
+              variant={Button.VARIANT.OUTLINE}
+              to="https://developer.newrelic.com/contribute-to-quickstarts/"
+              instrumentation={{
+                component: 'GlobalFooter',
+                eventName: 'instantObservability',
+                category: 'BuildYourOwnQuickstartClick',
+              }}
+              css={css`
+                background: var(--background-color);
+                color: var(--btn-text-color);
+                border-radius: 4px;
+                padding: 13.5px 20px 13.5px 22px;
+                column-gap: 14.45px;
+                font-weight: 400;
+                &:hover {
+                  color: var(--white-hover-color);
+                }
 
-                <PageTools.Section>
-                    <h6>
-                        Related Resources
-                    </h6>
-                    <RelatedResources
-                        css={css`
-                            padding: 0;
-                            `}
-                        resources={quickstart.relatedResources}
-                    />
-
-                </PageTools.Section>
-            </div>
-        </>
-
-    );
+                @media (max-width: 760px) {
+                  width: 100%;
+                }
+              `}
+            >
+              <TickIconSVG className="Tick" />
+              Build your own
+            </Button>
+          </div>
+        </div>
 
+        <div>
+          <h6>Related Resources</h6>
+          <RelatedResources
+            css={css`
+              padding: 0;
+            `}
+            resources={quickstart.relatedResources}
+          />
+        </div>
+      </div>
+    </>
+  );
 };
 
 LandingPageFooter.propTypes = {
-    quickstart: quickstart.isRequired,
+  quickstart: quickstart.isRequired,
 };
 
-export default LandingPageFooter;
\ No newline at end of file
+export default LandingPageFooter;
+
diff --git a/src/components/QuickstartHowToUse.js b/src/components/QuickstartHowToUse.js
index cef657f8..8dc8c908 100644
--- a/src/components/QuickstartHowToUse.js
+++ b/src/components/QuickstartHowToUse.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, PageTools } from '@newrelic/gatsby-theme-newrelic';
+import { Link } from '@newrelic/gatsby-theme-newrelic';
 import { css } from '@emotion/react';
 import { quickstart } from '../types';
 import { LOGIN_LINK, SIGNUP_LINK } from '../data/constants';
@@ -10,16 +10,6 @@ const QuickstartHowToUse = ({ quickstart, trackQuickstart, location }) => {
     <>
       <div
         css={css`
-          @media screen and (min-width: 760px) {
-            margin-left: 156px;
-            margin-right: 155px;
-          }
-
-          @media screen and (max-width: 760px) {
-            margin-left: 40px;
-            margin-right: 23px;
-          }
-
           @media not all and (min-resolution: 0.001dpcm) and max-width: 760px {
             @media {
               grid-template-columns: repeat(1, 1fr);
@@ -29,112 +19,93 @@ const QuickstartHowToUse = ({ quickstart, trackQuickstart, location }) => {
           }
         `}
       >
-        <PageTools.Section>
-          <h3
-            css={css`
-              top: 0;
-              padding-top: 0.5rem;
-              height: 2.5rem;
-              width: 100%;
-              font-weight: 400;
-
-              @media screen and (min-width: 760px) {
-                line-height: 50px;
-                margin-bottom: 35px !important;
-              }
-
-              @media screen and (max-width: 760px) {
-                padding-bottom: 58px !important;
-                margin-bottom: 24px !important;
-                line-height: 40px;
-              }
-            `}
-          >
-            How to use this quickstart
-          </h3>
-        </PageTools.Section>
+        <h3
+          css={css`
+            top: 0;
+            padding-top: 0.5rem;
+            width: 100%;
+            font-weight: 400;
+            padding-bottom: 2rem;
+            line-height: 50px;
+          `}
+        >
+          How to use this quickstart
+        </h3>
 
-        <PageTools.Section>
-          <ul
+        <ul
+          css={css`
+            color: var(--black-text-color);
+            font-size: 18px;
+            padding-bottom: 2rem;
+          `}
+        >
+          <li
             css={css`
-              color: var(--black-text-color);
-              font-size: 18px;
+              ::marker {
+                color: var(--link-font-color);
+              }
             `}
           >
-            <li
+            <Link
               css={css`
-                ::marker {
-                  color: var(--link-font-color);
+                color: var(--link-font-color);
+                &:hover {
+                  color: var(--hover-color);
                 }
               `}
+              to={SIGNUP_LINK}
+              onClick={trackQuickstart(
+                'QuickstartDetailsSignUpClick',
+                quickstart
+              )}
             >
-              <Link
-                css={css`
-                  color: var(--link-font-color);
-                  &:hover {
-                    color: var(--hover-color);
-                  }
-                `}
-                to={SIGNUP_LINK}
-                onClick={trackQuickstart(
-                  'QuickstartDetailsSignUpClick',
-                  quickstart
-                )}
-              >
-                Sign Up
-              </Link>{' '}
-              for a free New Relic account or{' '}
-              <Link
-                css={css`
-                  color: var(--link-font-color);
-                  &:hover {
-                    color: var(--hover-color);
-                  }
-                `}
-                to={LOGIN_LINK}
-                onClick={trackQuickstart(
-                  'QuickstartDetailsLoginClick',
-                  quickstart
-                )}
-              >
-                Log In
-              </Link>{' '}
-              to your existing account.
-            </li>
-            <li
+              Sign Up
+            </Link>{' '}
+            for a free New Relic account or{' '}
+            <Link
               css={css`
-                ::marker {
-                  color: var(--link-font-color);
+                color: var(--link-font-color);
+                &:hover {
+                  color: var(--hover-color);
                 }
               `}
+              to={LOGIN_LINK}
+              onClick={trackQuickstart(
+                'QuickstartDetailsLoginClick',
+                quickstart
+              )}
             >
-              Click the install button.
-            </li>
-            <li
-              css={css`
-                ::marker {
-                  color: var(--link-font-color);
-                }
-              `}
-            >
-              Install the quickstart to get started or improve how you monitor
-              your environment. They’re filled with pre-built resources like
-              dashboards, instrumentation, and alerts.
-            </li>
-          </ul>
-        </PageTools.Section>
-
-        <PageTools.Section>
-          <InstallButton
-            quickstart={quickstart}
-            location={location}
+              Log In
+            </Link>{' '}
+            to your existing account.
+          </li>
+          <li
+            css={css`
+              ::marker {
+                color: var(--link-font-color);
+              }
+            `}
+          >
+            Click the install button.
+          </li>
+          <li
             css={css`
-              background: var(--background-color);
-              padding: 18px 20px 18px 20px;
-              font-weight: 400;
+              ::marker {
+                color: var(--link-font-color);
+              }
             `}
-          />
-        </PageTools.Section>
+          >
+            Install the quickstart to get started or improve how you monitor
+            your environment. They’re filled with pre-built resources like
+            dashboards, instrumentation, and alerts.
+          </li>
+        </ul>
+
+        <InstallButton
+          quickstart={quickstart}
+          location={location}
+          style="SECONDARY"
+        />
       </div>
     </>
   );
diff --git a/src/components/QuickstartOverview.js b/src/components/QuickstartOverview.js
index 7be56ded..109eb7dc 100644
--- a/src/components/QuickstartOverview.js
+++ b/src/components/QuickstartOverview.js
@@ -25,16 +25,16 @@ const QuickstartOverview = ({ quickstart }) => {
       {quickstart.description && (
         <div
           css={css`
-            color: #1d252c;
+            color: var(--brand-primary-text-color);
             p {
               line-height: 28px;
             }
             ul {
               margin-bottom: 50px;
-              font-size:18px;
+              font-size: 18px;
               li {
                 ::marker {
-                  color: #1d252c;
+                  color: var(--brand-primary-text-color);
                 }
               }
             }
@@ -44,12 +44,12 @@ const QuickstartOverview = ({ quickstart }) => {
             skipHtml
             allowedElements={allowedElements}
             css={css`
-            @media screen and (max-width: 760px){
-              width: fit-content;
-              margin: 40px 70px 40px 58px;
-            }
+              @media screen and (max-width: 760px) {
+                width: fit-content;
+                margin: 40px 70px 40px 58px;
+              }
               @media screen and (min-width: 760px) {
-                margin: 104px 155px 104px  168px;
+                margin: 104px 155px 104px 168px;
               }
             `}
           >
diff --git a/src/components/WhatsIncluded/Alerts.js b/src/components/WhatsIncluded/Alerts.js
index ee003ace..6b1ea823 100644
--- a/src/components/WhatsIncluded/Alerts.js
+++ b/src/components/WhatsIncluded/Alerts.js
@@ -1,64 +1,54 @@
-import { PageTools } from '@newrelic/gatsby-theme-newrelic';
 import QuickstartAlerts from '../../components/QuickstartAlerts';
 import EmptyTab from '../../components/EmptyTab';
 import { css } from '@emotion/react';
 
 const Alerts = ({ quickstart }) => {
-
-    return (
-        <div
-            css={css`
+  return (
+    <div
+      css={css`
         display: grid;
         grid-gap: 1rem;
         grid-template-columns: repeat(1, 1fr);
 
-        @media (min-width: 760px) {
-          margin-left: 156px;
+        @media not all and (min-resolution: 0.001dpcm) and max-width: 760px {
+          @media {
+            grid-template-columns: repeat(1, 1fr);
+            margin-left: 40px;
+            margin-right: 23px;
+          }
         }
 
-        @media (max-width: 760px) {
-          margin-left: 40px;
-          margin-right: 23px;
+        h6 {
+          font-weight: 400;
         }
-
-        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
-            @media {
-                grid-template-columns: repeat(1, 1fr);
-                margin-left: 40px;
-              margin-right: 23px;
-            }}
-
-            h6{
-                font-weight: 400;
-            }
-        `}
+      `}
+    >
+      <h6>
+        Alerts &nbsp;
+        <div
+          css={css`
+            display: inline-block;
+            background: var(--background-grey-color);
+            margin: 0px 8px;
+            padding: 1px 4px;
+            border-radius: 3px;
+          `}
         >
-            <PageTools.Section>
-                <h6>
-                    Alerts &nbsp;
-                    <div
-                        css={css`
-                        display: inline-block;
-                        background: var(--background-grey-color);
-                        margin: 0px 8px;
-                        padding: 1px 4px;
-                        border-radius: 3px;
-                    `}
-                    >
-                        {quickstart.alerts.length}</div>
-                </h6>
-                {quickstart.alerts?.length > 0 ? (
-                    <QuickstartAlerts quickstart={quickstart} />
-                ) : (
-                    <EmptyTab
-                        quickstartUrl={quickstart.packUrl}
-                        quickstartName={quickstart.title}
-                        tabName="alerts"
-                    />
-                )}
-            </PageTools.Section>
+          {quickstart.alerts.length}
         </div>
-    )
+      </h6>
+      {quickstart.alerts?.length > 0 ? (
+        <QuickstartAlerts quickstart={quickstart} />
+      ) : (
+        <EmptyTab
+          quickstartUrl={quickstart.packUrl}
+          quickstartName={quickstart.title}
+          tabName="alerts"
+        />
+      )}
+    </div>
+  );
 };
 
-export default Alerts;
\ No newline at end of file
+export default Alerts;
+
diff --git a/src/components/WhatsIncluded/Dashboards.js b/src/components/WhatsIncluded/Dashboards.js
index 4a43affa..5e2433e3 100644
--- a/src/components/WhatsIncluded/Dashboards.js
+++ b/src/components/WhatsIncluded/Dashboards.js
@@ -1,77 +1,61 @@
-import { PageTools } from '@newrelic/gatsby-theme-newrelic';
 import { quickstart } from '../../types';
 import QuickstartDashboards from '../../components/QuickstartDashboards';
 import { css } from '@emotion/react';
 import EmptyTab from '../../components/EmptyTab';
 
 const Dashboards = ({ quickstart }) => {
-
-    return (
-        <div
-            css={css`
+  return (
+    <div
+      css={css`
         h3 {
-            margin-bottom: 58px;
-            font-weight: 400;
+          margin-bottom: 58px;
+          font-weight: 400;
         }
 
         h6 {
-            font-weight: 400;
-        }
-
-        @media (min-width: 760px) {
-          margin-left: 156px;
-     
+          font-weight: 400;
         }
 
-        @media (max-width: 760px) {
-          margin-left: 40px;
-          margin-right: 23px;
-          
+        @media not all and (min-resolution: 0.001dpcm) and max-width: 760px {
+          @media {
+            grid-template-columns: repeat(1, 1fr);
+            margin-left: 40px;
+            margin-right: 23px;
+          }
         }
-
-        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
-            @media {
-                grid-template-columns: repeat(1, 1fr);
-                margin-left: 40px;
-              margin-right: 23px;
-            }}
-        `}
+      `}
+    >
+      <h3>What&apos;s included?</h3>
+      <h6>
+        Dashboard &nbsp;
+        <div
+          css={css`
+            display: inline-block;
+            background: var(--background-grey-color);
+            margin: 0px 8px;
+            padding: 1px 4px;
+            border-radius: 3px;
+          `}
         >
-            <PageTools.Section>
-                <h3>
-                    What&apos;s included?
-                </h3>
-                <h6>
-                    Dashboard
-                    &nbsp;
-                    <div
-                        css={css`
-                        display: inline-block;
-                        background: var(--background-grey-color);
-                        margin: 0px 8px;
-                        padding: 1px 4px;
-                        border-radius: 3px;
-                    `}
-                    >
-                        {quickstart.dashboards.length}</div>
-                </h6>
-                {quickstart.dashboards?.length > 0 ? (
-                    <QuickstartDashboards quickstart={quickstart} />
-                ) : (
-                    <EmptyTab
-                        quickstartUrl={quickstart.packUrl}
-                        quickstartName={quickstart.title}
-                        tabName="dashboards"
-                    />
-                )}
-
-            </PageTools.Section>
+          {quickstart.dashboards.length}
         </div>
-    );
+      </h6>
+      {quickstart.dashboards?.length > 0 ? (
+        <QuickstartDashboards quickstart={quickstart} />
+      ) : (
+        <EmptyTab
+          quickstartUrl={quickstart.packUrl}
+          quickstartName={quickstart.title}
+          tabName="dashboards"
+        />
+      )}
+    </div>
+  );
 };
 
 Dashboards.propTypes = {
-    quickstart: quickstart.isRequired,
+  quickstart: quickstart.isRequired,
 };
 
-export default Dashboards;
\ No newline at end of file
+export default Dashboards;
+
diff --git a/src/components/WhatsIncluded/DataSources.js b/src/components/WhatsIncluded/DataSources.js
index d2a5634c..ebfe196d 100644
--- a/src/components/WhatsIncluded/DataSources.js
+++ b/src/components/WhatsIncluded/DataSources.js
@@ -1,63 +1,54 @@
 import QuickstartDataSources from '../QuickstartDataSources';
-import { PageTools } from '@newrelic/gatsby-theme-newrelic';
 import EmptyTab from '../EmptyTab';
 import { css } from '@emotion/react';
 
 const DataSources = ({ quickstart }) => {
-    return (
-        <div
-            css={css`
+  return (
+    <div
+      css={css`
         display: grid;
         grid-gap: 1rem;
         grid-template-columns: repeat(1, 1fr);
 
-        @media (min-width: 760px) {
-          margin-left: 156px;
+        @media not all and (min-resolution: 0.001dpcm) and max-width: 760px {
+          @media {
+            grid-template-columns: repeat(1, 1fr);
+            margin-left: 40px;
+            margin-right: 23px;
+          }
         }
 
-        @media (max-width: 760px) {
-          margin-left: 40px;
-          margin-right: 23px;
+        h6 {
+          font-weight: 400;
         }
-
-        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
-            @media {
-                grid-template-columns: repeat(1, 1fr);
-                margin-left: 40px;
-              margin-right: 23px;
-            }}
-
-            h6{
-                font-weight: 400;
-            }
-        `}
+      `}
+    >
+      <h6>
+        Data Sources &nbsp;
+        <div
+          css={css`
+            display: inline-block;
+            background: var(--background-grey-color);
+            margin: 0px 8px;
+            padding: 1px 4px;
+            border-radius: 3px;
+          `}
         >
-            <PageTools.Section>
-                <h6>
-                    Data Sources &nbsp;
-                    <div
-                        css={css`
-                        display: inline-block;
-                        background: var(--background-grey-color);
-                        margin: 0px 8px;
-                        padding: 1px 4px;
-                        border-radius: 3px;
-                    `}
-                    >
-                        {quickstart.documentation.length}</div>
-                </h6>
-                {quickstart.documentation?.length > 0 ? (
-                    <QuickstartDataSources quickstart={quickstart} />
-                ) : (
-                    <EmptyTab
-                        quickstartUrl={quickstart.packUrl}
-                        quickstartName={quickstart.title}
-                        tabName="data sources"
-                    />
-                )}
-            </PageTools.Section>
+          {quickstart.documentation.length}
         </div>
-    )
+      </h6>
+      {quickstart.documentation?.length > 0 ? (
+        <QuickstartDataSources quickstart={quickstart} />
+      ) : (
+        <EmptyTab
+          quickstartUrl={quickstart.packUrl}
+          quickstartName={quickstart.title}
+          tabName="data sources"
+        />
+      )}
+    </div>
+  );
 };
 
-export default DataSources;
\ No newline at end of file
+export default DataSources;
+
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 14261e12..626483c9 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -7,16 +7,14 @@ const Layout = ({ children, pageContext }) => {
   if (pageContext.layout === 'QuickStartLayout') {
     return (
       <QuickStartLayout>
-        <GlobalStyles />
-        {children}
+        <GlobalStyles>{children}</GlobalStyles>
       </QuickStartLayout>
     );
   }
 
   return (
     <div>
-      <GlobalStyles />
-      {children}
+      <GlobalStyles>{children}</GlobalStyles>
     </div>
   );
 };
diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
index 776d3560..bd41758d 100644
--- a/src/templates/QuickstartDetails.js
+++ b/src/templates/QuickstartDetails.js
@@ -19,6 +19,14 @@ import Layout from '../components/Layout';
 import QuickstartOverview from '../components/QuickstartOverview';
 import LandingBanner from '../components/LandingBanner';
 
+const layoutContentSpacing = css`
+  --page-margin: 156px;
+  @media (max-width: 760px) {
+    --page-margin: 30px;
+  }
+  padding: 0 var(--page-margin);
+`;
+
 const QuickstartDetails = ({ data, location }) => {
   const [imgStyle, setImgStyle] = useState({});
 
@@ -103,12 +111,22 @@ const QuickstartDetails = ({ data, location }) => {
         tags={quickstart.keywords}
         meta={quickStartMeta}
       />
-      <PageLayout.Header>
+      <PageLayout.Header
+        css={css`
+          --banner-height: 430px;
+          --page-margin: 156px;
+          @media (max-width: 760px) {
+            --banner-height: 420px;
+            --page-margin: 30px;
+          }
+
+          font-family: 'Söhne-Buch';
+          height: var(--banner-height);
+        `}
+      >
         <LandingBanner
           css={css`
-            margin-left: 156px;
-            margin-right: 156px;
-            width: 100%;
+            margin: 0 var(--page-margin);
           `}
           quickstart={quickstart}
         />
@@ -118,14 +136,9 @@ const QuickstartDetails = ({ data, location }) => {
         {/* What's included section here */}
         <div
           css={css`
-            --banner-height: 368px;
-            margin: var(--banner-height) auto;
-            @media (min-width: 760px) {
-              margin-right: 122.34px;
-              padding-bottom: 60px;
-            }
-            @media (max-width: 760px) {
-              padding-bottom: 60px;
+            ${layoutContentSpacing};
+            > * {
+              padding-top: 3rem;
             }
           `}
         >
@@ -135,6 +148,8 @@ const QuickstartDetails = ({ data, location }) => {
         </div>
         <div
           css={css`
+            margin-top: 80px;
+            margin-bottom: 80px;
             mix-blend-mode: normal;
             width: 50%;
             opacity: 0.84;
@@ -147,12 +162,23 @@ const QuickstartDetails = ({ data, location }) => {
             }
           `}
         ></div>
-        <div>
+        <div
+          css={css`
+            ${layoutContentSpacing};
+
+            padding-bottom: 117px;
+            @media screen and (max-width: 760px) {
+              padding-bottom: 40px;
+            }
+          `}
+        >
           <QuickstartOverview quickstart={quickstart} />
         </div>
         {/* How to use this quickstart here */}
         <div
           css={css`
+            ${layoutContentSpacing};
+
             background-color: #f1f2f2;
             padding-top: 30px;
             padding-bottom: 30px;
@@ -167,6 +193,8 @@ const QuickstartDetails = ({ data, location }) => {
         {/* Get started component here */}
         <div
           css={css`
+            ${layoutContentSpacing};
+
             padding-top: 30px;
             padding-bottom: 30px;
           `}