diff --git a/src/components/OpenAPI/index.js b/src/components/OpenAPI/index.js
index fb7f2cf1a..02c40f514 100644
--- a/src/components/OpenAPI/index.js
+++ b/src/components/OpenAPI/index.js
@@ -6,7 +6,6 @@ import { Global, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
 import ComponentFactory from '../ComponentFactory';
-import { SidenavBackButton } from '../Sidenav';
 import Spinner from '../Spinner';
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
@@ -91,13 +90,6 @@ const getGlobalCss = ({ topLarge, topMedium }) => css`
   }
 `;
 
-const Border = styled('hr')`
-  border: unset;
-  border-bottom: 1px solid ${palette.gray.light2};
-  margin: ${theme.size.default} 0;
-  width: 100%;
-`;
-
 const LoadingContainer = styled('div')`
   align-items: center;
   display: flex;
@@ -132,12 +124,9 @@ const LoadingWidget = ({ className }) => (
 );
 
 const MenuTitleContainer = ({ siteTitle, pageTitle }) => {
-  const docsTitle = siteTitle ? `${siteTitle} Docs` : 'Docs';
   return (
     <>
-      {/* Disable LG left arrow glyph due to bug where additional copies of the LG icon would be rendered 
-          at the bottom of the page. */}
-      <SidenavBackButton border={<Border />} enableGlyph={false} target="/" titleOverride={docsTitle} />
+      {/* TODO: Add DocsHomeButton here - see comment below */}
       <MenuTitle>{pageTitle}</MenuTitle>
     </>
   );
@@ -213,6 +202,8 @@ const OpenAPI = ({ metadata, nodeData: { argument, children, options = {} }, pag
                 sidebarEl.insertBefore(menuTitleContainerEl, searchEl);
                 const pageTitle = page?.options?.title || '';
                 const siteTitle = metadata?.title;
+                /* TODO: The below function is deprecated with React 18, need to replace it (potentially with 
+                  createRoot() and .render() (see React documentation) */
                 render(<MenuTitleContainer siteTitle={siteTitle} pageTitle={pageTitle} />, menuTitleContainerEl);
               }
             }
diff --git a/src/components/Sidenav/DocsHomeButton.js b/src/components/Sidenav/DocsHomeButton.js
new file mode 100644
index 000000000..d29dddcf0
--- /dev/null
+++ b/src/components/Sidenav/DocsHomeButton.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { SideNavItem } from '@leafygreen-ui/side-nav';
+import Icon from '@leafygreen-ui/icon';
+import { css as LeafyCSS, cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+import Link from '../Link';
+import { baseUrl } from '../../utils/base-url';
+import { sideNavItemBasePadding } from './styles/sideNavItem';
+import { titleStyle } from './styles/sideNavItem';
+
+const homeLinkStyle = LeafyCSS`
+  span {
+    color: ${palette.gray.dark1};
+    font-weight: 400;
+    display: flex;
+    gap: 6px;
+    svg {
+      height: 17px;
+      color: ${palette.gray.dark2};
+    }
+  }
+`;
+
+const DocsHomeButton = () => {
+  return (
+    <SideNavItem className={cx(titleStyle, sideNavItemBasePadding, homeLinkStyle)} as={Link} to={baseUrl()}>
+      <Icon glyph="Home"></Icon>
+      Docs Home
+    </SideNavItem>
+  );
+};
+
+export default DocsHomeButton;
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
index 96f162866..debb52c7c 100644
--- a/src/components/Sidenav/Sidenav.js
+++ b/src/components/Sidenav/Sidenav.js
@@ -13,7 +13,6 @@ import VersionDropdown from '../VersionDropdown';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
 import { theme } from '../../theme/docsTheme';
 import { formatText } from '../../utils/format-text';
-import { baseUrl } from '../../utils/base-url';
 import { TocContext } from '../../context/toc-context';
 import { VersionContext } from '../../context/version-context';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
@@ -23,11 +22,11 @@ import GuidesTOCTree from './GuidesTOCTree';
 import IA from './IA';
 import IATransition from './IATransition';
 import ProductsList from './ProductsList';
-import SidenavBackButton from './SidenavBackButton';
 import { SidenavContext } from './sidenav-context';
 import SidenavMobileTransition from './SidenavMobileTransition';
 import Toctree from './Toctree';
-import { sideNavItemBasePadding, sideNavItemFontSize } from './styles/sideNavItem';
+import { sideNavItemBasePadding, sideNavItemFontSize, titleStyle } from './styles/sideNavItem';
+import DocsHomeButton from './DocsHomeButton';
 
 const SIDENAV_WIDTH = 268;
 
@@ -77,21 +76,6 @@ const sideNavStyling = ({ hideMobile, isCollapsed }) => LeafyCSS`
 
 `;
 
-const titleStyle = LeafyCSS`
-  color: ${palette.gray.dark3};
-  font-size: ${theme.fontSize.small};
-  font-weight: bold;
-  line-height: 20px;
-  text-transform: none;
-  :hover {
-    background-color: inherit;
-
-    &:after, span:after {
-      display: none;
-    }
-  }
-`;
-
 // Prevent content scrolling when the side nav is open on mobile and tablet screen sizes
 const disableScroll = (shouldDisableScroll) => css`
   body {
@@ -260,21 +244,8 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
             <IATransition back={back} hasIA={!!ia} slug={slug} isMobile={isMobile}>
               <NavTopContainer>
                 <ArtificialPadding />
-                <SideNavItem className={cx(titleStyle, sideNavItemBasePadding)} as={Link} to={baseUrl()}>
-                  MongoDB Documentation
-                </SideNavItem>
+                <DocsHomeButton />
                 <Border />
-                <SidenavBackButton
-                  handleClick={() => {
-                    setBack(true);
-                    hideMobileSidenav();
-                  }}
-                  project={project}
-                  currentSlug={slug}
-                  target={isGuidesTemplate ? '/' : ''}
-                  titleOverride={isGuidesTemplate ? siteTitle : ''}
-                  eol={eol}
-                />
                 {ia && (
                   <IA
                     header={!isLanding && <span className={cx([titleStyle])}>{formatText(pageTitle)}</span>}
diff --git a/src/components/Sidenav/SidenavBackButton.js b/src/components/Sidenav/SidenavBackButton.js
deleted file mode 100644
index 6d2d0469d..000000000
--- a/src/components/Sidenav/SidenavBackButton.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css, cx } from '@leafygreen-ui/emotion';
-import Icon from '@leafygreen-ui/icon';
-import { palette } from '@leafygreen-ui/palette';
-import { SideNavItem } from '@leafygreen-ui/side-nav';
-import Link from '../Link';
-import { useNavigationParents } from '../../hooks/use-navigation-parents';
-import { baseUrl } from '../../utils/base-url';
-import { theme } from '../../theme/docsTheme';
-import { formatText } from '../../utils/format-text';
-import { sideNavItemBasePadding } from './styles/sideNavItem';
-
-const backButtonStyling = css`
-  font-size: ${theme.fontSize.small};
-  margin-bottom: 16px;
-  font-weight: 400;
-  line-height: 20px;
-  > span {
-    color: ${palette.gray.dark1};
-  }
-`;
-
-const htmlBackIcon = css`
-  margin-right: ${theme.size.small};
-`;
-
-const SidenavBackButton = ({
-  border,
-  currentSlug,
-  enableGlyph = true,
-  handleClick,
-  project,
-  target,
-  titleOverride,
-  eol,
-  ...props
-}) => {
-  const parents = useNavigationParents(project);
-  const glyph = enableGlyph ? <Icon glyph="ArrowLeft" size="small" /> : null;
-  let title = titleOverride;
-  let url = target;
-
-  // Fetch page to navigate to using parent category page(s)
-  if (!titleOverride) {
-    if (project === 'landing') {
-      const landingExceptions = ['/', 'search'];
-
-      if (landingExceptions.includes(currentSlug)) {
-        // At homepage; nothing to link back to
-        return null;
-      }
-
-      title = 'home';
-      url = '/';
-    } else if (parents.length) {
-      [{ title, url }] = parents.slice(-1);
-    } else {
-      title = 'docs home';
-      url = baseUrl();
-    }
-  }
-
-  if (!title || !title.length || !url) {
-    return null;
-  }
-
-  let textShown = 'Back to ';
-  if (eol) {
-    url = 'https://docs.mongodb.com/legacy/';
-    textShown = 'Return to Documentation';
-  }
-
-  return (
-    <>
-      <SideNavItem
-        as={Link}
-        className={cx([sideNavItemBasePadding, backButtonStyling])}
-        to={url}
-        glyph={glyph}
-        onClick={handleClick}
-        {...props}
-      >
-        {/*
-         * Uses HTML/text-based arrow instead of LG icon as a workaround for a bug where the
-         * icon can be rendered twice (see: OpenAPI component)
-         */}
-        {!enableGlyph && <span className={cx(htmlBackIcon)}>&#8592;</span>}
-        {textShown} {!eol && formatText(title)}
-      </SideNavItem>
-      {border}
-    </>
-  );
-};
-
-SidenavBackButton.propTypes = {
-  border: PropTypes.element,
-  currentSlug: PropTypes.string,
-  handleClick: PropTypes.func,
-  project: PropTypes.string,
-  target: PropTypes.string,
-  titleOverride: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]),
-  eol: PropTypes.bool,
-};
-
-export default SidenavBackButton;
diff --git a/src/components/Sidenav/index.js b/src/components/Sidenav/index.js
index 04a143bab..623a87fbf 100644
--- a/src/components/Sidenav/index.js
+++ b/src/components/Sidenav/index.js
@@ -1,14 +1,6 @@
 import Sidenav from './Sidenav';
-import SidenavBackButton from './SidenavBackButton';
 import SidenavMobileMenuButton from './SidenavMobileMenuButton';
 import SidenavMobileMenuDropdown from './SidenavMobileMenuDropdown';
 import { SidenavContext, SidenavContextProvider } from './sidenav-context';
 
-export {
-  Sidenav,
-  SidenavBackButton,
-  SidenavContext,
-  SidenavContextProvider,
-  SidenavMobileMenuButton,
-  SidenavMobileMenuDropdown,
-};
+export { Sidenav, SidenavContext, SidenavContextProvider, SidenavMobileMenuButton, SidenavMobileMenuDropdown };
diff --git a/src/components/Sidenav/styles/sideNavItem.js b/src/components/Sidenav/styles/sideNavItem.js
index 9b812572b..4681b14e2 100644
--- a/src/components/Sidenav/styles/sideNavItem.js
+++ b/src/components/Sidenav/styles/sideNavItem.js
@@ -1,4 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
 import { theme } from '../../../theme/docsTheme';
 
 export const sideNavItemBasePadding = css`
@@ -31,3 +32,19 @@ export const sideNavItemTOCStyling = ({ level = 1 }) => css`
 export const sideNavItemFontSize = css`
   font-size: ${theme.fontSize.small};
 `;
+
+export const titleStyle = css`
+  color: ${palette.gray.dark3};
+  font-size: ${theme.fontSize.small};
+  font-weight: bold;
+  line-height: 20px;
+  text-transform: none;
+  :hover {
+    background-color: inherit;
+
+    &:after,
+    span:after {
+      display: none;
+    }
+  }
+`;