diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
index 2f94db813..ff3cdf770 100644
--- a/beta/src/components/Layout/Page.tsx
+++ b/beta/src/components/Layout/Page.tsx
@@ -26,7 +26,7 @@ interface PageProps {
   toc: Array<TocItem>;
   routeTree: RouteItem;
   meta: {title?: string; description?: string};
-  section: 'learn' | 'reference' | 'community' | 'blog' | 'home';
+  section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }
 
 export function Page({children, toc, routeTree, meta, section}: PageProps) {
@@ -66,6 +66,19 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     );
   }
 
+  let hasColumns = true;
+  if (section === 'home') {
+    hasColumns = false;
+  }
+  let showSidebar = true;
+  let showToc = true;
+  if (section === 'home' || section === 'blog') {
+    showSidebar = false;
+  }
+  if (cleanedPath === '/blog') {
+    showToc = false;
+  }
+
   return (
     <>
       <Seo title={title} isHomePage={isHomePage} />
@@ -77,13 +90,19 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
       />
       <div
         className={
-          isHomePage
-            ? ''
-            : 'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
+          hasColumns
+            ? 'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
+            : ''
         }>
-        <div className={'lg:-mt-20 ' + (isHomePage ? 'hidden' : '')}>
+        <div className="lg:-mt-20">
           <div className="lg:pt-20 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
-            <SidebarNav routeTree={routeTree} breadcrumbs={breadcrumbs} />
+            {showSidebar && (
+              <SidebarNav
+                key={section}
+                routeTree={routeTree}
+                breadcrumbs={breadcrumbs}
+              />
+            )}
           </div>
         </div>
         {/* No fallback UI so need to be careful not to suspend directly inside. */}
@@ -96,7 +115,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
           </main>
         </Suspense>
         <div className="-mt-20 hidden lg:max-w-xs 2xl:block">
-          {toc.length > 0 && <Toc headings={toc} key={asPath} />}
+          {showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
         </div>
       </div>
     </>
diff --git a/beta/src/components/Layout/TopNav/TopNav.tsx b/beta/src/components/Layout/TopNav/TopNav.tsx
index 1064796fb..bcf647c39 100644
--- a/beta/src/components/Layout/TopNav/TopNav.tsx
+++ b/beta/src/components/Layout/TopNav/TopNav.tsx
@@ -125,17 +125,17 @@ function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
   );
 }
 
-function NavItem({url, section, title}: any) {
+function NavItem({url, isActive, children}: any) {
   return (
     <div className="block">
       <Link
-        href={`${url}`}
+        href={url}
         className={cn(
           'outline-link p-2 rounded-lg capitalize',
-          section != title && 'hover:bg-card hover:dark:bg-card-dark',
-          section === title && 'bg-highlight dark:bg-highlight-dark text-link'
+          !isActive && 'hover:bg-card hover:dark:bg-card-dark',
+          isActive && 'bg-highlight dark:bg-highlight-dark text-link'
         )}>
-        {title}
+        {children}
       </Link>
     </div>
   );
@@ -148,7 +148,7 @@ export default function TopNav({
 }: {
   routeTree: RouteItem;
   breadcrumbs: RouteItem[];
-  section: 'learn' | 'reference' | 'community' | 'blog' | 'home';
+  section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [showFeedback, setShowFeedback] = useState(false);
@@ -264,26 +264,34 @@ export default function TopNav({
               )}>
               {isOpen ? <IconClose /> : <IconHamburger />}
             </button>
-            <NextLink href="/">
-              <a className="3xl:flex-1 mr-0 sm:mr-2.5 3xl:mr-0 inline-flex text-lg font-normal items-center text-primary dark:text-primary-dark py-1 whitespace-nowrap outline-link p-2.5 rounded-lg">
-                <Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
-                React
-              </a>
-            </NextLink>
+            <div className="3xl:flex-1 mr-0 sm:mr-2.5 3xl:mr-0">
+              <NextLink href="/">
+                <a className="inline-flex text-lg font-normal items-center text-primary dark:text-primary-dark py-1 whitespace-nowrap outline-link p-2.5 rounded-lg">
+                  <Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
+                  React
+                </a>
+              </NextLink>
+            </div>
           </div>
           <div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
             <Search />
           </div>
           <div className="text-base justify-center items-center flex 3xl:flex-1 flex-row 3xl:justify-end">
             <div className="ml-2.5 mr-5 hidden lg:flex gap-5">
-              <NavItem section={section} url="/learn" title="learn" />
+              <NavItem isActive={section === 'learn'} url="/learn">
+                Learn
+              </NavItem>
               <NavItem
-                section={section}
-                url="/reference/react"
-                title="reference"
-              />
-              <NavItem section={section} url="/community" title="community" />
-              <NavItem section={section} url="/blog" title="blog" />
+                isActive={section === 'reference'}
+                url="/reference/react">
+                Reference
+              </NavItem>
+              <NavItem isActive={section === 'community'} url="/community">
+                Community
+              </NavItem>
+              <NavItem isActive={section === 'blog'} url="/blog">
+                Blog
+              </NavItem>
             </div>
             <div className="flex w-full md:hidden"></div>
             <div className="flex items-center -space-x-2.5 xs:space-x-0 ">
diff --git a/beta/src/pages/[[...markdownPath]].js b/beta/src/pages/[[...markdownPath]].js
index 2af78a68d..d1df93d3c 100644
--- a/beta/src/pages/[[...markdownPath]].js
+++ b/beta/src/pages/[[...markdownPath]].js
@@ -22,6 +22,7 @@ export default function Layout({content, toc, meta}) {
   let routeTree;
   switch (section) {
     case 'home':
+    case 'unknown':
       routeTree = sidebarHome;
       break;
     case 'learn':
@@ -46,7 +47,10 @@ export default function Layout({content, toc, meta}) {
 
 function useActiveSection() {
   const {asPath} = useRouter();
-  if (asPath.startsWith('/reference')) {
+  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  if (cleanedPath === '/') {
+    return 'home';
+  } else if (cleanedPath.startsWith('/reference')) {
     return 'reference';
   } else if (asPath.startsWith('/learn')) {
     return 'learn';
@@ -55,7 +59,7 @@ function useActiveSection() {
   } else if (asPath.startsWith('/blog')) {
     return 'blog';
   } else {
-    return 'home';
+    return 'unknown';
   }
 }