diff --git a/sites/dev/pages/[...slug].mjs b/sites/dev/pages/[...slug].mjs
index f66b2986e03..22c18738665 100644
--- a/sites/dev/pages/[...slug].mjs
+++ b/sites/dev/pages/[...slug].mjs
@@ -4,6 +4,7 @@ import { mdxPaths } from 'site/prebuild/mdx-paths.en.mjs'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Hooks
 import { useState, useEffect } from 'react'
+import { useNavigation } from 'site/hooks/use-navigation.mjs'
 // Components
 import Head from 'next/head'
 import { PageWrapper, ns } from 'shared/components/wrappers/page.mjs'
@@ -13,6 +14,8 @@ import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
 import { Toc } from 'shared/components/mdx/toc.mjs'
 import { MdxMetaData } from 'shared/components/mdx/meta.mjs'
 import { PrevNext } from 'shared/components/prev-next.mjs'
+import { ReadMore } from 'shared/components/mdx/read-more.mjs'
+import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
 
 /*
  * This page is auto-generated by the prebuild script.
@@ -23,6 +26,11 @@ import { PrevNext } from 'shared/components/prev-next.mjs'
 const DocsPage = ({ page, slug }) => {
   const [frontmatter, setFrontmatter] = useState({ title: 'FreeSewing.dev' })
   const [MDX, setMDX] = useState(<Spinner />)
+  /*
+   * Get the siteNav object from the useNavigation hook
+   * FIXME: ignorecontrol is not yet implmented here
+   */
+  const { siteNav } = useNavigation({ ignoreControl: true })
 
   /* Load MDX dynamically */
   useEffect(() => {
@@ -56,17 +64,28 @@ const DocsPage = ({ page, slug }) => {
         <meta property="og:site_name" content="freesewing.dev" key="site" />
         <title>{frontmatter.title} - FreeSewing.dev</title>
       </Head>
-      <div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end">
-        {frontmatter.toc && frontmatter.toc.length > 0 && (
-          <div className="mb-8 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
-            <MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
-            <Toc toc={frontmatter.toc} wrap />
+      <div className="flex flex-row items-start mt-8 w-full justify-between 2xl:px-36 xl:px-12 px-4">
+        <div className="max-w-96 w-1/4 mt-8 hidden lg:block">
+          <MainSections {...{ siteNav, slug }} />
+          <NavLinks {...{ siteNav, slug }} />
+        </div>
+        <div className="grow w-full m-auto max-w-prose mt-0 mb-8">
+          <div className="w-full">
+            <Breadcrumbs {...{ siteNav, slug }} />
+            <h1 className="break-words searchme">{frontmatter.title}</h1>
+            <div className="block xl:hidden">
+              <Toc toc={frontmatter.toc} wrap />
+            </div>
           </div>
-        )}
-        <div>
           <MdxWrapper>{MDX}</MdxWrapper>
           <PrevNext slug={slug} />
         </div>
+        <div className="max-w-96 w-1/4 mt-8 hidden xl:block">
+          <MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
+          <div className="hidden xl:block">
+            <Toc toc={frontmatter.toc} wrap />
+          </div>
+        </div>
       </div>
     </PageWrapper>
   )