diff --git a/src/@primer/gatsby-theme-doctocat/components/hero.js b/src/@primer/gatsby-theme-doctocat/components/hero.js
index 99dde9d80..1da4a4393 100644
--- a/src/@primer/gatsby-theme-doctocat/components/hero.js
+++ b/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,4 +1,4 @@
-import {Text, Box, Heading, ThemeProvider} from '@primer/react'
+import {Text, Box, Heading, ThemeProvider, Link} from '@primer/react'
 import React from 'react'
 import {Container} from '@primer/gatsby-theme-doctocat'
 
@@ -7,6 +7,36 @@ export default function Hero() {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box pt={3}>
         <Container>
+          {/* Temporary banner before site is decomissioned, it is intended to mirror the Note component that shows up on component pages  */}
+          <Box
+            sx={{
+              backgroundColor: '#ddf4ff', //bgColor-accent-muted
+              borderColor: '#54aeff66', //borderColor-accent-muted
+              borderLeftWidth: '6px',
+              borderLeftStyle: 'solid',
+              borderStyle: 'solid',
+              borderRightWidth: '0',
+              borderTopWidth: '0',
+              borderBottomWidth: 0,
+              padding: 3,
+              borderRadius: 2,
+              marginBottom: 3,
+            }}
+          >
+            <Text sx={{display: 'block'}}>
+              🎉 👀 New look, same Primer!{' '}
+              <Link
+                href="https://primer-docs-preview.github.com"
+                target="_blank"
+                sx={{
+                  color: '#0969da !important',
+                }}
+              >
+                Preview the new docs experience here
+              </Link>{' '}
+              and let us know what you think.
+            </Text>
+          </Box>
           <Box
             sx={{
               display: 'flex',
diff --git a/src/components/base-layout.tsx b/src/components/base-layout.tsx
index 7042ea0ec..d350db27a 100644
--- a/src/components/base-layout.tsx
+++ b/src/components/base-layout.tsx
@@ -1,8 +1,10 @@
-import {Box} from '@primer/react'
+import {Box, Text, Link} from '@primer/react'
 import React from 'react'
 import Head from '@primer/gatsby-theme-doctocat/src/components/head'
 import Header from '@primer/gatsby-theme-doctocat/src/components/header'
 import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar'
+import {Note} from '@primer/gatsby-theme-doctocat'
+import {LinkExternalIcon} from '@primer/octicons-react'
 
 export function BaseLayout({title, description, children, showSidebar = true}) {
   return (
@@ -16,6 +18,17 @@ export function BaseLayout({title, description, children, showSidebar = true}) {
           </Box>
         ) : null}
         <Box as="main" sx={{minWidth: 0, width: '100%'}} id="skip-nav">
+          <Box sx={{maxWidth: 1200, width: '100%', pt: [4, 5, 6, 7], px: [4, 5, 6, 7], pb: 0, mx: 'auto'}}>
+            <Note>
+              <Text sx={{display: 'block'}}>
+                🎉 👀 New look, same Primer!{' '}
+                <Link href="https://primer-docs-preview.github.com" target="_blank">
+                  Preview the new docs experience here
+                </Link>{' '}
+                and let us know what you think.
+              </Text>
+            </Note>
+          </Box>
           {children}
         </Box>
       </Box>
diff --git a/src/layouts/component-layout.tsx b/src/layouts/component-layout.tsx
index 6177616db..09c607e7a 100644
--- a/src/layouts/component-layout.tsx
+++ b/src/layouts/component-layout.tsx
@@ -9,8 +9,8 @@ import {ComponentPageNav} from '../components/component-page-nav'
 import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml'
 
 type NavItemData = {
-  title: string,
-  url?: string,
+  title: string
+  url?: string
   children?: NavItemData[]
 }
 
@@ -45,17 +45,23 @@ export default function ComponentLayout({pageContext, children, path}) {
 
   return (
     <BaseLayout title={title} description={description}>
-      <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
+      <Box sx={{maxWidth: 1200, width: '100%', pb: [4, 5, 6, 7], px: [4, 5, 6, 7], pt: [2, 3, 4, 5], mx: 'auto'}}>
         {breadcrumbData.length > 1 ? (
           <Breadcrumbs sx={{mb: 4}}>
-            {breadcrumbData.map(item => item.url ? (
-              <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
-                {item.title}
-              </Breadcrumbs.Item>
-            ): null).filter(item => item)}
+            {breadcrumbData
+              .map(item =>
+                item.url ? (
+                  <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
+                    {item.title}
+                  </Breadcrumbs.Item>
+                ) : null,
+              )
+              .filter(item => item)}
           </Breadcrumbs>
         ) : null}
-        <Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
+        <Heading as="h1" sx={{fontSize: 7}}>
+          {title}
+        </Heading>
         {description ? (
           <Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
             {description}