diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index a6cdae79e0..090a1321ae 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -12,7 +12,7 @@ export type BreadcrumbT = {
 type Props = {}
 export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
-  const pathWithLocale = `/${router.locale}${router.asPath}`
+  const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
 
   return (
diff --git a/components/HeaderNotifications.tsx b/components/HeaderNotifications.tsx
index 4e6d296af2..735b87576f 100644
--- a/components/HeaderNotifications.tsx
+++ b/components/HeaderNotifications.tsx
@@ -70,7 +70,7 @@ export const HeaderNotifications = () => {
   return (
     <>
       {allNotifications.map(({ type, content }, i) => {
-        const isLast = i !== allNotifications.length - 1
+        const isLast = i === allNotifications.length - 1
         return (
           <div
             className={cx(
diff --git a/components/LanguagePicker.tsx b/components/LanguagePicker.tsx
index acc77a296a..915acb89b9 100644
--- a/components/LanguagePicker.tsx
+++ b/components/LanguagePicker.tsx
@@ -12,7 +12,13 @@ export const LanguagePicker = () => {
 
   return (
     <div className="ml-4 d-flex flex-justify-center flex-items-center">
-      <Dropdown css>
+      <Dropdown
+        css={`
+          ul {
+            width: unset;
+          }
+        `}
+      >
         <summary>
           {selectedLang.nativeName || selectedLang.name}
           <Dropdown.Caret />
diff --git a/components/ScrollButton.tsx b/components/ScrollButton.tsx
index 7694e9a2ae..a32bd2fc60 100644
--- a/components/ScrollButton.tsx
+++ b/components/ScrollButton.tsx
@@ -45,17 +45,6 @@ export const ScrollButton = () => {
       >
         <ChevronUpIcon />
       </button>
-      <style jsx>{`
-        .opacity-0 {
-          opacity: 0;
-        }
-        .opacity-100 {
-          opacity: 1;
-        }
-        .transition-200 {
-          transition: 200ms;
-        }
-      `}</style>
     </div>
   )
 }
diff --git a/components/TruncateLines.tsx b/components/TruncateLines.tsx
index 7f29bdb707..f2685ddad1 100644
--- a/components/TruncateLines.tsx
+++ b/components/TruncateLines.tsx
@@ -8,14 +8,15 @@ type Props = {
   className?: string
 }
 export const TruncateLines = (props: Props) => {
-  const Component = props.as || 'div'
+  const { as, maxLines, className, children } = props
+  const Component = as || 'div'
   return (
-    <Component className={cx('root', props.className)}>
-      {props.children}
+    <Component className={cx('root', className)}>
+      {children}
       <style jsx>{`
         .root {
           display: -webkit-box;
-          -webkit-line-clamp: ${props.maxLines};
+          -webkit-line-clamp: ${maxLines};
           -webkit-box-orient: vertical;
           overflow: hidden;
         }
diff --git a/components/article/ArticleTitle.tsx b/components/article/ArticleTitle.tsx
new file mode 100644
index 0000000000..52a0789c59
--- /dev/null
+++ b/components/article/ArticleTitle.tsx
@@ -0,0 +1,31 @@
+import { Tooltip, Link } from '@primer/components'
+import { PrinterIcon } from './PrinterIcon'
+
+type Props = {
+  children: React.ReactNode
+}
+export const ArticleTitle = ({ children }: Props) => {
+  return (
+    <div className="d-flex flex-items-baseline flex-justify-between">
+      <h1 className="my-4">{children}</h1>
+      <div className="d-none d-lg-block ml-2">
+        <Tooltip aria-label="Print this article" noDelay direction="n">
+          <Link
+            as="button"
+            underline={false}
+            muted
+            onClick={() => {
+              try {
+                document.execCommand('print', false)
+              } catch (e) {
+                window.print()
+              }
+            }}
+          >
+            <PrinterIcon />
+          </Link>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
diff --git a/components/article/ArticleVersionPicker.tsx b/components/article/ArticleVersionPicker.tsx
index 0ab7bcc300..c6aa8e70d2 100644
--- a/components/article/ArticleVersionPicker.tsx
+++ b/components/article/ArticleVersionPicker.tsx
@@ -17,42 +17,40 @@ export const ArticleVersionPicker = () => {
   }
 
   return (
-    <div className="d-none d-lg-flex flex-justify-end">
-      <Dropdown
-        css={`
-          ul {
-            width: unset;
+    <Dropdown
+      css={`
+        ul {
+          width: unset;
+        }
+      `}
+    >
+      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
+        <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
+        {allVersions[currentVersion].versionTitle}
+        <Dropdown.Caret />
+      </summary>
+      <Dropdown.Menu direction="sw">
+        {(page.permalinks || []).map((permalink) => {
+          if (permalink.pageVersion === 'homepage') {
+            return null
           }
-        `}
-      >
-        <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
-          <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
-          {allVersions[currentVersion].versionTitle}
-          <Dropdown.Caret />
-        </summary>
-        <Dropdown.Menu direction="sw">
-          {(page.permalinks || []).map((permalink) => {
-            if (permalink.pageVersion === 'homepage') {
-              return null
-            }
 
-            return (
-              <Dropdown.Item key={permalink.href}>
-                <Link href={permalink.href}>
-                  <a>{permalink.pageVersionTitle}</a>
-                </Link>
-              </Dropdown.Item>
-            )
-          })}
-          <div className="pb-1">
-            <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
-              <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
-                See all Enterprise releases
-              </a>
-            </Link>
-          </div>
-        </Dropdown.Menu>
-      </Dropdown>
-    </div>
+          return (
+            <Dropdown.Item key={permalink.href}>
+              <Link href={permalink.href}>
+                <a>{permalink.pageVersionTitle}</a>
+              </Link>
+            </Dropdown.Item>
+          )
+        })}
+        <div className="pb-1">
+          <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
+            <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
+              See all Enterprise releases
+            </a>
+          </Link>
+        </div>
+      </Dropdown.Menu>
+    </Dropdown>
   )
 }
diff --git a/components/article/PrinterIcon.tsx b/components/article/PrinterIcon.tsx
new file mode 100644
index 0000000000..ee5a9206c4
--- /dev/null
+++ b/components/article/PrinterIcon.tsx
@@ -0,0 +1,20 @@
+// From https://heroicons.com
+export const PrinterIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={18}
+      width={18}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+      />
+    </svg>
+  )
+}
diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
index 5b985162eb..bb52892ef8 100644
--- a/components/context/MainContext.tsx
+++ b/components/context/MainContext.tsx
@@ -84,6 +84,7 @@ export type MainContextT = {
   currentProductTree?: CurrentProductTree
   featureFlags: FeatureFlags
   page: {
+    documentType: string
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
     topics: Array<string>
     fullTitle?: string
@@ -126,6 +127,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     relativePath: req.context.page?.relativePath,
     page: {
       languageVariants: req.context.page.languageVariants,
+      documentType: req.context.page.documentType,
       fullTitle: req.context.page.fullTitle,
       topics: req.context.page.topics || [],
       introPlainText: req.context.page?.introPlainText,
diff --git a/components/context/ProductLandingContext.tsx b/components/context/ProductLandingContext.tsx
index df9df83853..c3fb14ac40 100644
--- a/components/context/ProductLandingContext.tsx
+++ b/components/context/ProductLandingContext.tsx
@@ -70,8 +70,9 @@ export const useProductLandingContext = (): ProductLandingContextT => {
 
 export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
   const productTree = req.context.currentProductTree
+  const page = req.context.page
   return {
-    ...pick(req.context.page, [
+    ...pick(page, [
       'title',
       'shortTitle',
       'introPlainText',
@@ -96,11 +97,11 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: productTree.page.introLinks
+    introLinks: page.introLinks
       ? {
-          quickstart: productTree.page.introLinks.quickstart,
-          reference: productTree.page.introLinks.reference,
-          overview: productTree.page.introLinks.overview,
+          quickstart: page.introLinks.quickstart,
+          reference: page.introLinks.reference,
+          overview: page.introLinks.overview,
         }
       : null,
 
diff --git a/components/context/TocLandingContext.tsx b/components/context/TocLandingContext.tsx
new file mode 100644
index 0000000000..a747c91ef1
--- /dev/null
+++ b/components/context/TocLandingContext.tsx
@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react'
+
+export type TocItem = {
+  fullPath: string
+  title: string
+  intro?: string
+}
+
+export type TocLandingContextT = {
+  title: string
+  introPlainText: string
+  tocItems: Array<TocItem>
+}
+
+export const TocLandingContext = createContext<TocLandingContextT | null>(null)
+
+export const useTocLandingContext = (): TocLandingContextT => {
+  const context = useContext(TocLandingContext)
+
+  if (!context) {
+    throw new Error('"useTocLandingContext" may only be used inside "TocLandingContext.Provider"')
+  }
+
+  return context
+}
+
+export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
+  return {
+    title: req.context.page.title,
+    introPlainText: req.context.page.introPlainText,
+    tocItems: req.context.tocItems || [],
+  }
+}
diff --git a/components/landing/FeaturedArticles.tsx b/components/landing/FeaturedArticles.tsx
index 8e8eca6109..f427ed8cef 100644
--- a/components/landing/FeaturedArticles.tsx
+++ b/components/landing/FeaturedArticles.tsx
@@ -78,7 +78,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
               <Link href={link.href}>
                 <a className="link-with-intro Bump-link--hover no-underline d-block py-3">
                   <h4 className="link-with-intro-title">
-                    {link.title}
+                    <span dangerouslySetInnerHTML={{ __html: link.title }} />
                     <span className="Bump-link-symbol">→</span>
                   </h4>
                   {!link.hideIntro && link.intro && (
@@ -87,7 +87,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
                       maxLines={2}
                       className="link-with-intro-intro color-text-secondary mb-0 mt-1"
                     >
-                      {link.intro}
+                      <span dangerouslySetInnerHTML={{ __html: link.intro }} />
                     </TruncateLines>
                   )}
                   {link.date && (
diff --git a/components/landing/GuideCards.tsx b/components/landing/GuideCards.tsx
index e185216164..b3e42dded8 100644
--- a/components/landing/GuideCards.tsx
+++ b/components/landing/GuideCards.tsx
@@ -11,6 +11,7 @@ export const GuideCards = () => {
   const router = useRouter()
   const { currentCategory } = useMainContext()
   const { guideCards } = useProductLandingContext()
+  const routePath = `/${router.asPath.split('?')[0]}` // remove query string
 
   if (!guideCards) {
     return null
@@ -25,7 +26,7 @@ export const GuideCards = () => {
       </div>
 
       {!currentCategory && (
-        <Link href={`${router.asPath}/guides`}>
+        <Link href={`${routePath}/guides`}>
           <a className="btn btn-outline float-right">
             Explore guides <ArrowRightIcon />
           </a>
diff --git a/components/landing/ProductArticlesList.tsx b/components/landing/ProductArticlesList.tsx
index 90f469dd9a..dc590ad4f9 100644
--- a/components/landing/ProductArticlesList.tsx
+++ b/components/landing/ProductArticlesList.tsx
@@ -47,7 +47,7 @@ const ArticleList = ({ page }: { page: CurrentProductTree }) => {
           return (
             <li
               key={grandchildPage.href + index}
-              className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}
+              className={cx('mb-3', (!isShowingMore && index >= maxArticles) ? 'd-none' : null)}
             >
               <Link href={grandchildPage.href}>
                 <a>{grandchildPage.page.title}</a>
diff --git a/components/landing/ProductLanding.tsx b/components/landing/ProductLanding.tsx
new file mode 100644
index 0000000000..777a5eb24a
--- /dev/null
+++ b/components/landing/ProductLanding.tsx
@@ -0,0 +1,64 @@
+import { DefaultLayout } from 'components/DefaultLayout'
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+
+import { LandingHero } from 'components/landing/LandingHero'
+import { FeaturedArticles } from 'components/landing/FeaturedArticles'
+import { GuideCards } from 'components/landing/GuideCards'
+import { SponsorsExamples } from 'components/landing/SponsorsExamples'
+import { CommunityExamples } from 'components/landing/CommunityExamples'
+import { CodeExamples } from 'components/landing/CodeExamples'
+import { LandingSection } from 'components/landing/LandingSection'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ProductArticlesList } from 'components/landing/ProductArticlesList'
+
+export const ProductLanding = () => {
+  const { shortTitle, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
+    useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+
+  return (
+    <DefaultLayout>
+      <LandingSection className="pt-3">
+        <LandingHero />
+      </LandingSection>
+
+      <LandingSection>
+        <FeaturedArticles />
+      </LandingSection>
+
+      {productCodeExamples.length > 0 && (
+        <LandingSection title={t('code_examples')} className="my-6">
+          <CodeExamples />
+        </LandingSection>
+      )}
+
+      {productCommunityExamples.length > 0 && (
+        <LandingSection title={t('communities_using_discussions')} className="my-6">
+          <CommunityExamples />
+        </LandingSection>
+      )}
+
+      {productUserExamples.length > 0 && (
+        <LandingSection title={t('sponsor_community')} className="my-6">
+          <SponsorsExamples />
+        </LandingSection>
+      )}
+
+      {/* {% if currentVersion contains 'enterprise-server' and currentProduct == 'admin' %}
+      {% include product-releases %}
+      {% endif %} */}
+
+      {guideCards.length > 0 && (
+        <div className="color-bg-tertiary py-6 my-8">
+          <LandingSection title={t('guides')} className="my-6">
+            <GuideCards />
+          </LandingSection>
+        </div>
+      )}
+
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
+        <ProductArticlesList />
+      </LandingSection>
+    </DefaultLayout>
+  )
+}
diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
index 14f4f1514f..5e8955fcda 100644
--- a/components/landing/TableOfContents.tsx
+++ b/components/landing/TableOfContents.tsx
@@ -4,19 +4,29 @@ import cx from 'classnames'
 
 import type { TocItem } from '../context/ProductLandingContext'
 
-export const TableOfContents = (props: { items?: Array<TocItem> }) => {
+type Props = {
+  items: Array<TocItem>
+  variant?: 'compact' | 'expanded'
+}
+export const TableOfContents = (props: Props) => {
+  const { items, variant = 'expanded' } = props
   const router = useRouter()
 
   return (
-    <div>
-      {(props.items || []).map((obj) => {
-        if (!obj) {
+    <ul className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}>
+      {(items || []).map((item) => {
+        if (!item) {
           return null
         }
-        const { fullPath: href, title, intro } = obj
+
+        const { fullPath: href, title, intro } = item
         const isActive = router.pathname === href
-        return (
-          <div key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
+        return variant === 'compact' ? (
+          <li key={href} className="f4 my-1">
+            <Link href={href}>{title}</Link>
+          </li>
+        ) : (
+          <li key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
             <Link href={href}>
               <a className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary">
                 <h4>
@@ -26,9 +36,9 @@ export const TableOfContents = (props: { items?: Array<TocItem> }) => {
               </a>
             </Link>
             {intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
-          </div>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }
diff --git a/components/landing/TocLanding.tsx b/components/landing/TocLanding.tsx
new file mode 100644
index 0000000000..0f225f9137
--- /dev/null
+++ b/components/landing/TocLanding.tsx
@@ -0,0 +1,55 @@
+import { Grid } from '@primer/components'
+
+import { DefaultLayout } from 'components/DefaultLayout'
+import { TableOfContents } from 'components/landing/TableOfContents'
+import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { useTocLandingContext } from 'components/context/TocLandingContext'
+import { ArticleTitle } from 'components/article/ArticleTitle'
+
+type Props = {
+  variant?: 'compact' | 'expanded'
+}
+export const TocLanding = ({ variant = 'expanded' }: Props) => {
+  const { title, introPlainText, tocItems } = useTocLandingContext()
+  return (
+    <DefaultLayout>
+      <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
+        <div className="d-lg-flex flex-justify-between">
+          <div className="d-block d-lg-none">
+            <ArticleVersionPicker />
+          </div>
+          <div className="d-flex flex-items-center">
+            <Breadcrumbs />
+          </div>
+          <div className="d-none d-lg-block">
+            <ArticleVersionPicker />
+          </div>
+        </div>
+
+        <Grid
+          gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
+          gridTemplateRows="auto 1fr"
+          gridGap={16}
+        >
+          <div>
+            <div className="mt-8">
+              <ArticleTitle>{title}</ArticleTitle>
+
+              <div className="lead-mktg">
+                <p>{introPlainText}</p>
+              </div>
+            </div>
+
+            <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0" />
+
+            <div className={variant === 'expanded' ? 'mt-7' : 'mt-2'}>
+              <TableOfContents items={tocItems} variant={variant} />
+            </div>
+          </div>
+          <div></div>
+        </Grid>
+      </div>
+    </DefaultLayout>
+  )
+}
diff --git a/components/product/SidebarProduct.tsx b/components/product/SidebarProduct.tsx
index a4472a6a49..de584a0bee 100644
--- a/components/product/SidebarProduct.tsx
+++ b/components/product/SidebarProduct.tsx
@@ -1,16 +1,12 @@
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import cx from 'classnames'
+import { useDetails, Details } from '@primer/components'
+import { ChevronDownIcon } from '@primer/octicons-react'
 
-import { useMainContext } from 'components/context/MainContext'
+import { CurrentProductTree, useMainContext } from 'components/context/MainContext'
 import { AllProductsLink } from 'components/product/AllProductsLink'
-// <!--
-//   Styling note:
 
-//   Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
-//   hierarchy of the current page. If an item's URL is also the same as the current URL, the item
-//   also gets an `is-current-page` class.
-//  -->
 export const SidebarProduct = () => {
   const router = useRouter()
   const { currentProductTree: currentProductTree } = useMainContext()
@@ -29,7 +25,7 @@ export const SidebarProduct = () => {
         <>
           <li title="" className="sidebar-product mb-2">
             <Link href={currentProductTree.href}>
-              <a className="pl-4 pr-5 pb-1 f4 color-text-primary">{productTitle}</a>
+              <a className="pl-4 pr-5 pb-1 f4 color-text-primary no-underline">{productTitle}</a>
             </Link>
           </li>
 
@@ -53,135 +49,17 @@ export const SidebarProduct = () => {
                   >
                     {isStandaloneCategory ? (
                       <Link href={childPage.href}>
-                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
+                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline">
                           {childTitle}
                         </a>
                       </Link>
                     ) : (
-                      <details
-                        className={cx('dropdown-withArrow details details-reset')}
-                        open={routePath.includes(childPage.href) || i < 3}
-                      >
-                        <summary>
-                          <div className="d-flex flex-justify-between">
-                            <Link href={childPage.href}>
-                              <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
-                                {childTitle}
-                              </a>
-                            </Link>
-                            {i < 3 && (
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                className="octicon flex-shrink-0 arrow mr-3"
-                                style={{ marginTop: 7 }}
-                                viewBox="0 0 16 16"
-                                width="16"
-                                height="16"
-                              >
-                                {' '}
-                                <path
-                                  fillRule="evenodd"
-                                  clipRule="evenodd"
-                                  d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
-                                ></path>
-                              </svg>
-                            )}
-                          </div>
-                        </summary>
-                        {routePath.includes(childPage.href) || i < 3 ? (
-                          <>
-                            {/* <!-- some categories have maptopics with child articles --> */}
-                            {childPage.childPages[0].page.documentType === 'mapTopic' ? (
-                              <ul className="sidebar-topics list-style-none position-relative">
-                                {childPage.childPages.map((grandchildPage, i) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={childPage.href + i}
-                                      className={cx(
-                                        'sidebar-maptopic',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className="pl-4 pr-5 py-2 color-text-primary">{grandchildTitle}</a>
-                                      </Link>
-                                      <ul className="sidebar-articles my-2">
-                                        {grandchildPage.childPages.map(
-                                          (greatgrandchildPage, i, arr) => {
-                                            const greatgrandchildTitle =
-                                              greatgrandchildPage.renderedShortTitle ||
-                                              greatgrandchildPage.renderedFullTitle
-                                            const isLast = i === arr.length - 1
-                                            const isActive = routePath.includes(
-                                              greatgrandchildPage.href
-                                            )
-                                            const isCurrent = routePath === greatgrandchildPage.href
-                                            return (
-                                              <li
-                                                key={greatgrandchildPage.href + i}
-                                                className={cx(
-                                                  'sidebar-article',
-                                                  isActive && 'active',
-                                                  isCurrent && 'is-current-page'
-                                                )}
-                                              >
-                                                <Link href={greatgrandchildPage.href}>
-                                                  <a
-                                                    className={cx(
-                                                      'pl-6 pr-5 py-1 color-text-primary',
-                                                      isLast && 'pb-2'
-                                                    )}
-                                                  >
-                                                    {greatgrandchildTitle}
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            )
-                                          }
-                                        )}
-                                      </ul>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : childPage.childPages[0].page.documentType == 'article' ? (
-                              <ul className="sidebar-articles list-style-none">
-                                {/* <!-- some categories have no maptopics, only articles --> */}
-                                {childPage.childPages.map((grandchildPage, i, arr) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isLast = i === arr.length - 1
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={grandchildPage.href + i}
-                                      className={cx(
-                                        'sidebar-article',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className={cx('pl-6 pr-5 py-1 color-text-primary', isLast && 'pb-2')}>
-                                          {grandchildTitle}
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : null}
-                          </>
-                        ) : null}
-                      </details>
+                      <CollapsibleSection
+                        index={i}
+                        routePath={routePath}
+                        title={childTitle}
+                        page={childPage}
+                      />
                     )}
                   </li>
                 )
@@ -193,3 +71,113 @@ export const SidebarProduct = () => {
     </>
   )
 }
+
+type SectionProps = {
+  index: number
+  routePath: string
+  page: CurrentProductTree
+  title: string
+}
+const CollapsibleSection = (props: SectionProps) => {
+  const { routePath, index, title, page } = props
+  const isDefaultOpen = routePath.includes(page.href) || index < 3
+  const { getDetailsProps, open: isOpen } = useDetails({ defaultOpen: isDefaultOpen })
+  return (
+    <Details {...getDetailsProps()} className="details-reset">
+      <summary>
+        <div className="d-flex flex-justify-between">
+          <Link href={page.href}>
+            <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline">
+              {title}
+            </a>
+          </Link>
+          {page.childPages.length > 0 && (
+            <span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
+              <ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
+            </span>
+          )}
+        </div>
+      </summary>
+      {/* <!-- some categories have maptopics with child articles --> */}
+      {page.childPages[0].page.documentType === 'mapTopic' ? (
+        <ul className="sidebar-topics list-style-none position-relative">
+          {page.childPages.map((childPage, i) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-maptopic',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link href={childPage.href}>
+                  <a className="pl-4 pr-5 py-2 color-text-primary no-underline">{childTitle}</a>
+                </Link>
+                <ul className="sidebar-articles my-2">
+                  {childPage.childPages.map((grandchildPage, i, arr) => {
+                    const grandchildTitle =
+                      grandchildPage.renderedShortTitle || grandchildPage.renderedFullTitle
+                    const isLast = i === arr.length - 1
+                    const isActive = routePath.includes(grandchildPage.href)
+                    const isCurrent = routePath === grandchildPage.href
+                    return (
+                      <li
+                        key={grandchildPage.href + i}
+                        className={cx(
+                          'sidebar-article',
+                          isActive && 'active',
+                          isCurrent && 'is-current-page'
+                        )}
+                      >
+                        <Link href={grandchildPage.href}>
+                          <a
+                            className={cx(
+                              'pl-6 pr-5 py-1 color-text-primary no-underline',
+                              isLast && 'pb-2'
+                            )}
+                          >
+                            {grandchildTitle}
+                          </a>
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </li>
+            )
+          })}
+        </ul>
+      ) : page.childPages[0].page.documentType == 'article' ? (
+        <ul className="sidebar-articles list-style-none">
+          {/* <!-- some categories have no maptopics, only articles --> */}
+          {page.childPages.map((childPage, i, arr) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isLast = i === arr.length - 1
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-article',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link href={childPage.href}>
+                  <a className={cx('pl-6 pr-5 py-1 color-text-primary no-underline', isLast && 'pb-2')}>
+                    {childTitle}
+                  </a>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </Details>
+  )
+}
diff --git a/content/codespaces/about-codespaces.md b/content/codespaces/about-codespaces.md
index f6275c79ff..0b388452e1 100644
--- a/content/codespaces/about-codespaces.md
+++ b/content/codespaces/about-codespaces.md
@@ -58,7 +58,7 @@ Developers and organization administrators can also configure settings to add en
 
 ### Joining the beta
 
-A limited number of people will be invited to join the beta. To join the waitlist, see [Sign up for Codespaces beta](https://github.com/features/codespaces/signup).
+A limited number of people will be invited to join the beta. To join the waitlist, see [Sign up for the Codespaces beta](https://github.com/features/codespaces/signup).
 
 ### Contacting us about {% data variables.product.prodname_codespaces %}
 
diff --git a/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md b/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md
index 29ed554e92..008ba202a4 100644
--- a/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md
+++ b/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md
@@ -26,7 +26,7 @@ For more information about adding people to your enterprise, see "{% if currentV
 
 Enterprise owners have complete control over the enterprise and can take every action, including:
 - Managing administrators
-- {% if currentVersion == "free-pro-team@latest" %}Adding and removing {% elsif currentVersion == "github-ae@latest" %}Managing{% endif %} organizations {% if currentVersion == "free-pro-team@latest" %}to and from {% elsif currentVersion == "github-ae@latest" %} in{% endif %} the enterprise
+- {% if currentVersion == "free-pro-team@latest" %}Adding and removing {% elsif currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %}Managing{% endif %} organizations {% if currentVersion == "free-pro-team@latest" %}to and from {% elsif currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %} in{% endif %} the enterprise
 - Managing enterprise settings
 - Enforcing policy across organizations
 {% if currentVersion == "free-pro-team@latest" %}- Managing billing settings{% endif %}
diff --git a/content/github/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile.md b/content/github/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile.md
index 2fb1200184..45b6d57882 100644
--- a/content/github/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile.md
+++ b/content/github/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile.md
@@ -127,6 +127,8 @@ When you participate in certain programs, {% data variables.product.prodname_dot
 | ![{% data variables.product.prodname_dotcom %} Sponsor badge icon](/assets/images/help/profile/badge-sponsors-small.png) | **{% data variables.product.prodname_dotcom %} Sponsor**  | If you sponsored an open source contributor through {% data variables.product.prodname_sponsors %} you'll get a {% data variables.product.prodname_dotcom %} Sponsor badge on your profile. Clicking the badge takes you to the **Sponsoring** tab of your profile. For more information, see "[Sponsoring open source contributors](/github/supporting-the-open-source-community-with-github-sponsors/sponsoring-open-source-contributors)." |
 | {% octicon "cpu" aria-label="The Developer Program icon" %} | **Developer Program Member** | If you're a registered member of the {% data variables.product.prodname_dotcom %} Developer Program, building an app with the {% data variables.product.prodname_dotcom %} API, you'll get a Developer Program Member badge on your profile. For more information on the {% data variables.product.prodname_dotcom %} Developer Program, see [GitHub Developer](/program/). |
 | {% octicon "star-fill" aria-label="The star icon" %} | **Pro** | If you use {% data variables.product.prodname_pro %} you'll get a PRO badge on your profile. For more information about {% data variables.product.prodname_pro %}, see "[{% data variables.product.prodname_dotcom %}'s products](/github/getting-started-with-github/githubs-products#github-pro)." |
+| {% octicon "lock" aria-label="The lock icon" %} | **Security Bug Bounty Hunter** | If you helped out hunting down security vulnerabilities, you'll get a Security Bug Bounty Hunter badge on your profile. For more information about the {% data variables.product.prodname_dotcom %} Security program, see [{% data variables.product.prodname_dotcom %} Security](https://bounty.github.com/). |
+| {% octicon "mortar-board" aria-label="The mortar-board icon" %} | **Github Campus Expert** | If you participate in the {% data variables.product.prodname_dotcom %} Campus Program you'll get a {% data variables.product.prodname_dotcom %} Campus Expert badge on your profile. For more information about the Campus Experts program, see [Campus Experts](https://education.github.com/experts). |
 
 ### Disabling badges on your profile
 
diff --git a/contributing/content-templates.md b/contributing/content-templates.md
index dda445b3a5..e5aa8d4693 100644
--- a/contributing/content-templates.md
+++ b/contributing/content-templates.md
@@ -18,13 +18,13 @@ Use the [content model](/contributing/content-model.md#conceptual) for full inst
 title: About [subject]
 intro: 'Article intro. See tips for a great intro below.'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#conceptual to write this article.-- >
 <!-- Great intros give readers a quick understanding of what's in the article, so they can tell whether it's relevant to them before moving ahead. For more tips, see https://github.com/github/docs/blob/main/contributing/content-model.md#intro. -->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing. -->
 
 ### A section here
@@ -53,13 +53,13 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 title: Nouns describing your subject
 intro: 'Article intro. See tips for a great intro below.'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#referential to write this article.-- >
 <!-- Great intros give readers a quick understanding of what's in the article, so they can tell whether it's relevant to them before moving ahead. For more tips, see https://github.com/github/docs/blob/main/contributing/content-model.md#intro. -->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
 ### A section here
@@ -88,13 +88,13 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 title: Start with a gerund
 intro: 'Article intro. See tips for a great intro below.'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#procedural to write this article.-- >
 <!-- Great intros give readers a quick understanding of what's in the article, so they can tell whether it's relevant to them before moving ahead. For more tips, see https://github.com/github/docs/blob/main/contributing/content-model.md#intro. -->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
 ### Procedural section header here
@@ -122,11 +122,11 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 ---
 title: Quickstart title
 intro: 'Article intro. Highlight that the guide is quick and to the point.'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#quickstart to write this article.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- The entire quickstart should be about 600 words long or take about five minutes to read.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
@@ -172,13 +172,13 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 title: Tutorial title
 intro: 'Article intro. See tips for a great intro below'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the instructions in https://github.com/github/docs/blob/main/contributing/content-model.md#quickstart to write this article.-->
 <!-- Great intros clarify who the tutorial is intended for, state what the user will accomplish, and state the technologies that will be used.-->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
 ### Introduction
@@ -235,7 +235,7 @@ Use the [tutorial content model](hhttps://github.com/github/docs/blob/main/contr
 title: Guide title
 intro: 'Article intro. See tips for a great intro below'
 product: '{{ site.data.reusables.gated-features.actions }}'
-productVersions:
+versions:
 ---
 
 <!-- 
@@ -312,4 +312,4 @@ productVersions:
 <!--
   This section can simply link out to https://docs.github.com/en/actions/configuring-and-managing-workflows/persisting-workflow-data-using-artifacts or provide additional information about which artifacts might be typical to upload for a CI workflow.
 -->
-```
\ No newline at end of file
+```
diff --git a/lib/excluded-links.js b/lib/excluded-links.js
index 60fe4c6590..f70dc81ac8 100644
--- a/lib/excluded-links.js
+++ b/lib/excluded-links.js
@@ -17,5 +17,6 @@ module.exports = [
   'https://www.facebook.com/',
   'https://ko-fi.com/',
   'https://en.liberapay.com/',
-  'https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb'
+  'https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb',
+  'https://www.vmware.com/products/esxi-and-esx.html'
 ]
diff --git a/package-lock.json b/package-lock.json
index 53adcbb73a..b2f9dd57a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "ajv": "^8.4.0",
         "ajv-formats": "^2.1.0",
         "algoliasearch": "^4.9.1",
-        "assert": "^2.0.0",
         "browser-date-formatter": "^3.0.3",
         "change-case": "^4.1.2",
         "cheerio": "^1.0.0-rc.3",
@@ -108,8 +107,6 @@
         "cross-env": "^7.0.3",
         "csp-parse": "0.0.2",
         "css-loader": "^4.3.0",
-        "csv-parse": "^4.15.4",
-        "csv-parser": "^3.0.0",
         "dedent": "^0.7.0",
         "domwaiter": "^1.3.0",
         "eslint": "^7.26.0",
@@ -130,12 +127,10 @@
         "jest": "^26.6.3",
         "jest-expect-message": "^1.0.2",
         "jest-github-actions-reporter": "^1.0.3",
-        "jest-silent-reporter": "^0.5.0",
         "jest-slow-test-reporter": "^1.0.0",
         "linkinator": "^2.13.6",
         "make-promises-safe": "^5.1.0",
         "mdast-util-from-markdown": "^0.8.4",
-        "mime": "^2.4.4",
         "mini-css-extract-plugin": "^1.6.0",
         "mkdirp": "^1.0.4",
         "mock-express-response": "^0.3.0",
@@ -144,14 +139,13 @@
         "nodemon": "^2.0.7",
         "npm-merge-driver-install": "^2.0.1",
         "object-hash": "^2.1.1",
-        "postcss": "^8.2.15",
+        "postcss": "^8.3.0",
         "prettier": "^2.3.0",
-        "process": "^0.11.10",
         "replace": "^1.2.1",
         "resolve-url-loader": "^4.0.0",
         "rimraf": "^3.0.2",
         "robots-parser": "^2.3.0",
-        "sass": "^1.32.13",
+        "sass": "^1.34.0",
         "sass-loader": "^11.1.1",
         "start-server-and-test": "^1.12.2",
         "strip-ansi": "^7.0.0",
@@ -8010,27 +8004,6 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
-    "node_modules/csv-parse": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.15.4.tgz",
-      "integrity": "sha512-OdBbFc0yZhOm17lSxqkirrHlFFVpKRT0wp4DAGoJelsP3LbGzV9LNr7XmM/lrr0uGkCtaqac9UhP8PDHXOAbMg==",
-      "dev": true
-    },
-    "node_modules/csv-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
-      "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "csv-parser": "bin/csv-parser"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/cwd": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
@@ -14022,16 +13995,6 @@
         "node": ">= 10.14.2"
       }
     },
-    "node_modules/jest-silent-reporter": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jest-silent-reporter/-/jest-silent-reporter-0.5.0.tgz",
-      "integrity": "sha512-epdLt8Oj0a1AyRiR6F8zx/1SVT1Mi7VU3y4wB2uOBHs/ohIquC7v2eeja7UN54uRPyHInIKWdL+RdG228n5pJQ==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-util": "^26.0.0"
-      }
-    },
     "node_modules/jest-slow-test-reporter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jest-slow-test-reporter/-/jest-slow-test-reporter-1.0.0.tgz",
@@ -16220,9 +16183,9 @@
       "optional": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.22",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
-      "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==",
+      "version": "3.1.23",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
+      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -18282,17 +18245,21 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.2.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
-      "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
+      "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
       "dev": true,
       "dependencies": {
         "colorette": "^1.2.2",
         "nanoid": "^3.1.23",
-        "source-map": "^0.6.1"
+        "source-map-js": "^0.6.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-modules-extract-imports": {
@@ -18657,27 +18624,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
-    "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
-      "dev": true,
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/postcss/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -20176,9 +20122,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.32.13",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "version": "1.34.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
+      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
       "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -20778,6 +20724,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
@@ -21524,6 +21479,15 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
       }
     },
     "node_modules/styled-components/node_modules/supports-color": {
@@ -31192,21 +31156,6 @@
         }
       }
     },
-    "csv-parse": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.15.4.tgz",
-      "integrity": "sha512-OdBbFc0yZhOm17lSxqkirrHlFFVpKRT0wp4DAGoJelsP3LbGzV9LNr7XmM/lrr0uGkCtaqac9UhP8PDHXOAbMg==",
-      "dev": true
-    },
-    "csv-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
-      "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.0"
-      }
-    },
     "cwd": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
@@ -36183,16 +36132,6 @@
         "graceful-fs": "^4.2.4"
       }
     },
-    "jest-silent-reporter": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jest-silent-reporter/-/jest-silent-reporter-0.5.0.tgz",
-      "integrity": "sha512-epdLt8Oj0a1AyRiR6F8zx/1SVT1Mi7VU3y4wB2uOBHs/ohIquC7v2eeja7UN54uRPyHInIKWdL+RdG228n5pJQ==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "jest-util": "^26.0.0"
-      }
-    },
     "jest-slow-test-reporter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jest-slow-test-reporter/-/jest-slow-test-reporter-1.0.0.tgz",
@@ -38052,9 +37991,9 @@
       "optional": true
     },
     "nanoid": {
-      "version": "3.1.22",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
-      "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ=="
+      "version": "3.1.23",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
+      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -39866,28 +39805,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.2.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
-      "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
+      "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.2",
         "nanoid": "^3.1.23",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "nanoid": {
-          "version": "3.1.23",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-          "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
+        "source-map-js": "^0.6.2"
       }
     },
     "postcss-modules-extract-imports": {
@@ -41459,9 +41384,9 @@
       }
     },
     "sass": {
-      "version": "1.32.13",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "version": "1.34.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
+      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
       "devOptional": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -41979,6 +41904,12 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true
+    },
     "source-map-resolve": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
diff --git a/package.json b/package.json
index 8530cf0c52..130b70bb40 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "ajv": "^8.4.0",
     "ajv-formats": "^2.1.0",
     "algoliasearch": "^4.9.1",
-    "assert": "^2.0.0",
     "browser-date-formatter": "^3.0.3",
     "change-case": "^4.1.2",
     "cheerio": "^1.0.0-rc.3",
@@ -114,8 +113,6 @@
     "cross-env": "^7.0.3",
     "csp-parse": "0.0.2",
     "css-loader": "^4.3.0",
-    "csv-parse": "^4.15.4",
-    "csv-parser": "^3.0.0",
     "dedent": "^0.7.0",
     "domwaiter": "^1.3.0",
     "eslint": "^7.26.0",
@@ -136,12 +133,10 @@
     "jest": "^26.6.3",
     "jest-expect-message": "^1.0.2",
     "jest-github-actions-reporter": "^1.0.3",
-    "jest-silent-reporter": "^0.5.0",
     "jest-slow-test-reporter": "^1.0.0",
     "linkinator": "^2.13.6",
     "make-promises-safe": "^5.1.0",
     "mdast-util-from-markdown": "^0.8.4",
-    "mime": "^2.4.4",
     "mini-css-extract-plugin": "^1.6.0",
     "mkdirp": "^1.0.4",
     "mock-express-response": "^0.3.0",
@@ -150,14 +145,13 @@
     "nodemon": "^2.0.7",
     "npm-merge-driver-install": "^2.0.1",
     "object-hash": "^2.1.1",
-    "postcss": "^8.2.15",
+    "postcss": "^8.3.0",
     "prettier": "^2.3.0",
-    "process": "^0.11.10",
     "replace": "^1.2.1",
     "resolve-url-loader": "^4.0.0",
     "rimraf": "^3.0.2",
     "robots-parser": "^2.3.0",
-    "sass": "^1.32.13",
+    "sass": "^1.34.0",
     "sass-loader": "^11.1.1",
     "start-server-and-test": "^1.12.2",
     "strip-ansi": "^7.0.0",
diff --git a/pages/[versionId]/[productId]/[...restPage]/index.tsx b/pages/[versionId]/[productId]/[...restPage]/index.tsx
new file mode 100644
index 0000000000..12a339e33a
--- /dev/null
+++ b/pages/[versionId]/[productId]/[...restPage]/index.tsx
@@ -0,0 +1,5 @@
+import GlobalPage from '../index'
+
+export { getServerSideProps } from '../index'
+
+export default GlobalPage
\ No newline at end of file
diff --git a/pages/[versionId]/[productId]/index.tsx b/pages/[versionId]/[productId]/index.tsx
index 26ca776b69..2ba64d13b6 100644
--- a/pages/[versionId]/[productId]/index.tsx
+++ b/pages/[versionId]/[productId]/index.tsx
@@ -1,126 +1,61 @@
 import { GetServerSideProps } from 'next'
-import { Grid } from '@primer/components'
 
 import {
   MainContextT,
   MainContext,
   getMainContextFromRequest,
 } from 'components/context/MainContext'
-import { DefaultLayout } from 'components/DefaultLayout'
 import {
   getProductLandingContextFromRequest,
   ProductLandingContextT,
   ProductLandingContext,
-  useProductLandingContext,
 } from 'components/context/ProductLandingContext'
 
-import { LandingHero } from 'components/landing/LandingHero'
-import { FeaturedArticles } from 'components/landing/FeaturedArticles'
-import { GuideCards } from 'components/landing/GuideCards'
-import { SponsorsExamples } from 'components/landing/SponsorsExamples'
-import { CommunityExamples } from 'components/landing/CommunityExamples'
-import { CodeExamples } from 'components/landing/CodeExamples'
-import { LandingSection } from 'components/landing/LandingSection'
-import { useTranslation } from 'components/hooks/useTranslation'
-import { ProductArticlesList } from 'components/landing/ProductArticlesList'
-import { TableOfContents } from 'components/landing/TableOfContents'
-import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+import { ProductLanding } from 'components/landing/ProductLanding'
+import { TocLanding } from 'components/landing/TocLanding'
+import {
+  getTocLandingContextFromRequest,
+  TocLandingContext,
+  TocLandingContextT,
+} from 'components/context/TocLandingContext'
 
 type Props = {
   mainContext: MainContextT
   productLandingContext: ProductLandingContextT
+  tocLandingContext: TocLandingContextT
 }
-const ProductPage = ({ mainContext, productLandingContext }: Props) => {
-  return (
-    <MainContext.Provider value={mainContext}>
+const GlobalPage = ({ mainContext, productLandingContext, tocLandingContext }: Props) => {
+  const { currentLayoutName, page, relativePath } = mainContext
+
+  let content
+  if (currentLayoutName === 'product-landing') {
+    content = (
       <ProductLandingContext.Provider value={productLandingContext}>
-        {mainContext.currentLayoutName === 'product-landing' ? (
-          <ProductLanding />
-        ) : (
-          <TocProductLanding />
-        )}
+        <ProductLanding />
       </ProductLandingContext.Provider>
-    </MainContext.Provider>
-  )
+    )
+  } else if (currentLayoutName === 'product-sublanding') {
+    content = <p>todo: product sub-landing</p>
+  } else if (relativePath?.endsWith('index.md')) {
+    content = (
+      <TocLandingContext.Provider value={tocLandingContext}>
+        <TocLanding
+          variant={
+            page.documentType === 'category' || relativePath === 'github/index.md'
+              ? 'compact'
+              : 'expanded'
+          }
+        />
+      </TocLandingContext.Provider>
+    )
+  } else {
+    content = <p>article / fallback rendering</p>
+  }
+
+  return <MainContext.Provider value={mainContext}>{content}</MainContext.Provider>
 }
 
-const ProductLanding = () => {
-  const { title, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
-    useProductLandingContext()
-  const { t } = useTranslation('product_landing')
-
-  return (
-    <DefaultLayout>
-      <LandingSection className="pt-3">
-        <LandingHero />
-      </LandingSection>
-
-      <LandingSection>
-        <FeaturedArticles />
-      </LandingSection>
-
-      {productCodeExamples.length > 0 && (
-        <LandingSection title={t('code_examples')} className="my-6">
-          <CodeExamples />
-        </LandingSection>
-      )}
-
-      {productCommunityExamples.length > 0 && (
-        <LandingSection title={t('communities_using_discussions')} className="my-6">
-          <CommunityExamples />
-        </LandingSection>
-      )}
-
-      {productUserExamples.length > 0 && (
-        <LandingSection title={t('sponsor_community')} className="my-6">
-          <SponsorsExamples />
-        </LandingSection>
-      )}
-
-      {guideCards.length > 0 && (
-        <div className="color-bg-tertiary py-6 my-8">
-          <LandingSection title={t('guides')} className="my-6">
-            <GuideCards />
-          </LandingSection>
-        </div>
-      )}
-
-      <LandingSection sectionLink="all-docs" title={`All ${title} Docs`}>
-        <ProductArticlesList />
-      </LandingSection>
-    </DefaultLayout>
-  )
-}
-
-const TocProductLanding = () => {
-  const { title, introPlainText, tocItems } = useProductLandingContext()
-  return (
-    <DefaultLayout>
-      <Grid
-        className="container-xl px-3 px-md-6 my-4 my-lg-4 container-xl "
-        gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
-        gridTemplateRows="auto 1fr"
-        gridGap={16}
-      >
-        <div>
-          <h1 className="my-4">{title}</h1>
-          <div className="lead-mktg">
-            <p>{introPlainText}</p>
-          </div>
-
-          <div className="mt-7">
-            <TableOfContents items={tocItems} />
-          </div>
-        </div>
-        <div>
-          <ArticleVersionPicker />
-        </div>
-      </Grid>
-    </DefaultLayout>
-  )
-}
-
-export default ProductPage
+export default GlobalPage
 
 export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
   const req = context.req as any
@@ -129,6 +64,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
     props: {
       mainContext: getMainContextFromRequest(req),
       productLandingContext: getProductLandingContextFromRequest(req),
+      tocLandingContext: getTocLandingContextFromRequest(req),
     },
   }
 }
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index e57e2add2f..a31df1f68c 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -39,3 +39,4 @@ $marketing-font-path: "/dist/fonts/";
 @import "tables.scss";
 @import "toggle-images-button.scss";
 @import "underline-dashed.scss";
+@import "utilities.scss";
diff --git a/stylesheets/lists.scss b/stylesheets/lists.scss
index 05d488dc87..531310696c 100644
--- a/stylesheets/lists.scss
+++ b/stylesheets/lists.scss
@@ -1,6 +1,10 @@
 /* Numbered procedures (step 1, step 2, ...)
 ------------------------------------------------------------------------------*/
 
+.list-style-inside {
+  list-style: inside;
+}
+
 .markdown-body ol {
   counter-reset: li;
   list-style: none;
diff --git a/stylesheets/opacity.scss b/stylesheets/opacity.scss
index a2b96b4cd7..7da1e628e1 100644
--- a/stylesheets/opacity.scss
+++ b/stylesheets/opacity.scss
@@ -1,6 +1,12 @@
+.opacity-0 {
+  opacity: 0;
+}
 .opacity-60 {
   opacity: 0.6;
 }
 .opacity-70 {
   opacity: 0.7;
 }
+.opacity-100 {
+  opacity: 1;
+}
diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
new file mode 100644
index 0000000000..bdbd4c7a49
--- /dev/null
+++ b/stylesheets/utilities.scss
@@ -0,0 +1,7 @@
+.transition-200 {
+  transition: 200ms
+}
+
+.rotate-180 {
+  transform: rotateX(180deg)
+}