diff --git a/src/components/Contents/index.js b/src/components/Contents/index.js
index eab245b06..16069545e 100644
--- a/src/components/Contents/index.js
+++ b/src/components/Contents/index.js
@@ -1,23 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { theme } from '../../theme/docsTheme';
 import { formatText } from '../../utils/format-text';
 import { ContentsContext } from './contents-context';
 import ContentsList from './ContentsList';
 import ContentsListItem from './ContentsListItem';
 
-const StyledContents = styled('div')`
-  @media ${theme.screenSize.largeAndUp} {
-    display: ${(props) => (props.displayOnDesktopOnly ? '' : 'none')};
-  }
-`;
-
 const formatTextOptions = {
   literalEnableInline: true,
 };
 
-const Contents = ({ displayOnDesktopOnly }) => {
+const Contents = ({ className }) => {
   const { activeHeadingId, headingNodes, showContentsComponent } = useContext(ContentsContext);
 
   if (headingNodes.length === 0 || !showContentsComponent) {
@@ -27,7 +19,7 @@ const Contents = ({ displayOnDesktopOnly }) => {
   const label = 'On this page';
 
   return (
-    <StyledContents displayOnDesktopOnly={displayOnDesktopOnly}>
+    <div className={className}>
       <ContentsList label={label}>
         {headingNodes.map(({ depth, id, title }) => {
           // Depth of heading nodes refers to their depth in the AST
@@ -39,12 +31,12 @@ const Contents = ({ displayOnDesktopOnly }) => {
           );
         })}
       </ContentsList>
-    </StyledContents>
+    </div>
   );
 };
 
 Contents.propTypes = {
-  displayOnDesktopOnly: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default Contents;
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
index 7d7c78f8c..aced08aea 100644
--- a/src/components/DocumentBody.js
+++ b/src/components/DocumentBody.js
@@ -150,7 +150,7 @@ const DocumentBody = (props) => {
           >
             <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
               <FootnoteContext.Provider value={{ footnotes }}>
-                <PageContext.Provider value={{ page, template, slug }}>
+                <PageContext.Provider value={{ page, template, slug, options: page?.options }}>
                   <div id="template-container">
                     <Template {...props} useChatbot={useChatbot}>
                       {pageNodes.map((child, index) => (
diff --git a/src/components/Heading.js b/src/components/Heading.js
index e93e23478..7eb45f0c6 100644
--- a/src/components/Heading.js
+++ b/src/components/Heading.js
@@ -7,6 +7,7 @@ import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import useScreenSize from '../hooks/useScreenSize';
 import { usePageContext } from '../context/page-context';
+import { theme } from '../theme/docsTheme';
 import ComponentFactory from './ComponentFactory';
 import TabSelectors from './Tabs/TabSelectors';
 import { TabContext } from './Tabs/tab-context';
@@ -14,6 +15,7 @@ import { InstruqtContext } from './Instruqt/instruqt-context';
 import ConditionalWrapper from './ConditionalWrapper';
 import Contents from './Contents';
 import Permalink from './Permalink';
+import { TimeRequired } from './MultiPageTutorials';
 
 const h2Styling = css`
   margin-top: 16px;
@@ -30,6 +32,14 @@ const labButtonStyling = css`
   margin-left: 18px;
 `;
 
+const contentsStyle = css`
+  margin-top: ${theme.size.medium};
+
+  @media ${theme.screenSize.largeAndUp} {
+    display: none;
+  }
+`;
+
 const determineHeading = (sectionDepth) => {
   if (sectionDepth === 1) {
     return H2;
@@ -93,7 +103,12 @@ const Heading = ({ sectionDepth, nodeData, className, ...rest }) => {
           )}
         </HeadingTag>
       </ConditionalWrapper>
-      {isPageTitle && <Contents />}
+      {isPageTitle && (
+        <>
+          <TimeRequired />
+          <Contents className={contentsStyle} />
+        </>
+      )}
     </>
   );
 };
diff --git a/src/components/Internal/Overline.js b/src/components/Internal/Overline.js
new file mode 100644
index 000000000..1efe3dd7c
--- /dev/null
+++ b/src/components/Internal/Overline.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Overline as LGOverline } from '@leafygreen-ui/typography';
+
+const overlineBaseStyling = css`
+  margin-top: 48px;
+  margin-bottom: 0px;
+  color: var(--font-color-light);
+`;
+
+const Overline = ({ className, children }) => {
+  return <LGOverline className={cx(overlineBaseStyling, className)}>{children}</LGOverline>;
+};
+
+Overline.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Overline;
diff --git a/src/components/InternalPageNav.js b/src/components/InternalPageNav.js
deleted file mode 100644
index 6f61121f4..000000000
--- a/src/components/InternalPageNav.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@leafygreen-ui/button';
-import { Body } from '@leafygreen-ui/typography';
-import Icon, { glyphs } from '@leafygreen-ui/icon';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { palette } from '@leafygreen-ui/palette';
-import { theme } from '../theme/docsTheme';
-import { getPageTitle } from '../utils/get-page-title';
-import Link from './Link';
-
-const containerStyling = css`
-  padding-bottom: 2.5em;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  column-gap: ${theme.size.default};
-  margin-top: 88px;
-
-  @media ${theme.screenSize.upToSmall} {
-    flex-direction: column-reverse;
-    row-gap: 64px;
-    margin-top: 66px;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const commonTextStyles = css`
-  font-size: ${theme.fontSize.small};
-  line-height: 20px;
-`;
-
-const nextPrevTextStyling = css`
-  ${commonTextStyles}
-  font-weight: 500;
-`;
-
-const nextTextStyling = css`
-  text-align: end;
-`;
-
-const prevTextStyling = css`
-  text-align: start;
-`;
-
-const nextPrevTitleTextStyling = css`
-  ${commonTextStyles}
-  color: ${palette.gray.base};
-`;
-
-const commonLinkContentContainerStyling = css`
-  align-items: center;
-  display: flex;
-  column-gap: 14px;
-`;
-
-const nextLinkContainerStyling = css`
-  ${commonLinkContentContainerStyling}
-  flex-direction: row-reverse;
-`;
-
-const prevLinkContainerStyling = css`
-  ${commonLinkContentContainerStyling}
-  flex-direction: row;
-`;
-
-const NextPrevLink = ({ icon, direction, pageTitle }) => {
-  const isNext = direction?.toLowerCase() === 'next';
-  const isPrev = direction?.toLowerCase() === 'back';
-
-  return (
-    <div className={cx({ [nextLinkContainerStyling]: isNext, [prevLinkContainerStyling]: isPrev })}>
-      <Button size="large">
-        <Icon glyph={icon} />
-      </Button>
-      <div className={cx({ [nextTextStyling]: isNext }, { [prevTextStyling]: isPrev })}>
-        <Body className={cx(nextPrevTextStyling)}>{direction}</Body>
-        <Body className={cx(nextPrevTitleTextStyling)}>{pageTitle}</Body>
-      </div>
-    </div>
-  );
-};
-
-const InternalPageNav = ({ slug, slugTitleMapping, toctreeOrder }) => {
-  const slugIndex = toctreeOrder.indexOf(slug);
-  const prevSlug = slugIndex > 0 ? toctreeOrder[slugIndex - 1] : null;
-  const nextSlug = slugIndex < toctreeOrder.length - 1 ? toctreeOrder[slugIndex + 1] : null;
-  return (
-    <div className={cx(containerStyling)}>
-      {prevSlug && (
-        <Link to={prevSlug} title="Previous Section">
-          <NextPrevLink
-            icon={glyphs.ArrowLeft.displayName}
-            direction="Back"
-            pageTitle={getPageTitle(prevSlug, slugTitleMapping)}
-          />
-        </Link>
-      )}
-      {nextSlug && (
-        <Link to={nextSlug} title="Next Section">
-          <NextPrevLink
-            icon={glyphs.ArrowRight.displayName}
-            direction="Next"
-            pageTitle={getPageTitle(nextSlug, slugTitleMapping)}
-          />
-        </Link>
-      )}
-    </div>
-  );
-};
-
-InternalPageNav.propTypes = {
-  slug: PropTypes.string.isRequired,
-  slugTitleMapping: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]))
-    .isRequired,
-  toctreeOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-
-export default InternalPageNav;
diff --git a/src/components/InternalPageNav/InternalPageNav.js b/src/components/InternalPageNav/InternalPageNav.js
new file mode 100644
index 000000000..870577fb1
--- /dev/null
+++ b/src/components/InternalPageNav/InternalPageNav.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { glyphs } from '@leafygreen-ui/icon';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { theme } from '../../theme/docsTheme';
+import { getPageTitle } from '../../utils/get-page-title';
+import { useActiveMpTutorial } from '../MultiPageTutorials';
+import { reportAnalytics } from '../../utils/report-analytics';
+import NextPrevLink from './NextPrevLink';
+
+const containerStyling = css`
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  column-gap: ${theme.size.default};
+  margin-top: 88px;
+
+  @media ${theme.screenSize.upToSmall} {
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+const getActiveTutorialPage = (activeTutorial, key, linkTitle) => {
+  return {
+    targetSlug: activeTutorial[key].targetSlug,
+    pageTitle: activeTutorial[key].pageTitle,
+    linkTitle,
+  };
+};
+
+const getTocPage = (targetSlug, slugTitleMapping, linkTitle) => {
+  return {
+    targetSlug,
+    pageTitle: targetSlug ? getPageTitle(targetSlug, slugTitleMapping) : null,
+    linkTitle,
+  };
+};
+
+const getPrev = (activeTutorial, toctreeOrder, slugTitleMapping, slugIndex) => {
+  const key = 'prev';
+  if (activeTutorial?.[key]) {
+    return getActiveTutorialPage(activeTutorial, key, 'Previous Step');
+  }
+  const prevSlug = slugIndex > 0 ? toctreeOrder[slugIndex - 1] : null;
+  return getTocPage(prevSlug, slugTitleMapping, 'Previous Section');
+};
+
+const getNext = (activeTutorial, toctreeOrder, slugTitleMapping, slugIndex) => {
+  const key = 'next';
+  if (activeTutorial?.[key]) {
+    return getActiveTutorialPage(activeTutorial, key, 'Next Step');
+  }
+  const nextSlug = slugIndex < toctreeOrder.length - 1 ? toctreeOrder[slugIndex + 1] : null;
+  return getTocPage(nextSlug, slugTitleMapping, 'Next Section');
+};
+
+const InternalPageNav = ({ slug, slugTitleMapping, toctreeOrder }) => {
+  const activeTutorial = useActiveMpTutorial();
+  const slugIndex = toctreeOrder.indexOf(slug);
+  const prevPage = getPrev(activeTutorial, toctreeOrder, slugTitleMapping, slugIndex);
+  const nextPage = getNext(activeTutorial, toctreeOrder, slugTitleMapping, slugIndex);
+
+  const handleClick = (direction, targetSlug) => {
+    reportAnalytics('InternalPageNavClicked', {
+      direction,
+      targetSlug,
+    });
+  };
+
+  return (
+    <div className={cx(containerStyling)}>
+      {prevPage?.targetSlug && (
+        <NextPrevLink
+          icon={glyphs.ArrowLeft.displayName}
+          direction="Back"
+          targetSlug={prevPage.targetSlug}
+          pageTitle={prevPage.pageTitle}
+          title={prevPage.linkTitle}
+          onClick={handleClick}
+        />
+      )}
+      {nextPage?.targetSlug && (
+        <NextPrevLink
+          icon={glyphs.ArrowRight.displayName}
+          direction="Next"
+          targetSlug={nextPage.targetSlug}
+          pageTitle={nextPage.pageTitle}
+          title={nextPage.linkTitle}
+          onClick={handleClick}
+        />
+      )}
+    </div>
+  );
+};
+
+InternalPageNav.propTypes = {
+  slug: PropTypes.string.isRequired,
+  slugTitleMapping: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]))
+    .isRequired,
+  toctreeOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default InternalPageNav;
diff --git a/src/components/InternalPageNav/NextPrevLink.js b/src/components/InternalPageNav/NextPrevLink.js
new file mode 100644
index 000000000..c27e7117c
--- /dev/null
+++ b/src/components/InternalPageNav/NextPrevLink.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import Button from '@leafygreen-ui/button';
+import { Body } from '@leafygreen-ui/typography';
+import Icon from '@leafygreen-ui/icon';
+import { palette } from '@leafygreen-ui/palette';
+import { theme } from '../../theme/docsTheme';
+import Link from '../Link';
+import { navLinkButtonStyle } from './styles';
+
+const commonTextStyles = css`
+  font-size: ${theme.fontSize.small};
+  line-height: 20px;
+`;
+
+const nextPrevTextStyling = css`
+  ${commonTextStyles}
+  font-weight: 500;
+  color: var(--font-color-primary);
+`;
+
+const nextTextStyling = css`
+  text-align: end;
+`;
+
+const prevTextStyling = css`
+  text-align: start;
+`;
+
+const nextPrevTitleTextStyling = css`
+  ${commonTextStyles}
+  color: ${palette.gray.base};
+
+  .dark-theme & {
+    color: ${palette.gray.light1};
+  }
+`;
+
+const commonLinkContentContainerStyling = css`
+  align-items: center;
+  display: flex;
+  column-gap: 14px;
+`;
+
+const nextLinkContainerStyling = css`
+  ${commonLinkContentContainerStyling}
+  flex-direction: row-reverse;
+`;
+
+const prevLinkContainerStyling = css`
+  ${commonLinkContentContainerStyling}
+  flex-direction: row;
+`;
+
+const baseButtonStyle = css`
+  width: 52px;
+  height: 48px;
+
+  @media ${theme.screenSize.mediumAndUp} {
+    width: 40px;
+    height: 36px;
+  }
+`;
+
+const NextPrevLink = ({ className, icon, direction, pageTitle, targetSlug, title, onClick }) => {
+  const isNext = direction?.toLowerCase() === 'next';
+  const isPrev = direction?.toLowerCase() === 'back';
+
+  return (
+    <div className={className} onClick={() => onClick(direction, targetSlug)}>
+      <Link to={targetSlug} title={title}>
+        <div className={cx({ [nextLinkContainerStyling]: isNext, [prevLinkContainerStyling]: isPrev })}>
+          <Button className={cx(baseButtonStyle, navLinkButtonStyle)}>
+            <Icon glyph={icon} />
+          </Button>
+          <div className={cx({ [nextTextStyling]: isNext }, { [prevTextStyling]: isPrev })}>
+            <Body className={cx(nextPrevTextStyling)}>{direction}</Body>
+            <Body className={cx(nextPrevTitleTextStyling)}>{pageTitle}</Body>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default NextPrevLink;
diff --git a/src/components/InternalPageNav/index.js b/src/components/InternalPageNav/index.js
new file mode 100644
index 000000000..83e86045c
--- /dev/null
+++ b/src/components/InternalPageNav/index.js
@@ -0,0 +1,3 @@
+export { default as InternalPageNav } from './InternalPageNav';
+export { default as NextPrevLink } from './NextPrevLink';
+export { navLinkButtonStyle } from './styles';
diff --git a/src/components/InternalPageNav/styles.js b/src/components/InternalPageNav/styles.js
new file mode 100644
index 000000000..225944796
--- /dev/null
+++ b/src/components/InternalPageNav/styles.js
@@ -0,0 +1,12 @@
+import { css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+
+export const navLinkButtonStyle = css`
+  background-color: ${palette.gray.light3};
+  color: ${palette.black};
+
+  .dark-theme & {
+    background-color: ${palette.gray.dark2};
+    color: ${palette.white};
+  }
+`;
diff --git a/src/components/Kicker.js b/src/components/Kicker.js
index 5c3fe2b19..cf1a2cb82 100644
--- a/src/components/Kicker.js
+++ b/src/components/Kicker.js
@@ -1,17 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { Overline } from '@leafygreen-ui/typography';
-import { palette } from '@leafygreen-ui/palette';
+import { css } from '@leafygreen-ui/emotion';
 import { theme } from '../theme/docsTheme';
 import ComponentFactory from './ComponentFactory';
+import Overline from './Internal/Overline';
 
-const kickerBaseStyling = css`
+const kickerBaseStyle = css`
   grid-column: 2;
-  margin-top: 48px;
-  margin-bottom: 0px;
-  color: var(--font-color-light);
   @media ${theme.screenSize.upToSmall} {
     padding-top: 56px;
   }
@@ -20,15 +15,9 @@ const kickerBaseStyling = css`
   }
 `;
 
-const kickerLightStyling = css`
-  color: ${palette.gray.base};
-  ${kickerBaseStyling}
-`;
-
 const Kicker = ({ nodeData: { argument }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   return (
-    <Overline className={cx({ [kickerBaseStyling]: darkMode === true }, { [kickerLightStyling]: darkMode === false })}>
+    <Overline className={kickerBaseStyle}>
       {argument.map((child, i) => (
         <ComponentFactory {...rest} nodeData={child} key={i} />
       ))}
diff --git a/src/components/MultiPageTutorials/MPTNextLinkFull.js b/src/components/MultiPageTutorials/MPTNextLinkFull.js
new file mode 100644
index 000000000..6e37affec
--- /dev/null
+++ b/src/components/MultiPageTutorials/MPTNextLinkFull.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { glyphs } from '@leafygreen-ui/icon';
+import { css } from '@leafygreen-ui/emotion';
+import { NextPrevLink } from '../InternalPageNav';
+import { theme } from '../../theme/docsTheme';
+import { LINK_TITLE } from './constants';
+import { useShouldShowNext } from './hooks/use-should-show-next';
+import { useActiveMpTutorial } from './hooks/use-active-mp-tutorial';
+import { reportMPTAnalytics } from './utils';
+
+const baseStyle = css`
+  display: none;
+  float: right;
+  margin-left: ${theme.size.medium};
+  // Top margin to help align title of next page with the middle of heading
+  margin-top: 6px;
+
+  @media ${theme.screenSize.mediumAndUp} {
+    display: initial;
+  }
+`;
+
+export const MPTNextLinkFull = () => {
+  const activeTutorial = useActiveMpTutorial();
+  const showNext = useShouldShowNext();
+
+  if (!showNext) {
+    return null;
+  }
+
+  return (
+    <NextPrevLink
+      className={baseStyle}
+      icon={glyphs.ArrowRight.displayName}
+      direction={'Next'}
+      pageTitle={activeTutorial.next.pageTitle}
+      targetSlug={activeTutorial.next.targetSlug}
+      title={LINK_TITLE}
+      onClick={() => reportMPTAnalytics(activeTutorial.next.targetSlug, 'full')}
+    />
+  );
+};
diff --git a/src/components/MultiPageTutorials/MPTNextLinkMini.js b/src/components/MultiPageTutorials/MPTNextLinkMini.js
new file mode 100644
index 000000000..57de9e572
--- /dev/null
+++ b/src/components/MultiPageTutorials/MPTNextLinkMini.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import Icon, { glyphs } from '@leafygreen-ui/icon';
+import { css, cx } from '@leafygreen-ui/emotion';
+import Button from '@leafygreen-ui/button';
+import { theme } from '../../theme/docsTheme';
+import Link from '../Link';
+import { navLinkButtonStyle } from '../InternalPageNav';
+import { LINK_TITLE } from './constants';
+import { useShouldShowNext } from './hooks/use-should-show-next';
+import { useActiveMpTutorial } from './hooks/use-active-mp-tutorial';
+import { reportMPTAnalytics } from './utils';
+
+const baseStyle = css`
+  float: right;
+  margin-left: ${theme.size.medium};
+  // Add top margin to align bottom of container to bottom of overline
+  margin-top: -38px;
+  width: 103px;
+  height: 22px;
+
+  @media ${theme.screenSize.mediumAndUp} {
+    display: none;
+  }
+`;
+
+const buttonStyle = css`
+  width: 100%;
+`;
+
+export const MPTNextLinkMini = () => {
+  const activeTutorial = useActiveMpTutorial();
+  const showNext = useShouldShowNext();
+
+  if (!showNext) {
+    return null;
+  }
+
+  return (
+    <div className={baseStyle} onClick={() => reportMPTAnalytics(activeTutorial.next.targetSlug, 'mini')}>
+      <Button
+        className={cx(buttonStyle, navLinkButtonStyle)}
+        as={Link}
+        to={activeTutorial.next.targetSlug}
+        title={LINK_TITLE}
+        leftGlyph={<Icon glyph={glyphs.ArrowRight.displayName} />}
+        size="xsmall"
+      >
+        {LINK_TITLE}
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/MultiPageTutorials/StepNumber.js b/src/components/MultiPageTutorials/StepNumber.js
new file mode 100644
index 000000000..1002422f5
--- /dev/null
+++ b/src/components/MultiPageTutorials/StepNumber.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@leafygreen-ui/emotion';
+import { theme } from '../../theme/docsTheme';
+import Overline from '../Internal/Overline';
+import { MPTNextLinkFull } from './MPTNextLinkFull';
+
+const overlineStyle = css`
+  font-weight: 600;
+  line-height: ${theme.size.default};
+  padding-top: 0 !important;
+`;
+
+export const StepNumber = ({ slug, activeTutorial }) => {
+  const totalSteps = activeTutorial.total_steps;
+  const currentStep = activeTutorial.slugs.indexOf(slug) + 1;
+
+  return (
+    <>
+      <Overline className={overlineStyle}>
+        Step {currentStep} of {totalSteps}
+      </Overline>
+      <MPTNextLinkFull />
+    </>
+  );
+};
+
+StepNumber.propTypes = {
+  slug: PropTypes.string.isRequired,
+  activeTutorial: PropTypes.shape({
+    parent: PropTypes.string,
+    total_steps: PropTypes.number,
+    slugs: PropTypes.arrayOf(PropTypes.string),
+  }),
+};
diff --git a/src/components/MultiPageTutorials/TimeRequired.js b/src/components/MultiPageTutorials/TimeRequired.js
new file mode 100644
index 000000000..a3140a409
--- /dev/null
+++ b/src/components/MultiPageTutorials/TimeRequired.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { css } from '@leafygreen-ui/emotion';
+import Overline from '../Internal/Overline';
+import { theme } from '../../theme/docsTheme';
+import { MPTNextLinkMini } from './MPTNextLinkMini';
+import { useMptPageOptions } from './hooks/use-mpt-page-options';
+import { OPTION_KEY_TIME_REQUIRED } from './constants';
+
+const timeBaseStyle = css`
+  font-weight: 600;
+  line-height: ${theme.size.default};
+  margin-top: 40px;
+  margin-bottom: ${theme.size.default};
+`;
+
+export const TimeRequired = () => {
+  const options = useMptPageOptions();
+  const time = options?.[OPTION_KEY_TIME_REQUIRED];
+
+  if (!time) {
+    return null;
+  }
+
+  return (
+    <>
+      <Overline className={timeBaseStyle}>Read time {time} min</Overline>
+      {/* Keeping at the bottom so that it can be more easily aligned regardless of what's above the Time component*/}
+      <MPTNextLinkMini />
+    </>
+  );
+};
diff --git a/src/components/MultiPageTutorials/constants.js b/src/components/MultiPageTutorials/constants.js
new file mode 100644
index 000000000..1839dd010
--- /dev/null
+++ b/src/components/MultiPageTutorials/constants.js
@@ -0,0 +1,4 @@
+export const PAGE_OPTION_NAME = 'multi_page_tutorial_settings';
+export const OPTION_KEY_SHOW_NEXT_TOP = 'show_next_top';
+export const OPTION_KEY_TIME_REQUIRED = 'time_required';
+export const LINK_TITLE = 'Next Step';
diff --git a/src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js b/src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js
new file mode 100644
index 000000000..ab8e3e165
--- /dev/null
+++ b/src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js
@@ -0,0 +1,47 @@
+import { usePageContext } from '../../../context/page-context';
+import useSnootyMetadata from '../../../utils/use-snooty-metadata';
+
+const addPrevNextTutorials = (slugTitleMapping, slug, activeTutorial) => {
+  if (!activeTutorial || Object.keys(activeTutorial).length === 0) {
+    return;
+  }
+
+  const currPageIdx = activeTutorial.slugs.indexOf(slug);
+  const keyNext = 'next';
+  const keyPrev = 'prev';
+  activeTutorial[keyNext] = null;
+  activeTutorial[keyPrev] = null;
+
+  const nextPageIdx = currPageIdx + 1;
+  if (nextPageIdx < activeTutorial.total_steps) {
+    const targetSlug = activeTutorial.slugs[nextPageIdx];
+    const pageTitle = slugTitleMapping[targetSlug];
+    activeTutorial[keyNext] = {
+      targetSlug,
+      pageTitle,
+    };
+  }
+
+  const prevPageIdx = currPageIdx - 1;
+  if (prevPageIdx >= 0) {
+    const targetSlug = activeTutorial.slugs[prevPageIdx];
+    const pageTitle = slugTitleMapping[targetSlug];
+    activeTutorial[keyPrev] = {
+      targetSlug,
+      pageTitle,
+    };
+  }
+};
+
+/**
+ * @returns {object | null} Metadata about a multi-page tutorial, if the current page is part of one. Otherwise, null is returned.
+ */
+export const useActiveMpTutorial = () => {
+  const { slug } = usePageContext();
+  const { multiPageTutorials = {}, slugToBreadcrumbLabel } = useSnootyMetadata();
+
+  const activeTutorial = Object.values(multiPageTutorials).find((tutorial) => tutorial.slugs?.includes(slug)) ?? null;
+  addPrevNextTutorials(slugToBreadcrumbLabel, slug, activeTutorial);
+
+  return activeTutorial;
+};
diff --git a/src/components/MultiPageTutorials/hooks/use-mpt-page-options.js b/src/components/MultiPageTutorials/hooks/use-mpt-page-options.js
new file mode 100644
index 000000000..ed755819b
--- /dev/null
+++ b/src/components/MultiPageTutorials/hooks/use-mpt-page-options.js
@@ -0,0 +1,10 @@
+import { usePageContext } from '../../../context/page-context';
+import { PAGE_OPTION_NAME } from '../constants';
+
+export const useMptPageOptions = () => {
+  const { options } = usePageContext();
+  if (!options || Object.keys(options).length === 0) {
+    return;
+  }
+  return options[PAGE_OPTION_NAME];
+};
diff --git a/src/components/MultiPageTutorials/hooks/use-should-show-next.js b/src/components/MultiPageTutorials/hooks/use-should-show-next.js
new file mode 100644
index 000000000..a29dbd280
--- /dev/null
+++ b/src/components/MultiPageTutorials/hooks/use-should-show-next.js
@@ -0,0 +1,11 @@
+import { OPTION_KEY_SHOW_NEXT_TOP } from '../constants';
+import { useActiveMpTutorial } from './use-active-mp-tutorial';
+import { useMptPageOptions } from './use-mpt-page-options';
+
+export const useShouldShowNext = () => {
+  const activeTutorial = useActiveMpTutorial();
+  const options = useMptPageOptions();
+  const hasNextTutorial = activeTutorial && !!activeTutorial.next;
+  const hasPageOption = !!options?.[OPTION_KEY_SHOW_NEXT_TOP];
+  return hasPageOption && hasNextTutorial;
+};
diff --git a/src/components/MultiPageTutorials/index.js b/src/components/MultiPageTutorials/index.js
new file mode 100644
index 000000000..2830a2189
--- /dev/null
+++ b/src/components/MultiPageTutorials/index.js
@@ -0,0 +1,3 @@
+export { StepNumber } from './StepNumber';
+export { TimeRequired } from './TimeRequired';
+export { useActiveMpTutorial } from './hooks/use-active-mp-tutorial';
diff --git a/src/components/MultiPageTutorials/utils.js b/src/components/MultiPageTutorials/utils.js
new file mode 100644
index 000000000..919059f7d
--- /dev/null
+++ b/src/components/MultiPageTutorials/utils.js
@@ -0,0 +1,8 @@
+import { reportAnalytics } from '../../utils/report-analytics';
+
+export const reportMPTAnalytics = (targetSlug, variant) => {
+  reportAnalytics('MultiPageTutorialNextClicked', {
+    targetSlug,
+    variant,
+  });
+};
diff --git a/src/context/page-context.js b/src/context/page-context.js
index 236c101a3..1d6e954eb 100644
--- a/src/context/page-context.js
+++ b/src/context/page-context.js
@@ -4,6 +4,7 @@ export const PageContext = createContext({
   page: null,
   template: null,
   slug: null,
+  options: null,
 });
 
 export const usePageContext = () => {
diff --git a/src/templates/document.js b/src/templates/document.js
index 33b2fbfa3..e52d0f806 100644
--- a/src/templates/document.js
+++ b/src/templates/document.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import Breadcrumbs from '../components/Breadcrumbs';
 import Contents from '../components/Contents';
-import InternalPageNav from '../components/InternalPageNav';
+import { InternalPageNav } from '../components/InternalPageNav';
+import { StepNumber, useActiveMpTutorial } from '../components/MultiPageTutorials';
 import MainColumn from '../components/MainColumn';
 import RightColumn from '../components/RightColumn';
 import TabSelectors from '../components/Tabs/TabSelectors';
@@ -33,12 +34,14 @@ const Document = ({ children, data: { page }, pageContext: { slug, isAssociatedP
   const pageOptions = page?.ast.options;
   const showPrevNext = !(pageOptions?.noprevnext === '' || pageOptions?.template === 'guide');
   const hasMethodSelector = pageOptions?.has_method_selector;
+  const activeTutorial = useActiveMpTutorial();
 
   return (
     <DocumentContainer>
       <StyledMainColumn>
         <div className="body">
           <Breadcrumbs siteTitle={title} slug={slug} />
+          {activeTutorial && <StepNumber slug={slug} activeTutorial={activeTutorial} />}
           {children}
           {showPrevNext && (
             <InternalPageNav slug={slug} slugTitleMapping={slugToBreadcrumbLabel} toctreeOrder={toctreeOrder} />
@@ -48,7 +51,7 @@ const Document = ({ children, data: { page }, pageContext: { slug, isAssociatedP
       <StyledRightColumn>
         {isAssociatedProduct && <AssociatedVersionSelector />}
         {!hasMethodSelector && <TabSelectors />}
-        <Contents displayOnDesktopOnly={true} />
+        <Contents />
       </StyledRightColumn>
     </DocumentContainer>
   );
diff --git a/tests/unit/InternalPageNav.test.js b/tests/unit/InternalPageNav.test.js
index 096058fc9..cd50a81e7 100644
--- a/tests/unit/InternalPageNav.test.js
+++ b/tests/unit/InternalPageNav.test.js
@@ -1,16 +1,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { mockLocation } from '../utils/mock-location';
-import InternalPageNav from '../../src/components/InternalPageNav';
-import slugTitleMapping from './data/ecosystem/slugTitleMapping.json';
+import { InternalPageNav } from '../../src/components/InternalPageNav';
+import useSnootyMetadata from '../../src/utils/use-snooty-metadata';
+import { PageContext } from '../../src/context/page-context';
+import slugToBreadcrumbLabel from './data/ecosystem/slugToBreadcrumbLabel.json';
 
-const data = ['drivers/csharp', 'drivers/go', 'drivers/java'];
+const data = ['drivers/csharp', 'drivers/go', 'drivers/java', 'drivers/motor', 'drivers/cxx'];
+
+jest.mock(`../../src/utils/use-snooty-metadata`, () => jest.fn());
 
 const renderNav = (slug) =>
-  render(<InternalPageNav slug={slug} slugTitleMapping={slugTitleMapping} toctreeOrder={data} />);
+  render(
+    <PageContext.Provider value={{ slug }}>
+      <InternalPageNav slug={slug} slugTitleMapping={slugToBreadcrumbLabel} toctreeOrder={data} />
+    </PageContext.Provider>
+  );
 
 beforeAll(() => {
   mockLocation(null, `/`);
+  useSnootyMetadata.mockImplementation(() => ({}));
 });
 
 it('renders a page with next and previous links correctly', () => {
@@ -24,6 +33,56 @@ it('renders a page with no previous link correctly', () => {
 });
 
 it('renders a page with no next link correctly', () => {
-  const tree = renderNav('drivers/java');
+  const tree = renderNav('drivers/cxx');
   expect(tree.asFragment()).toMatchSnapshot();
 });
+
+describe('multi-page tutorials', () => {
+  it('renders a page with next and previous page steps', () => {
+    const mockData = ['drivers/csharp', 'drivers/java', 'drivers/cxx'];
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: {
+        'mock-page': {
+          slugs: mockData,
+          total_steps: mockData.length,
+        },
+      },
+      slugToBreadcrumbLabel,
+    }));
+
+    const tree = renderNav('drivers/go');
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders a page with next in multi-page tutorial, and previous toctree order', () => {
+    const mockData = ['drivers/go', 'drivers/motor'];
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: {
+        'mock-page': {
+          slugs: mockData,
+          total_steps: mockData.length,
+        },
+      },
+      slugToBreadcrumbLabel,
+    }));
+
+    const tree = renderNav('drivers/go');
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders a page with previous in multi-page tutorial, and next toctree order', () => {
+    const mockData = ['drivers/go', 'drivers/motor'];
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: {
+        'mock-page': {
+          slugs: mockData,
+          total_steps: mockData.length,
+        },
+      },
+      slugToBreadcrumbLabel,
+    }));
+
+    const tree = renderNav('drivers/motor');
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/MultiPageTutorials.test.js b/tests/unit/MultiPageTutorials.test.js
new file mode 100644
index 000000000..bb7c328fa
--- /dev/null
+++ b/tests/unit/MultiPageTutorials.test.js
@@ -0,0 +1,111 @@
+import { render } from '@testing-library/react';
+import { MPTNextLinkFull } from '../../src/components/MultiPageTutorials/MPTNextLinkFull';
+import { MPTNextLinkMini } from '../../src/components/MultiPageTutorials/MPTNextLinkMini';
+import useSnootyMetadata from '../../src/utils/use-snooty-metadata';
+import { PageContext } from '../../src/context/page-context';
+import {
+  OPTION_KEY_SHOW_NEXT_TOP,
+  OPTION_KEY_TIME_REQUIRED,
+  PAGE_OPTION_NAME,
+} from '../../src/components/MultiPageTutorials/constants';
+import slugToBreadcrumbLabel from './data/ecosystem/slugToBreadcrumbLabel.json';
+
+jest.mock(`../../src/utils/use-snooty-metadata`, () => jest.fn());
+
+const VALID_PAGE_OPTIONS = {
+  [PAGE_OPTION_NAME]: {
+    [OPTION_KEY_SHOW_NEXT_TOP]: true,
+    [OPTION_KEY_TIME_REQUIRED]: 15,
+  },
+};
+
+const MOCK_SLUGS = ['drivers/csharp', 'drivers/go', 'drivers/java'];
+
+const MULTI_PAGE_TUTORIALS = {
+  'mock-page': {
+    slugs: MOCK_SLUGS,
+    total_steps: MOCK_SLUGS.length,
+  },
+};
+
+const TestWrapper = ({ slugIndex, options, children }) => (
+  <PageContext.Provider value={{ slug: MOCK_SLUGS[slugIndex], options: options }}>{children}</PageContext.Provider>
+);
+
+const renderFullComponent = ({ ...props }) =>
+  render(
+    <TestWrapper {...props}>
+      <MPTNextLinkFull />
+    </TestWrapper>
+  );
+
+const renderMiniComponent = ({ ...props }) =>
+  render(
+    <TestWrapper {...props}>
+      <MPTNextLinkMini />
+    </TestWrapper>
+  );
+
+describe('Next link button', () => {
+  beforeEach(() => {
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: MULTI_PAGE_TUTORIALS,
+      slugToBreadcrumbLabel,
+    }));
+  });
+
+  it("renders when there's a next step in the multi-page tutorial", () => {
+    const testIndex = 1;
+    const tree = renderFullComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.getByText('Next')).toBeTruthy();
+    expect(tree.getByText(slugToBreadcrumbLabel[MOCK_SLUGS[testIndex + 1]])).toBeTruthy();
+  });
+
+  it("does not render when there's no next step in the multi-page tutorial", () => {
+    const testIndex = MOCK_SLUGS.length - 1;
+    const tree = renderFullComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.queryByText('Next')).toBeFalsy();
+  });
+
+  it('does not render unless page option is present', () => {
+    const testIndex = 1;
+    const mockOptions = {
+      [PAGE_OPTION_NAME]: {
+        [OPTION_KEY_SHOW_NEXT_TOP]: false,
+        [OPTION_KEY_TIME_REQUIRED]: 15,
+      },
+    };
+    mockOptions.multi_page_tutorial_settings.show_next_top = false;
+    const tree = renderFullComponent({ slugIndex: testIndex, options: mockOptions });
+    expect(tree.queryByText('Next')).toBeFalsy();
+  });
+});
+
+describe('Next mini button', () => {
+  beforeEach(() => {
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: MULTI_PAGE_TUTORIALS,
+      slugToBreadcrumbLabel,
+    }));
+  });
+
+  it("renders when there's a next step in the multi-page tutorial", () => {
+    const testIndex = 1;
+    const tree = renderMiniComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.getByText('Next Step')).toBeTruthy();
+  });
+
+  it("does not render when there's no next step in the multi-page tutorial", () => {
+    const testIndex = MOCK_SLUGS.length - 1;
+    const tree = renderMiniComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.queryByText('Next Step')).toBeFalsy();
+  });
+
+  it('does not render unless page option is present', () => {
+    const testIndex = 1;
+    const mockOptions = { ...VALID_PAGE_OPTIONS };
+    mockOptions.multi_page_tutorial_settings.show_next_top = false;
+    const tree = renderMiniComponent({ slugIndex: testIndex, options: mockOptions });
+    expect(tree.queryByText('Next Step')).toBeFalsy();
+  });
+});
diff --git a/tests/unit/__snapshots__/InternalPageNav.test.js.snap b/tests/unit/__snapshots__/InternalPageNav.test.js.snap
index 9e686c26d..7ae915883 100644
--- a/tests/unit/__snapshots__/InternalPageNav.test.js.snap
+++ b/tests/unit/__snapshots__/InternalPageNav.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders a page with next and previous links correctly 1`] = `
+exports[`multi-page tutorials renders a page with next and previous page steps 1`] = `
 <DocumentFragment>
   .emotion-0 {
   padding-bottom: 2.5em;
@@ -119,9 +119,11 @@ exports[`renders a page with next and previous links correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  height: 36px;
+  width: 52px;
   height: 48px;
-  font-size: 18px;
-  line-height: 24px;
+  background-color: #F9FBFA;
+  color: #001E2B;
 }
 
 .emotion-3:focus-visible,
@@ -157,6 +159,18 @@ exports[`renders a page with next and previous links correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
 .emotion-4 {
   overflow: hidden;
   position: absolute;
@@ -188,8 +202,8 @@ exports[`renders a page with next and previous links correctly 1`] = `
   z-index: 0;
   -webkit-transition: all 150 ease-in-out;
   transition: all 150 ease-in-out;
-  padding: 0 15px;
-  gap: 8px;
+  padding: 0 11px;
+  gap: 6px;
 }
 
 .emotion-6 {
@@ -207,6 +221,7 @@ exports[`renders a page with next and previous links correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  color: var(--font-color-primary);
 }
 
 .emotion-7 strong,
@@ -232,6 +247,10 @@ exports[`renders a page with next and previous links correctly 1`] = `
   font-weight: 700;
 }
 
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
 .emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -255,117 +274,121 @@ exports[`renders a page with next and previous links correctly 1`] = `
 <div
     class="emotion-0"
   >
-    <a
-      class="emotion-1"
-      href="/drivers/csharp/"
-      title="Previous Section"
-    >
-      <div
-        class="emotion-2"
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/csharp/"
+        title="Previous Section"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-2"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-6"
           >
-            <svg
-              aria-label="Arrow Left Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
             >
-              <path
-                d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C#/.NET Driver
+            </p>
           </div>
-        </button>
-        <div
-          class="emotion-6"
-        >
-          <p
-            class="emotion-7"
-          >
-            Back
-          </p>
-          <p
-            class="emotion-8"
-          >
-            MongoDB C#/.NET Driver
-          </p>
         </div>
-      </div>
-    </a>
-    <a
-      class="emotion-1"
-      href="/drivers/java/"
-      title="Next Section"
-    >
-      <div
-        class="emotion-10"
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/java/"
+        title="Next Section"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-10"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-14"
           >
-            <svg
-              aria-label="Arrow Right Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
             >
-              <path
-                d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Java MongoDB Driver
+            </p>
           </div>
-        </button>
-        <div
-          class="emotion-14"
-        >
-          <p
-            class="emotion-7"
-          >
-            Next
-          </p>
-          <p
-            class="emotion-8"
-          >
-            Java MongoDB Driver
-          </p>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`renders a page with no next link correctly 1`] = `
+exports[`multi-page tutorials renders a page with next in multi-page tutorial, and previous toctree order 1`] = `
 <DocumentFragment>
   .emotion-0 {
   padding-bottom: 2.5em;
@@ -484,9 +507,11 @@ exports[`renders a page with no next link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  height: 36px;
+  width: 52px;
   height: 48px;
-  font-size: 18px;
-  line-height: 24px;
+  background-color: #F9FBFA;
+  color: #001E2B;
 }
 
 .emotion-3:focus-visible,
@@ -522,6 +547,18 @@ exports[`renders a page with no next link correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
 .emotion-4 {
   overflow: hidden;
   position: absolute;
@@ -553,8 +590,8 @@ exports[`renders a page with no next link correctly 1`] = `
   z-index: 0;
   -webkit-transition: all 150 ease-in-out;
   transition: all 150 ease-in-out;
-  padding: 0 15px;
-  gap: 8px;
+  padding: 0 11px;
+  gap: 6px;
 }
 
 .emotion-6 {
@@ -572,6 +609,7 @@ exports[`renders a page with no next link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  color: var(--font-color-primary);
 }
 
 .emotion-7 strong,
@@ -597,67 +635,148 @@ exports[`renders a page with no next link correctly 1`] = `
   font-weight: 700;
 }
 
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-14 {
+  text-align: end;
+}
+
 <div
     class="emotion-0"
   >
-    <a
-      class="emotion-1"
-      href="/drivers/go/"
-      title="Previous Section"
-    >
-      <div
-        class="emotion-2"
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/csharp/"
+        title="Previous Section"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-2"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-6"
           >
-            <svg
-              aria-label="Arrow Left Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
             >
-              <path
-                d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C#/.NET Driver
+            </p>
           </div>
-        </button>
+        </div>
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/motor/"
+        title="Next Step"
+      >
         <div
-          class="emotion-6"
+          class="emotion-10"
         >
-          <p
-            class="emotion-7"
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
           >
-            Back
-          </p>
-          <p
-            class="emotion-8"
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-14"
           >
-            MongoDB Go Driver
-          </p>
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              Motor (Async Driver)
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`renders a page with no previous link correctly 1`] = `
+exports[`multi-page tutorials renders a page with previous in multi-page tutorial, and next toctree order 1`] = `
 <DocumentFragment>
   .emotion-0 {
   padding-bottom: 2.5em;
@@ -739,9 +858,9 @@ exports[`renders a page with no previous link correctly 1`] = `
   display: flex;
   -webkit-column-gap: 14px;
   column-gap: 14px;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .emotion-3 {
@@ -776,9 +895,11 @@ exports[`renders a page with no previous link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  height: 36px;
+  width: 52px;
   height: 48px;
-  font-size: 18px;
-  line-height: 24px;
+  background-color: #F9FBFA;
+  color: #001E2B;
 }
 
 .emotion-3:focus-visible,
@@ -814,6 +935,18 @@ exports[`renders a page with no previous link correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
 .emotion-4 {
   overflow: hidden;
   position: absolute;
@@ -845,12 +978,12 @@ exports[`renders a page with no previous link correctly 1`] = `
   z-index: 0;
   -webkit-transition: all 150 ease-in-out;
   transition: all 150 ease-in-out;
-  padding: 0 15px;
-  gap: 8px;
+  padding: 0 11px;
+  gap: 6px;
 }
 
 .emotion-6 {
-  text-align: end;
+  text-align: start;
 }
 
 .emotion-7 {
@@ -864,6 +997,7 @@ exports[`renders a page with no previous link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  color: var(--font-color-primary);
 }
 
 .emotion-7 strong,
@@ -889,62 +1023,1157 @@ exports[`renders a page with no previous link correctly 1`] = `
   font-weight: 700;
 }
 
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-14 {
+  text-align: end;
+}
+
 <div
     class="emotion-0"
   >
-    <a
-      class="emotion-1"
-      href="/drivers/go/"
-      title="Next Section"
-    >
-      <div
-        class="emotion-2"
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/go/"
+        title="Previous Step"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-2"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-6"
           >
-            <svg
-              aria-label="Arrow Right Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
             >
-              <path
-                d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB Go Driver
+            </p>
           </div>
-        </button>
+        </div>
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/cxx/"
+        title="Next Section"
+      >
         <div
-          class="emotion-6"
+          class="emotion-10"
         >
-          <p
-            class="emotion-7"
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
           >
-            Next
-          </p>
-          <p
-            class="emotion-8"
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-14"
           >
-            MongoDB Go Driver
-          </p>
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C++ Driver
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders a page with next and previous links correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-column-gap: 16px;
+  column-gap: 16px;
+  margin-top: 88px;
+}
+
+@media only screen and (max-width: 480px) {
+  .emotion-0 {
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+}
+
+@media print {
+  .emotion-0 {
+    display: none;
+  }
+}
+
+.emotion-1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-decoration-color: transparent;
+  line-height: 13px;
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1>code {
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1:focus,
+.emotion-1:hover {
+  text-decoration-line: underline;
+  -webkit-transition: text-decoration 150ms ease-in-out;
+  transition: text-decoration 150ms ease-in-out;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+
+.emotion-1:focus {
+  text-decoration-color: #016BF8;
+  outline: none;
+}
+
+.emotion-1:hover {
+  text-decoration-color: #E8EDEB;
+}
+
+.emotion-2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-transition: all 150ms ease-in-out;
+  transition: all 150ms ease-in-out;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 6px;
+  background-color: #F9FBFA;
+  border-color: #889397;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  height: 36px;
+  width: 52px;
+  height: 48px;
+  background-color: #F9FBFA;
+  color: #001E2B;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  outline: none;
+}
+
+.emotion-3:active,
+.emotion-3[data-active="true"],
+.emotion-3:focus,
+.emotion-3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  color: #001E2B;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover="true"],
+.emotion-3:active,
+.emotion-3[data-active="true"] {
+  color: #001E2B;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 3px #E8EDEB;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
+}
+
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
+.emotion-4 {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+}
+
+.emotion-5 {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  -webkit-transition: all 150 ease-in-out;
+  transition: all 150 ease-in-out;
+  padding: 0 11px;
+  gap: 6px;
+}
+
+.emotion-6 {
+  text-align: start;
+}
+
+.emotion-7 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--font-color-primary);
+}
+
+.emotion-7 strong,
+.emotion-7 b {
+  font-weight: 700;
+}
+
+.emotion-8 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  color: #889397;
+}
+
+.emotion-8 strong,
+.emotion-8 b {
+  font-weight: 700;
+}
+
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-14 {
+  text-align: end;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/csharp/"
+        title="Previous Section"
+      >
+        <div
+          class="emotion-2"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-6"
+          >
+            <p
+              class="emotion-7"
+            >
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C#/.NET Driver
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/java/"
+        title="Next Section"
+      >
+        <div
+          class="emotion-10"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-14"
+          >
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              Java MongoDB Driver
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders a page with no next link correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-column-gap: 16px;
+  column-gap: 16px;
+  margin-top: 88px;
+}
+
+@media only screen and (max-width: 480px) {
+  .emotion-0 {
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+}
+
+@media print {
+  .emotion-0 {
+    display: none;
+  }
+}
+
+.emotion-1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-decoration-color: transparent;
+  line-height: 13px;
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1>code {
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1:focus,
+.emotion-1:hover {
+  text-decoration-line: underline;
+  -webkit-transition: text-decoration 150ms ease-in-out;
+  transition: text-decoration 150ms ease-in-out;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+
+.emotion-1:focus {
+  text-decoration-color: #016BF8;
+  outline: none;
+}
+
+.emotion-1:hover {
+  text-decoration-color: #E8EDEB;
+}
+
+.emotion-2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-transition: all 150ms ease-in-out;
+  transition: all 150ms ease-in-out;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 6px;
+  background-color: #F9FBFA;
+  border-color: #889397;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  height: 36px;
+  width: 52px;
+  height: 48px;
+  background-color: #F9FBFA;
+  color: #001E2B;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  outline: none;
+}
+
+.emotion-3:active,
+.emotion-3[data-active="true"],
+.emotion-3:focus,
+.emotion-3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  color: #001E2B;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover="true"],
+.emotion-3:active,
+.emotion-3[data-active="true"] {
+  color: #001E2B;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 3px #E8EDEB;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
+}
+
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
+.emotion-4 {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+}
+
+.emotion-5 {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  -webkit-transition: all 150 ease-in-out;
+  transition: all 150 ease-in-out;
+  padding: 0 11px;
+  gap: 6px;
+}
+
+.emotion-6 {
+  text-align: start;
+}
+
+.emotion-7 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--font-color-primary);
+}
+
+.emotion-7 strong,
+.emotion-7 b {
+  font-weight: 700;
+}
+
+.emotion-8 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  color: #889397;
+}
+
+.emotion-8 strong,
+.emotion-8 b {
+  font-weight: 700;
+}
+
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/motor/"
+        title="Previous Section"
+      >
+        <div
+          class="emotion-2"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-6"
+          >
+            <p
+              class="emotion-7"
+            >
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              Motor (Async Driver)
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders a page with no previous link correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-column-gap: 16px;
+  column-gap: 16px;
+  margin-top: 88px;
+}
+
+@media only screen and (max-width: 480px) {
+  .emotion-0 {
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+}
+
+@media print {
+  .emotion-0 {
+    display: none;
+  }
+}
+
+.emotion-1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-decoration-color: transparent;
+  line-height: 13px;
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1>code {
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1:focus,
+.emotion-1:hover {
+  text-decoration-line: underline;
+  -webkit-transition: text-decoration 150ms ease-in-out;
+  transition: text-decoration 150ms ease-in-out;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+
+.emotion-1:focus {
+  text-decoration-color: #016BF8;
+  outline: none;
+}
+
+.emotion-1:hover {
+  text-decoration-color: #E8EDEB;
+}
+
+.emotion-2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-transition: all 150ms ease-in-out;
+  transition: all 150ms ease-in-out;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 6px;
+  background-color: #F9FBFA;
+  border-color: #889397;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  height: 36px;
+  width: 52px;
+  height: 48px;
+  background-color: #F9FBFA;
+  color: #001E2B;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  outline: none;
+}
+
+.emotion-3:active,
+.emotion-3[data-active="true"],
+.emotion-3:focus,
+.emotion-3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  color: #001E2B;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover="true"],
+.emotion-3:active,
+.emotion-3[data-active="true"] {
+  color: #001E2B;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 3px #E8EDEB;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
+}
+
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
+.emotion-4 {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+}
+
+.emotion-5 {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  -webkit-transition: all 150 ease-in-out;
+  transition: all 150 ease-in-out;
+  padding: 0 11px;
+  gap: 6px;
+}
+
+.emotion-6 {
+  text-align: end;
+}
+
+.emotion-7 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--font-color-primary);
+}
+
+.emotion-7 strong,
+.emotion-7 b {
+  font-weight: 700;
+}
+
+.emotion-8 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  color: #889397;
+}
+
+.emotion-8 strong,
+.emotion-8 b {
+  font-weight: 700;
+}
+
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/go/"
+        title="Next Section"
+      >
+        <div
+          class="emotion-2"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-6"
+          >
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB Go Driver
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/tests/unit/data/ecosystem/slugTitleMapping.json b/tests/unit/data/ecosystem/slugTitleMapping.json
deleted file mode 100644
index 9dd02173b..000000000
--- a/tests/unit/data/ecosystem/slugTitleMapping.json
+++ /dev/null
@@ -1,585 +0,0 @@
-{
-  "contents": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Ecosystem Documentation Contents"
-    }
-  ],
-  "platforms": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Platforms"
-    }
-  ],
-  "tools": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Integration and Tools"
-    }
-  ],
-  "index": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "MongoDB Drivers and Ecosystem"
-    }
-  ],
-  "drivers": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Drivers and ODM"
-    }
-  ],
-  "connectors/kafka": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Kafka Connector"
-    }
-  ],
-  "use-cases": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Use Cases"
-    }
-  ],
-  "connectors/kafka-connect-migration": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Migrate from Kafka Connect"
-    }
-  ],
-  "connectors/kafka-sink-cdc": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Change Data Capture"
-    }
-  ],
-  "connectors/kafka-sink": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Guide"
-    }
-  ],
-  "platforms/windows-azure": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Microsoft Azure"
-    }
-  ],
-  "platforms/windows": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Windows Quick Links and Reference Center"
-    }
-  ],
-  "connectors/kafka-installation": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Install MongoDB Kafka Connector"
-    }
-  ],
-  "platforms/red-hat-enterprise-linux": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Red Hat Enterprise Linux"
-    }
-  ],
-  "connectors/kafka-sink-data-formats": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Data Formats"
-    }
-  ],
-  "connectors/kafka-docker-example": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "MongoDB Kafka Connector Docker Example"
-    }
-  ],
-  "tutorial/authenticate-with-csharp-driver": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Authenticate to MongoDB with the C# Driver"
-    }
-  ],
-  "platforms/amazon-ec2": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Amazon EC2"
-    }
-  ],
-  "connectors/kafka-source": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Source Connector Guide"
-    }
-  ],
-  "tutorial/getting-started-with-hadoop": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Getting Started with Hadoop"
-    }
-  ],
-  "tutorial/manage-red-hat-enterprise-linux-identity-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Operational Procedures using Red Hat Enterprise Linux Identity Management"
-    }
-  ],
-  "tutorial/configure-red-hat-enterprise-linux-identity-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Configure Red Hat Enterprise Linux Identity Management with MongoDB"
-    }
-  ],
-  "connectors/kafka-sink-properties": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Configuration Properties"
-    }
-  ],
-  "tools/hadoop": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Connector for Hadoop"
-    }
-  ],
-  "tools/http-interfaces": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "HTTP Interface"
-    }
-  ],
-  "tutorial/backup-and-restore-mongodb-on-amazon-ec2": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "EC2 Backup and Restore"
-    }
-  ],
-  "drivers/cxx": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB C++ Driver"
-    }
-  ],
-  "drivers/java": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Java MongoDB Driver"
-    }
-  ],
-  "drivers/motor": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Motor (Async Driver)"
-    }
-  ],
-  "tools/munin": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Munin Configuration Examples"
-    }
-  ],
-  "drivers/python": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Python Drivers"
-    }
-  ],
-  "drivers/c": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB C Driver"
-    }
-  ],
-  "drivers/scala": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Scala Driver"
-    }
-  ],
-  "drivers/perl": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Perl Driver"
-    }
-  ],
-  "drivers/community-supported-drivers": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Community Supported Drivers Reference"
-    }
-  ],
-  "drivers/pymongo": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "PyMongo"
-    }
-  ],
-  "drivers/php": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB PHP Driver"
-    }
-  ],
-  "drivers/go": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Go Driver"
-    }
-  ],
-  "drivers/node": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "MongoDB Node.js Driver"
-    }
-  ],
-  "drivers/specs": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Drivers Specs"
-    }
-  ],
-  "drivers/php-libraries": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "PHP Libraries, Frameworks, and Tools"
-    }
-  ],
-  "drivers/csharp": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB C#/.NET Driver"
-    }
-  ],
-  "connectors/kafka-sink-postprocessors": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Post-Processors"
-    }
-  ],
-  "use-cases/hadoop": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Hadoop and MongoDB Use Cases"
-    }
-  ],
-  "drivers/driver-compatibility-reference": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Driver Compatibility"
-    }
-  ],
-  "use-cases/category-hierarchy": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Category Hierarchy"
-    }
-  ],
-  "use-cases/metadata-and-asset-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Metadata and Asset Management"
-    }
-  ],
-  "use-cases/hierarchical-aggregation": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Hierarchical Aggregation"
-    }
-  ],
-  "use-cases/inventory-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Inventory Management"
-    }
-  ],
-  "use-cases/storing-comments": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Storing Comments"
-    }
-  ],
-  "use-cases/product-catalog": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Product Catalog"
-    }
-  ],
-  "use-cases/storing-log-data": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Storing Log Data"
-    }
-  ],
-  "use-cases/client-side-field-level-encryption-guide": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Client Side Field Level Encryption Guide"
-    }
-  ]
-}
diff --git a/tests/unit/data/ecosystem/slugToBreadcrumbLabel.json b/tests/unit/data/ecosystem/slugToBreadcrumbLabel.json
new file mode 100644
index 000000000..818d97646
--- /dev/null
+++ b/tests/unit/data/ecosystem/slugToBreadcrumbLabel.json
@@ -0,0 +1,55 @@
+{
+  "contents": "MongoDB Ecosystem Documentation Contents",
+  "platforms": "Platforms",
+  "tools": "MongoDB Integration and Tools",
+  "index": "MongoDB Drivers and Ecosystem",
+  "drivers": "MongoDB Drivers and ODM",
+  "connectors/kafka": "MongoDB Kafka Connector",
+  "use-cases": "Use Cases",
+  "connectors/kafka-connect-migration": "Migrate from Kafka Connect",
+  "connectors/kafka-sink-cdc": "Kafka Sink Change Data Capture",
+  "connectors/kafka-sink": "Kafka Sink Connector Guide",
+  "platforms/windows-azure": "Microsoft Azure",
+  "platforms/windows": "Windows Quick Links and Reference Center",
+  "connectors/kafka-installation": "Install MongoDB Kafka Connector",
+  "platforms/red-hat-enterprise-linux": "Red Hat Enterprise Linux",
+  "connectors/kafka-sink-data-formats": "Kafka Sink Connector Data Formats",
+  "connectors/kafka-docker-example": "MongoDB Kafka Connector Docker Example",
+  "tutorial/authenticate-with-csharp-driver": "Authenticate to MongoDB with the C# Driver",
+  "platforms/amazon-ec2": "Amazon EC2",
+  "connectors/kafka-source": "Kafka Source Connector Guide",
+  "tutorial/getting-started-with-hadoop": "Getting Started with Hadoop",
+  "tutorial/manage-red-hat-enterprise-linux-identity-management": "Operational Procedures using Red Hat Enterprise Linux Identity Management",
+  "tutorial/configure-red-hat-enterprise-linux-identity-management": "Configure Red Hat Enterprise Linux Identity Management with MongoDB",
+  "connectors/kafka-sink-properties": "Kafka Sink Connector Configuration Properties",
+  "tools/hadoop": "MongoDB Connector for Hadoop",
+  "tools/http-interfaces": "HTTP Interface",
+  "tutorial/backup-and-restore-mongodb-on-amazon-ec2": "EC2 Backup and Restore",
+  "drivers/cxx": "MongoDB C++ Driver",
+  "drivers/java": "Java MongoDB Driver",
+  "drivers/motor": "Motor (Async Driver)",
+  "tools/munin": "Munin Configuration Examples",
+  "drivers/python": "MongoDB Python Drivers",
+  "drivers/c": "MongoDB C Driver",
+  "drivers/scala": "MongoDB Scala Driver",
+  "drivers/perl": "MongoDB Perl Driver",
+  "drivers/community-supported-drivers": "Community Supported Drivers Reference",
+  "drivers/pymongo": "PyMongo",
+  "drivers/php": "MongoDB PHP Driver",
+  "drivers/go": "MongoDB Go Driver",
+  "drivers/node": "MongoDB Node.js Driver",
+  "drivers/specs": "MongoDB Drivers Specs",
+  "drivers/php-libraries": "PHP Libraries, Frameworks, and Tools",
+  "drivers/csharp": "MongoDB C#/.NET Driver",
+  "connectors/kafka-sink-postprocessors": "Kafka Sink Connector Post-Processors",
+  "use-cases/hadoop": "Hadoop and MongoDB Use Cases",
+  "drivers/driver-compatibility-reference": "Driver Compatibility",
+  "use-cases/category-hierarchy": "Category Hierarchy",
+  "use-cases/metadata-and-asset-management": "Metadata and Asset Management",
+  "use-cases/hierarchical-aggregation": "Hierarchical Aggregation",
+  "use-cases/inventory-management": "Inventory Management",
+  "use-cases/storing-comments": "Storing Comments",
+  "use-cases/product-catalog": "Product Catalog",
+  "use-cases/storing-log-data": "Storing Log Data",
+  "use-cases/client-side-field-level-encryption-guide": "Client Side Field Level Encryption Guide"
+}