Repository: nodejs/nodejs.dev
Pull request #2910 (2022-10-11 00:49:30)

feat(navigation): better navigation components
<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/main/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) before opening a pull request.
-->

## Description

This PR refactors how we styled and defined Navigation components by creating a different approach to creating Navigation components.

This PR is the last big piece of content refactor for getting Blogs ready. It uses the advantage of refactoring how Navigation Components and different Navigation bars are created/done, allowing extensive customisation.

**This PR does the following:**

- Removes the duplicated SideBarNav Component
- Decouples CSS only when it is used
- Creates Hooks that serve as multi-purpose utilities for creating Navigation Components
- Creates new Navigation Components respectively for About, API, Learn and Blog
- Better separates the code and removes the complexity of having one exhaustive confusing logic
- Adds translation for Blog Categories
- Updates some structure and design related to Articles
  - Such as Navigation Scroll
  - Such as restructuring the BlogContainer and BlogCard (a little bit)
  - Improving the organisation of the components of an Article (By moving authors to the top)
  - Fixes minor CSS issues regarding Articles, Navigation and Blog

## Related Issues

- Fixes https://github.com/ovflowd/nodejs.dev/pull/1

github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2910/
ovflowd: cc @nodejs/website @nodejs/nodejs-dev this is ready to be reviewed and the last piece of code change (that I foresee) for then pulling blog posts from nodejs.org
github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2910/
ovflowd: **Note.:** I'm still going to polish a few things here and there such as:

- Remove the usages of `useIntl` into `injectIntl`
- Rename the `AboutNavigation` to `DefaultNavigation` or `SideNavigation`
- Remove some useless code (that was added in this PR, such as the changes on `animations.scss`
- Clean up the SCSS a little bit
- General proof-checking of TypeScript and see if there are things to be improved
- Decoupling the `blogs` queries from `gatsby-node` as `page-data.json` shouldn't be too big, and to make pagination work, the blog queries need to be moved to the template itself.
  - I might find an alternative to this, or maybe only fetching in the template itself the MDX content of the blog post and keep the rest still on `page-data`.

codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
Base: **66.02**% // Head: **66.14**% // Increases project coverage by **`+0.12%`** :tada:
> Coverage data is based on head [(`4e28811`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) compared to base [(`fd57b87`)](https://codecov.io/gh/nodejs/nodejs.dev/commit/fd57b871c2b1ad2f6fb812ed066dec074d76db22?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).
> Patch has no changes to coverable lines.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #2910      +/-   ##
==========================================
+ Coverage   66.02%   66.14%   +0.12%     
==========================================
  Files         118      135      +17     
  Lines        1351     1536     +185     
  Branches      342      360      +18     
==========================================
+ Hits          892     1016     +124     
- Misses        422      478      +56     
- Partials       37       42       +5     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/\_\_fixtures\_\_/hooks.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9ob29rcy50c3g=) | `100.00% <ø> (ø)` | |
| [src/\_\_fixtures\_\_/page.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9wYWdlLnRzeA==) | `94.11% <ø> (-5.89%)` | :arrow_down: |
| [src/components/Alert/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQWxlcnQvaW5kZXgudHN4) | `50.00% <ø> (ø)` | |
| [src/components/AnimatedPlaceholder/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQW5pbWF0ZWRQbGFjZWhvbGRlci9pbmRleC50c3g=) | `100.00% <ø> (ø)` | |
| [...components/ApiComponents/Components/ApiHeading.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL0FwaUhlYWRpbmcudHN4) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [...rc/components/ApiComponents/Components/ApiLink.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL0FwaUxpbmsudHN4) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [...ents/ApiComponents/Components/SourceLink/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL1NvdXJjZUxpbmsvaW5kZXgudHN4) | `50.00% <ø> (+50.00%)` | :arrow_up: |
| [...ApiComponents/Components/VersionSelector/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL1ZlcnNpb25TZWxlY3Rvci9pbmRleC50c3g=) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [src/components/ApiComponents/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9pbmRleC50c3g=) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [src/components/Article/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXJ0aWNsZS9pbmRleC50c3g=) | `100.00% <ø> (ø)` | |
| ... and [118 more](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/2910?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).

ovflowd: I finished the CSS fixes and adding backend pagination. Now the remaining parts are to actually introduce the Pagination component and the Announcements/Sticky Posts (first row in the blog).

That can be done in a follow-up PR.
aymen94: LGTM

Patch:
diff --git a/content/blog/vulnerabilities/2022-01-11-jan-2022-security-releases.md b/content/blog/vulnerability/2022-01-11-jan-2022-security-releases.md
similarity index 99%
rename from content/blog/vulnerabilities/2022-01-11-jan-2022-security-releases.md
rename to content/blog/vulnerability/2022-01-11-jan-2022-security-releases.md
index db466c1c..fd86d774 100644
--- a/content/blog/vulnerabilities/2022-01-11-jan-2022-security-releases.md
+++ b/content/blog/vulnerability/2022-01-11-jan-2022-security-releases.md
@@ -1,7 +1,7 @@
 ---
 title: January 10th 2022 Security Releases
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 ## _(Update 10-Jan-2022)_ Security releases available
diff --git a/content/blog/vulnerabilities/2022-03-18-mar-2022-security-releases.md b/content/blog/vulnerability/2022-03-18-mar-2022-security-releases.md
similarity index 99%
rename from content/blog/vulnerabilities/2022-03-18-mar-2022-security-releases.md
rename to content/blog/vulnerability/2022-03-18-mar-2022-security-releases.md
index ab455190..2823df31 100644
--- a/content/blog/vulnerabilities/2022-03-18-mar-2022-security-releases.md
+++ b/content/blog/vulnerability/2022-03-18-mar-2022-security-releases.md
@@ -1,7 +1,7 @@
 ---
 title: OpenSSL security releases require Node.js security releases
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 # _(Update 18-Mar-2022)_ Security releases available
diff --git a/content/blog/vulnerabilities/2022-05-05-openssl-fixes-in-regular-releases-may2022.md b/content/blog/vulnerability/2022-05-05-openssl-fixes-in-regular-releases-may2022.md
similarity index 98%
rename from content/blog/vulnerabilities/2022-05-05-openssl-fixes-in-regular-releases-may2022.md
rename to content/blog/vulnerability/2022-05-05-openssl-fixes-in-regular-releases-may2022.md
index f985a60a..143865bb 100644
--- a/content/blog/vulnerabilities/2022-05-05-openssl-fixes-in-regular-releases-may2022.md
+++ b/content/blog/vulnerability/2022-05-05-openssl-fixes-in-regular-releases-may2022.md
@@ -1,7 +1,7 @@
 ---
 title: OpenSSL update assessment, and Node.js project plans
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 ## Summary
diff --git a/content/blog/vulnerabilities/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md b/content/blog/vulnerability/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md
similarity index 97%
rename from content/blog/vulnerabilities/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md
rename to content/blog/vulnerability/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md
index 2cca4ff4..494d034b 100644
--- a/content/blog/vulnerabilities/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md
+++ b/content/blog/vulnerability/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md
@@ -1,7 +1,7 @@
 ---
 title: OpenSSL update assessment, and Node.js project plans
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 ## Summary
diff --git a/gatsby-config.js b/gatsby-config.js
index 26b0dabe..b9ba5faf 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -24,7 +24,6 @@ const gatsbyFsMarkdownSources = markdownSources.map(name => ({
 }));
 
 const gatsbyConfig = {
-  flags: { FAST_DEV: true },
   pathPrefix: process.env.PATH_PREFIX,
   siteMetadata: {
     title: config.title,
diff --git a/gatsby-node.js b/gatsby-node.js
index 29b82f34..ddd08d9e 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -8,9 +8,9 @@ const createSlug = require('./util-node/createSlug');
 const getNodeReleasesData = require('./util-node/getNodeReleasesData');
 const getBannersData = require('./util-node/getBannersData');
 const getNvmData = require('./util-node/getNvmData');
-const createBlogQuery = require('./util-node/createBlogQuery');
-const createLearnQuery = require('./util-node/createLearnQuery');
-const createApiQuery = require('./util-node/createApiQuery');
+const createBlogQuery = require('./util-node/queries/createBlogQuery');
+const createLearnQuery = require('./util-node/queries/createLearnQuery');
+const createApiQuery = require('./util-node/queries/createApiQuery');
 const createBlogPages = require('./util-node/createBlogPages');
 const createLearnPages = require('./util-node/createLearnPages');
 const createApiPages = require('./util-node/createApiPages');
@@ -47,12 +47,27 @@ const getMessagesForLocale = locale =>
 const getRedirectForLocale = (locale, url) =>
   /^\/\/|https?:\/\//.test(url) ? url : `/${locale}${url}`;
 
-exports.onCreateWebpackConfig = ({ plugins, actions }) => {
+exports.onCreateWebpackConfig = ({ plugins, actions, stage, getConfig }) => {
   actions.setWebpackConfig({
     plugins: [
       plugins.ignore({ resourceRegExp: /canvas/, contextRegExp: /jsdom$/ }),
     ],
   });
+
+  if (stage === 'develop' || stage === 'build-javascript') {
+    const config = getConfig();
+
+    const miniCssExtractPlugin = config.plugins.find(
+      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
+    );
+
+    if (miniCssExtractPlugin) {
+      // We don't care about the order of CSS imports as we use CSS Modules
+      miniCssExtractPlugin.options.ignoreOrder = true;
+    }
+
+    actions.replaceWebpackConfig(config);
+  }
 };
 
 exports.createSchemaCustomization = ({ actions }) => {
@@ -103,7 +118,8 @@ exports.createPages = async ({ graphql, actions }) => {
     nodeReleases: { nodeReleasesData, apiAvailableVersions },
   } = apiResult.data;
 
-  const { blogPages } = createBlogPages(blogEdges);
+  const { blogPages, blogPosts, getPaginatedPosts } =
+    createBlogPages(blogEdges);
 
   const { learnPages, navigationData: learnNavigationData } = createLearnPages(
     learnEdges,
@@ -123,12 +139,6 @@ exports.createPages = async ({ graphql, actions }) => {
     context: { ...learnPages[0], navigationData: learnNavigationData },
   });
 
-  createPage({
-    path: blogPath,
-    component: blogTemplate,
-    context: { categories: categoryEdges, posts: blogEdges },
-  });
-
   learnPages.forEach(page => {
     createPage({
       path: page.slug,
@@ -141,20 +151,40 @@ exports.createPages = async ({ graphql, actions }) => {
     createPage({
       path: page.slug,
       component: postTemplate,
-      // Get the latest 10 blog posts
-      context: { ...page, recent: blogEdges.slice(0, 10) },
+      // Get the latest 10 blog posts for the Recent Posts section
+      context: { ...page, recent: blogPosts.slice(0, 10) },
     });
   });
 
-  categoryEdges.forEach(({ node }) => {
-    const posts = blogEdges.filter(
-      ({ node: item }) => item.fields.categoryName === node.name
-    );
+  // This default category acts as a "hack" for creating the default
+  // `/blog` page (aka the "Everything" category)
+  const defaultCategory = { node: { name: null } };
 
-    createPage({
-      path: `${blogPath}${node.name}/`,
-      component: blogTemplate,
-      context: { categories: categoryEdges, category: node, posts },
+  [defaultCategory, ...categoryEdges].forEach(({ node }) => {
+    const paginatedPosts = getPaginatedPosts(node.name);
+
+    const getPaginationData = current => ({
+      current: current + 1,
+      total: paginatedPosts.length,
+    });
+
+    const getBlogPagePath = index => {
+      const categoryPath = node.name ? `${blogPath}${node.name}/` : blogPath;
+
+      return index === 0 ? categoryPath : `${categoryPath}page/${index + 1}/`;
+    };
+
+    paginatedPosts.forEach((currentPagePosts, index) => {
+      createPage({
+        path: getBlogPagePath(index),
+        component: blogTemplate,
+        context: {
+          category: node.name ? node : null,
+          categories: categoryEdges,
+          posts: currentPagePosts,
+          pagination: getPaginationData(index),
+        },
+      });
     });
   });
 
diff --git a/package-lock.json b/package-lock.json
index db2d79cd..f3b3f5a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
         "react-helmet": "^6.1.0",
         "react-icons": "^4.4.0",
         "react-intl": "^6.1.1",
+        "react-scroll": "^1.8.7",
         "react-tabs": "5.1.0",
         "reading-time": "^1.5.0",
         "string-similarity": "^4.0.4",
@@ -83,6 +84,7 @@
         "@types/react-click-outside-hook": "^1.0.0",
         "@types/react-dom": "^18.0.6",
         "@types/react-helmet": "^6.1.5",
+        "@types/react-scroll": "^1.8.4",
         "@types/string-similarity": "^4.0.0",
         "@types/throttle-debounce": "^5.0.0",
         "@typescript-eslint/eslint-plugin": "^5.36.2",
@@ -6297,6 +6299,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-scroll": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.4.tgz",
+      "integrity": "sha512-DpHA9PYw42/rBrfKbGE/kAEvHRfyDL/ACfKB/ORWUYuCLi/yGrntxSzYXmg/7TLgQsJ5ma13GCDOzFSOz+8XOA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -19830,6 +19841,11 @@
       "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
       "integrity": "sha512-j7MJE+TuT51q9ggt4fSgVqro163BEFjAt3u97IqU+JA2DkWl80nFTrowzLpZ/BnpN7rrl0JA/593NAdd8p/scQ=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -24722,6 +24738,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.7.tgz",
+      "integrity": "sha512-fBOIwweAlhicx8RqP9tQXn/Uhd+DTtVRjw+0VBsIn1Z+MjRYLhTZ0tMoTAU1vOD3dce8mI6copexI4yWII+Luw==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-server-dom-webpack": {
       "version": "0.0.0-experimental-c8b778b7f-20220825",
       "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-c8b778b7f-20220825.tgz",
@@ -34057,6 +34086,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-scroll": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.4.tgz",
+      "integrity": "sha512-DpHA9PYw42/rBrfKbGE/kAEvHRfyDL/ACfKB/ORWUYuCLi/yGrntxSzYXmg/7TLgQsJ5ma13GCDOzFSOz+8XOA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -44090,6 +44128,11 @@
       "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
       "integrity": "sha512-j7MJE+TuT51q9ggt4fSgVqro163BEFjAt3u97IqU+JA2DkWl80nFTrowzLpZ/BnpN7rrl0JA/593NAdd8p/scQ=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -47555,6 +47598,15 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
     },
+    "react-scroll": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.7.tgz",
+      "integrity": "sha512-fBOIwweAlhicx8RqP9tQXn/Uhd+DTtVRjw+0VBsIn1Z+MjRYLhTZ0tMoTAU1vOD3dce8mI6copexI4yWII+Luw==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-server-dom-webpack": {
       "version": "0.0.0-experimental-c8b778b7f-20220825",
       "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-c8b778b7f-20220825.tgz",
diff --git a/package.json b/package.json
index 6c88f6b5..ec9f4144 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.4.0",
     "react-intl": "^6.1.1",
+    "react-scroll": "^1.8.7",
     "react-tabs": "5.1.0",
     "reading-time": "^1.5.0",
     "string-similarity": "^4.0.4",
@@ -106,6 +107,7 @@
     "@types/react-click-outside-hook": "^1.0.0",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
+    "@types/react-scroll": "^1.8.4",
     "@types/string-similarity": "^4.0.0",
     "@types/throttle-debounce": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
diff --git a/src/__fixtures__/page.tsx b/src/__fixtures__/page.tsx
index 2ee51fdc..dc9c821a 100644
--- a/src/__fixtures__/page.tsx
+++ b/src/__fixtures__/page.tsx
@@ -1,7 +1,7 @@
 import {
   PaginationInfo,
   LearnTemplateContext,
-  NavigationSectionData,
+  NavigationData,
   PostTemplateData,
   PostTemplateContext,
   NodeReleaseData,
@@ -25,39 +25,29 @@ export const createPaginationInfo = (): PaginationInfo =>
     title: 'test-title',
   } as PaginationInfo);
 
-export const createNavigationSectionData = (): NavigationSectionData =>
+export const createNavigationSectionData = (): NavigationData =>
   ({
-    'test-section': {
-      data: [
-        {
-          slug: 'test-slug-1',
-          title: 'test-title-1',
-          category: 'test1',
-        },
-        {
-          title: 'test-title-2',
-          slug: 'test-slug-2',
-          category: 'test1',
-        },
-      ],
-      category: 'test1',
-    },
-    'test-section2': {
-      data: [
-        {
-          slug: 'test-slug-3',
-          title: 'test-title-3',
-          category: 'test2',
-        },
-        {
-          title: 'test-title-4',
-          slug: 'test-slug-4',
-          category: 'test2',
-        },
-      ],
-      category: 'test2',
-    },
-  } as NavigationSectionData);
+    'test-section': [
+      {
+        slug: 'test-slug-1',
+        title: 'test-title-1',
+      },
+      {
+        title: 'test-title-2',
+        slug: 'test-slug-2',
+      },
+    ],
+    'test-section2': [
+      {
+        slug: 'test-slug-3',
+        title: 'test-title-3',
+      },
+      {
+        title: 'test-title-4',
+        slug: 'test-slug-4',
+      },
+    ],
+  } as NavigationData);
 
 export const createLearnPageData = () => ({
   data: {
@@ -134,7 +124,7 @@ export const createBlogPageContext = (): PostTemplateContext => ({
           title: 'title-mock',
           category: {
             name: 'category-mock',
-            slug: 'category-mock-slug',
+            slug: 'blog.title',
           },
           blogAuthors: [
             {
diff --git a/src/components/Article/index.tsx b/src/components/Article/index.tsx
index 87eeddae..398faade 100644
--- a/src/components/Article/index.tsx
+++ b/src/components/Article/index.tsx
@@ -22,8 +22,8 @@ import styles from './index.module.scss';
 interface Props {
   title: string;
   body: string;
-  tableOfContents: TableOfContentsItem[];
-  authors: string[] | BlogPostAuthor[];
+  authors?: string[] | BlogPostAuthor[];
+  tableOfContents?: TableOfContentsItem[];
   relativePath?: string;
   absolutePath?: string;
   editPath?: string;
@@ -47,12 +47,17 @@ const mdxComponents = {
   Alert,
 };
 
-const renderBlogAuthors = (date?: string, authors?: BlogPostAuthor[]) => (
-  <BlogAuthorsList date={date} authors={authors} />
+const renderBlogAuthors = (
+  date: string | undefined,
+  authors: BlogPostAuthor[] | undefined
+) => <BlogAuthorsList date={date} authors={authors || []} />;
+
+const renderArticleAuthors = (authors: string[]) => (
+  <AuthorList authors={authors || []} />
 );
 
-const renderTOC = (tableOfContents: TableOfContentsItem[]) => (
-  <TableOfContents tableOfContents={tableOfContents} />
+const renderTOC = (tableOfContents: TableOfContentsItem[] | undefined) => (
+  <TableOfContents tableOfContents={tableOfContents || []} />
 );
 
 const Article = ({
@@ -76,25 +81,24 @@ const Article = ({
     <h1 className={styles.headline}>{title}</h1>
     {blog
       ? renderBlogAuthors(date, authors as BlogPostAuthor[])
-      : renderTOC(tableOfContents)}
+      : renderArticleAuthors(authors as string[])}
+    {renderTOC(tableOfContents)}
     <div>
       <MDXProvider components={{ ...mdxComponents, ...extraComponents }}>
         <MDXRenderer>{body}</MDXRenderer>
       </MDXProvider>
     </div>
     {childrenPosition === 'after' && children && <div>{children}</div>}
-    {!blog && authors && authors.length > 0 && (
-      <AuthorList authors={authors as string[]} />
-    )}
     {!blog && (
-      <EditLink
-        absolutePath={absolutePath}
-        relativePath={relativePath}
-        editPath={editPath}
-        hasNoAuthors={!authors || !authors.length}
-      />
+      <>
+        <EditLink
+          absolutePath={absolutePath}
+          relativePath={relativePath}
+          editPath={editPath}
+        />
+        <Pagination previous={previous} next={next} />
+      </>
     )}
-    {!blog && <Pagination previous={previous} next={next} />}
   </article>
 );
 
diff --git a/src/components/Author/index.module.scss b/src/components/Author/index.module.scss
index 2a571c70..b92d960e 100644
--- a/src/components/Author/index.module.scss
+++ b/src/components/Author/index.module.scss
@@ -4,7 +4,7 @@
   }
 
   img {
-    border: 1px solid var(--brand-light);
+    border: 2px solid var(--brand-light);
     border-radius: 100%;
     height: 30px;
     margin-top: 5px;
diff --git a/src/components/BlockQuote/index.module.scss b/src/components/BlockQuote/index.module.scss
index ddc96f06..73029594 100644
--- a/src/components/BlockQuote/index.module.scss
+++ b/src/components/BlockQuote/index.module.scss
@@ -8,6 +8,10 @@
   padding: var(--space-12);
   position: relative;
 
+  @media (max-width: 900px) {
+    margin: var(--space-08) auto;
+  }
+
   p:last-child {
     margin: 0;
   }
diff --git a/src/components/BlogAuthorsList/index.tsx b/src/components/BlogAuthorsList/index.tsx
index 1fa33241..ccc1e193 100644
--- a/src/components/BlogAuthorsList/index.tsx
+++ b/src/components/BlogAuthorsList/index.tsx
@@ -4,7 +4,7 @@ import { getTerminatingString } from '../../util/getTerminatingString';
 import styles from './index.module.scss';
 
 interface Props {
-  authors?: BlogPostAuthor[];
+  authors: BlogPostAuthor[];
   date?: string;
 }
 
@@ -27,18 +27,24 @@ const getAuthorWebsite = (author: BlogPostAuthor) => {
   return author.name;
 };
 
-const BlogAuthorsList = ({ authors, date }: Props): null | JSX.Element => (
-  <h5 className={styles.list}>
-    {date} by{' '}
-    {mapAuthorsList(authors || []).map(
-      (author, i, array): string | JSX.Element => (
-        <span key={author.id}>
-          {getAuthorWebsite(author)}
-          {getTerminatingString(i, array.length)}
-        </span>
-      )
-    )}
-  </h5>
-);
+const BlogAuthorsList = ({ authors, date }: Props): JSX.Element => {
+  if (authors.length) {
+    return (
+      <h5 className={styles.list}>
+        {date} by{' '}
+        {mapAuthorsList(authors).map(
+          (author, i, array): string | JSX.Element => (
+            <span key={author.id}>
+              {getAuthorWebsite(author)}
+              {getTerminatingString(i, array.length)}
+            </span>
+          )
+        )}
+      </h5>
+    );
+  }
+
+  return <div />;
+};
 
 export default BlogAuthorsList;
diff --git a/src/components/BlogCard/index.module.scss b/src/components/BlogCard/index.module.scss
index 11dc363f..99b97b1c 100644
--- a/src/components/BlogCard/index.module.scss
+++ b/src/components/BlogCard/index.module.scss
@@ -1,10 +1,10 @@
 .blog-card {
   display: flex;
   flex-direction: column;
-  padding: 40px 30px 40px 0;
+  padding: var(--space-32) var(--space-24) var(--space-32) 0;
 
   @media (max-width: 900px) {
-    padding: 10px 20px;
+    padding: var(--space-12) var(--space-24);
   }
 
   .title {
diff --git a/src/components/BlogCard/index.tsx b/src/components/BlogCard/index.tsx
index c77a99dd..13b9cf8f 100644
--- a/src/components/BlogCard/index.tsx
+++ b/src/components/BlogCard/index.tsx
@@ -34,7 +34,7 @@ const BlogCard = ({
             className={styles.category}
             to={getBlogCategoryUrl(category.name)}
           >
-            {category.slug}
+            {intl.formatMessage({ id: category.slug })}
           </Link>
         )}
         <span>{readingTime.text}</span>
diff --git a/src/components/EditLink/index.module.scss b/src/components/EditLink/index.module.scss
index 4fbf5578..ae12a140 100644
--- a/src/components/EditLink/index.module.scss
+++ b/src/components/EditLink/index.module.scss
@@ -1,15 +1,12 @@
 .edit {
   display: flex;
   flex-wrap: wrap;
-
-  &--no-authors {
-    margin-top: var(--space-24);
-  }
+  margin-top: var(--space-48);
 
   a {
     color: var(--color-text-secondary);
     font-family: var(--sans-serif);
-    font-size: 1.4rem;
+    font-size: var(--font-size-body2);
     font-weight: var(--font-weight-regular);
     margin-left: 0;
     text-decoration: none !important;
diff --git a/src/components/EditLink/index.tsx b/src/components/EditLink/index.tsx
index ae5b701b..80f762ce 100644
--- a/src/components/EditLink/index.tsx
+++ b/src/components/EditLink/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencil } from '@fortawesome/free-solid-svg-icons';
 import styles from './index.module.scss';
@@ -9,16 +8,14 @@ interface Props {
   relativePath?: string;
   editPath?: string;
   absolutePath?: string;
-  hasNoAuthors?: boolean;
 }
 
-const baseURL = `https://github.com/nodejs/nodejs.dev/edit/main`;
+const baseURL = 'https://github.com/nodejs/nodejs.dev/edit/main';
 
 const EditLink = ({
   relativePath,
   editPath,
   absolutePath,
-  hasNoAuthors = false,
 }: Props): JSX.Element | null => {
   if (!relativePath && !editPath && !absolutePath) return null;
 
@@ -28,12 +25,8 @@ const EditLink = ({
       ? `${baseURL}/content/learn/${relativePath}`
       : `${baseURL}/${editPath}`);
 
-  const classNames = classnames(styles.edit, {
-    [styles.editNoAuthors]: hasNoAuthors,
-  });
-
   return (
-    <div className={classNames}>
+    <div className={styles.edit}>
       <a href={href}>
         <FormattedMessage id="components.editLink.title" tagName="span" />
         <FontAwesomeIcon icon={faPencil} />
diff --git a/src/components/Layout/article.tsx b/src/components/Layout/article.tsx
index 7ed477ef..1d5671df 100644
--- a/src/components/Layout/article.tsx
+++ b/src/components/Layout/article.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-
-import { PageTableOfContents } from '../../types';
 import Article from '../Article';
-import Layout from '.';
-import SideNavBar, { SideNavBarKeys } from '../SideNavBar';
+import Layout from './index';
+import AboutNavigation from '../../navigations/about';
+import { AboutNavigationKeys, PageTableOfContents } from '../../types';
 
 export interface ArticleLayoutProps {
   body: string;
@@ -13,7 +12,7 @@ export interface ArticleLayoutProps {
   authors: string[];
   location?: Location;
   editPath?: string;
-  sidenavKey?: SideNavBarKeys;
+  currentSlug?: AboutNavigationKeys;
   children?: React.ReactNode;
   childrenPosition?: 'before' | 'after';
 }
@@ -25,19 +24,19 @@ const ArticleLayout = ({
   title,
   description,
   authors,
-  sidenavKey,
+  currentSlug,
   children,
   childrenPosition = 'after',
 }: ArticleLayoutProps): JSX.Element => (
   <Layout title={title} description={description}>
     <main className="grid-container">
-      {sidenavKey && <SideNavBar pageKey={sidenavKey} />}
+      {currentSlug && <AboutNavigation currentSlug={currentSlug} />}
       <Article
         title={title}
         body={body}
         authors={authors}
         editPath={editPath}
-        tableOfContents={tableOfContents ? tableOfContents.items : []}
+        tableOfContents={tableOfContents?.items || []}
         childrenPosition={childrenPosition}
       >
         {children}
diff --git a/src/containers/Navigation/index.module.scss b/src/components/Navigation/index.module.scss
similarity index 89%
rename from src/containers/Navigation/index.module.scss
rename to src/components/Navigation/index.module.scss
index 01ec878d..c0684f56 100644
--- a/src/containers/Navigation/index.module.scss
+++ b/src/components/Navigation/index.module.scss
@@ -5,8 +5,8 @@
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   height: calc(100vh - var(--nav-height));
   max-width: 36rem;
-  overflow: auto;
   overflow-x: hidden;
+  overflow-y: scroll;
   padding: 0 var(--space-20);
   position: sticky;
   top: var(--nav-height);
@@ -16,10 +16,15 @@
   @media (max-width: 900px) {
     height: 42px;
     max-width: unset;
-    overflow: hidden;
+    overflow-y: hidden;
+    padding-bottom: var(--space-48);
     position: relative;
     top: 0;
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+
+    > div {
+      display: none;
+    }
   }
 
   &__open,
@@ -32,16 +37,14 @@
     font-weight: var(--font-weight-light);
     height: calc(24px + 3px);
     line-height: 0;
-    margin-left: -0.8rem;
+    margin: var(--space-08) 0 0 calc(var(--space-08) * -1);
     overflow: visible;
     padding: 12px 0;
     position: sticky;
     text-indent: 3.2rem;
-    top: 0.8rem;
     transition: color 0.28s, background-color 0.28s;
     user-select: none;
     width: 20px;
-    z-index: 9999;
 
     @media (max-width: 900px) {
       display: unset;
@@ -76,11 +79,14 @@
   &%--fixed {
     @media (max-width: 900px) {
       height: 100vh;
-      overflow-x: hidden;
       overflow-y: scroll;
       position: sticky;
       top: 0;
       z-index: 999;
+
+      > div {
+        display: block;
+      }
     }
   }
 
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
new file mode 100644
index 00000000..b18ac23b
--- /dev/null
+++ b/src/components/Navigation/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import classnames from 'classnames';
+import styles from './index.module.scss';
+
+interface Props {
+  isOpen: boolean;
+  label: string;
+  toggleNavigation: () => void;
+}
+
+const NavigationContainer = ({
+  label,
+  isOpen,
+  children,
+  toggleNavigation,
+}: React.PropsWithChildren<Props>) => {
+  const navigationClasses = classnames(styles.navigation, {
+    [styles.navigationFixed]: isOpen,
+  });
+
+  return (
+    <nav aria-label={label} className={navigationClasses} id="main-navigation">
+      <button
+        type="button"
+        className={styles.navigationOpen}
+        onClick={toggleNavigation}
+        aria-expanded={isOpen}
+      >
+        <FormattedMessage id="containers.navigation.title" />
+      </button>
+      {children}
+    </nav>
+  );
+};
+
+export default NavigationContainer;
diff --git a/src/components/NavigationItem/index.module.scss b/src/components/NavigationItem/index.module.scss
index 403c44d8..3684fc3c 100644
--- a/src/components/NavigationItem/index.module.scss
+++ b/src/components/NavigationItem/index.module.scss
@@ -1,40 +1,18 @@
+@import '../../styles/mixins.scss';
+
+$checkSvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'%3E%3C/path%3E%3C/svg%3E");
+
 .navigation-item,
 %navigation-item {
-  align-items: center;
-  border-radius: 4px;
-  box-sizing: border-box;
+  @include navigationItemBase;
+
   color: var(--color-text-secondary);
   cursor: pointer;
   display: block;
-  list-style: none;
   margin: 0 0 0 var(--space-24);
-  padding: calc(var(--space-12) / 2) 0 calc(var(--space-24) / 2) var(--space-08);
-  position: relative;
-  text-decoration: none;
-
-  &:last-of-type::after {
-    display: none;
-  }
-
-  &::before {
-    background-size: 24px;
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 3px var(--color-border-primary);
-    box-sizing: border-box;
-    content: ' ';
-    display: block;
-    height: 24px;
-    left: -24px;
-    overflow: hidden;
-    padding: 5px 4px;
-    position: absolute;
-    top: 0.6rem;
-    transition: box-shadow 0.28s;
-    width: 24px;
-  }
 
-  &--done::before {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'%3E%3C/path%3E%3C/svg%3E");
+  @media (max-width: 900px) {
+    padding-top: var(--space-08);
   }
 
   &--active {
@@ -42,46 +20,52 @@
     font-weight: var(--font-weight-semibold);
   }
 
-  &--done::before,
-  &--active::before {
-    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
-  }
-
-  &:hover::before {
-    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
-  }
+  &--with-trail {
+    &:last-of-type::after {
+      display: none;
+    }
 
-  &::after {
-    background: var(--color-border-primary);
-    content: ' ';
-    display: block;
-    height: calc(100% - 1.2rem - 12px);
-    left: calc(-1.2rem - 1px);
-    position: absolute;
-    top: calc(2.4rem + 6px);
-    width: 2px;
+    &::after {
+      background: var(--color-border-primary);
+      content: ' ';
+      display: block;
+      height: calc(100% - 1.2rem - 12px);
+      left: calc(-1.2rem - 1px);
+      position: absolute;
+      top: calc(2.4rem + 6px);
+      width: 2px;
 
-    @media (max-width: 900px) {
-      left: calc(-1.2rem - 2px);
-      top: calc(2.4rem + 7px);
+      @media (max-width: 900px) {
+        left: calc(-1.2rem - 2px);
+        top: calc(2.4rem + 7px);
+      }
     }
   }
 
-  &--done::after {
-    background: var(--color-border-accent);
-  }
-
-  &--api {
-    padding: var(--space-08) 0 0 0;
-
-    &:hover::before,
+  &--with-bullet {
     &::before {
-      box-shadow: none;
-      content: none;
+      background-size: 24px;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 3px var(--color-border-primary);
+      box-sizing: border-box;
+      content: ' ';
+      display: block;
+      height: 24px;
+      left: -24px;
+      overflow: hidden;
+      padding: 5px 4px;
+      position: absolute;
+      top: 0.6rem;
+      transition: box-shadow 0.28s;
+      width: 24px;
+
+      @media (max-width: 900px) {
+        top: 0.5rem;
+      }
     }
 
-    &:after {
-      content: none;
+    &:hover::before {
+      box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
     }
   }
 }
diff --git a/src/components/NavigationItem/index.tsx b/src/components/NavigationItem/index.tsx
index aeb0e2b5..3c478a9c 100644
--- a/src/components/NavigationItem/index.tsx
+++ b/src/components/NavigationItem/index.tsx
@@ -1,35 +1,44 @@
 import React from 'react';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import classnames from 'classnames';
+import { useScrollToElement } from '../../hooks/useScrollToElement';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import styles from './index.module.scss';
 
 interface Props {
-  key: string;
-  isRead: boolean;
-  isActive: boolean;
   slug: string;
   title: string;
-  isApiDocs?: boolean;
+  isActive: boolean;
+  extraClasses?: string;
   onClick?: (event: React.MouseEvent<HTMLLinkElement>) => void;
 }
 
 const NavigationItem = ({
-  isRead,
-  isActive,
   slug,
   title,
-  isApiDocs,
   onClick,
+  isActive,
+  extraClasses,
 }: Props): JSX.Element => {
-  const className = classnames(`t-body2 ${styles.navigationItem}`, {
-    [styles.navigationItemDone]: isRead,
-    [styles.navigationItemActive]: !isRead && isActive,
-    [styles.navigationItemApi]: isApiDocs,
+  const className = classnames('t-body2', styles.navigationItem, extraClasses, {
+    [styles.navigationItemActive]: isActive,
+  });
+
+  const isMobile = useMediaQuery('(max-width: 900px)');
+
+  useScrollToElement({
+    element: slug,
+    smooth: true,
+    containerId: 'main-navigation',
+    offset: -100,
+    // This needs to be a strict `===false` as
+    // the initial value is `undefined` as being CSR
+    isActive: isActive && isMobile === false,
   });
 
   if (slug.startsWith('https')) {
     return (
-      <a href={slug} className={className}>
+      <a id={slug} href={slug} className={className}>
         {title}
       </a>
     );
@@ -37,9 +46,10 @@ const NavigationItem = ({
 
   return (
     <Link
-      onClick={onClick}
+      id={slug}
       to={slug}
       className={className}
+      onClick={onClick}
       aria-current={isActive ? 'page' : undefined}
     >
       {title}
diff --git a/src/components/NavigationSection/index.module.scss b/src/components/NavigationSection/index.module.scss
index a375b4a1..95d45f95 100644
--- a/src/components/NavigationSection/index.module.scss
+++ b/src/components/NavigationSection/index.module.scss
@@ -1,8 +1,7 @@
-@import '../NavigationItem/index.module.scss';
+@import '../../styles/mixins.scss';
 
 .navigation-section,
 %navigation-section {
-  $section: &;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -21,64 +20,23 @@
       margin-top: 0;
     }
   }
+}
 
-  &__pure-title,
-  &%__pure-title {
-    border: none;
-    color: var(--color-text-primary);
+.navigation-section-title,
+%navigation-section-title {
+  @include navigationItemBase;
+
+  border: none;
+  color: var(--color-text-primary);
+  display: flex;
+  flex-direction: row;
+  font-weight: var(--font-weight-semibold);
+  justify-content: space-between;
+  margin: var(--space-24) 0 var(--space-16) var(--space-24);
+  width: 100%;
+
+  > span {
+    align-items: center;
     display: flex;
-    flex-direction: row;
-    font-weight: var(--font-weight-semibold);
-    justify-content: space-between;
-    margin: var(--space-24) 0 var(--space-16) var(--space-24);
-    width: 100%;
-
-    span {
-      align-items: center;
-      display: flex;
-    }
-
-    i {
-      padding: 0;
-    }
-
-    &::before,
-    &:hover::before {
-      box-shadow: inset 0 0 0 3px var(--color-text-primary);
-    }
-
-    &::after {
-      background: transparent;
-    }
-  }
-
-  &__title,
-  &%__title {
-    @extend %navigation-item;
-    @extend %navigation-section__pure-title;
-
-    svg {
-      padding: 0 var(--space-16) 0 0;
-    }
-  }
-
-  &--api {
-    &__title {
-      margin: 0;
-
-      span svg {
-        font-size: 20px;
-        padding-left: 0;
-      }
-
-      &::before,
-      &:hover::before {
-        box-shadow: none;
-        content: '';
-        height: 0;
-        padding: 0;
-        width: 0;
-      }
-    }
   }
 }
diff --git a/src/components/NavigationSection/index.tsx b/src/components/NavigationSection/index.tsx
index 21f3ef1b..a08e387f 100644
--- a/src/components/NavigationSection/index.tsx
+++ b/src/components/NavigationSection/index.tsx
@@ -1,73 +1,29 @@
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
-import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
-import { NavigationSectionItem } from '../../types';
-import NavigationItem from '../NavigationItem';
+import React from 'react';
 import styles from './index.module.scss';
 
 interface Props {
-  key: string;
-  title: string;
-  section: NavigationSectionItem[];
-  currentSlug: string;
-  readSections: Set<NavigationSectionItem['slug']>;
-  isApiDocs?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLLinkElement>) => void;
+  isOpen: boolean;
+  label: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
 }
 
+const getDisplay = (isOpen: boolean) => ({
+  display: isOpen ? 'block' : 'none',
+});
+
 const NavigationSection = ({
+  label,
   title,
-  section,
-  currentSlug,
-  readSections,
-  isApiDocs,
-  onClick,
-}: Props): JSX.Element => {
-  const isActive = (item: NavigationSectionItem) => item.slug === currentSlug;
-  const [isOpen, setIsOpen] = useState(!!section.find(isActive));
-  const toggle = (): void => setIsOpen(!isOpen);
-
-  const titleClassNames = classnames('t-body2', styles.navigationSectionTitle, {
-    [styles.navigationSectionApiTitle]: isApiDocs,
-  });
-
-  const navigationSectionClasses = classnames(styles.navigationSection);
-
-  return (
-    <div className={navigationSectionClasses}>
-      <button
-        type="button"
-        className={titleClassNames}
-        onClick={toggle}
-        aria-expanded={isOpen}
-      >
-        <span>
-          {isApiDocs && <OfflineBoltIcon />}
-          {title}
-        </span>
-        {isOpen ? <ArrowDropDownIcon /> : <ArrowDropUpIcon />}
-      </button>
-      <div role="region" style={{ display: isOpen ? 'block' : 'none' }}>
-        {section.map((item: NavigationSectionItem): JSX.Element => {
-          const isRead: boolean = readSections.has(item.slug);
-
-          return (
-            <NavigationItem
-              key={item.slug}
-              title={item.title}
-              slug={item.slug}
-              isRead={isRead}
-              isActive={isActive(item)}
-              isApiDocs={isApiDocs}
-              onClick={onClick}
-            />
-          );
-        })}
-      </div>
+  isOpen,
+  content,
+}: Props): JSX.Element => (
+  <div className={styles.navigationSection}>
+    {title}
+    <div role="region" aria-label={label} style={getDisplay(isOpen)}>
+      {content}
     </div>
-  );
-};
+  </div>
+);
 
 export default NavigationSection;
diff --git a/src/components/SideNavBar/index.module.scss b/src/components/SideNavBar/index.module.scss
deleted file mode 100644
index d2fb39ca..00000000
--- a/src/components/SideNavBar/index.module.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import '../../styles/typography.scss';
-@import '../../containers/Navigation/index.module.scss';
-@import '../NavigationSection/index.module.scss';
-@import '../NavigationItem/index.module.scss';
-
-.side-nav {
-  @extend %navigation;
-
-  &__open {
-    @extend %navigation__open;
-  }
-
-  &--fixed {
-    @extend %navigation--fixed;
-  }
-
-  &--fixed &__open {
-    top: 1.8rem;
-  }
-
-  .side-nav-section {
-    @extend %navigation-section;
-
-    padding: 0 var(--space-20);
-
-    &__title {
-      @extend .t-body2;
-      @extend %navigation-section__pure-title;
-      color: var(--color-brand-primary);
-      font-weight: var(--font-weight-bold);
-
-      margin-left: 0;
-      text-decoration: none;
-
-      svg {
-        color: var(--color-text-primary);
-        padding: 0;
-      }
-    }
-
-    .side-nav-item {
-      @extend %navigation-item;
-
-      padding: calc(var(--space-20) / 2) 0 calc(var(--space-20) / 2)
-        var(--space-12);
-
-      &::before {
-        box-shadow: inset 0 0 0 2px var(--color-border-accent);
-        line-height: 2.6rem;
-        top: 1rem;
-      }
-
-      &::after {
-        content: none;
-      }
-
-      &:hover::before {
-        box-shadow: inset 0 0 0 2.4rem var(--color-border-accent) !important;
-      }
-
-      &--active {
-        color: var(--color-text-accent);
-        font-weight: var(--font-weight-semibold);
-
-        &::before {
-          box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/SideNavBar/index.tsx b/src/components/SideNavBar/index.tsx
deleted file mode 100644
index 3f270728..00000000
--- a/src/components/SideNavBar/index.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { useRef, useState, useMemo } from 'react';
-import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import { FormattedMessage, useIntl } from 'react-intl';
-import GroupsIcon from '@mui/icons-material/Groups';
-import InfoIcon from '@mui/icons-material/Info';
-import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
-import classnames from 'classnames';
-import { SideNavBarItem } from '../../types';
-import NavigationItem from '../NavigationItem';
-import styles from './index.module.scss';
-
-// eslint-disable-next-line no-shadow
-export enum SideNavBarKeys {
-  about = '/about/',
-  governance = '/about/governance/',
-  releases = '/about/releases/',
-  resources = '/about/resources/',
-  privacy = 'https://privacy-policy.openjsf.org/',
-  security = '/about/security/',
-  getInvolved = '/get-involved/',
-  collabSummit = '/get-involved/collab-summit',
-  contribute = '/get-involved/contribute',
-  download = '/download/',
-  packageManager = '/download/package-manager/',
-  previousReleases = '/download/releases/',
-  codeOfConduct = 'https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md',
-}
-
-const sideNavBarItems: SideNavBarItem[] = [
-  {
-    title: 'components.sideBar.section.about',
-    slug: SideNavBarKeys.about,
-    icon: InfoIcon,
-    isTitle: true,
-  },
-  {
-    title: 'components.sideBar.items.governance',
-    slug: SideNavBarKeys.governance,
-  },
-  {
-    title: 'components.sideBar.items.releases',
-    slug: SideNavBarKeys.releases,
-  },
-  {
-    title: 'components.sideBar.items.resources',
-    slug: SideNavBarKeys.resources,
-  },
-  {
-    title: 'components.sideBar.items.privacy',
-    slug: SideNavBarKeys.privacy,
-  },
-  {
-    title: 'components.sideBar.items.security',
-    slug: SideNavBarKeys.security,
-  },
-  {
-    title: 'components.sideBar.section.getInvolved',
-    slug: SideNavBarKeys.getInvolved,
-    icon: GroupsIcon,
-    isTitle: true,
-  },
-  {
-    title: 'components.sideBar.items.collabSummit',
-    slug: SideNavBarKeys.collabSummit,
-  },
-  {
-    title: 'components.sideBar.items.contribute',
-    slug: SideNavBarKeys.contribute,
-  },
-  {
-    title: 'components.sideBar.items.codeOfConduct',
-    slug: SideNavBarKeys.codeOfConduct,
-  },
-  {
-    title: 'components.sideBar.section.download',
-    slug: SideNavBarKeys.download,
-    icon: CloudDownloadIcon,
-    isTitle: true,
-  },
-  {
-    title: 'components.sideBar.items.packageManager',
-    slug: SideNavBarKeys.packageManager,
-  },
-  {
-    title: 'components.sideBar.items.previousReleases',
-    slug: SideNavBarKeys.previousReleases,
-  },
-];
-
-interface NavBarProps {
-  pageKey?: string;
-  items?: SideNavBarItem[];
-}
-
-const SideNavBar = ({ pageKey, items = sideNavBarItems }: NavBarProps) => {
-  const [navOpen, setNavOpen] = useState<boolean>(false);
-  const toggle = (): void => setNavOpen(!navOpen);
-  const intl = useIntl();
-
-  const navigationClasses = classnames(styles.sideNav, {
-    [styles.sideNavFixed]: navOpen,
-  });
-
-  const navElement = useRef<HTMLElement | null>(null);
-
-  const renderTitle = ({ title, slug, icon: Icon }: SideNavBarItem) => {
-    const titleContent = (
-      <>
-        {title}
-        {Icon && <Icon />}
-      </>
-    );
-
-    if (slug.startsWith('https')) {
-      return (
-        <a key={slug} href={slug} className={styles.sideNavSectionTitle}>
-          {titleContent}
-        </a>
-      );
-    }
-
-    return (
-      <Link key={slug} to={slug} className={styles.sideNavSectionTitle}>
-        {titleContent}
-      </Link>
-    );
-  };
-
-  // When clicking on a link gracefully close the Navigation
-  const onClick = () => setNavOpen(false);
-
-  const renderItem = ({ title, slug }: SideNavBarItem) => (
-    <NavigationItem
-      key={slug}
-      title={title}
-      isRead={false}
-      isActive={slug === pageKey}
-      slug={slug}
-      onClick={onClick}
-    />
-  );
-
-  const translatedSidebar = useMemo(
-    () =>
-      items.map(item => ({
-        ...item,
-        // Not all entries necessarily need to be translated
-        // As some are non-translatable bags
-        title: intl.messages[item.title]
-          ? intl.formatMessage({ id: item.title })
-          : item.title,
-      })),
-    [intl, items]
-  );
-
-  return (
-    <nav className={navigationClasses} ref={navElement}>
-      <button type="button" className={styles.sideNavOpen} onClick={toggle}>
-        <FormattedMessage id="components.sideBar.title" />
-      </button>
-      <div className={styles.sideNavSection}>
-        {translatedSidebar.map(({ isTitle, ...props }) =>
-          isTitle ? renderTitle(props) : renderItem(props)
-        )}
-      </div>
-    </nav>
-  );
-};
-
-export default SideNavBar;
diff --git a/src/components/TableOfContents/index.module.scss b/src/components/TableOfContents/index.module.scss
index 14aff49e..d1585f9c 100644
--- a/src/components/TableOfContents/index.module.scss
+++ b/src/components/TableOfContents/index.module.scss
@@ -1,9 +1,13 @@
 .table-of-contents {
+  background-color: var(--color-fill-banner);
+  border-radius: 5px;
   cursor: pointer;
+  padding: var(--space-12);
 
   strong {
+    color: var(--color-text-secondary);
     display: inline-block;
-    font-size: var(--font-size-body3);
+    font-size: var(--font-size-body2);
     margin: 0;
     text-transform: uppercase;
   }
@@ -13,6 +17,7 @@
   }
 
   ul {
+    margin: var(--space-04) 0 0 0;
     padding: var(--space-08) 0 0 var(--space-24);
 
     li {
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index b41d8db1..41a6324f 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -36,7 +36,7 @@ const traverseTableOfContents = (
 };
 
 const TableOfContents = ({ tableOfContents }: Props): JSX.Element => {
-  if (tableOfContents) {
+  if (tableOfContents.length) {
     return (
       <details className={styles.tableOfContents}>
         <summary>
diff --git a/src/components/connectGraphQlArticle.tsx b/src/components/connectGraphQlArticle.tsx
index a27ca587..d0671be0 100644
--- a/src/components/connectGraphQlArticle.tsx
+++ b/src/components/connectGraphQlArticle.tsx
@@ -2,15 +2,16 @@ import React from 'react';
 import { useLocalization } from 'gatsby-theme-i18n';
 import { ArticleData } from '../types';
 import { ArticleLayoutProps } from './Layout/article';
-import { SideNavBarKeys } from './SideNavBar';
+import { AboutNavigationKeys } from '../types/pages/about';
 
 interface PageDefaultProps {
   editPath?: string;
-  sidenavKey?: SideNavBarKeys;
+  currentSlug?: AboutNavigationKeys;
   // We explicitly want to allow them to pass any data here that comes from the props
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   articleContent?: (props: any) => JSX.Element;
   childrenPosition?: 'before' | 'after';
+  hideArticleComponents?: boolean;
 }
 
 interface ParseGraphqlProps<T extends object> {
@@ -98,6 +99,13 @@ const connectGraphQlArticle = (
       ...extraData,
     };
 
+    // In some pages we don't want to show these extra components
+    // Like, for example, the about pages that aren't really "articles"
+    if (articleLayoutProps.hideArticleComponents) {
+      articleLayoutProps.tableOfContents = undefined;
+      articleLayoutProps.authors = [];
+    }
+
     // Attempt to modify the editPath adding the locale prefix to the extension file
     // If the current Article is fallbacking in the current language, it creates an opportunity
     // for adding the file on the desired language :)
@@ -112,7 +120,7 @@ const connectGraphQlArticle = (
         authors={articleLayoutProps.authors}
         body={articleLayoutProps.body}
         tableOfContents={articleLayoutProps.tableOfContents}
-        sidenavKey={articleLayoutProps.sidenavKey}
+        currentSlug={articleLayoutProps.currentSlug}
         childrenPosition={articleLayoutProps.childrenPosition}
         editPath={editPath}
       >
diff --git a/src/containers/AuthorList/index.module.scss b/src/containers/AuthorList/index.module.scss
index 6e110ea4..750edc05 100644
--- a/src/containers/AuthorList/index.module.scss
+++ b/src/containers/AuthorList/index.module.scss
@@ -2,9 +2,10 @@
   color: var(--color-text-secondary);
   display: flex;
   flex-direction: column;
-  font-size: 1.4rem;
-  font-weight: var(--font-weight-regular);
-  margin: 5rem 0 2.5rem;
+  font-size: var(--font-size-body2);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-24);
+  max-width: 600px;
   text-transform: uppercase;
 
   ul {
diff --git a/src/containers/AuthorList/index.tsx b/src/containers/AuthorList/index.tsx
index e4e0d9c5..6c3f0938 100644
--- a/src/containers/AuthorList/index.tsx
+++ b/src/containers/AuthorList/index.tsx
@@ -7,18 +7,24 @@ interface Props {
   authors: string[];
 }
 
-const AuthorList = ({ authors }: Props): null | JSX.Element => (
-  <div className={styles.authorList}>
-    <FormattedMessage id="containers.authorList.title" />
-    <ul>
-      {authors.map(
-        (author, i): string | JSX.Element =>
-          author && (
-            <Author index={i} username={author} key={author} size="60" />
-          )
-      )}
-    </ul>
-  </div>
-);
+const AuthorList = ({ authors }: Props): JSX.Element => {
+  if (authors.length) {
+    return (
+      <div className={styles.authorList}>
+        <FormattedMessage id="containers.authorList.title" />
+        <ul>
+          {authors.map(
+            (author, i): string | JSX.Element =>
+              author && (
+                <Author index={i} username={author} key={author} size="60" />
+              )
+          )}
+        </ul>
+      </div>
+    );
+  }
+
+  return <div />;
+};
 
 export default AuthorList;
diff --git a/src/containers/BlogContainer/index.tsx b/src/containers/BlogContainer/index.tsx
deleted file mode 100644
index 6ecb85a4..00000000
--- a/src/containers/BlogContainer/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import FeedIcon from '@mui/icons-material/Feed';
-import BlogCard from '../../components/BlogCard';
-import SideNavBar from '../../components/SideNavBar';
-import { BlogPost, BlogCategory } from '../../types';
-import styles from './index.module.scss';
-
-const blogSectionTitle = {
-  title: 'components.sideBar.section.blog',
-  slug: '/blog/',
-  icon: FeedIcon,
-  isTitle: true,
-};
-
-const parseNavigationData = (categories: BlogCategory[]) =>
-  categories.map(({ node }) => ({
-    title: node.slug,
-    slug: `/blog/${node.name}/`,
-  }));
-
-type Props = {
-  posts: BlogPost[];
-  categories: BlogCategory[];
-  currentCategory: BlogCategory['node'];
-};
-
-const BlogContainer = ({ categories, posts, currentCategory }: Props) => (
-  <>
-    <SideNavBar
-      items={[blogSectionTitle, ...parseNavigationData(categories)]}
-      pageKey={`/blog/${currentCategory.name}/`}
-    />
-    <div className={styles.blogGridContainer}>
-      <div className={styles.blogCategoryHeader}>
-        <h2>{currentCategory.slug}</h2>
-        <span>{currentCategory.description}</span>
-      </div>
-      <div className={styles.blogItems}>
-        {posts.map(edge => (
-          <BlogCard key={edge.node.fields.slug} data={edge} />
-        ))}
-      </div>
-    </div>
-  </>
-);
-
-export default BlogContainer;
diff --git a/src/containers/Navigation/index.tsx b/src/containers/Navigation/index.tsx
deleted file mode 100644
index 29de1955..00000000
--- a/src/containers/Navigation/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import classnames from 'classnames';
-import NavigationSection from '../../components/NavigationSection';
-import { NavigationSectionData, NavigationSectionItem } from '../../types';
-import styles from './index.module.scss';
-
-interface Props {
-  sections: NavigationSectionData;
-  currentSlug: string;
-  label: string;
-  category: string;
-  isApiDocs?: boolean;
-  children?: JSX.Element;
-}
-
-const Navigation = ({
-  sections,
-  currentSlug,
-  label,
-  category,
-  isApiDocs,
-  children,
-}: Props): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = (): void => setIsOpen(!isOpen);
-
-  const navigationClasses = classnames(styles.navigation, {
-    [styles.navigationFixed]: isOpen,
-  });
-
-  const readSections: Set<NavigationSectionItem['slug']> = new Set();
-
-  // Assume section items up to the one currently open have been read. Track
-  // their unique slugs in `readSections` set.
-  Object.keys(sections).some(sectionKey => {
-    let isCurrentSlug = false;
-    sections[sectionKey].data.some((sectionItem): boolean => {
-      isCurrentSlug = sectionItem.slug === currentSlug;
-
-      if (!isCurrentSlug) {
-        readSections.add(sectionItem.slug);
-      }
-
-      return isCurrentSlug;
-    });
-
-    return isCurrentSlug;
-  });
-
-  // When clicking on a link gracefully close the Navigation
-  const onClick = () => setIsOpen(false);
-
-  return (
-    <nav aria-label={label} className={navigationClasses}>
-      <button
-        type="button"
-        className={styles.navigationOpen}
-        onClick={toggle}
-        aria-expanded={isOpen}
-      >
-        <FormattedMessage id="containers.navigation.title" />
-      </button>
-      {children}
-      {Object.keys(sections).map(
-        (sectionKey: string): false | JSX.Element =>
-          sections[sectionKey].category === category && (
-            <NavigationSection
-              key={sectionKey}
-              title={sectionKey}
-              section={sections[sectionKey].data}
-              currentSlug={currentSlug}
-              readSections={readSections}
-              isApiDocs={isApiDocs}
-              onClick={onClick}
-            />
-          )
-      )}
-    </nav>
-  );
-};
-
-export default Navigation;
diff --git a/src/data/blog/categories.yaml b/src/data/blog/categories.yaml
index 2a833ffa..3144090e 100644
--- a/src/data/blog/categories.yaml
+++ b/src/data/blog/categories.yaml
@@ -1,9 +1,9 @@
 - name: announcements
-  slug: Announcements
-  description: 'Blog category for Node.js announcements'
+  slug: blog.categories.announcements
+  description: blog.categories.announcements.description
 - name: release
-  slug: Node.js Releases
-  description: 'Blog category for Node.js Release announcements'
-- name: vulnerabilities
-  slug: Vulnerabilities
-  description: 'Blog category regarding Security Vulnerabilities'
+  slug: blog.categories.release
+  description: blog.categories.release.description
+- name: vulnerability
+  slug: blog.categories.vulnerability
+  description: blog.categories.vulnerability.description
diff --git a/src/hooks/useNavigationContainer.tsx b/src/hooks/useNavigationContainer.tsx
new file mode 100644
index 00000000..00446fd2
--- /dev/null
+++ b/src/hooks/useNavigationContainer.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import Navigation from '../components/Navigation';
+import type { NavigationData, NavigationItemData } from '../types';
+
+type SectionTuple = [string, NavigationItemData[]][];
+
+export const useNavigationContainer = (label: string) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(!isOpen);
+
+  // When clicking on a link gracefully close the Navigation
+  const onClick = () => setIsOpen(false);
+
+  const renderContainer = ({ children }: React.PropsWithChildren) => (
+    <Navigation isOpen={isOpen} toggleNavigation={toggle} label={label}>
+      {children}
+    </Navigation>
+  );
+
+  const renderSections = (sections: NavigationData): SectionTuple =>
+    Object.keys(sections).map(key => [key, sections[key]]);
+
+  return { onClick, renderContainer, renderSections };
+};
diff --git a/src/hooks/useNavigationSection.ts b/src/hooks/useNavigationSection.ts
new file mode 100644
index 00000000..4c529ed4
--- /dev/null
+++ b/src/hooks/useNavigationSection.ts
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import type { NavigationItemData } from '../types';
+
+interface Props {
+  section: NavigationItemData[];
+  currentSlug: string;
+}
+
+export const useNavigationSection = ({ section, currentSlug }: Props) => {
+  const isActive = (item: NavigationItemData) => item.slug === currentSlug;
+
+  const [isOpen, setIsOpen] = useState(section.some(isActive));
+  const toggle = (): void => setIsOpen(!isOpen);
+
+  return { toggleSection: toggle, isSectionOpen: isOpen };
+};
diff --git a/src/hooks/useReadSections.ts b/src/hooks/useReadSections.ts
new file mode 100644
index 00000000..d51864f5
--- /dev/null
+++ b/src/hooks/useReadSections.ts
@@ -0,0 +1,30 @@
+import type { NavigationData, NavigationItemData } from '../types';
+
+interface Props {
+  sections: NavigationData;
+  currentSlug: string;
+}
+
+export const useReadSections = ({ sections, currentSlug }: Props) => {
+  const readSections: Set<NavigationItemData['slug']> = new Set();
+
+  // Assume section items up to the one currently open have been read. Track
+  // their unique slugs in `readSections` set.
+  Object.keys(sections).some(sectionKey => {
+    let isCurrentSlug = false;
+
+    sections[sectionKey].some(sectionItem => {
+      isCurrentSlug = sectionItem.slug === currentSlug;
+
+      if (!isCurrentSlug) {
+        readSections.add(sectionItem.slug);
+      }
+
+      return isCurrentSlug;
+    });
+
+    return isCurrentSlug;
+  });
+
+  return { isRead: (slug: string) => readSections.has(slug) };
+};
diff --git a/src/hooks/useScrollToElement.ts b/src/hooks/useScrollToElement.ts
new file mode 100644
index 00000000..a9497b85
--- /dev/null
+++ b/src/hooks/useScrollToElement.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { scroller } from 'react-scroll';
+
+interface Props {
+  element: string;
+  isActive?: boolean;
+  containerId?: string;
+  smooth?: boolean;
+  offset?: number;
+}
+
+export const useScrollToElement = ({ element, isActive, ...p }: Props) => {
+  useEffect(
+    () => (isActive ? scroller.scrollTo(element, p) : undefined),
+    [isActive]
+  );
+};
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index d1f52587..bdb5d094 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -44,14 +44,7 @@
   "components.searchBar.placeholder": "Search",
   "components.searchBar.search.title": "Start typing to Search",
   "components.searchBar.search.noResults": "No results match your query.",
-  "components.sideBar.title": "Menu",
-  "components.sideBar.items.governance": "Project Governance",
-  "components.sideBar.items.releases": "Releases",
-  "components.sideBar.items.resources": "Resources",
-  "components.sideBar.items.privacy": "Privacy Policy",
-  "components.sideBar.items.security": "Security Reporting",
-  "components.sideBar.items.packageManager": "Package Manager",
-  "containers.authorList.title": "Contributors",
+  "containers.authorList.title": "Article Authors",
   "containers.navigation.title": "Menu",
   "pages.download.description": "Download the Node.js source code, a pre-built installer for your platform, or install via a",
   "pages.download.packageManager": "package manager",
@@ -78,13 +71,26 @@
   "docs.api.stability": "Stability: {level}{text}",
   "components.header.links.about": "About",
   "components.header.links.certification": "Certification",
-  "components.sideBar.section.about": "About Node.js",
-  "components.sideBar.section.getInvolved": "Get Involved",
-  "components.sideBar.items.collabSummit": "Collab Summit",
-  "components.sideBar.items.contribute": "Contribute",
-  "components.sideBar.section.download": "Download",
-  "components.sideBar.items.previousReleases": "Previous Releases",
-  "components.sideBar.items.codeOfConduct": "Code of Conduct",
-  "components.sideBar.section.blog": "Node.js Blog",
-  "components.author.githubLinkLabel": "{username} Github - opens in new tab"
+  "components.author.githubLinkLabel": "{username} Github - opens in new tab",
+  "navigation.about.section.about": "About Node.js",
+  "navigation.about.section.getInvolved": "Get Involved",
+  "navigation.about.section.download": "Download",
+  "navigation.about.items.collabSummit": "Collab Summit",
+  "navigation.about.items.contribute": "Contribute",
+  "navigation.about.items.previousReleases": "Previous Releases",
+  "navigation.about.items.codeOfConduct": "Code of Conduct",
+  "navigation.about.items.governance": "Project Governance",
+  "navigation.about.items.releases": "Releases",
+  "navigation.about.items.resources": "Resources",
+  "navigation.about.items.privacy": "Privacy Policy",
+  "navigation.about.items.security": "Security Reporting",
+  "navigation.about.items.packageManager": "Package Manager",
+  "navigation.blog.categories": "Categories",
+  "blog.categories.all": "Everything",
+  "blog.categories.announcements": "Announcements",
+  "blog.categories.release": "Releases",
+  "blog.categories.vulnerability": "Vulnerabilities",
+  "blog.categories.announcements.description": "Blog category for Node.js announcements",
+  "blog.categories.release.description": "Blog category for Node.js Release announcements",
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
 }
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index d1f52587..bdb5d094 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -44,14 +44,7 @@
   "components.searchBar.placeholder": "Search",
   "components.searchBar.search.title": "Start typing to Search",
   "components.searchBar.search.noResults": "No results match your query.",
-  "components.sideBar.title": "Menu",
-  "components.sideBar.items.governance": "Project Governance",
-  "components.sideBar.items.releases": "Releases",
-  "components.sideBar.items.resources": "Resources",
-  "components.sideBar.items.privacy": "Privacy Policy",
-  "components.sideBar.items.security": "Security Reporting",
-  "components.sideBar.items.packageManager": "Package Manager",
-  "containers.authorList.title": "Contributors",
+  "containers.authorList.title": "Article Authors",
   "containers.navigation.title": "Menu",
   "pages.download.description": "Download the Node.js source code, a pre-built installer for your platform, or install via a",
   "pages.download.packageManager": "package manager",
@@ -78,13 +71,26 @@
   "docs.api.stability": "Stability: {level}{text}",
   "components.header.links.about": "About",
   "components.header.links.certification": "Certification",
-  "components.sideBar.section.about": "About Node.js",
-  "components.sideBar.section.getInvolved": "Get Involved",
-  "components.sideBar.items.collabSummit": "Collab Summit",
-  "components.sideBar.items.contribute": "Contribute",
-  "components.sideBar.section.download": "Download",
-  "components.sideBar.items.previousReleases": "Previous Releases",
-  "components.sideBar.items.codeOfConduct": "Code of Conduct",
-  "components.sideBar.section.blog": "Node.js Blog",
-  "components.author.githubLinkLabel": "{username} Github - opens in new tab"
+  "components.author.githubLinkLabel": "{username} Github - opens in new tab",
+  "navigation.about.section.about": "About Node.js",
+  "navigation.about.section.getInvolved": "Get Involved",
+  "navigation.about.section.download": "Download",
+  "navigation.about.items.collabSummit": "Collab Summit",
+  "navigation.about.items.contribute": "Contribute",
+  "navigation.about.items.previousReleases": "Previous Releases",
+  "navigation.about.items.codeOfConduct": "Code of Conduct",
+  "navigation.about.items.governance": "Project Governance",
+  "navigation.about.items.releases": "Releases",
+  "navigation.about.items.resources": "Resources",
+  "navigation.about.items.privacy": "Privacy Policy",
+  "navigation.about.items.security": "Security Reporting",
+  "navigation.about.items.packageManager": "Package Manager",
+  "navigation.blog.categories": "Categories",
+  "blog.categories.all": "Everything",
+  "blog.categories.announcements": "Announcements",
+  "blog.categories.release": "Releases",
+  "blog.categories.vulnerability": "Vulnerabilities",
+  "blog.categories.announcements.description": "Blog category for Node.js announcements",
+  "blog.categories.release.description": "Blog category for Node.js Release announcements",
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
 }
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 8b56482a..da9fbaa0 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -44,13 +44,6 @@
   "components.searchBar.placeholder": "Search",
   "components.searchBar.search.title": "Commencez à taper pour rechercher",
   "components.searchBar.search.noResults": "Aucun résultat ne correspond à votre requête.",
-  "components.sideBar.title": "Menu",
-  "components.sideBar.items.governance": "Gouvernance de projet",
-  "components.sideBar.items.releases": "Sorties",
-  "components.sideBar.items.resources": "Ressources",
-  "components.sideBar.items.privacy": "Politique de confidentialité",
-  "components.sideBar.items.security": "Rapports de sécurité",
-  "components.sideBar.items.packageManager": "Gestionnaire de paquets",
   "containers.authorList.title": "Contributeurs",
   "containers.navigation.title": "Menu",
   "pages.download.description": "Téléchargez le code source de Node.js, un programme d'installation préconstruit pour votre plateforme, ou installez via un programme d'installation.",
@@ -78,13 +71,26 @@
   "docs.api.stability": "Stabilité: {level}{text}",
   "components.header.links.about": "A propos de",
   "components.header.links.certification": "Certification",
-  "components.sideBar.section.about": "A propos de Node.js",
-  "components.sideBar.section.getInvolved": "S'impliquer",
-  "components.sideBar.items.collabSummit": "Sommet de la collaboration",
-  "components.sideBar.items.contribute": "Contribuer",
-  "components.sideBar.section.download": "Télécharger",
-  "components.sideBar.items.previousReleases": "Anciennes versions",
-  "components.sideBar.items.codeOfConduct": "Code de conduite",
-  "components.sideBar.section.blog": "Node.js Blog",
-  "components.author.githubLinkLabel": "{username} Github - opens in new tab"
+  "components.author.githubLinkLabel": "{username} Github - opens in new tab",
+  "navigation.about.section.about": "About Node.js",
+  "navigation.about.section.getInvolved": "Get Involved",
+  "navigation.about.section.download": "Download",
+  "navigation.about.items.collabSummit": "Collab Summit",
+  "navigation.about.items.contribute": "Contribute",
+  "navigation.about.items.previousReleases": "Previous Releases",
+  "navigation.about.items.codeOfConduct": "Code of Conduct",
+  "navigation.about.items.governance": "Project Governance",
+  "navigation.about.items.releases": "Releases",
+  "navigation.about.items.resources": "Resources",
+  "navigation.about.items.privacy": "Privacy Policy",
+  "navigation.about.items.security": "Security Reporting",
+  "navigation.about.items.packageManager": "Package Manager",
+  "navigation.blog.categories": "Categories",
+  "blog.categories.all": "Everything",
+  "blog.categories.announcements": "Announcements",
+  "blog.categories.release": "Releases",
+  "blog.categories.vulnerability": "Vulnerabilities",
+  "blog.categories.announcements.description": "Blog category for Node.js announcements",
+  "blog.categories.release.description": "Blog category for Node.js Release announcements",
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
 }
diff --git a/src/i18n/locales/zh-cn.json b/src/i18n/locales/zh-cn.json
index d3f31328..8cc53c7a 100644
--- a/src/i18n/locales/zh-cn.json
+++ b/src/i18n/locales/zh-cn.json
@@ -44,13 +44,6 @@
   "components.searchBar.placeholder": "搜索",
   "components.searchBar.search.title": "输入关键字开始搜索",
   "components.searchBar.search.noResults": "没有搜索结果",
-  "components.sideBar.title": "菜单",
-  "components.sideBar.items.governance": "项目治理",
-  "components.sideBar.items.releases": "发行",
-  "components.sideBar.items.resources": "资源",
-  "components.sideBar.items.privacy": "隐私政策",
-  "components.sideBar.items.security": "安全报告",
-  "components.sideBar.items.packageManager": "包管理器",
   "containers.authorList.title": "贡献者",
   "containers.navigation.title": "菜单",
   "pages.download.description": "下载 Node.js 源代码、为你的平台构建好的安装程序、或通过",
@@ -78,13 +71,26 @@
   "docs.api.stability": "稳定: {level}{text}",
   "components.header.links.about": "关于",
   "components.header.links.certification": "认证",
-  "components.sideBar.section.about": "关于 Node.js",
-  "components.sideBar.section.getInvolved": "参与",
-  "components.sideBar.items.collabSummit": "Collab Summit",
-  "components.sideBar.items.contribute": "贡献",
-  "components.sideBar.section.download": "下载",
-  "components.sideBar.items.previousReleases": "以前的版本",
-  "components.sideBar.items.codeOfConduct": "行为准则",
-  "components.sideBar.section.blog": "Node.js 博客",
-  "components.author.githubLinkLabel": "{username} Github - opens in new tab"
+  "components.author.githubLinkLabel": "{username} Github - opens in new tab",
+  "navigation.about.section.about": "About Node.js",
+  "navigation.about.section.getInvolved": "Get Involved",
+  "navigation.about.section.download": "Download",
+  "navigation.about.items.collabSummit": "Collab Summit",
+  "navigation.about.items.contribute": "Contribute",
+  "navigation.about.items.previousReleases": "Previous Releases",
+  "navigation.about.items.codeOfConduct": "Code of Conduct",
+  "navigation.about.items.governance": "Project Governance",
+  "navigation.about.items.releases": "Releases",
+  "navigation.about.items.resources": "Resources",
+  "navigation.about.items.privacy": "Privacy Policy",
+  "navigation.about.items.security": "Security Reporting",
+  "navigation.about.items.packageManager": "Package Manager",
+  "navigation.blog.categories": "Categories",
+  "blog.categories.all": "Everything",
+  "blog.categories.announcements": "Announcements",
+  "blog.categories.release": "Releases",
+  "blog.categories.vulnerability": "Vulnerabilities",
+  "blog.categories.announcements.description": "Blog category for Node.js announcements",
+  "blog.categories.release.description": "Blog category for Node.js Release announcements",
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
 }
diff --git a/src/navigations/about.module.scss b/src/navigations/about.module.scss
new file mode 100644
index 00000000..61323e8a
--- /dev/null
+++ b/src/navigations/about.module.scss
@@ -0,0 +1,14 @@
+@import '../components/NavigationItem/index.module.scss';
+@import '../components/NavigationSection/index.module.scss';
+
+.title {
+  @extend %navigation-item--with-bullet;
+  @extend %navigation-section-title;
+
+  padding-bottom: 0;
+
+  &::before,
+  &:hover::before {
+    box-shadow: inset 0 0 0 3px var(--color-text-primary);
+  }
+}
diff --git a/src/navigations/about.tsx b/src/navigations/about.tsx
new file mode 100644
index 00000000..838b52f1
--- /dev/null
+++ b/src/navigations/about.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import classnames from 'classnames';
+import NavigationItem from '../components/NavigationItem';
+import NavigationSection from '../components/NavigationSection';
+import { useNavigationContainer } from '../hooks/useNavigationContainer';
+import { AboutNavigationKeys } from '../types/pages/about';
+import { NavigationSectionData } from '../types';
+import styles from './about.module.scss';
+
+const aboutNavigation = {
+  'navigation.about.section.about': [
+    {
+      title: 'navigation.about.section.about',
+      slug: AboutNavigationKeys.about,
+    },
+    {
+      title: 'navigation.about.items.governance',
+      slug: AboutNavigationKeys.governance,
+    },
+    {
+      title: 'navigation.about.items.releases',
+      slug: AboutNavigationKeys.releases,
+    },
+    {
+      title: 'navigation.about.items.resources',
+      slug: AboutNavigationKeys.resources,
+    },
+    {
+      title: 'navigation.about.items.privacy',
+      slug: AboutNavigationKeys.privacy,
+    },
+    {
+      title: 'navigation.about.items.security',
+      slug: AboutNavigationKeys.security,
+    },
+  ],
+  'navigation.about.section.getInvolved': [
+    {
+      title: 'navigation.about.section.getInvolved',
+      slug: AboutNavigationKeys.getInvolved,
+    },
+    {
+      title: 'navigation.about.items.collabSummit',
+      slug: AboutNavigationKeys.collabSummit,
+    },
+    {
+      title: 'navigation.about.items.contribute',
+      slug: AboutNavigationKeys.contribute,
+    },
+    {
+      title: 'navigation.about.items.codeOfConduct',
+      slug: AboutNavigationKeys.codeOfConduct,
+    },
+  ],
+  'navigation.about.section.download': [
+    {
+      title: 'navigation.about.section.download',
+      slug: AboutNavigationKeys.download,
+    },
+    {
+      title: 'navigation.about.items.packageManager',
+      slug: AboutNavigationKeys.packageManager,
+    },
+    {
+      title: 'navigation.about.items.previousReleases',
+      slug: AboutNavigationKeys.previousReleases,
+    },
+  ],
+};
+
+const AboutNavigationSection = ({
+  title,
+  children,
+}: React.PropsWithChildren<NavigationSectionData>) => {
+  const titleClassNames = classnames('t-body2', styles.title);
+
+  const sectionTitle = (
+    <button type="button" className={titleClassNames} aria-expanded>
+      <span>{title}</span>
+    </button>
+  );
+
+  return (
+    <NavigationSection
+      isOpen
+      label={title}
+      title={sectionTitle}
+      content={children}
+    />
+  );
+};
+
+interface Props {
+  currentSlug: string;
+}
+
+const AboutNavigation = ({ currentSlug }: Props) => {
+  const { onClick, renderContainer, renderSections } =
+    useNavigationContainer('About Navigation');
+
+  const intl = useIntl();
+
+  const navigationSections = renderSections(aboutNavigation).map(
+    ([key, data]) => (
+      <AboutNavigationSection
+        key={key}
+        title={intl.formatMessage({ id: key })}
+        section={data}
+        currentSlug={currentSlug}
+      >
+        {data.map(item => (
+          <NavigationItem
+            key={item.slug}
+            title={intl.formatMessage({ id: item.title })}
+            slug={item.slug}
+            isActive={item.slug === currentSlug}
+            onClick={onClick}
+          />
+        ))}
+      </AboutNavigationSection>
+    )
+  );
+
+  return renderContainer({ children: navigationSections });
+};
+
+export default AboutNavigation;
diff --git a/src/navigations/api.module.scss b/src/navigations/api.module.scss
new file mode 100644
index 00000000..2928974f
--- /dev/null
+++ b/src/navigations/api.module.scss
@@ -0,0 +1,27 @@
+@import '../components/NavigationSection/index.module.scss';
+
+.title {
+  @extend %navigation-section-title;
+  margin: 0;
+
+  padding-bottom: 0;
+  padding-left: 0;
+
+  > span svg {
+    font-size: 20px;
+    padding-left: 0;
+  }
+
+  > svg {
+    padding: 0;
+  }
+}
+
+.item {
+  margin: 0 0 0 var(--space-32);
+  overflow: hidden;
+  padding: var(--space-08) 0 0 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/navigations/api.tsx b/src/navigations/api.tsx
new file mode 100644
index 00000000..6543e2ed
--- /dev/null
+++ b/src/navigations/api.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import classnames from 'classnames';
+import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
+import NavigationItem from '../components/NavigationItem';
+import NavigationSection from '../components/NavigationSection';
+import { useNavigationContainer } from '../hooks/useNavigationContainer';
+import { NavigationData, NavigationSectionData } from '../types';
+import styles from './api.module.scss';
+
+interface Props {
+  sections: NavigationData;
+  currentSlug: string;
+}
+
+const ApiNavigationSection = ({
+  title,
+  children,
+}: React.PropsWithChildren<NavigationSectionData>) => {
+  const titleClassNames = classnames('t-body2', styles.title);
+
+  const sectionTitle = (
+    <button type="button" className={titleClassNames} aria-expanded>
+      <span>
+        <OfflineBoltIcon />
+        {title}
+      </span>
+    </button>
+  );
+
+  return (
+    <NavigationSection
+      isOpen
+      label={title}
+      title={sectionTitle}
+      content={children}
+    />
+  );
+};
+
+const ApiNavigation = ({
+  sections,
+  children,
+  currentSlug,
+}: React.PropsWithChildren<Props>) => {
+  const { onClick, renderContainer, renderSections } =
+    useNavigationContainer('API Navigation');
+
+  const navigationSections = renderSections(sections).map(([key, data]) => (
+    <ApiNavigationSection
+      key={key}
+      title={key}
+      section={data}
+      currentSlug={currentSlug}
+    >
+      {data.map(item => (
+        <NavigationItem
+          key={item.slug}
+          title={item.title}
+          slug={item.slug}
+          isActive={item.slug === currentSlug}
+          extraClasses={styles.item}
+          onClick={onClick}
+        />
+      ))}
+    </ApiNavigationSection>
+  ));
+
+  return renderContainer({
+    children: (
+      <>
+        {children}
+        {navigationSections}
+      </>
+    ),
+  });
+};
+
+export default ApiNavigation;
diff --git a/src/navigations/blog.module.scss b/src/navigations/blog.module.scss
new file mode 100644
index 00000000..1e517dd6
--- /dev/null
+++ b/src/navigations/blog.module.scss
@@ -0,0 +1,14 @@
+.title {
+  display: block;
+  margin-bottom: var(--space-12);
+}
+
+.item {
+  margin: 0;
+  padding: var(--space-12);
+
+  &--active {
+    background-color: var(--color-fill-banner);
+    border-radius: 5px;
+  }
+}
diff --git a/src/navigations/blog.tsx b/src/navigations/blog.tsx
new file mode 100644
index 00000000..4ed8a93d
--- /dev/null
+++ b/src/navigations/blog.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import classnames from 'classnames';
+import NavigationItem from '../components/NavigationItem';
+import NavigationSection from '../components/NavigationSection';
+import { useNavigationContainer } from '../hooks/useNavigationContainer';
+import { NavigationItemData } from '../types';
+import styles from './blog.module.scss';
+
+interface Props {
+  categories: NavigationItemData[];
+  currentCategory: string;
+}
+
+const BlogNavigation = ({ categories, currentCategory }: Props) => {
+  const { onClick, renderContainer } = useNavigationContainer('API Navigation');
+
+  const intl = useIntl();
+
+  const title = intl.formatMessage({ id: 'navigation.blog.categories' });
+
+  const getExtraClasses = (slug: string) =>
+    classnames(styles.item, {
+      [styles.itemActive]: slug === currentCategory,
+    });
+
+  const navigationContent = categories.map(item => (
+    <NavigationItem
+      key={item.slug}
+      title={intl.formatMessage({ id: item.title })}
+      slug={item.slug}
+      isActive={item.slug === currentCategory}
+      extraClasses={getExtraClasses(item.slug)}
+      onClick={onClick}
+    />
+  ));
+
+  const navigationTitle = <strong className={styles.title}>{title}</strong>;
+
+  return renderContainer({
+    children: (
+      <NavigationSection
+        isOpen
+        label={title}
+        title={navigationTitle}
+        content={navigationContent}
+      />
+    ),
+  });
+};
+
+export default BlogNavigation;
diff --git a/src/navigations/learn.module.scss b/src/navigations/learn.module.scss
new file mode 100644
index 00000000..c11b3be7
--- /dev/null
+++ b/src/navigations/learn.module.scss
@@ -0,0 +1,38 @@
+@import '../components/NavigationItem/index.module.scss';
+@import '../components/NavigationSection/index.module.scss';
+
+.title {
+  @extend %navigation-item--with-bullet;
+  @extend %navigation-section-title;
+
+  padding-bottom: 0;
+
+  &::before,
+  &:hover::before {
+    box-shadow: inset 0 0 0 3px var(--color-text-primary);
+  }
+
+  > svg {
+    color: var(--color-text-secondary);
+    height: 14px;
+    padding: 0 var(--space-24) 0 0;
+  }
+}
+
+.item {
+  @extend %navigation-item--with-bullet;
+  @extend %navigation-item--with-trail;
+
+  &--done::before {
+    content: $checkSvg;
+  }
+
+  &--done::before,
+  &--active::before {
+    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
+  }
+
+  &--done::after {
+    background: var(--color-border-accent);
+  }
+}
diff --git a/src/navigations/learn.tsx b/src/navigations/learn.tsx
new file mode 100644
index 00000000..8b22f05f
--- /dev/null
+++ b/src/navigations/learn.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import classnames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+import NavigationItem from '../components/NavigationItem';
+import NavigationSection from '../components/NavigationSection';
+import { useNavigationContainer } from '../hooks/useNavigationContainer';
+import { useNavigationSection } from '../hooks/useNavigationSection';
+import { useReadSections } from '../hooks/useReadSections';
+import { NavigationData, NavigationSectionData } from '../types';
+import styles from './learn.module.scss';
+
+const LearnNavigationSection = ({
+  title,
+  section,
+  children,
+  currentSlug,
+}: React.PropsWithChildren<NavigationSectionData>) => {
+  const { isSectionOpen, toggleSection } = useNavigationSection({
+    section,
+    currentSlug,
+  });
+
+  const titleClassNames = classnames('t-body2', styles.title);
+
+  const sectionTitle = (
+    <button
+      type="button"
+      className={titleClassNames}
+      onClick={toggleSection}
+      aria-expanded={isSectionOpen}
+    >
+      <span>{title}</span>
+      <FontAwesomeIcon icon={isSectionOpen ? faCaretDown : faCaretUp} />
+    </button>
+  );
+
+  return (
+    <NavigationSection
+      label={title}
+      isOpen={isSectionOpen}
+      title={sectionTitle}
+      content={children}
+    />
+  );
+};
+
+interface Props {
+  sections: NavigationData;
+  currentSlug: string;
+}
+
+const LearnNavigation = ({ sections, currentSlug }: Props) => {
+  const { isRead } = useReadSections({ sections, currentSlug });
+
+  const { onClick, renderContainer, renderSections } =
+    useNavigationContainer('Learn Navigation');
+
+  const getExtraClasses = (slug: string) =>
+    classnames(styles.item, {
+      [styles.itemActive]: slug === currentSlug,
+      [styles.itemDone]: isRead(slug),
+    });
+
+  const navigationSections = renderSections(sections).map(([key, data]) => (
+    <LearnNavigationSection
+      key={key}
+      title={key}
+      section={data}
+      currentSlug={currentSlug}
+    >
+      {data.map(item => (
+        <NavigationItem
+          key={item.slug}
+          title={item.title}
+          slug={item.slug}
+          isActive={item.slug === currentSlug}
+          extraClasses={getExtraClasses(item.slug)}
+          onClick={onClick}
+        />
+      ))}
+    </LearnNavigationSection>
+  ));
+
+  return renderContainer({ children: navigationSections });
+};
+
+export default LearnNavigation;
diff --git a/src/pages/about/governance.tsx b/src/pages/about/governance.tsx
index 2a35321e..110a286b 100644
--- a/src/pages/about/governance.tsx
+++ b/src/pages/about/governance.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/about/governance.md',
-  sidenavKey: SideNavBarKeys.governance,
+  currentSlug: AboutNavigationKeys.governance,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 3593bf17..d08ec1db 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/about/about.md',
-  sidenavKey: SideNavBarKeys.about,
+  currentSlug: AboutNavigationKeys.about,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/about/releases.tsx b/src/pages/about/releases.tsx
index efff68e4..56b85020 100644
--- a/src/pages/about/releases.tsx
+++ b/src/pages/about/releases.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { NodeReleaseData } from '../../types';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import DownloadTable from '../../components/DownloadReleases/DownloadTable';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { NodeReleaseData, AboutNavigationKeys } from '../../types';
 
 export interface ReleasesNodeReleases {
   nodeReleases: {
@@ -14,7 +13,8 @@ export interface ReleasesNodeReleases {
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/about/releases.md',
-  sidenavKey: SideNavBarKeys.releases,
+  currentSlug: AboutNavigationKeys.releases,
+  hideArticleComponents: true,
   articleContent: (props: ReleasesNodeReleases) => (
     <DownloadTable
       nodeReleasesData={props.nodeReleases.nodeReleasesData.filter(
diff --git a/src/pages/about/resources.tsx b/src/pages/about/resources.tsx
index 5ddcfe29..8f6fd144 100644
--- a/src/pages/about/resources.tsx
+++ b/src/pages/about/resources.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/about/resources.md',
-  sidenavKey: SideNavBarKeys.resources,
+  currentSlug: AboutNavigationKeys.resources,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/about/security.tsx b/src/pages/about/security.tsx
index ceca4dfc..f832ab23 100644
--- a/src/pages/about/security.tsx
+++ b/src/pages/about/security.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/about/security.md',
-  sidenavKey: SideNavBarKeys.security,
+  currentSlug: AboutNavigationKeys.security,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/download/package-manager.tsx b/src/pages/download/package-manager.tsx
index 1f3e531c..1f52957c 100644
--- a/src/pages/download/package-manager.tsx
+++ b/src/pages/download/package-manager.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/download/package-manager.md',
-  sidenavKey: SideNavBarKeys.packageManager,
+  currentSlug: AboutNavigationKeys.packageManager,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/download/releases.tsx b/src/pages/download/releases.tsx
index 76cf9ad4..ff23a3af 100644
--- a/src/pages/download/releases.tsx
+++ b/src/pages/download/releases.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { NodeReleaseData } from '../../types';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import DownloadTable from '../../components/DownloadReleases/DownloadTable';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { NodeReleaseData, AboutNavigationKeys } from '../../types';
 
 export interface ReleasesNodeReleases {
   nodeReleases: {
@@ -14,7 +13,8 @@ export interface ReleasesNodeReleases {
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/download/releases.md',
-  sidenavKey: SideNavBarKeys.previousReleases,
+  currentSlug: AboutNavigationKeys.previousReleases,
+  hideArticleComponents: true,
   articleContent: (props: ReleasesNodeReleases) => (
     <DownloadTable
       nodeReleasesData={props.nodeReleases.nodeReleasesData.filter(
diff --git a/src/pages/get-involved/collab-summit.tsx b/src/pages/get-involved/collab-summit.tsx
index bd2375c4..26e0cd24 100644
--- a/src/pages/get-involved/collab-summit.tsx
+++ b/src/pages/get-involved/collab-summit.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/get-involved/collab-summit.md',
-  sidenavKey: SideNavBarKeys.collabSummit,
+  currentSlug: AboutNavigationKeys.collabSummit,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/get-involved/contribute.tsx b/src/pages/get-involved/contribute.tsx
index 5fce7530..0914713b 100644
--- a/src/pages/get-involved/contribute.tsx
+++ b/src/pages/get-involved/contribute.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/get-involved/contribute.md',
-  sidenavKey: SideNavBarKeys.contribute,
+  currentSlug: AboutNavigationKeys.contribute,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/pages/get-involved/index.tsx b/src/pages/get-involved/index.tsx
index 9a36fc2f..9a8d88d4 100644
--- a/src/pages/get-involved/index.tsx
+++ b/src/pages/get-involved/index.tsx
@@ -1,11 +1,12 @@
 import { graphql } from 'gatsby';
 import ArticleLayout from '../../components/Layout/article';
-import { SideNavBarKeys } from '../../components/SideNavBar';
 import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
   editPath: 'content/get-involved/index.md',
-  sidenavKey: SideNavBarKeys.getInvolved,
+  currentSlug: AboutNavigationKeys.getInvolved,
+  hideArticleComponents: true,
 });
 
 export const query = graphql`
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 00000000..18d1dd0b
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,9 @@
+@mixin navigationItemBase {
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  list-style: none;
+  padding: calc(var(--space-12) / 2) 0 calc(var(--space-24) / 2) var(--space-08);
+  position: relative;
+  text-decoration: none;
+}
diff --git a/src/containers/BlogContainer/index.module.scss b/src/styles/templates/blog.module.scss
similarity index 52%
rename from src/containers/BlogContainer/index.module.scss
rename to src/styles/templates/blog.module.scss
index 101e576d..e536033b 100644
--- a/src/containers/BlogContainer/index.module.scss
+++ b/src/styles/templates/blog.module.scss
@@ -1,20 +1,30 @@
 .blog-grid-container {
   display: flex;
   flex-direction: column;
-  max-width: 840px;
+  max-width: 900px;
   padding: var(--space-80) 0 0 var(--space-128);
 
   @media (max-width: 900px) {
-    padding: 0 3rem;
+    padding: var(--space-24) 0;
   }
 
   .blog-category-header {
+    margin: 0 0 var(--space-40) 0;
+    padding: 0 var(--space-24) 0 0;
+
     @media (max-width: 900px) {
-      padding: 80px 0 0 20px;
+      margin: var(--space-24) 0 var(--space-24) 0;
+      padding: 0 var(--space-24);
     }
 
-    h2 {
-      margin: 0 0 20px 0;
+    h1 {
+      margin: 0;
+
+      @media (max-width: 900px) {
+        font-size: var(--font-size-display3);
+        line-height: 1.2;
+        margin-bottom: var(--space-12);
+      }
     }
   }
 
diff --git a/src/templates/api.tsx b/src/templates/api.tsx
index 396dc5c0..27154f0f 100644
--- a/src/templates/api.tsx
+++ b/src/templates/api.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import Article from '../components/Article';
 import Layout from '../components/Layout';
-import { getApiComponents, Components } from '../components/ApiComponents';
 import DataTag from '../components/DataTag';
-import Navigation from '../containers/Navigation';
-import {
+import SectionTitle from '../components/SectionTitle';
+import ApiNavigation from '../navigations/api';
+import { getApiComponents, Components } from '../components/ApiComponents';
+import { replaceDataTagFromString } from '../util/replaceDataTag';
+import type {
   ApiTemplateData,
   ApiTemplateContext,
   TableOfContentsItem,
 } from '../types';
-import SectionTitle from '../components/SectionTitle';
-import { replaceDataTagFromString } from '../util/replaceDataTag';
 import styles from '../styles/templates/api.module.scss';
 
 interface Props {
@@ -61,20 +61,14 @@ const Api = ({
   return (
     <Layout title={`${displayTitle} | Node.js ${version} API`}>
       <main className={styles.apiContainer}>
-        <Navigation
-          currentSlug={slug}
-          label="Secondary"
-          sections={navigationData}
-          category="api"
-          isApiDocs
-        >
+        <ApiNavigation sections={navigationData} currentSlug={slug}>
           <Components.VersionSelector
             releases={nodeReleasesData}
             selectedRelease={version}
             apiAvailableVersions={apiAvailableVersions}
             currentPage={title}
           />
-        </Navigation>
+        </ApiNavigation>
         <Article
           title={displayTitle}
           tableOfContents={filteredTableOfContets}
diff --git a/src/templates/blog.tsx b/src/templates/blog.tsx
index a1545e33..702701a8 100644
--- a/src/templates/blog.tsx
+++ b/src/templates/blog.tsx
@@ -1,8 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 import Layout from '../components/Layout';
-import { BlogTemplateContext } from '../types';
-import BlogContainer from '../containers/BlogContainer';
+import BlogCard from '../components/BlogCard';
+import BlockQuote from '../components/BlockQuote';
+import BlogNavigation from '../navigations/blog';
+import { blogPath } from '../../pathPrefixes';
+import { BlogCategory, BlogTemplateContext } from '../types';
+import styles from '../styles/templates/blog.module.scss';
+
+const blogHomeSection = {
+  title: 'blog.categories.all',
+  slug: blogPath,
+};
+
+const getCategoryName = (category: string) =>
+  category.length ? `${blogPath}${category}/` : blogPath;
+
+const parseNavigationData = (categories: BlogCategory[]) =>
+  categories.map(({ node }) => ({
+    title: node.slug,
+    slug: `${blogPath}${node.name}/`,
+  }));
 
 interface Props {
   pageContext: BlogTemplateContext;
@@ -12,20 +30,42 @@ const BlogTemplate = ({
   pageContext: { posts, category, categories },
   intl,
 }: Props & WrappedComponentProps): JSX.Element => {
-  const currentCategory = category || {
-    name: intl.formatMessage({ id: 'blog.title' }),
-    slug: intl.formatMessage({ id: 'blog.title' }),
-    description: intl.formatMessage({ id: 'blog.description' }),
-  };
+  const currentCategory = useMemo(() => {
+    if (category) {
+      return {
+        name: category.name,
+        slug: intl.formatMessage({ id: category.slug }),
+        description: intl.formatMessage({ id: category.description }),
+      };
+    }
+
+    return {
+      name: '',
+      slug: intl.formatMessage({ id: 'blog.title' }),
+      description: intl.formatMessage({ id: 'blog.description' }),
+    };
+  }, [category, intl]);
 
   return (
     <Layout title="Blogs at Nodejs">
       <main className="grid-container">
-        <BlogContainer
-          posts={posts}
-          categories={categories}
-          currentCategory={currentCategory}
+        <BlogNavigation
+          currentCategory={getCategoryName(currentCategory.name)}
+          categories={[blogHomeSection, ...parseNavigationData(categories)]}
         />
+        <div className={styles.blogGridContainer}>
+          <div className={styles.blogCategoryHeader}>
+            <h1>{currentCategory.slug}</h1>
+            <BlockQuote>
+              <span>{currentCategory.description}</span>
+            </BlockQuote>
+          </div>
+          <div className={styles.blogItems}>
+            {posts.map(edge => (
+              <BlogCard key={edge.node.fields.slug} data={edge} />
+            ))}
+          </div>
+        </div>
       </main>
     </Layout>
   );
diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx
index 99a66f7f..d273c8ce 100644
--- a/src/templates/learn.tsx
+++ b/src/templates/learn.tsx
@@ -2,7 +2,7 @@ import { graphql } from 'gatsby';
 import React from 'react';
 import Article from '../components/Article';
 import Layout from '../components/Layout';
-import Navigation from '../containers/Navigation';
+import LearnNavigation from '../navigations/learn';
 import { connectGraphQlCustom } from '../components/connectGraphQlArticle';
 import { LearnTemplateContext, LearnTemplateData } from '../types';
 
@@ -25,12 +25,7 @@ const LearnLayout = ({
 }: Props): JSX.Element => (
   <Layout title={displayTitle} description={description}>
     <main className="grid-container">
-      <Navigation
-        currentSlug={slug}
-        label="Secondary"
-        sections={navigationData}
-        category="learn"
-      />
+      <LearnNavigation sections={navigationData} currentSlug={slug} />
       <Article
         title={displayTitle}
         body={body}
diff --git a/src/types/article.ts b/src/types/article.ts
index 8127c93a..4d19aa84 100644
--- a/src/types/article.ts
+++ b/src/types/article.ts
@@ -2,7 +2,7 @@ import { PageTableOfContents } from './markdown';
 
 export interface ArticleData {
   body: string;
-  tableOfContents: PageTableOfContents;
+  tableOfContents: PageTableOfContents | undefined;
   frontmatter: {
     title: string;
     description: string;
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
index dc91ee65..75df27be 100644
--- a/src/types/navigation.ts
+++ b/src/types/navigation.ts
@@ -1,18 +1,14 @@
-import type SvgIcon from '@mui/material/SvgIcon';
-
-export interface NavigationSectionItem {
-  slug: string;
+export interface NavigationSectionData {
   title: string;
-  category: string;
+  section: NavigationItemData[];
+  currentSlug: string;
 }
 
-export interface NavigationSectionData {
-  [index: string]: { category: string; data: NavigationSectionItem[] };
+export interface NavigationItemData {
+  slug: string;
+  title: string;
 }
 
-export interface SideNavBarItem {
-  title: string;
-  slug: string;
-  icon?: typeof SvgIcon;
-  isTitle?: boolean;
+export interface NavigationData {
+  [index: string]: NavigationItemData[];
 }
diff --git a/src/types/pages/about.ts b/src/types/pages/about.ts
new file mode 100644
index 00000000..765291fc
--- /dev/null
+++ b/src/types/pages/about.ts
@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-shadow
+export enum AboutNavigationKeys {
+  about = '/about/',
+  governance = '/about/governance/',
+  releases = '/about/releases/',
+  resources = '/about/resources/',
+  privacy = 'https://privacy-policy.openjsf.org/',
+  security = '/about/security/',
+  getInvolved = '/get-involved/',
+  collabSummit = '/get-involved/collab-summit',
+  contribute = '/get-involved/contribute',
+  download = '/download/',
+  packageManager = '/download/package-manager/',
+  previousReleases = '/download/releases/',
+  codeOfConduct = 'https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md',
+}
diff --git a/src/types/pages/api.ts b/src/types/pages/api.ts
index 0656a25b..31f83418 100644
--- a/src/types/pages/api.ts
+++ b/src/types/pages/api.ts
@@ -1,5 +1,5 @@
 import { PageTableOfContents, PaginationInfo } from '../markdown';
-import { NavigationSectionData } from '../navigation';
+import { NavigationData } from '../navigation';
 import { NodeReleaseData } from '../releases';
 
 export interface ApiTemplateData {
@@ -20,7 +20,7 @@ export interface ApiTemplateContext {
   relativePath: string;
   next: PaginationInfo;
   previous: PaginationInfo;
-  navigationData: NavigationSectionData;
+  navigationData: NavigationData;
   nodeReleases: {
     nodeReleasesData: NodeReleaseData[];
     apiAvailableVersions: string[];
diff --git a/src/types/pages/index.ts b/src/types/pages/index.ts
index 14de759a..c9514977 100644
--- a/src/types/pages/index.ts
+++ b/src/types/pages/index.ts
@@ -7,3 +7,4 @@ export * from './api';
 export * from './learn';
 export * from './post';
 export * from './blog';
+export * from './about';
diff --git a/src/types/pages/learn.ts b/src/types/pages/learn.ts
index 55f58cab..88e74874 100644
--- a/src/types/pages/learn.ts
+++ b/src/types/pages/learn.ts
@@ -1,12 +1,12 @@
 import { PageTableOfContents, PaginationInfo } from '../markdown';
-import { NavigationSectionData } from '../navigation';
+import { NavigationData } from '../navigation';
 
 export interface LearnTemplateContext {
   slug: string;
   relativePath: string;
   next: PaginationInfo;
   previous: PaginationInfo;
-  navigationData: NavigationSectionData;
+  navigationData: NavigationData;
 }
 
 export interface LearnTemplateData {
diff --git a/src/types/pages/post.ts b/src/types/pages/post.ts
index 33a281c3..de6e86fa 100644
--- a/src/types/pages/post.ts
+++ b/src/types/pages/post.ts
@@ -1,6 +1,6 @@
 import { BlogPost, BlogPostAuthor } from '../blog';
 import { PaginationInfo } from '../markdown';
-import { NavigationSectionData } from '../navigation';
+import { NavigationData } from '../navigation';
 
 export interface PostTemplateData {
   mdx: {
@@ -16,6 +16,6 @@ export interface PostTemplateContext {
   relativePath: string;
   next: PaginationInfo;
   previous: PaginationInfo;
-  navigationData: NavigationSectionData;
+  navigationData: NavigationData;
   recent: BlogPost[];
 }
diff --git a/util-node/createApiPages.js b/util-node/createApiPages.js
index 587b14c2..b7a3392a 100644
--- a/util-node/createApiPages.js
+++ b/util-node/createApiPages.js
@@ -44,15 +44,12 @@ function createApiPages(apiEdges, apiTypes, nodeReleases) {
         .map(item => ({ ...item, category: 'api' }))
         .map(mapToNavigationData);
 
-      navigationData[entry.version][slug] = {
-        category: 'api',
-        // There might be small chances of duplication of entries, so we attempt
-        // to remove all the possible duplicates from the Navigation
-        // And then it sorts by the title of the entry
-        data: [...new Map(entries.map(v => [v.slug, v])).values()].sort(
-          (a, b) => a.title.localeCompare(b.title)
-        ),
-      };
+      // There might be small chances of duplication of entries, so we attempt
+      // to remove all the possible duplicates from the Navigation
+      // And then it sorts by the title of the entry
+      navigationData[entry.version][slug] = [
+        ...new Map(entries.map(v => [v.slug, v])).values(),
+      ].sort((a, b) => a.title.localeCompare(b.title));
     });
   });
 
diff --git a/util-node/createBlogPages.js b/util-node/createBlogPages.js
index 12e19d8b..47d8fffc 100644
--- a/util-node/createBlogPages.js
+++ b/util-node/createBlogPages.js
@@ -1,5 +1,16 @@
 const { iterateEdges } = require('./createPageUtils');
 
+function paginateBlogEdges(array, pageSize) {
+  return array.reduce((acc, val, i) => {
+    const idx = Math.floor(i / pageSize);
+    const page = acc[idx] || (acc[idx] = []);
+
+    page.push(val);
+
+    return acc;
+  }, []);
+}
+
 function createMarkdownPages(blogEdges) {
   const blogPages = iterateEdges(blogEdges, node => {
     const {
@@ -9,7 +20,24 @@ function createMarkdownPages(blogEdges) {
     return { readingTime, date };
   });
 
-  return { blogPages };
+  const blogPosts = blogEdges.map(({ node }) => ({
+    node: { frontmatter: node.frontmatter, fields: node.fields },
+  }));
+
+  const getBlogPostsByCategory = cat =>
+    cat && cat.length
+      ? blogPosts.filter(({ node }) => node.fields.categoryName === cat)
+      : blogPosts;
+
+  const getPaginatedPosts = category =>
+    paginateBlogEdges(getBlogPostsByCategory(category), 6);
+
+  return {
+    blogPages,
+    blogPosts,
+    getPaginatedPosts,
+    getBlogPostsByCategory,
+  };
 }
 
 module.exports = createMarkdownPages;
diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js
index 60c409e7..ee4aa46b 100644
--- a/util-node/createLearnPages.js
+++ b/util-node/createLearnPages.js
@@ -17,10 +17,7 @@ function createLearnPages(learnEdges, yamlNavigationData) {
 
   // Handles the Navigation Data only of Learn pages
   yamlNavigationData.forEach(({ section, items }) => {
-    navigationData[section] = {
-      category: 'learn',
-      data: [],
-    };
+    navigationData[section] = [];
 
     // This adds the items to the navigation section data based on the order defined within the YAML file
     // If the page doesn't exist it will be set as null and then removed via Array.filter()
@@ -32,7 +29,7 @@ function createLearnPages(learnEdges, yamlNavigationData) {
         .filter(edge => edge && edge.node)
     );
 
-    navigationData[section].data = iteratedPages.map(mapToNavigationData);
+    navigationData[section] = iteratedPages.map(mapToNavigationData);
 
     // Then we push them to the resulting learn pages object
     learnPages.push(...iteratedPages);
diff --git a/util-node/createPageUtils.js b/util-node/createPageUtils.js
index 7ef5c30c..097917d1 100644
--- a/util-node/createPageUtils.js
+++ b/util-node/createPageUtils.js
@@ -33,7 +33,6 @@ function mapToNavigationData(page) {
   return {
     title: page.displayTitle || page.title,
     slug: page.slug,
-    category: page.category,
   };
 }
 
diff --git a/util-node/createApiQuery.js b/util-node/queries/createApiQuery.js
similarity index 100%
rename from util-node/createApiQuery.js
rename to util-node/queries/createApiQuery.js
diff --git a/util-node/createBlogQuery.js b/util-node/queries/createBlogQuery.js
similarity index 86%
rename from util-node/createBlogQuery.js
rename to util-node/queries/createBlogQuery.js
index db48e776..c1556b49 100644
--- a/util-node/createBlogQuery.js
+++ b/util-node/queries/createBlogQuery.js
@@ -15,6 +15,11 @@ module.exports = `
         }
         frontmatter {
           title
+          category {
+            slug
+            name
+            description
+          }
           blogAuthors {
             id
             name
@@ -36,6 +41,7 @@ module.exports = `
       node {
         slug
         name
+        description
       }
     }
   }


Test patch:
diff --git a/src/components/Article/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Article/__tests__/__snapshots__/index.test.tsx.snap
index 91c57293..d9195bf2 100644
--- a/src/components/Article/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/Article/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,6 +10,42 @@ exports[`Article component renders correctly 1`] = `
     >
       test-title
     </h1>
+    <div
+      class="authorList"
+    >
+      Article Authors
+      <ul>
+        <li>
+          <a
+            aria-label="test-user1 Github - opens in new tab"
+            class="link"
+            href="https://github.com/test-user1"
+            rel="noopener noreferrer"
+            style="margin-left: 0px;"
+            target="_blank"
+          >
+            <img
+              alt=""
+              src="https://github.com/test-user1.png?size=60"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            aria-label="test-user2 Github - opens in new tab"
+            class="link"
+            href="https://github.com/test-user2"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt=""
+              src="https://github.com/test-user2.png?size=60"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
     <details
       class="tableOfContents"
     >
@@ -83,42 +119,6 @@ exports[`Article component renders correctly 1`] = `
          executable program in the command line.
       </p>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="test-user1 Github - opens in new tab"
-            class="link"
-            href="https://github.com/test-user1"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/test-user1.png?size=60"
-            />
-          </a>
-        </li>
-        <li>
-          <a
-            aria-label="test-user2 Github - opens in new tab"
-            class="link"
-            href="https://github.com/test-user2"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/test-user2.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
@@ -221,6 +221,31 @@ exports[`Article component renders correctly in blog mode 1`] = `
         test-user
       </span>
     </h5>
+    <details
+      class="tableOfContents"
+    >
+      <summary>
+        <strong>
+          Table of Contents
+        </strong>
+      </summary>
+      <ul>
+        <li>
+          <a
+            href="#mock-title"
+          >
+            mock-title
+          </a>
+        </li>
+        <li>
+          <a
+            href="#mock-title-2"
+          >
+            mock-title-2
+          </a>
+        </li>
+      </ul>
+    </details>
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -283,6 +308,42 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
     >
       test-title
     </h1>
+    <div
+      class="authorList"
+    >
+      Article Authors
+      <ul>
+        <li>
+          <a
+            aria-label="test-user1 Github - opens in new tab"
+            class="link"
+            href="https://github.com/test-user1"
+            rel="noopener noreferrer"
+            style="margin-left: 0px;"
+            target="_blank"
+          >
+            <img
+              alt=""
+              src="https://github.com/test-user1.png?size=60"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            aria-label="test-user2 Github - opens in new tab"
+            class="link"
+            href="https://github.com/test-user2"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt=""
+              src="https://github.com/test-user2.png?size=60"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
     <details
       class="tableOfContents"
     >
@@ -356,42 +417,6 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
          executable program in the command line.
       </p>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="test-user1 Github - opens in new tab"
-            class="link"
-            href="https://github.com/test-user1"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/test-user1.png?size=60"
-            />
-          </a>
-        </li>
-        <li>
-          <a
-            aria-label="test-user2 Github - opens in new tab"
-            class="link"
-            href="https://github.com/test-user2"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/test-user2.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
@@ -484,6 +509,42 @@ exports[`Article component should accept and render child components 1`] = `
     >
       test-title
     </h1>
+    <div
+      class="authorList"
+    >
+      Article Authors
+      <ul>
+        <li>
+          <a
+            aria-label="test-user1 Github - opens in new tab"
+            class="link"
+            href="https://github.com/test-user1"
+            rel="noopener noreferrer"
+            style="margin-left: 0px;"
+            target="_blank"
+          >
+            <img
+              alt=""
+              src="https://github.com/test-user1.png?size=60"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            aria-label="test-user2 Github - opens in new tab"
+            class="link"
+            href="https://github.com/test-user2"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt=""
+              src="https://github.com/test-user2.png?size=60"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
     <details
       class="tableOfContents"
     >
@@ -562,42 +623,6 @@ exports[`Article component should accept and render child components 1`] = `
         test child JSX
       </div>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="test-user1 Github - opens in new tab"
-            class="link"
-            href="https://github.com/test-user1"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/test-user1.png?size=60"
-            />
-          </a>
-        </li>
-        <li>
-          <a
-            aria-label="test-user2 Github - opens in new tab"
-            class="link"
-            href="https://github.com/test-user2"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/test-user2.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
diff --git a/src/components/Article/__tests__/index.test.tsx b/src/components/Article/__tests__/index.test.tsx
index 5f2cbd92..67fc6d1d 100644
--- a/src/components/Article/__tests__/index.test.tsx
+++ b/src/components/Article/__tests__/index.test.tsx
@@ -63,7 +63,7 @@ describe('Article component', () => {
     const { container } = render(
       <Article
         title={title}
-        tableOfContents={tableOfContents.items}
+        tableOfContents={tableOfContents?.items}
         body={body}
         next={next}
         previous={previous}
@@ -93,7 +93,7 @@ describe('Article component', () => {
     const { container } = render(
       <Article
         title={title}
-        tableOfContents={tableOfContents.items}
+        tableOfContents={tableOfContents?.items}
         body={body}
         next={next}
         previous={previous}
@@ -120,7 +120,7 @@ describe('Article component', () => {
     const { container } = render(
       <Article
         title={title}
-        tableOfContents={tableOfContents.items}
+        tableOfContents={tableOfContents?.items}
         body={body}
         next={next}
         previous={previous}
@@ -176,7 +176,7 @@ describe('Article component', () => {
     render(
       <Article
         title={title}
-        tableOfContents={tableOfContents.items}
+        tableOfContents={tableOfContents?.items}
         body={body}
         next={next}
         previous={previous}
@@ -202,7 +202,7 @@ describe('Article component', () => {
     const { container } = render(
       <Article
         title={title}
-        tableOfContents={tableOfContents.items}
+        tableOfContents={tableOfContents?.items}
         body={body}
         next={next}
         previous={previous}
diff --git a/src/components/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap b/src/components/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap
index b1e36bcf..db56cb6d 100644
--- a/src/components/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,12 +2,7 @@
 
 exports[`Blog Author component does not render without authors 1`] = `
 <div>
-  <h5
-    class="list"
-  >
-     by
-     
-  </h5>
+  <div />
 </div>
 `;
 
diff --git a/src/components/BlogCard/__tests__/__snapshots__/index.test.tsx.snap b/src/components/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
index d42754df..58b92c75 100644
--- a/src/components/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Blog Card component renders correctly 1`] = `
           class="category"
           href="/blog/category-mock/"
         >
-          category-mock-slug
+          Node.js Blog
         </a>
         <span>
           1 min read
diff --git a/src/components/BlogCard/__tests__/index.test.tsx b/src/components/BlogCard/__tests__/index.test.tsx
index 57591504..52bc7bad 100644
--- a/src/components/BlogCard/__tests__/index.test.tsx
+++ b/src/components/BlogCard/__tests__/index.test.tsx
@@ -16,7 +16,7 @@ describe('Blog Card component', () => {
           blogAuthors: [
             { name: 'Batman', website: 'https://bat.man', id: 'batman' },
           ],
-          category: { name: 'category-mock', slug: 'category-mock-slug' },
+          category: { name: 'category-mock', slug: 'blog.title' },
           title: 'Sample Test Blog',
         },
       },
diff --git a/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
index 9bef9e86..c34449df 100644
--- a/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
@@ -245,6 +245,28 @@ exports[`PageLayout component renders correctly with data 1`] = `
         >
           mock-title
         </h1>
+        <div
+          class="authorList"
+        >
+          Article Authors
+          <ul>
+            <li>
+              <a
+                aria-label="mock-author Github - opens in new tab"
+                class="link"
+                href="https://github.com/mock-author"
+                rel="noopener noreferrer"
+                style="margin-left: 0px;"
+                target="_blank"
+              >
+                <img
+                  alt=""
+                  src="https://github.com/mock-author.png?size=60"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
         <details
           class="tableOfContents"
         >
@@ -318,28 +340,6 @@ exports[`PageLayout component renders correctly with data 1`] = `
              executable program in the command line.
           </p>
         </div>
-        <div
-          class="authorList"
-        >
-          Contributors
-          <ul>
-            <li>
-              <a
-                aria-label="mock-author Github - opens in new tab"
-                class="link"
-                href="https://github.com/mock-author"
-                rel="noopener noreferrer"
-                style="margin-left: 0px;"
-                target="_blank"
-              >
-                <img
-                  alt=""
-                  src="https://github.com/mock-author.png?size=60"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
         <div
           class="edit"
         >
diff --git a/src/components/NavigationItem/__tests__/__snapshots__/index.test.tsx.snap b/src/components/NavigationItem/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 1b5352a0..00000000
--- a/src/components/NavigationItem/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavigationItem component renders correctly 1`] = `
-<div>
-  <a
-    aria-current="page"
-    class="t-body2 navigationItem navigationItemDone"
-    href="versioning"
-  >
-    Versioning
-  </a>
-</div>
-`;
diff --git a/src/components/NavigationItem/__tests__/index.test.tsx b/src/components/NavigationItem/__tests__/index.test.tsx
deleted file mode 100644
index ec083f48..00000000
--- a/src/components/NavigationItem/__tests__/index.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import NavigationItem from '..';
-
-describe('NavigationItem component', (): void => {
-  it('renders correctly', (): void => {
-    const { container } = render(
-      <NavigationItem
-        key="123"
-        isRead
-        isActive
-        slug="versioning"
-        title="Versioning"
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/components/NavigationSection/__tests__/__snapshots__/index.test.tsx.snap b/src/components/NavigationSection/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index fc6ce88f..00000000
--- a/src/components/NavigationSection/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavigationSection component renders correctly 1`] = `
-<div>
-  <div
-    class="navigationSection"
-  >
-    <button
-      aria-expanded="false"
-      class="t-body2 navigationSectionTitle"
-      type="button"
-    >
-      <span>
-        Introduction
-      </span>
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="ArrowDropUpIcon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="m7 14 5-5 5 5z"
-        />
-      </svg>
-    </button>
-    <div
-      role="region"
-      style="display: none;"
-    >
-      <a
-        class="t-body2 navigationItem"
-        href="intro"
-      >
-        Section 1
-      </a>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/NavigationSection/__tests__/index.test.tsx b/src/components/NavigationSection/__tests__/index.test.tsx
deleted file mode 100644
index 1b110610..00000000
--- a/src/components/NavigationSection/__tests__/index.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import NavigationSection from '..';
-
-describe('NavigationSection component', (): void => {
-  it('renders correctly', (): void => {
-    const { container } = render(
-      <NavigationSection
-        key="123"
-        title="Introduction"
-        section={[
-          {
-            slug: 'intro',
-            title: 'Section 1',
-            category: 'null',
-          },
-        ]}
-        currentSlug=""
-        readSections={new Set()}
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/components/SideNavBar/__tests__/__snapshots__/index.test.tsx.snap b/src/components/SideNavBar/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 5660d7a2..00000000
--- a/src/components/SideNavBar/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,131 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavBar renders correctly 1`] = `
-<div>
-  <nav
-    class="sideNav"
-  >
-    <button
-      class="sideNavOpen"
-      type="button"
-    >
-      Menu
-    </button>
-    <div
-      class="sideNavSection"
-    >
-      <a
-        class="sideNavSectionTitle"
-        href="/about/"
-      >
-        About Node.js
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-          data-testid="InfoIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/governance/"
-      >
-        Project Governance
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/releases/"
-      >
-        Releases
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/resources/"
-      >
-        Resources
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://privacy-policy.openjsf.org/"
-      >
-        Privacy Policy
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/security/"
-      >
-        Security Reporting
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/get-involved/"
-      >
-        Get Involved
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-          data-testid="GroupsIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/collab-summit"
-      >
-        Collab Summit
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/contribute"
-      >
-        Contribute
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
-      >
-        Code of Conduct
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/download/"
-      >
-        Download
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-          data-testid="CloudDownloadIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/package-manager/"
-      >
-        Package Manager
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/releases/"
-      >
-        Previous Releases
-      </a>
-    </div>
-  </nav>
-</div>
-`;
diff --git a/src/components/SideNavBar/__tests__/index.test.tsx b/src/components/SideNavBar/__tests__/index.test.tsx
deleted file mode 100644
index 5814ebc5..00000000
--- a/src/components/SideNavBar/__tests__/index.test.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
-import SideNavBar, { SideNavBarKeys } from '..';
-import { SideNavBarItem } from '../../../types';
-
-const navbarButtons = [
-  {
-    pageKey: SideNavBarKeys.about,
-    expectedText: 'About Node.js',
-    expectedHref: '/about/',
-  },
-  {
-    pageKey: SideNavBarKeys.governance,
-    expectedText: 'Project Governance',
-    expectedHref: '/about/governance/',
-  },
-  {
-    pageKey: SideNavBarKeys.releases,
-    expectedText: 'Releases',
-    expectedHref: '/about/releases/',
-  },
-  {
-    pageKey: SideNavBarKeys.resources,
-    expectedText: 'Resources',
-    expectedHref: '/about/resources/',
-  },
-  {
-    pageKey: SideNavBarKeys.privacy,
-    expectedText: 'Privacy Policy',
-    expectedHref: 'https://privacy-policy.openjsf.org/',
-  },
-  {
-    pageKey: SideNavBarKeys.security,
-    expectedText: 'Security Reporting',
-    expectedHref: '/about/security/',
-  },
-  {
-    pageKey: SideNavBarKeys.getInvolved,
-    expectedText: 'Get Involved',
-    expectedHref: '/get-involved/',
-  },
-  {
-    pageKey: SideNavBarKeys.collabSummit,
-    expectedText: 'Collab Summit',
-    expectedHref: '/get-involved/collab-summit',
-  },
-  {
-    pageKey: SideNavBarKeys.contribute,
-    expectedText: 'Contribute',
-    expectedHref: '/get-involved/contribute',
-  },
-  {
-    pageKey: SideNavBarKeys.codeOfConduct,
-    expectedText: 'Code of Conduct',
-    expectedHref:
-      'https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md',
-  },
-  {
-    pageKey: SideNavBarKeys.download,
-    expectedText: 'Download',
-    expectedHref: '/download/',
-  },
-  {
-    pageKey: SideNavBarKeys.packageManager,
-    expectedText: 'Package Manager',
-    expectedHref: '/download/package-manager/',
-  },
-  {
-    pageKey: SideNavBarKeys.previousReleases,
-    expectedText: 'Previous Releases',
-    expectedHref: '/download/releases/',
-  },
-];
-
-describe('SideNavBar', () => {
-  it('renders correctly', () => {
-    const { container } = render(<SideNavBar pageKey={SideNavBarKeys.about} />);
-    expect(container).toMatchSnapshot();
-  });
-
-  navbarButtons.forEach(button => {
-    it(`should contain a href to '~${button.expectedHref}'`, () => {
-      render(<SideNavBar pageKey={button.pageKey} />);
-      const aboutNavBarElement = screen.getByText(button.expectedText);
-      expect(aboutNavBarElement.getAttribute('href')).toBe(button.expectedHref);
-    });
-  });
-
-  it('should set the a single page as active', () => {
-    const { container } = render(
-      <SideNavBar pageKey={SideNavBarKeys.releases} />
-    );
-    const innerHtml = container.innerHTML;
-    const activeLinks = innerHtml.match('navigationItemActive');
-    expect(activeLinks && activeLinks.length).toBe(1);
-  });
-
-  it('should contain a href to https link', () => {
-    const title = 'title';
-    const slug = 'https://test.domain';
-    const items: SideNavBarItem[] = [{ title, slug, isTitle: true }];
-    render(<SideNavBar pageKey={SideNavBarKeys.releases} items={items} />);
-    const navBarElement = screen.getByText(title);
-    expect(navBarElement.getAttribute('href')).toBe(slug);
-  });
-
-  it('should close the Navigation when a link is clicked', async () => {
-    const activeClassName = 'navigationItemActive';
-    render(<SideNavBar pageKey={SideNavBarKeys.releases} />);
-    const releasesNavBarElement = screen.getByText('Releases');
-    expect(releasesNavBarElement.classList).toContain(activeClassName);
-    await userEvent.click(releasesNavBarElement);
-    expect(releasesNavBarElement.classList).toEqual(
-      expect.not.arrayContaining([activeClassName])
-    );
-  });
-});
diff --git a/src/components/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap b/src/components/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap
index 4cc8b3e4..784dcf10 100644
--- a/src/components/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap
+++ b/src/components/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap
@@ -2,16 +2,7 @@
 
 exports[`TOC component render empty div without a table of contents 1`] = `
 <div>
-  <details
-    class="tableOfContents"
-  >
-    <summary>
-      <strong>
-        Table of Contents
-      </strong>
-    </summary>
-    <ul />
-  </details>
+  <div />
 </div>
 `;
 
diff --git a/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap b/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
index b9be97a8..4748afbb 100644
--- a/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
+++ b/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`AuthorsList component renders correctly 1`] = `
   <div
     class="authorList"
   >
-    Contributors
+    Article Authors
     <ul>
       <li>
         <a
diff --git a/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap b/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap
deleted file mode 100644
index 0bc632e2..00000000
--- a/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigation component renders correctly 1`] = `
-<div>
-  <nav
-    aria-label=""
-    class="navigation"
-  >
-    <button
-      aria-expanded="false"
-      class="navigationOpen"
-      type="button"
-    >
-      Menu
-    </button>
-    <div
-      class="navigationSection"
-    >
-      <button
-        aria-expanded="true"
-        class="t-body2 navigationSectionTitle"
-        type="button"
-      >
-        <span>
-          Getting Started
-        </span>
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-          data-testid="ArrowDropDownIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="m7 10 5 5 5-5z"
-          />
-        </svg>
-      </button>
-      <div
-        role="region"
-        style="display: block;"
-      >
-        <a
-          aria-current="page"
-          class="t-body2 navigationItem navigationItemActive"
-          href="intro"
-        >
-          Section 1
-        </a>
-      </div>
-    </div>
-  </nav>
-</div>
-`;
diff --git a/src/containers/Navigation/__tests__/navigation.test.tsx b/src/containers/Navigation/__tests__/navigation.test.tsx
deleted file mode 100644
index 32fa0890..00000000
--- a/src/containers/Navigation/__tests__/navigation.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Navigation from '..';
-
-describe('Navigation component', (): void => {
-  it('renders correctly', (): void => {
-    const { container } = render(
-      <Navigation
-        currentSlug="intro"
-        category="category1"
-        sections={{
-          'Getting Started': {
-            data: [
-              {
-                slug: 'intro',
-                title: 'Section 1',
-                category: 'category1',
-              },
-            ],
-            category: 'category1',
-          },
-          Versions: {
-            data: [
-              {
-                slug: 'version',
-                title: 'Version 1',
-                category: 'category2',
-              },
-            ],
-            category: 'category2',
-          },
-        }}
-        label=""
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
index 6ac3e32c..ffa12cbd 100644
--- a/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
@@ -5,129 +5,165 @@ exports[`Governance Page renders correctly 1`] = `
   class="grid-container"
 >
   <nav
-    class="sideNav"
+    aria-label="About Navigation"
+    class="navigation"
+    id="main-navigation"
   >
     <button
-      class="sideNavOpen"
+      aria-expanded="false"
+      class="navigationOpen"
       type="button"
     >
       Menu
     </button>
     <div
-      class="sideNavSection"
+      class="navigationSection"
     >
-      <a
-        class="sideNavSectionTitle"
-        href="/about/"
-      >
-        About Node.js
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="InfoIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-          />
-        </svg>
-      </a>
-      <a
-        aria-current="page"
-        class="t-body2 navigationItem navigationItemActive"
-        href="/about/governance/"
-      >
-        Project Governance
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/releases/"
-      >
-        Releases
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/resources/"
-      >
-        Resources
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://privacy-policy.openjsf.org/"
-      >
-        Privacy Policy
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/security/"
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Security Reporting
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/get-involved/"
+        <span>
+          About Node.js
+        </span>
+      </button>
+      <div
+        aria-label="About Node.js"
+        role="region"
+        style="display: block;"
       >
-        Get Involved
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="GroupsIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/about/"
+          id="/about/"
         >
-          <path
-            d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/collab-summit"
-      >
-        Collab Summit
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/contribute"
-      >
-        Contribute
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          About Node.js
+        </a>
+        <a
+          aria-current="page"
+          class="t-body2 navigationItem navigationItemActive"
+          href="/about/governance/"
+          id="/about/governance/"
+        >
+          Project Governance
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/releases/"
+          id="/about/releases/"
+        >
+          Releases
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/resources/"
+          id="/about/resources/"
+        >
+          Resources
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://privacy-policy.openjsf.org/"
+          id="https://privacy-policy.openjsf.org/"
+        >
+          Privacy Policy
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/security/"
+          id="/about/security/"
+        >
+          Security Reporting
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Code of Conduct
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/download/"
+        <span>
+          Get Involved
+        </span>
+      </button>
+      <div
+        aria-label="Get Involved"
+        role="region"
+        style="display: block;"
       >
-        Download
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="CloudDownloadIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/"
+          id="/get-involved/"
         >
-          <path
-            d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/package-manager/"
+          Get Involved
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/collab-summit"
+          id="/get-involved/collab-summit"
+        >
+          Collab Summit
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/contribute"
+          id="/get-involved/contribute"
+        >
+          Contribute
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          id="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+        >
+          Code of Conduct
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Package Manager
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/releases/"
+        <span>
+          Download
+        </span>
+      </button>
+      <div
+        aria-label="Download"
+        role="region"
+        style="display: block;"
       >
-        Previous Releases
-      </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/"
+          id="/download/"
+        >
+          Download
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/package-manager/"
+          id="/download/package-manager/"
+        >
+          Package Manager
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/releases/"
+          id="/download/releases/"
+        >
+          Previous Releases
+        </a>
+      </div>
     </div>
   </nav>
   <article
@@ -138,31 +174,8 @@ exports[`Governance Page renders correctly 1`] = `
     >
       Mock Title
     </h1>
-    <details
-      class="tableOfContents"
-    >
-      <summary>
-        <strong>
-          Table of Contents
-        </strong>
-      </summary>
-      <ul>
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
+    <div />
+    <div />
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -211,28 +224,6 @@ exports[`Governance Page renders correctly 1`] = `
          executable program in the command line.
       </p>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="author-mock Github - opens in new tab"
-            class="link"
-            href="https://github.com/author-mock"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/author-mock.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
diff --git a/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
index 2df69122..dfdd5a24 100644
--- a/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,128 +5,165 @@ exports[`About page renders correctly 1`] = `
   class="grid-container"
 >
   <nav
-    class="sideNav"
+    aria-label="About Navigation"
+    class="navigation"
+    id="main-navigation"
   >
     <button
-      class="sideNavOpen"
+      aria-expanded="false"
+      class="navigationOpen"
       type="button"
     >
       Menu
     </button>
     <div
-      class="sideNavSection"
+      class="navigationSection"
     >
-      <a
-        class="sideNavSectionTitle"
-        href="/about/"
-      >
-        About Node.js
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="InfoIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/governance/"
-      >
-        Project Governance
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/releases/"
-      >
-        Releases
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/resources/"
-      >
-        Resources
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://privacy-policy.openjsf.org/"
-      >
-        Privacy Policy
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/security/"
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Security Reporting
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/get-involved/"
+        <span>
+          About Node.js
+        </span>
+      </button>
+      <div
+        aria-label="About Node.js"
+        role="region"
+        style="display: block;"
       >
-        Get Involved
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="GroupsIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          aria-current="page"
+          class="t-body2 navigationItem navigationItemActive"
+          href="/about/"
+          id="/about/"
         >
-          <path
-            d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/collab-summit"
-      >
-        Collab Summit
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/contribute"
-      >
-        Contribute
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          About Node.js
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/governance/"
+          id="/about/governance/"
+        >
+          Project Governance
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/releases/"
+          id="/about/releases/"
+        >
+          Releases
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/resources/"
+          id="/about/resources/"
+        >
+          Resources
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://privacy-policy.openjsf.org/"
+          id="https://privacy-policy.openjsf.org/"
+        >
+          Privacy Policy
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/security/"
+          id="/about/security/"
+        >
+          Security Reporting
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Code of Conduct
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/download/"
+        <span>
+          Get Involved
+        </span>
+      </button>
+      <div
+        aria-label="Get Involved"
+        role="region"
+        style="display: block;"
       >
-        Download
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="CloudDownloadIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/"
+          id="/get-involved/"
         >
-          <path
-            d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/package-manager/"
+          Get Involved
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/collab-summit"
+          id="/get-involved/collab-summit"
+        >
+          Collab Summit
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/contribute"
+          id="/get-involved/contribute"
+        >
+          Contribute
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          id="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+        >
+          Code of Conduct
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Package Manager
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/releases/"
+        <span>
+          Download
+        </span>
+      </button>
+      <div
+        aria-label="Download"
+        role="region"
+        style="display: block;"
       >
-        Previous Releases
-      </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/"
+          id="/download/"
+        >
+          Download
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/package-manager/"
+          id="/download/package-manager/"
+        >
+          Package Manager
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/releases/"
+          id="/download/releases/"
+        >
+          Previous Releases
+        </a>
+      </div>
     </div>
   </nav>
   <article
@@ -137,31 +174,8 @@ exports[`About page renders correctly 1`] = `
     >
       Mock Title
     </h1>
-    <details
-      class="tableOfContents"
-    >
-      <summary>
-        <strong>
-          Table of Contents
-        </strong>
-      </summary>
-      <ul>
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
+    <div />
+    <div />
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -210,28 +224,6 @@ exports[`About page renders correctly 1`] = `
          executable program in the command line.
       </p>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="author-mock Github - opens in new tab"
-            class="link"
-            href="https://github.com/author-mock"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/author-mock.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
diff --git a/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
index 6dd9a49e..c3f144e3 100644
--- a/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
@@ -5,129 +5,165 @@ exports[`Releases page renders correctly 1`] = `
   class="grid-container"
 >
   <nav
-    class="sideNav"
+    aria-label="About Navigation"
+    class="navigation"
+    id="main-navigation"
   >
     <button
-      class="sideNavOpen"
+      aria-expanded="false"
+      class="navigationOpen"
       type="button"
     >
       Menu
     </button>
     <div
-      class="sideNavSection"
+      class="navigationSection"
     >
-      <a
-        class="sideNavSectionTitle"
-        href="/about/"
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        About Node.js
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="InfoIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/governance/"
-      >
-        Project Governance
-      </a>
-      <a
-        aria-current="page"
-        class="t-body2 navigationItem navigationItemActive"
-        href="/about/releases/"
-      >
-        Releases
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/resources/"
-      >
-        Resources
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://privacy-policy.openjsf.org/"
-      >
-        Privacy Policy
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/security/"
-      >
-        Security Reporting
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/get-involved/"
+        <span>
+          About Node.js
+        </span>
+      </button>
+      <div
+        aria-label="About Node.js"
+        role="region"
+        style="display: block;"
       >
-        Get Involved
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="GroupsIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/about/"
+          id="/about/"
         >
-          <path
-            d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/collab-summit"
-      >
-        Collab Summit
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/contribute"
-      >
-        Contribute
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          About Node.js
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/governance/"
+          id="/about/governance/"
+        >
+          Project Governance
+        </a>
+        <a
+          aria-current="page"
+          class="t-body2 navigationItem navigationItemActive"
+          href="/about/releases/"
+          id="/about/releases/"
+        >
+          Releases
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/resources/"
+          id="/about/resources/"
+        >
+          Resources
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://privacy-policy.openjsf.org/"
+          id="https://privacy-policy.openjsf.org/"
+        >
+          Privacy Policy
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/security/"
+          id="/about/security/"
+        >
+          Security Reporting
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Code of Conduct
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/download/"
+        <span>
+          Get Involved
+        </span>
+      </button>
+      <div
+        aria-label="Get Involved"
+        role="region"
+        style="display: block;"
       >
-        Download
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="CloudDownloadIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/"
+          id="/get-involved/"
         >
-          <path
-            d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/package-manager/"
+          Get Involved
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/collab-summit"
+          id="/get-involved/collab-summit"
+        >
+          Collab Summit
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/contribute"
+          id="/get-involved/contribute"
+        >
+          Contribute
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          id="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+        >
+          Code of Conduct
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Package Manager
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/releases/"
+        <span>
+          Download
+        </span>
+      </button>
+      <div
+        aria-label="Download"
+        role="region"
+        style="display: block;"
       >
-        Previous Releases
-      </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/"
+          id="/download/"
+        >
+          Download
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/package-manager/"
+          id="/download/package-manager/"
+        >
+          Package Manager
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/releases/"
+          id="/download/releases/"
+        >
+          Previous Releases
+        </a>
+      </div>
     </div>
   </nav>
   <article
@@ -138,31 +174,8 @@ exports[`Releases page renders correctly 1`] = `
     >
       Mock Title
     </h1>
-    <details
-      class="tableOfContents"
-    >
-      <summary>
-        <strong>
-          Table of Contents
-        </strong>
-      </summary>
-      <ul>
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
+    <div />
+    <div />
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -333,28 +346,6 @@ exports[`Releases page renders correctly 1`] = `
         </table>
       </div>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="author-mock Github - opens in new tab"
-            class="link"
-            href="https://github.com/author-mock"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/author-mock.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
diff --git a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
index 55fd549c..a7ec5046 100644
--- a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
@@ -238,128 +238,165 @@ exports[`Resources page renders correctly 1`] = `
       class="grid-container"
     >
       <nav
-        class="sideNav"
+        aria-label="About Navigation"
+        class="navigation"
+        id="main-navigation"
       >
         <button
-          class="sideNavOpen"
+          aria-expanded="false"
+          class="navigationOpen"
           type="button"
         >
           Menu
         </button>
         <div
-          class="sideNavSection"
+          class="navigationSection"
         >
-          <a
-            class="sideNavSectionTitle"
-            href="/about/"
-          >
-            About Node.js
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-              data-testid="InfoIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-              />
-            </svg>
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/governance/"
-          >
-            Project Governance
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/releases/"
-          >
-            Releases
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/resources/"
+          <button
+            aria-expanded="true"
+            class="t-body2 title"
+            type="button"
           >
-            Resources
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="https://privacy-policy.openjsf.org/"
-          >
-            Privacy Policy
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/security/"
-          >
-            Security Reporting
-          </a>
-          <a
-            class="sideNavSectionTitle"
-            href="/get-involved/"
+            <span>
+              About Node.js
+            </span>
+          </button>
+          <div
+            aria-label="About Node.js"
+            role="region"
+            style="display: block;"
           >
-            Get Involved
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-              data-testid="GroupsIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <a
+              aria-current="page"
+              class="t-body2 navigationItem navigationItemActive"
+              href="/about/"
+              id="/about/"
             >
-              <path
-                d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-              />
-            </svg>
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/get-involved/collab-summit"
-          >
-            Collab Summit
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/get-involved/contribute"
-          >
-            Contribute
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+              About Node.js
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/governance/"
+              id="/about/governance/"
+            >
+              Project Governance
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/releases/"
+              id="/about/releases/"
+            >
+              Releases
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/resources/"
+              id="/about/resources/"
+            >
+              Resources
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="https://privacy-policy.openjsf.org/"
+              id="https://privacy-policy.openjsf.org/"
+            >
+              Privacy Policy
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/security/"
+              id="/about/security/"
+            >
+              Security Reporting
+            </a>
+          </div>
+        </div>
+        <div
+          class="navigationSection"
+        >
+          <button
+            aria-expanded="true"
+            class="t-body2 title"
+            type="button"
           >
-            Code of Conduct
-          </a>
-          <a
-            class="sideNavSectionTitle"
-            href="/download/"
+            <span>
+              Get Involved
+            </span>
+          </button>
+          <div
+            aria-label="Get Involved"
+            role="region"
+            style="display: block;"
           >
-            Download
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-              data-testid="CloudDownloadIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <a
+              class="t-body2 navigationItem"
+              href="/get-involved/"
+              id="/get-involved/"
             >
-              <path
-                d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-              />
-            </svg>
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/download/package-manager/"
+              Get Involved
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/get-involved/collab-summit"
+              id="/get-involved/collab-summit"
+            >
+              Collab Summit
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/get-involved/contribute"
+              id="/get-involved/contribute"
+            >
+              Contribute
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+              id="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+            >
+              Code of Conduct
+            </a>
+          </div>
+        </div>
+        <div
+          class="navigationSection"
+        >
+          <button
+            aria-expanded="true"
+            class="t-body2 title"
+            type="button"
           >
-            Package Manager
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/download/releases/"
+            <span>
+              Download
+            </span>
+          </button>
+          <div
+            aria-label="Download"
+            role="region"
+            style="display: block;"
           >
-            Previous Releases
-          </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/download/"
+              id="/download/"
+            >
+              Download
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/download/package-manager/"
+              id="/download/package-manager/"
+            >
+              Package Manager
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/download/releases/"
+              id="/download/releases/"
+            >
+              Previous Releases
+            </a>
+          </div>
         </div>
       </nav>
       <article
@@ -370,31 +407,8 @@ exports[`Resources page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="tableOfContents"
-        >
-          <summary>
-            <strong>
-              Table of Contents
-            </strong>
-          </summary>
-          <ul>
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
+        <div />
+        <div />
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -443,28 +457,6 @@ exports[`Resources page renders correctly 1`] = `
              executable program in the command line.
           </p>
         </div>
-        <div
-          class="authorList"
-        >
-          Contributors
-          <ul>
-            <li>
-              <a
-                aria-label="MrJithil Github - opens in new tab"
-                class="link"
-                href="https://github.com/MrJithil"
-                rel="noopener noreferrer"
-                style="margin-left: 0px;"
-                target="_blank"
-              >
-                <img
-                  alt=""
-                  src="https://github.com/MrJithil.png?size=60"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
         <div
           class="edit"
         >
diff --git a/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
index 345e446c..06deca59 100644
--- a/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
@@ -5,129 +5,165 @@ exports[`Security page renders correctly 1`] = `
   class="grid-container"
 >
   <nav
-    class="sideNav"
+    aria-label="About Navigation"
+    class="navigation"
+    id="main-navigation"
   >
     <button
-      class="sideNavOpen"
+      aria-expanded="false"
+      class="navigationOpen"
       type="button"
     >
       Menu
     </button>
     <div
-      class="sideNavSection"
+      class="navigationSection"
     >
-      <a
-        class="sideNavSectionTitle"
-        href="/about/"
-      >
-        About Node.js
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="InfoIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/governance/"
-      >
-        Project Governance
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/releases/"
-      >
-        Releases
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/about/resources/"
-      >
-        Resources
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://privacy-policy.openjsf.org/"
-      >
-        Privacy Policy
-      </a>
-      <a
-        aria-current="page"
-        class="t-body2 navigationItem navigationItemActive"
-        href="/about/security/"
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Security Reporting
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/get-involved/"
+        <span>
+          About Node.js
+        </span>
+      </button>
+      <div
+        aria-label="About Node.js"
+        role="region"
+        style="display: block;"
       >
-        Get Involved
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="GroupsIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/about/"
+          id="/about/"
         >
-          <path
-            d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/collab-summit"
-      >
-        Collab Summit
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/get-involved/contribute"
-      >
-        Contribute
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          About Node.js
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/governance/"
+          id="/about/governance/"
+        >
+          Project Governance
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/releases/"
+          id="/about/releases/"
+        >
+          Releases
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/about/resources/"
+          id="/about/resources/"
+        >
+          Resources
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://privacy-policy.openjsf.org/"
+          id="https://privacy-policy.openjsf.org/"
+        >
+          Privacy Policy
+        </a>
+        <a
+          aria-current="page"
+          class="t-body2 navigationItem navigationItemActive"
+          href="/about/security/"
+          id="/about/security/"
+        >
+          Security Reporting
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Code of Conduct
-      </a>
-      <a
-        class="sideNavSectionTitle"
-        href="/download/"
+        <span>
+          Get Involved
+        </span>
+      </button>
+      <div
+        aria-label="Get Involved"
+        role="region"
+        style="display: block;"
       >
-        Download
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-          data-testid="CloudDownloadIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/"
+          id="/get-involved/"
         >
-          <path
-            d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-          />
-        </svg>
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/package-manager/"
+          Get Involved
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/collab-summit"
+          id="/get-involved/collab-summit"
+        >
+          Collab Summit
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/get-involved/contribute"
+          id="/get-involved/contribute"
+        >
+          Contribute
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+          id="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+        >
+          Code of Conduct
+        </a>
+      </div>
+    </div>
+    <div
+      class="navigationSection"
+    >
+      <button
+        aria-expanded="true"
+        class="t-body2 title"
+        type="button"
       >
-        Package Manager
-      </a>
-      <a
-        class="t-body2 navigationItem"
-        href="/download/releases/"
+        <span>
+          Download
+        </span>
+      </button>
+      <div
+        aria-label="Download"
+        role="region"
+        style="display: block;"
       >
-        Previous Releases
-      </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/"
+          id="/download/"
+        >
+          Download
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/package-manager/"
+          id="/download/package-manager/"
+        >
+          Package Manager
+        </a>
+        <a
+          class="t-body2 navigationItem"
+          href="/download/releases/"
+          id="/download/releases/"
+        >
+          Previous Releases
+        </a>
+      </div>
     </div>
   </nav>
   <article
@@ -138,31 +174,8 @@ exports[`Security page renders correctly 1`] = `
     >
       Mock Title
     </h1>
-    <details
-      class="tableOfContents"
-    >
-      <summary>
-        <strong>
-          Table of Contents
-        </strong>
-      </summary>
-      <ul>
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
+    <div />
+    <div />
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -211,28 +224,6 @@ exports[`Security page renders correctly 1`] = `
          executable program in the command line.
       </p>
     </div>
-    <div
-      class="authorList"
-    >
-      Contributors
-      <ul>
-        <li>
-          <a
-            aria-label="author-mock Github - opens in new tab"
-            class="link"
-            href="https://github.com/author-mock"
-            rel="noopener noreferrer"
-            style="margin-left: 0px;"
-            target="_blank"
-          >
-            <img
-              alt=""
-              src="https://github.com/author-mock.png?size=60"
-            />
-          </a>
-        </li>
-      </ul>
-    </div>
     <div
       class="edit"
     >
diff --git a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
index ea96fb91..e3a546ca 100644
--- a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
@@ -238,129 +238,165 @@ exports[`Package Manager Page renders correctly 1`] = `
       class="grid-container"
     >
       <nav
-        class="sideNav"
+        aria-label="About Navigation"
+        class="navigation"
+        id="main-navigation"
       >
         <button
-          class="sideNavOpen"
+          aria-expanded="false"
+          class="navigationOpen"
           type="button"
         >
           Menu
         </button>
         <div
-          class="sideNavSection"
+          class="navigationSection"
         >
-          <a
-            class="sideNavSectionTitle"
-            href="/about/"
-          >
-            About Node.js
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-              data-testid="InfoIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-              />
-            </svg>
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/governance/"
-          >
-            Project Governance
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/releases/"
-          >
-            Releases
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/resources/"
+          <button
+            aria-expanded="true"
+            class="t-body2 title"
+            type="button"
           >
-            Resources
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="https://privacy-policy.openjsf.org/"
-          >
-            Privacy Policy
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/about/security/"
-          >
-            Security Reporting
-          </a>
-          <a
-            class="sideNavSectionTitle"
-            href="/get-involved/"
+            <span>
+              About Node.js
+            </span>
+          </button>
+          <div
+            aria-label="About Node.js"
+            role="region"
+            style="display: block;"
           >
-            Get Involved
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-              data-testid="GroupsIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <a
+              class="t-body2 navigationItem"
+              href="/about/"
+              id="/about/"
             >
-              <path
-                d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
-              />
-            </svg>
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/get-involved/collab-summit"
-          >
-            Collab Summit
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/get-involved/contribute"
-          >
-            Contribute
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+              About Node.js
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/governance/"
+              id="/about/governance/"
+            >
+              Project Governance
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/releases/"
+              id="/about/releases/"
+            >
+              Releases
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/resources/"
+              id="/about/resources/"
+            >
+              Resources
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="https://privacy-policy.openjsf.org/"
+              id="https://privacy-policy.openjsf.org/"
+            >
+              Privacy Policy
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/about/security/"
+              id="/about/security/"
+            >
+              Security Reporting
+            </a>
+          </div>
+        </div>
+        <div
+          class="navigationSection"
+        >
+          <button
+            aria-expanded="true"
+            class="t-body2 title"
+            type="button"
           >
-            Code of Conduct
-          </a>
-          <a
-            class="sideNavSectionTitle"
-            href="/download/"
+            <span>
+              Get Involved
+            </span>
+          </button>
+          <div
+            aria-label="Get Involved"
+            role="region"
+            style="display: block;"
           >
-            Download
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8rv7ug-MuiSvgIcon-root"
-              data-testid="CloudDownloadIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <a
+              class="t-body2 navigationItem"
+              href="/get-involved/"
+              id="/get-involved/"
             >
-              <path
-                d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-              />
-            </svg>
-          </a>
-          <a
-            aria-current="page"
-            class="t-body2 navigationItem navigationItemActive"
-            href="/download/package-manager/"
+              Get Involved
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/get-involved/collab-summit"
+              id="/get-involved/collab-summit"
+            >
+              Collab Summit
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/get-involved/contribute"
+              id="/get-involved/contribute"
+            >
+              Contribute
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+              id="https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md"
+            >
+              Code of Conduct
+            </a>
+          </div>
+        </div>
+        <div
+          class="navigationSection"
+        >
+          <button
+            aria-expanded="true"
+            class="t-body2 title"
+            type="button"
           >
-            Package Manager
-          </a>
-          <a
-            class="t-body2 navigationItem"
-            href="/download/releases/"
+            <span>
+              Download
+            </span>
+          </button>
+          <div
+            aria-label="Download"
+            role="region"
+            style="display: block;"
           >
-            Previous Releases
-          </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/download/"
+              id="/download/"
+            >
+              Download
+            </a>
+            <a
+              aria-current="page"
+              class="t-body2 navigationItem navigationItemActive"
+              href="/download/package-manager/"
+              id="/download/package-manager/"
+            >
+              Package Manager
+            </a>
+            <a
+              class="t-body2 navigationItem"
+              href="/download/releases/"
+              id="/download/releases/"
+            >
+              Previous Releases
+            </a>
+          </div>
         </div>
       </nav>
       <article
@@ -371,31 +407,8 @@ exports[`Package Manager Page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="tableOfContents"
-        >
-          <summary>
-            <strong>
-              Table of Contents
-            </strong>
-          </summary>
-          <ul>
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
+        <div />
+        <div />
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -444,28 +457,6 @@ exports[`Package Manager Page renders correctly 1`] = `
              executable program in the command line.
           </p>
         </div>
-        <div
-          class="authorList"
-        >
-          Contributors
-          <ul>
-            <li>
-              <a
-                aria-label="author-mock Github - opens in new tab"
-                class="link"
-                href="https://github.com/author-mock"
-                rel="noopener noreferrer"
-                style="margin-left: 0px;"
-                target="_blank"
-              >
-                <img
-                  alt=""
-                  src="https://github.com/author-mock.png?size=60"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
         <div
           class="edit"
         >
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
index b33c1c80..ebeb43b1 100644
--- a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -238,8 +238,9 @@ exports[`Learn Template renders correctly 1`] = `
       class="grid-container"
     >
       <nav
-        aria-label="Secondary"
+        aria-label="Learn Navigation"
         class="navigation"
+        id="main-navigation"
       >
         <button
           aria-expanded="false"
@@ -248,6 +249,102 @@ exports[`Learn Template renders correctly 1`] = `
         >
           Menu
         </button>
+        <div
+          class="navigationSection"
+        >
+          <button
+            aria-expanded="false"
+            class="t-body2 title"
+            type="button"
+          >
+            <span>
+              test-section
+            </span>
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-caret-up "
+              data-icon="caret-up"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+          <div
+            aria-label="test-section"
+            role="region"
+            style="display: none;"
+          >
+            <a
+              class="t-body2 navigationItem item itemDone"
+              href="test-slug-1"
+              id="test-slug-1"
+            >
+              test-title-1
+            </a>
+            <a
+              class="t-body2 navigationItem item itemDone"
+              href="test-slug-2"
+              id="test-slug-2"
+            >
+              test-title-2
+            </a>
+          </div>
+        </div>
+        <div
+          class="navigationSection"
+        >
+          <button
+            aria-expanded="false"
+            class="t-body2 title"
+            type="button"
+          >
+            <span>
+              test-section2
+            </span>
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-caret-up "
+              data-icon="caret-up"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              viewBox="0 0 320 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+          <div
+            aria-label="test-section2"
+            role="region"
+            style="display: none;"
+          >
+            <a
+              class="t-body2 navigationItem item itemDone"
+              href="test-slug-3"
+              id="test-slug-3"
+            >
+              test-title-3
+            </a>
+            <a
+              class="t-body2 navigationItem item itemDone"
+              href="test-slug-4"
+              id="test-slug-4"
+            >
+              test-title-4
+            </a>
+          </div>
+        </div>
       </nav>
       <article
         class="article"
@@ -255,6 +352,42 @@ exports[`Learn Template renders correctly 1`] = `
         <h1
           class="headline"
         />
+        <div
+          class="authorList"
+        >
+          Article Authors
+          <ul>
+            <li>
+              <a
+                aria-label="test-user1 Github - opens in new tab"
+                class="link"
+                href="https://github.com/test-user1"
+                rel="noopener noreferrer"
+                style="margin-left: 0px;"
+                target="_blank"
+              >
+                <img
+                  alt=""
+                  src="https://github.com/test-user1.png?size=60"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-label="test-user2 Github - opens in new tab"
+                class="link"
+                href="https://github.com/test-user2"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt=""
+                  src="https://github.com/test-user2.png?size=60"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
         <details
           class="tableOfContents"
         >
@@ -328,42 +461,6 @@ exports[`Learn Template renders correctly 1`] = `
              executable program in the command line.
           </p>
         </div>
-        <div
-          class="authorList"
-        >
-          Contributors
-          <ul>
-            <li>
-              <a
-                aria-label="test-user1 Github - opens in new tab"
-                class="link"
-                href="https://github.com/test-user1"
-                rel="noopener noreferrer"
-                style="margin-left: 0px;"
-                target="_blank"
-              >
-                <img
-                  alt=""
-                  src="https://github.com/test-user1.png?size=60"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-label="test-user2 Github - opens in new tab"
-                class="link"
-                href="https://github.com/test-user2"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <img
-                  alt=""
-                  src="https://github.com/test-user2.png?size=60"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
         <div
           class="edit"
         >
diff --git a/src/templates/__tests__/__snapshots__/post.test.tsx.snap b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
index 2cef5866..acea9507 100644
--- a/src/templates/__tests__/__snapshots__/post.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
@@ -280,6 +280,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
             </a>
           </span>
         </h5>
+        <div />
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
diff --git a/test/__mocks__/react-scroll.js b/test/__mocks__/react-scroll.js
new file mode 100644
index 00000000..0752c7e7
--- /dev/null
+++ b/test/__mocks__/react-scroll.js
@@ -0,0 +1,3 @@
+module.exports = {
+  scroller: { scrollTo: jest.fn() },
+};