Repository: nodejs/nodejs.dev
Pull request #2921 (2022-10-12 20:21:38)

refactor(components): reorganised the structure of the components keeping things cleaner
## Description

This PR simply moves files around (no actual code changes) by restructuring the overall `src/` folder, having these notable changes:

- `src/components` now exports components grouped by their "category"
  - E.g.: BlogComponents, ArticleComponents
  - This allows us to organise better and have a clearer view as the amount of Components is growing exponentially.
- Moves Layouts to `src/layouts`
- Deleted the "Containers" and moved to Components
- Created a folder for React Providers

### Actual Code changes

- Moved some type exports to `src/types`
- Removed usages of `useIntl` in favour of `injectIntl`


ovflowd: **Note.:** The number of affected files is significant, but there are no changes in the code, just files being moved around and the imports being updated.
github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2921/
ovflowd: Hacktoberfest Accepted label 🤨
benhalverson: > Hacktoberfest Accepted label 🤨

Are you not participating in hacktoberfest?
ovflowd: > Are you not participating in hacktoberfest?

Maintainers cannot participate afaik (in the projects they're maintainers)

Patch:
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index 55742ede..a50c60bb 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactIntlProvider from './src/containers/ReactIntl';
+import ReactIntlProvider from './src/providers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementBrowser } from './src/types';
 
diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
index 9a7a1048..e28645f7 100644
--- a/gatsby-ssr.tsx
+++ b/gatsby-ssr.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactIntlProvider from './src/containers/ReactIntl';
+import ReactIntlProvider from './src/providers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementSSR } from './src/types';
 
diff --git a/src/components/Author/__tests__/index.test.tsx b/src/components/ArticleComponents/AuthorList/Author/__tests__/index.test.tsx
similarity index 100%
rename from src/components/Author/__tests__/index.test.tsx
rename to src/components/ArticleComponents/AuthorList/Author/__tests__/index.test.tsx
diff --git a/src/components/Author/index.module.scss b/src/components/ArticleComponents/AuthorList/Author/index.module.scss
similarity index 100%
rename from src/components/Author/index.module.scss
rename to src/components/ArticleComponents/AuthorList/Author/index.module.scss
diff --git a/src/components/ArticleComponents/AuthorList/Author/index.tsx b/src/components/ArticleComponents/AuthorList/Author/index.tsx
new file mode 100644
index 00000000..ed1c50d2
--- /dev/null
+++ b/src/components/ArticleComponents/AuthorList/Author/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
+import styles from './index.module.scss';
+
+interface Props {
+  index: number;
+  username: string;
+  size: string;
+}
+
+const Author = ({
+  index,
+  username,
+  size = '64',
+  intl,
+}: Props & WrappedComponentProps) => {
+  // Clean up username and build links.
+  const githubUserName = username.trim();
+  const githubLink = `https://github.com/${githubUserName}`;
+  const githubImgLink = `https://github.com/${githubUserName}.png?size=${size}`;
+
+  // If it's the first author then no margin left.
+  const mleft = index === 0 ? { marginLeft: 0 } : {};
+
+  const translation = intl.formatMessage(
+    { id: 'components.author.githubLinkLabel' },
+    { username }
+  );
+
+  return (
+    <li>
+      <a
+        className={styles.link}
+        href={githubLink}
+        aria-label={translation}
+        key={username}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={mleft}
+      >
+        <img src={githubImgLink} alt="" />
+      </a>
+    </li>
+  );
+};
+
+export default injectIntl(Author);
diff --git a/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap b/src/components/ArticleComponents/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
similarity index 100%
rename from src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
rename to src/components/ArticleComponents/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
diff --git a/src/containers/AuthorList/__tests__/authors-list.test.tsx b/src/components/ArticleComponents/AuthorList/__tests__/authors-list.test.tsx
similarity index 100%
rename from src/containers/AuthorList/__tests__/authors-list.test.tsx
rename to src/components/ArticleComponents/AuthorList/__tests__/authors-list.test.tsx
diff --git a/src/containers/AuthorList/index.module.scss b/src/components/ArticleComponents/AuthorList/index.module.scss
similarity index 100%
rename from src/containers/AuthorList/index.module.scss
rename to src/components/ArticleComponents/AuthorList/index.module.scss
diff --git a/src/containers/AuthorList/index.tsx b/src/components/ArticleComponents/AuthorList/index.tsx
similarity index 69%
rename from src/containers/AuthorList/index.tsx
rename to src/components/ArticleComponents/AuthorList/index.tsx
index 6c3f0938..9fb82b83 100644
--- a/src/containers/AuthorList/index.tsx
+++ b/src/components/ArticleComponents/AuthorList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import Author from '../../components/Author';
+import Author from './Author';
 import styles from './index.module.scss';
 
 interface Props {
@@ -14,10 +14,9 @@ const AuthorList = ({ authors }: Props): JSX.Element => {
         <FormattedMessage id="containers.authorList.title" />
         <ul>
           {authors.map(
-            (author, i): string | JSX.Element =>
-              author && (
-                <Author index={i} username={author} key={author} size="60" />
-              )
+            (author, i): JSX.Element => (
+              <Author index={i} username={author} key={author} size="60" />
+            )
           )}
         </ul>
       </div>
diff --git a/src/components/BlockQuote/index.module.scss b/src/components/ArticleComponents/BlockQuote/index.module.scss
similarity index 100%
rename from src/components/BlockQuote/index.module.scss
rename to src/components/ArticleComponents/BlockQuote/index.module.scss
diff --git a/src/components/BlockQuote/index.tsx b/src/components/ArticleComponents/BlockQuote/index.tsx
similarity index 100%
rename from src/components/BlockQuote/index.tsx
rename to src/components/ArticleComponents/BlockQuote/index.tsx
diff --git a/src/components/Codebox/InlineCode.tsx b/src/components/ArticleComponents/Codebox/InlineCode.tsx
similarity index 100%
rename from src/components/Codebox/InlineCode.tsx
rename to src/components/ArticleComponents/Codebox/InlineCode.tsx
diff --git a/src/components/Codebox/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Codebox/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Codebox/__tests__/index.test.tsx b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx
similarity index 100%
rename from src/components/Codebox/__tests__/index.test.tsx
rename to src/components/ArticleComponents/Codebox/__tests__/index.test.tsx
diff --git a/src/components/Codebox/dark.module.scss b/src/components/ArticleComponents/Codebox/dark.module.scss
similarity index 100%
rename from src/components/Codebox/dark.module.scss
rename to src/components/ArticleComponents/Codebox/dark.module.scss
diff --git a/src/components/Codebox/index.module.scss b/src/components/ArticleComponents/Codebox/index.module.scss
similarity index 100%
rename from src/components/Codebox/index.module.scss
rename to src/components/ArticleComponents/Codebox/index.module.scss
diff --git a/src/components/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx
similarity index 97%
rename from src/components/Codebox/index.tsx
rename to src/components/ArticleComponents/Codebox/index.tsx
index 07b7b124..2d6ad005 100644
--- a/src/components/Codebox/index.tsx
+++ b/src/components/ArticleComponents/Codebox/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { highlight, languages } from 'prismjs';
 import { sanitize } from 'isomorphic-dompurify';
 import classnames from 'classnames';
-import { copyTextToClipboard } from '../../util/copyTextToClipboard';
+import { copyTextToClipboard } from '../../../util/copyTextToClipboard';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/Pagination/index.module.scss b/src/components/ArticleComponents/Pagination/index.module.scss
similarity index 100%
rename from src/components/Pagination/index.module.scss
rename to src/components/ArticleComponents/Pagination/index.module.scss
diff --git a/src/components/Pagination/index.tsx b/src/components/ArticleComponents/Pagination/index.tsx
similarity index 96%
rename from src/components/Pagination/index.tsx
rename to src/components/ArticleComponents/Pagination/index.tsx
index e2640f52..ce04ae1d 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/ArticleComponents/Pagination/index.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAnglesRight, faAnglesLeft } from '@fortawesome/free-solid-svg-icons';
-import { PaginationInfo } from '../../types';
+import { PaginationInfo } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/RecentPosts/index.module.scss b/src/components/ArticleComponents/RecentPosts/index.module.scss
similarity index 100%
rename from src/components/RecentPosts/index.module.scss
rename to src/components/ArticleComponents/RecentPosts/index.module.scss
diff --git a/src/components/RecentPosts/index.tsx b/src/components/ArticleComponents/RecentPosts/index.tsx
similarity index 95%
rename from src/components/RecentPosts/index.tsx
rename to src/components/ArticleComponents/RecentPosts/index.tsx
index ca295e31..20dfe838 100644
--- a/src/components/RecentPosts/index.tsx
+++ b/src/components/ArticleComponents/RecentPosts/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import { FormattedMessage } from 'react-intl';
-import { BlogPost } from '../../types';
+import { BlogPost } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/TableOfContents/index.module.scss b/src/components/ArticleComponents/TableOfContents/index.module.scss
similarity index 100%
rename from src/components/TableOfContents/index.module.scss
rename to src/components/ArticleComponents/TableOfContents/index.module.scss
diff --git a/src/components/TableOfContents/index.tsx b/src/components/ArticleComponents/TableOfContents/index.tsx
similarity index 96%
rename from src/components/TableOfContents/index.tsx
rename to src/components/ArticleComponents/TableOfContents/index.tsx
index 41a6324f..70b0acdd 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/ArticleComponents/TableOfContents/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'gatsby';
-import { TableOfContentsItem } from '../../types';
+import { TableOfContentsItem } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/ArticleComponents/index.tsx b/src/components/ArticleComponents/index.tsx
new file mode 100644
index 00000000..a88bd211
--- /dev/null
+++ b/src/components/ArticleComponents/index.tsx
@@ -0,0 +1,11 @@
+export { default as Alert } from './Alert';
+export { default as BlockQuote } from './BlockQuote';
+export { default as AuthorList } from './AuthorList';
+export { default as Codebox } from './Codebox';
+export { default as InlineCode } from './Codebox/InlineCode';
+export { default as DataTag } from './DataTag';
+export { default as EditLink } from './EditLink';
+export { default as Pagination } from './Pagination';
+export { default as RecentPosts } from './RecentPosts';
+export { default as Table } from './Table';
+export { default as TableOfContents } from './TableOfContents';
diff --git a/src/components/Author/index.tsx b/src/components/Author/index.tsx
deleted file mode 100644
index f2004f1c..00000000
--- a/src/components/Author/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import styles from './index.module.scss';
-
-interface Props {
-  index: number;
-  username: string;
-  size: string;
-}
-
-const Author = ({
-  index,
-  username,
-  size = '64',
-}: Props): null | JSX.Element => {
-  const intl = useIntl();
-
-  if (username) {
-    // Clean up username and build links.
-    const githubUserName = username.trim();
-    const githubLink = `https://github.com/${githubUserName}`;
-    const githubImgLink = `https://github.com/${githubUserName}.png?size=${size}`;
-
-    // If it's the first author then no margin left.
-    const mleft = index === 0 ? { marginLeft: 0 } : {};
-
-    const translation = intl.formatMessage(
-      { id: 'components.author.githubLinkLabel' },
-      { username }
-    );
-
-    return (
-      <li>
-        <a
-          className={styles.link}
-          href={githubLink}
-          aria-label={translation}
-          key={username}
-          target="_blank"
-          rel="noopener noreferrer"
-          style={mleft}
-        >
-          <img src={githubImgLink} alt="" />
-        </a>
-      </li>
-    );
-  }
-
-  return null;
-};
-
-export default Author;
diff --git a/src/components/BlogAuthorsList/index.module.scss b/src/components/BlogComponents/BlogAuthorsList/index.module.scss
similarity index 100%
rename from src/components/BlogAuthorsList/index.module.scss
rename to src/components/BlogComponents/BlogAuthorsList/index.module.scss
diff --git a/src/components/BlogAuthorsList/index.tsx b/src/components/BlogComponents/BlogAuthorsList/index.tsx
similarity index 89%
rename from src/components/BlogAuthorsList/index.tsx
rename to src/components/BlogComponents/BlogAuthorsList/index.tsx
index ccc1e193..d781f702 100644
--- a/src/components/BlogAuthorsList/index.tsx
+++ b/src/components/BlogComponents/BlogAuthorsList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { BlogPostAuthor } from '../../types';
-import { getTerminatingString } from '../../util/getTerminatingString';
+import { getTerminatingString } from '../../../util/getTerminatingString';
+import { BlogPostAuthor } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/BlogCard/index.module.scss b/src/components/BlogComponents/BlogCard/index.module.scss
similarity index 100%
rename from src/components/BlogCard/index.module.scss
rename to src/components/BlogComponents/BlogCard/index.module.scss
diff --git a/src/components/BlogCard/index.tsx b/src/components/BlogComponents/BlogCard/index.tsx
similarity index 90%
rename from src/components/BlogCard/index.tsx
rename to src/components/BlogComponents/BlogCard/index.tsx
index 13b9cf8f..0a5f5268 100644
--- a/src/components/BlogCard/index.tsx
+++ b/src/components/BlogComponents/BlogCard/index.tsx
@@ -1,21 +1,21 @@
-import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import React, { Fragment } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { BlogPost } from '../../types';
-import { getTerminatingString } from '../../util/getTerminatingString';
-import { blogPath } from '../../../pathPrefixes';
+import { LocalizedLink as Link } from 'gatsby-theme-i18n';
+import { getTerminatingString } from '../../../util/getTerminatingString';
+import { blogPath } from '../../../../pathPrefixes';
+import { BlogPost } from '../../../types';
 import styles from './index.module.scss';
 
-interface Props {
-  data: BlogPost;
-}
-
 const getBlogCategoryUrl = (category: string): string =>
   `${blogPath}${category}/`;
 
 const getBlogPostUrl = (slug: string) =>
   slug.endsWith('/') ? slug : `${slug}/`;
 
+interface Props {
+  data: BlogPost;
+}
+
 const BlogCard = ({
   data: {
     node: {
diff --git a/src/components/BlogComponents/index.ts b/src/components/BlogComponents/index.ts
new file mode 100644
index 00000000..38330e67
--- /dev/null
+++ b/src/components/BlogComponents/index.ts
@@ -0,0 +1,2 @@
+export { default as BlogAuthorsList } from './BlogAuthorsList';
+export { default as BlogCard } from './BlogCard';
diff --git a/src/components/Banner/index.module.scss b/src/components/CommonComponents/Banner/index.module.scss
similarity index 100%
rename from src/components/Banner/index.module.scss
rename to src/components/CommonComponents/Banner/index.module.scss
diff --git a/src/components/Banner/index.tsx b/src/components/CommonComponents/Banner/index.tsx
similarity index 88%
rename from src/components/Banner/index.tsx
rename to src/components/CommonComponents/Banner/index.tsx
index 32d66722..bda9009f 100644
--- a/src/components/Banner/index.tsx
+++ b/src/components/CommonComponents/Banner/index.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { sanitize } from 'isomorphic-dompurify';
-import { dateIsBetween } from '../../util/dateIsBetween';
-import config from '../../config.json';
-import { BannersIndex } from '../../types';
-import { isAbsoluteUrl } from '../../util/isAbsoluteUrl';
+import { dateIsBetween } from '../../../util/dateIsBetween';
+import { isAbsoluteUrl } from '../../../util/isAbsoluteUrl';
+import { BannersIndex } from '../../../types';
+import config from '../../../config.json';
 import styles from './index.module.scss';
 
 export interface BannerProps {
diff --git a/src/components/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap b/src/components/CommonComponents/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/CommonComponents/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DarkModeToggle/__tests__/index.test.tsx b/src/components/CommonComponents/DarkModeToggle/__tests__/index.test.tsx
similarity index 100%
rename from src/components/DarkModeToggle/__tests__/index.test.tsx
rename to src/components/CommonComponents/DarkModeToggle/__tests__/index.test.tsx
diff --git a/src/components/DarkModeToggle/index.module.scss b/src/components/CommonComponents/DarkModeToggle/index.module.scss
similarity index 100%
rename from src/components/DarkModeToggle/index.module.scss
rename to src/components/CommonComponents/DarkModeToggle/index.module.scss
diff --git a/src/components/DarkModeToggle/index.tsx b/src/components/CommonComponents/DarkModeToggle/index.tsx
similarity index 93%
rename from src/components/DarkModeToggle/index.tsx
rename to src/components/CommonComponents/DarkModeToggle/index.tsx
index 98fae907..9039f5e1 100644
--- a/src/components/DarkModeToggle/index.tsx
+++ b/src/components/CommonComponents/DarkModeToggle/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ModeNightIcon from '@mui/icons-material/ModeNight';
 import BrightnessMediumIcon from '@mui/icons-material/BrightnessMedium';
-import { useTheme } from '../../hooks/useTheme';
+import { useTheme } from '../../../hooks/useTheme';
 import styles from './index.module.scss';
 
 const DarkModeToggle = () => {
diff --git a/src/components/Dropdown/__tests__/Dropdown.test.tsx b/src/components/CommonComponents/Dropdown/__tests__/Dropdown.test.tsx
similarity index 100%
rename from src/components/Dropdown/__tests__/Dropdown.test.tsx
rename to src/components/CommonComponents/Dropdown/__tests__/Dropdown.test.tsx
diff --git a/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/components/CommonComponents/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
similarity index 100%
rename from src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
rename to src/components/CommonComponents/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
diff --git a/src/components/Dropdown/__tests__/computeDropdownStyles.test.ts b/src/components/CommonComponents/Dropdown/__tests__/computeDropdownStyles.test.ts
similarity index 100%
rename from src/components/Dropdown/__tests__/computeDropdownStyles.test.ts
rename to src/components/CommonComponents/Dropdown/__tests__/computeDropdownStyles.test.ts
diff --git a/src/components/Dropdown/computeDropdownStyles.ts b/src/components/CommonComponents/Dropdown/computeDropdownStyles.ts
similarity index 94%
rename from src/components/Dropdown/computeDropdownStyles.ts
rename to src/components/CommonComponents/Dropdown/computeDropdownStyles.ts
index 36b4bf75..f845d0ff 100644
--- a/src/components/Dropdown/computeDropdownStyles.ts
+++ b/src/components/CommonComponents/Dropdown/computeDropdownStyles.ts
@@ -1,4 +1,4 @@
-import type { ElementPositionAndSize } from '../../hooks/useElementPositionAndSize';
+import type { ElementPositionAndSize } from '../../../hooks/useElementPositionAndSize';
 
 export const exptraLeftValue = 10;
 export const exptraTopValue = 15;
diff --git a/src/components/Dropdown/index.module.scss b/src/components/CommonComponents/Dropdown/index.module.scss
similarity index 100%
rename from src/components/Dropdown/index.module.scss
rename to src/components/CommonComponents/Dropdown/index.module.scss
diff --git a/src/components/Dropdown/index.tsx b/src/components/CommonComponents/Dropdown/index.tsx
similarity index 86%
rename from src/components/Dropdown/index.tsx
rename to src/components/CommonComponents/Dropdown/index.tsx
index 0d18affb..8a3415f4 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/CommonComponents/Dropdown/index.tsx
@@ -1,15 +1,9 @@
 import React, { useRef } from 'react';
-import { useElementPositionAndSize } from '../../hooks/useElementPositionAndSize';
+import { useElementPositionAndSize } from '../../../hooks/useElementPositionAndSize';
 import { computeDropdownStyles } from './computeDropdownStyles';
+import { DropdownItem } from '../../../types';
 import styles from './index.module.scss';
 
-export interface DropdownItem {
-  title: string;
-  label: string;
-  onClick: () => void;
-  active?: boolean;
-}
-
 interface Props<T> {
   items: Array<DropdownItem>;
   shouldShow: boolean;
diff --git a/src/components/Hero/index.module.scss b/src/components/CommonComponents/Hero/index.module.scss
similarity index 98%
rename from src/components/Hero/index.module.scss
rename to src/components/CommonComponents/Hero/index.module.scss
index f2cee409..299991f5 100644
--- a/src/components/Hero/index.module.scss
+++ b/src/components/CommonComponents/Hero/index.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/typography.scss';
+@use '../../../styles/typography.scss';
 
 .hero {
   align-items: center;
diff --git a/src/components/Hero/index.tsx b/src/components/CommonComponents/Hero/index.tsx
similarity index 94%
rename from src/components/Hero/index.tsx
rename to src/components/CommonComponents/Hero/index.tsx
index 9364472b..06aa0c98 100644
--- a/src/components/Hero/index.tsx
+++ b/src/components/CommonComponents/Hero/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import { useDetectOs } from '../../hooks/useDetectOs';
-import type { NodeReleaseData } from '../../types';
+import { useDetectOs } from '../../../hooks/useDetectOs';
+import type { NodeReleaseData } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/LanguageSelector/__tests__/LanguageSelector.test.tsx b/src/components/CommonComponents/LanguageSelector/__tests__/LanguageSelector.test.tsx
similarity index 100%
rename from src/components/LanguageSelector/__tests__/LanguageSelector.test.tsx
rename to src/components/CommonComponents/LanguageSelector/__tests__/LanguageSelector.test.tsx
diff --git a/src/components/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap b/src/components/CommonComponents/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap
similarity index 100%
rename from src/components/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap
rename to src/components/CommonComponents/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap
diff --git a/src/components/LanguageSelector/index.module.scss b/src/components/CommonComponents/LanguageSelector/index.module.scss
similarity index 100%
rename from src/components/LanguageSelector/index.module.scss
rename to src/components/CommonComponents/LanguageSelector/index.module.scss
diff --git a/src/components/LanguageSelector/index.tsx b/src/components/CommonComponents/LanguageSelector/index.tsx
similarity index 83%
rename from src/components/LanguageSelector/index.tsx
rename to src/components/CommonComponents/LanguageSelector/index.tsx
index 2cdddae1..e25229e1 100644
--- a/src/components/LanguageSelector/index.tsx
+++ b/src/components/CommonComponents/LanguageSelector/index.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import TranslateIcon from '@mui/icons-material/Translate';
-import { useAutoClosableDropdown } from '../../hooks/useAutoClosableDropdown';
-import { useLocaleAsDropdown } from '../../hooks/useLocaleAsDropdown';
+import { useAutoClosableDropdown } from '../../../hooks/useAutoClosableDropdown';
+import { useLocaleAsDropdown } from '../../../hooks/useLocaleAsDropdown';
 import styles from './index.module.scss';
 
 const LanguageSelector = () => {
diff --git a/src/components/RandomContributor/index.module.scss b/src/components/CommonComponents/RandomContributor/index.module.scss
similarity index 100%
rename from src/components/RandomContributor/index.module.scss
rename to src/components/CommonComponents/RandomContributor/index.module.scss
diff --git a/src/components/RandomContributor/index.tsx b/src/components/CommonComponents/RandomContributor/index.tsx
similarity index 91%
rename from src/components/RandomContributor/index.tsx
rename to src/components/CommonComponents/RandomContributor/index.tsx
index ae313d62..8fde840f 100644
--- a/src/components/RandomContributor/index.tsx
+++ b/src/components/CommonComponents/RandomContributor/index.tsx
@@ -1,8 +1,8 @@
 import React, { MutableRefObject, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import AnimatedPlaceholder from '../AnimatedPlaceholder';
-import { useOnScreen } from '../../hooks/useOnScreen';
-import { useNodeJsContributorsApi } from '../../hooks/useNodeJsContributorsApi';
+import { useOnScreen } from '../../../hooks/useOnScreen';
+import { useNodeJsContributorsApi } from '../../../hooks/useNodeJsContributorsApi';
 import styles from './index.module.scss';
 
 const RandomContributor = (): JSX.Element => {
diff --git a/src/components/Seo/__tests__/__snapshots__/seo.test.tsx.snap b/src/components/CommonComponents/SEO/__tests__/__snapshots__/seo.test.tsx.snap
similarity index 100%
rename from src/components/Seo/__tests__/__snapshots__/seo.test.tsx.snap
rename to src/components/CommonComponents/SEO/__tests__/__snapshots__/seo.test.tsx.snap
diff --git a/src/components/Seo/__tests__/seo.test.tsx b/src/components/CommonComponents/SEO/__tests__/seo.test.tsx
similarity index 100%
rename from src/components/Seo/__tests__/seo.test.tsx
rename to src/components/CommonComponents/SEO/__tests__/seo.test.tsx
diff --git a/src/components/Seo/index.tsx b/src/components/CommonComponents/SEO/index.tsx
similarity index 98%
rename from src/components/Seo/index.tsx
rename to src/components/CommonComponents/SEO/index.tsx
index e8ecba61..7ea65acc 100644
--- a/src/components/Seo/index.tsx
+++ b/src/components/CommonComponents/SEO/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useLocation } from '@gatsbyjs/reach-router';
-import config from '../../config.json';
+import config from '../../../config.json';
 
 interface Props {
   title?: string;
diff --git a/src/components/SearchBar/__tests__/SearchBar.test.tsx b/src/components/CommonComponents/SearchBar/__tests__/SearchBar.test.tsx
similarity index 100%
rename from src/components/SearchBar/__tests__/SearchBar.test.tsx
rename to src/components/CommonComponents/SearchBar/__tests__/SearchBar.test.tsx
diff --git a/src/components/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap b/src/components/CommonComponents/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap
similarity index 100%
rename from src/components/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap
rename to src/components/CommonComponents/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap
diff --git a/src/components/SearchBar/index.module.scss b/src/components/CommonComponents/SearchBar/index.module.scss
similarity index 100%
rename from src/components/SearchBar/index.module.scss
rename to src/components/CommonComponents/SearchBar/index.module.scss
diff --git a/src/components/SearchBar/index.tsx b/src/components/CommonComponents/SearchBar/index.tsx
similarity index 96%
rename from src/components/SearchBar/index.tsx
rename to src/components/CommonComponents/SearchBar/index.tsx
index 4d211be1..231ef647 100644
--- a/src/components/SearchBar/index.tsx
+++ b/src/components/CommonComponents/SearchBar/index.tsx
@@ -7,9 +7,9 @@ import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useClickOutside } from 'react-click-outside-hook';
 import SectionTitle from '../SectionTitle';
-import { SearchResult } from '../../types';
-import useKeyPress from '../../hooks/useKeyPress';
-import { useSearchResults } from '../../hooks/useSearchResults';
+import useKeyPress from '../../../hooks/useKeyPress';
+import { useSearchResults } from '../../../hooks/useSearchResults';
+import { SearchResult } from '../../../types';
 import styles from './index.module.scss';
 
 const containerTransition = { type: 'spring', damping: 22, stiffness: 150 };
diff --git a/src/components/SectionTitle/__tests__/SectionTitle.test.tsx b/src/components/CommonComponents/SectionTitle/__tests__/SectionTitle.test.tsx
similarity index 100%
rename from src/components/SectionTitle/__tests__/SectionTitle.test.tsx
rename to src/components/CommonComponents/SectionTitle/__tests__/SectionTitle.test.tsx
diff --git a/src/components/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap b/src/components/CommonComponents/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap
similarity index 100%
rename from src/components/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap
rename to src/components/CommonComponents/SectionTitle/__tests__/__snapshots__/SectionTitle.test.tsx.snap
diff --git a/src/components/SectionTitle/index.module.scss b/src/components/CommonComponents/SectionTitle/index.module.scss
similarity index 100%
rename from src/components/SectionTitle/index.module.scss
rename to src/components/CommonComponents/SectionTitle/index.module.scss
diff --git a/src/components/SectionTitle/index.tsx b/src/components/CommonComponents/SectionTitle/index.tsx
similarity index 100%
rename from src/components/SectionTitle/index.tsx
rename to src/components/CommonComponents/SectionTitle/index.tsx
diff --git a/src/components/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/src/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/ShellBox/__tests__/index.test.tsx b/src/components/CommonComponents/ShellBox/__tests__/index.test.tsx
similarity index 100%
rename from src/components/ShellBox/__tests__/index.test.tsx
rename to src/components/CommonComponents/ShellBox/__tests__/index.test.tsx
diff --git a/src/components/ShellBox/index.module.scss b/src/components/CommonComponents/ShellBox/index.module.scss
similarity index 100%
rename from src/components/ShellBox/index.module.scss
rename to src/components/CommonComponents/ShellBox/index.module.scss
diff --git a/src/components/ShellBox/index.tsx b/src/components/CommonComponents/ShellBox/index.tsx
similarity index 93%
rename from src/components/ShellBox/index.tsx
rename to src/components/CommonComponents/ShellBox/index.tsx
index 62253c5d..4a9dc598 100644
--- a/src/components/ShellBox/index.tsx
+++ b/src/components/CommonComponents/ShellBox/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { copyTextToClipboard } from '../../util/copyTextToClipboard';
+import { copyTextToClipboard } from '../../../util/copyTextToClipboard';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/CommonComponents/index.ts b/src/components/CommonComponents/index.ts
new file mode 100644
index 00000000..528df98f
--- /dev/null
+++ b/src/components/CommonComponents/index.ts
@@ -0,0 +1,11 @@
+export { default as AnimatedPlaceholder } from './AnimatedPlaceholder';
+export { default as Banner } from './Banner';
+export { default as DarkModeToggle } from './DarkModeToggle';
+export { default as Dropdown } from './Dropdown';
+export { default as Hero } from './Hero';
+export { default as LanguageSelector } from './LanguageSelector';
+export { default as RandomContributor } from './RandomContributor';
+export { default as SearchBar } from './SearchBar';
+export { default as SectionTitle } from './SectionTitle';
+export { default as SEO } from './SEO';
+export { default as ShellBox } from './ShellBox';
diff --git a/src/components/DownloadAdditional/index.module.scss b/src/components/DownloadComponents/DownloadAdditional/index.module.scss
similarity index 100%
rename from src/components/DownloadAdditional/index.module.scss
rename to src/components/DownloadComponents/DownloadAdditional/index.module.scss
diff --git a/src/components/DownloadAdditional/index.tsx b/src/components/DownloadComponents/DownloadAdditional/index.tsx
similarity index 89%
rename from src/components/DownloadAdditional/index.tsx
rename to src/components/DownloadComponents/DownloadAdditional/index.tsx
index 1b092441..f670acef 100644
--- a/src/components/DownloadAdditional/index.tsx
+++ b/src/components/DownloadComponents/DownloadAdditional/index.tsx
@@ -1,9 +1,9 @@
-import React, { useState, FC } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import DownloadableItem from './DownloadableItem';
 import DownloadToggle from '../DownloadToggle';
-import { NodeReleaseData } from '../../types';
 import { getDownloadableItemsList } from './DownloadableItem/downloadItems';
+import { NodeReleaseData } from '../../../types';
 import styles from './index.module.scss';
 
 interface DownloadAdditionalProps {
@@ -12,11 +12,11 @@ interface DownloadAdditionalProps {
   handleTypeReleaseToggle: (selected: React.SetStateAction<string>) => void;
 }
 
-const DownloadAdditional: FC<DownloadAdditionalProps> = ({
+const DownloadAdditional = ({
   line,
   selectedTypeRelease,
   handleTypeReleaseToggle,
-}) => {
+}: DownloadAdditionalProps) => {
   const [expandedItem, setExpandedItem] = useState('');
 
   return (
diff --git a/src/components/DownloadCards/index.module.scss b/src/components/DownloadComponents/DownloadCards/index.module.scss
similarity index 100%
rename from src/components/DownloadCards/index.module.scss
rename to src/components/DownloadComponents/DownloadCards/index.module.scss
diff --git a/src/components/DownloadCards/index.tsx b/src/components/DownloadComponents/DownloadCards/index.tsx
similarity index 87%
rename from src/components/DownloadCards/index.tsx
rename to src/components/DownloadComponents/DownloadCards/index.tsx
index 069abc42..5dd80efd 100644
--- a/src/components/DownloadCards/index.tsx
+++ b/src/components/DownloadComponents/DownloadCards/index.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Tabs, TabList } from 'react-tabs';
-import { NodeReleaseData } from '../../types';
-import { ReactComponent as AppleLogo } from '../../images/logos/apple-logo.svg';
-import { ReactComponent as MicrosoftLogo } from '../../images/logos/microsoft-download-logo.svg';
-import { ReactComponent as SourceCodeIcon } from '../../images/logos/source-code-icon.svg';
-import { UserOS } from '../../util/detectOS';
+import { NodeReleaseData } from '../../../types';
+import { ReactComponent as AppleLogo } from '../../../images/logos/apple-logo.svg';
+import { ReactComponent as MicrosoftLogo } from '../../../images/logos/microsoft-download-logo.svg';
+import { ReactComponent as SourceCodeIcon } from '../../../images/logos/source-code-icon.svg';
+import { UserOS } from '../../../util/detectOS';
 import DownloadCard from './DownloadCard';
 import styles from './index.module.scss';
 
diff --git a/src/components/DownloadHeader/index.module.scss b/src/components/DownloadComponents/DownloadHeader/index.module.scss
similarity index 100%
rename from src/components/DownloadHeader/index.module.scss
rename to src/components/DownloadComponents/DownloadHeader/index.module.scss
diff --git a/src/components/DownloadComponents/DownloadHeader/index.tsx b/src/components/DownloadComponents/DownloadHeader/index.tsx
new file mode 100644
index 00000000..c3a8e240
--- /dev/null
+++ b/src/components/DownloadComponents/DownloadHeader/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  FormattedMessage,
+  injectIntl,
+  WrappedComponentProps,
+} from 'react-intl';
+import { NodeReleaseData } from '../../../types';
+import { SectionTitle } from '../../CommonComponents';
+import styles from './index.module.scss';
+
+interface Props {
+  release?: NodeReleaseData;
+}
+
+const DownloadHeader = ({ release, intl }: Props & WrappedComponentProps) => (
+  <>
+    <div className={styles.downloadHeader}>
+      <SectionTitle
+        path={[
+          'home',
+          intl.formatMessage({
+            id: 'components.downloadHeader.navigation.activeSection',
+          }),
+        ]}
+      />
+      <div>
+        <FormattedMessage
+          id="components.downloadHeader.navigation.nodeVersion"
+          values={{ lts: release?.isLts, nodeVersion: release?.fullVersion }}
+        />
+      </div>
+    </div>
+    <div className={styles.downloadHeader}>
+      <div className={styles.title}>
+        <FormattedMessage id="components.downloadHeader.navigation.title" />
+      </div>
+      <div className={styles.npm}>
+        <FormattedMessage id="components.downloadHeader.navigation.npmVersion" />
+      </div>
+    </div>
+  </>
+);
+
+export default injectIntl(DownloadHeader);
diff --git a/src/components/DownloadReleases/DownloadTable/index.module.scss b/src/components/DownloadComponents/DownloadReleases/DownloadTable/index.module.scss
similarity index 100%
rename from src/components/DownloadReleases/DownloadTable/index.module.scss
rename to src/components/DownloadComponents/DownloadReleases/DownloadTable/index.module.scss
diff --git a/src/components/DownloadReleases/DownloadTable/index.tsx b/src/components/DownloadComponents/DownloadReleases/DownloadTable/index.tsx
similarity index 98%
rename from src/components/DownloadReleases/DownloadTable/index.tsx
rename to src/components/DownloadComponents/DownloadReleases/DownloadTable/index.tsx
index 1ff8525f..c5793f7d 100644
--- a/src/components/DownloadReleases/DownloadTable/index.tsx
+++ b/src/components/DownloadComponents/DownloadReleases/DownloadTable/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { NodeReleaseData } from '../../../types';
+import { NodeReleaseData } from '../../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/DownloadReleases/index.module.scss b/src/components/DownloadComponents/DownloadReleases/index.module.scss
similarity index 100%
rename from src/components/DownloadReleases/index.module.scss
rename to src/components/DownloadComponents/DownloadReleases/index.module.scss
diff --git a/src/components/DownloadReleases/index.tsx b/src/components/DownloadComponents/DownloadReleases/index.tsx
similarity index 92%
rename from src/components/DownloadReleases/index.tsx
rename to src/components/DownloadComponents/DownloadReleases/index.tsx
index 568aec0f..d3b761da 100644
--- a/src/components/DownloadReleases/index.tsx
+++ b/src/components/DownloadComponents/DownloadReleases/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import DownloadTable from './DownloadTable';
 import UpcomingReleases from '../UpcomingReleases';
-import { NodeReleaseData, UpcomingRelease } from '../../types';
+import { NodeReleaseData, UpcomingRelease } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DownloadToggle/__tests__/index.test.tsx b/src/components/DownloadComponents/DownloadToggle/__tests__/index.test.tsx
similarity index 100%
rename from src/components/DownloadToggle/__tests__/index.test.tsx
rename to src/components/DownloadComponents/DownloadToggle/__tests__/index.test.tsx
diff --git a/src/components/DownloadToggle/index.module.scss b/src/components/DownloadComponents/DownloadToggle/index.module.scss
similarity index 100%
rename from src/components/DownloadToggle/index.module.scss
rename to src/components/DownloadComponents/DownloadToggle/index.module.scss
diff --git a/src/components/DownloadToggle/index.tsx b/src/components/DownloadComponents/DownloadToggle/index.tsx
similarity index 100%
rename from src/components/DownloadToggle/index.tsx
rename to src/components/DownloadComponents/DownloadToggle/index.tsx
diff --git a/src/components/InstallTabs/LinuxPanel/index.tsx b/src/components/DownloadComponents/InstallTabs/LinuxPanel/index.tsx
similarity index 91%
rename from src/components/InstallTabs/LinuxPanel/index.tsx
rename to src/components/DownloadComponents/InstallTabs/LinuxPanel/index.tsx
index a4bfc4a2..84cfd4e2 100644
--- a/src/components/InstallTabs/LinuxPanel/index.tsx
+++ b/src/components/DownloadComponents/InstallTabs/LinuxPanel/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import useNvmVersion from '../../../hooks/useNvmVersion';
-import ShellBox from '../../ShellBox';
+import useNvmVersion from '../../../../hooks/useNvmVersion';
+import { ShellBox } from '../../../CommonComponents';
 import styles from '../index.module.scss';
 
 interface Props {
diff --git a/src/components/InstallTabs/MacOSPanel/index.tsx b/src/components/DownloadComponents/InstallTabs/MacOSPanel/index.tsx
similarity index 92%
rename from src/components/InstallTabs/MacOSPanel/index.tsx
rename to src/components/DownloadComponents/InstallTabs/MacOSPanel/index.tsx
index b0a4e573..6832d2df 100644
--- a/src/components/InstallTabs/MacOSPanel/index.tsx
+++ b/src/components/DownloadComponents/InstallTabs/MacOSPanel/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import useNvmVersion from '../../../hooks/useNvmVersion';
-import ShellBox from '../../ShellBox';
+import useNvmVersion from '../../../../hooks/useNvmVersion';
+import { ShellBox } from '../../../CommonComponents';
 import styles from '../index.module.scss';
 
 interface Props {
diff --git a/src/components/InstallTabs/WindowsPanel/index.tsx b/src/components/DownloadComponents/InstallTabs/WindowsPanel/index.tsx
similarity index 95%
rename from src/components/InstallTabs/WindowsPanel/index.tsx
rename to src/components/DownloadComponents/InstallTabs/WindowsPanel/index.tsx
index 5fa5651c..1cfd1fe9 100644
--- a/src/components/InstallTabs/WindowsPanel/index.tsx
+++ b/src/components/DownloadComponents/InstallTabs/WindowsPanel/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import ShellBox from '../../ShellBox';
+import { ShellBox } from '../../../CommonComponents';
 import styles from '../index.module.scss';
 
 const WindowsPanel = (): JSX.Element => (
diff --git a/src/components/InstallTabs/__tests__/linux-panel.test.tsx b/src/components/DownloadComponents/InstallTabs/__tests__/linux-panel.test.tsx
similarity index 100%
rename from src/components/InstallTabs/__tests__/linux-panel.test.tsx
rename to src/components/DownloadComponents/InstallTabs/__tests__/linux-panel.test.tsx
diff --git a/src/components/InstallTabs/__tests__/macos-panel.test.tsx b/src/components/DownloadComponents/InstallTabs/__tests__/macos-panel.test.tsx
similarity index 100%
rename from src/components/InstallTabs/__tests__/macos-panel.test.tsx
rename to src/components/DownloadComponents/InstallTabs/__tests__/macos-panel.test.tsx
diff --git a/src/components/InstallTabs/index.module.scss b/src/components/DownloadComponents/InstallTabs/index.module.scss
similarity index 100%
rename from src/components/InstallTabs/index.module.scss
rename to src/components/DownloadComponents/InstallTabs/index.module.scss
diff --git a/src/components/InstallTabs/index.tsx b/src/components/DownloadComponents/InstallTabs/index.tsx
similarity index 98%
rename from src/components/InstallTabs/index.tsx
rename to src/components/DownloadComponents/InstallTabs/index.tsx
index 0dca1ef4..0657bc3c 100644
--- a/src/components/InstallTabs/index.tsx
+++ b/src/components/DownloadComponents/InstallTabs/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { detectOS, UserOS } from '../../util/detectOS';
+import { detectOS, UserOS } from '../../../util/detectOS';
 import WindowsPanel from './WindowsPanel';
 import MacOSPanel from './MacOSPanel';
 import LinuxPanel from './LinuxPanel';
diff --git a/src/components/UpcomingReleases/UpcomingReleasesItem/index.module.scss b/src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesItem/index.module.scss
similarity index 100%
rename from src/components/UpcomingReleases/UpcomingReleasesItem/index.module.scss
rename to src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesItem/index.module.scss
diff --git a/src/components/UpcomingReleases/UpcomingReleasesItem/index.tsx b/src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesItem/index.tsx
similarity index 78%
rename from src/components/UpcomingReleases/UpcomingReleasesItem/index.tsx
rename to src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesItem/index.tsx
index 9edd136c..96644870 100644
--- a/src/components/UpcomingReleases/UpcomingReleasesItem/index.tsx
+++ b/src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesItem/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
-import { ReactComponent as HexagonFilled } from '../../../images/icons/hexagon-filled.svg';
-import { ReactComponent as HexagonOutline } from '../../../images/icons/hexagon-outline.svg';
-import { UpcomingReleaseData } from '../../../types';
+import { ReactComponent as HexagonFilled } from '../../../../images/icons/hexagon-filled.svg';
+import { ReactComponent as HexagonOutline } from '../../../../images/icons/hexagon-outline.svg';
+import { UpcomingReleaseData } from '../../../../types';
 import styles from './index.module.scss';
 
 type Props = UpcomingReleaseData;
diff --git a/src/components/UpcomingReleases/UpcomingReleasesPanel/index.module.scss b/src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesPanel/index.module.scss
similarity index 100%
rename from src/components/UpcomingReleases/UpcomingReleasesPanel/index.module.scss
rename to src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesPanel/index.module.scss
diff --git a/src/components/UpcomingReleases/UpcomingReleasesPanel/index.tsx b/src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesPanel/index.tsx
similarity index 91%
rename from src/components/UpcomingReleases/UpcomingReleasesPanel/index.tsx
rename to src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesPanel/index.tsx
index dc2e1d48..514cd935 100644
--- a/src/components/UpcomingReleases/UpcomingReleasesPanel/index.tsx
+++ b/src/components/DownloadComponents/UpcomingReleases/UpcomingReleasesPanel/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import UpcomingReleasesItem from '../UpcomingReleasesItem';
-import { UpcomingReleaseData } from '../../../types';
+import { UpcomingReleaseData } from '../../../../types';
 import styles from './index.module.scss';
 
 type Props = {
diff --git a/src/components/UpcomingReleases/index.module.scss b/src/components/DownloadComponents/UpcomingReleases/index.module.scss
similarity index 100%
rename from src/components/UpcomingReleases/index.module.scss
rename to src/components/DownloadComponents/UpcomingReleases/index.module.scss
diff --git a/src/components/UpcomingReleases/index.tsx b/src/components/DownloadComponents/UpcomingReleases/index.tsx
similarity index 95%
rename from src/components/UpcomingReleases/index.tsx
rename to src/components/DownloadComponents/UpcomingReleases/index.tsx
index 5b8e12c9..5cd88fb8 100644
--- a/src/components/UpcomingReleases/index.tsx
+++ b/src/components/DownloadComponents/UpcomingReleases/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import UpcomingReleasesPanel from './UpcomingReleasesPanel';
-import { UpcomingRelease } from '../../types';
+import { UpcomingRelease } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/DownloadComponents/index.ts b/src/components/DownloadComponents/index.ts
new file mode 100644
index 00000000..0f337168
--- /dev/null
+++ b/src/components/DownloadComponents/index.ts
@@ -0,0 +1,8 @@
+export { default as DownloadAdditional } from './DownloadAdditional';
+export { default as DownloadCards } from './DownloadCards';
+export { default as DownloadHeader } from './DownloadHeader';
+export { default as DownloadReleases } from './DownloadReleases';
+export { default as DownloadTable } from './DownloadReleases/DownloadTable';
+export { default as DownloadToggle } from './DownloadToggle';
+export { default as InstallTabs } from './InstallTabs';
+export { default as UpcomingReleases } from './UpcomingReleases';
diff --git a/src/components/DownloadHeader/index.tsx b/src/components/DownloadHeader/index.tsx
deleted file mode 100644
index cda6498f..00000000
--- a/src/components/DownloadHeader/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { NodeReleaseData } from '../../types';
-import SectionTitle from '../SectionTitle';
-import styles from './index.module.scss';
-
-interface Props {
-  release?: NodeReleaseData;
-}
-
-const DownloadHeader = ({ release }: Props): JSX.Element => {
-  const nodeVersion = release?.fullVersion;
-  const lts = release?.isLts;
-
-  const intl = useIntl();
-
-  return (
-    <>
-      <div className={styles.downloadHeader}>
-        <SectionTitle
-          path={[
-            'home',
-            intl.formatMessage({
-              id: 'components.downloadHeader.navigation.activeSection',
-            }),
-          ]}
-        />
-        <div>
-          <FormattedMessage
-            id="components.downloadHeader.navigation.nodeVersion"
-            values={{ lts, nodeVersion }}
-          />
-        </div>
-      </div>
-      <div className={styles.downloadHeader}>
-        <div className={styles.title}>
-          <FormattedMessage id="components.downloadHeader.navigation.title" />
-        </div>
-        <div className={styles.npm}>
-          <FormattedMessage id="components.downloadHeader.navigation.npmVersion" />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default DownloadHeader;
diff --git a/src/components/Navigation/index.module.scss b/src/components/NavigationComponents/Navigation/index.module.scss
similarity index 100%
rename from src/components/Navigation/index.module.scss
rename to src/components/NavigationComponents/Navigation/index.module.scss
diff --git a/src/components/Navigation/index.tsx b/src/components/NavigationComponents/Navigation/index.tsx
similarity index 100%
rename from src/components/Navigation/index.tsx
rename to src/components/NavigationComponents/Navigation/index.tsx
diff --git a/src/components/NavigationItem/index.module.scss b/src/components/NavigationComponents/NavigationItem/index.module.scss
similarity index 97%
rename from src/components/NavigationItem/index.module.scss
rename to src/components/NavigationComponents/NavigationItem/index.module.scss
index 3684fc3c..20b826a0 100644
--- a/src/components/NavigationItem/index.module.scss
+++ b/src/components/NavigationComponents/NavigationItem/index.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@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");
 
diff --git a/src/components/NavigationItem/index.tsx b/src/components/NavigationComponents/NavigationItem/index.tsx
similarity index 90%
rename from src/components/NavigationItem/index.tsx
rename to src/components/NavigationComponents/NavigationItem/index.tsx
index 3c478a9c..98b6b6e8 100644
--- a/src/components/NavigationItem/index.tsx
+++ b/src/components/NavigationComponents/NavigationItem/index.tsx
@@ -1,8 +1,8 @@
 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 { useScrollToElement } from '../../../hooks/useScrollToElement';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
 import styles from './index.module.scss';
 
 interface Props {
diff --git a/src/components/NavigationSection/index.module.scss b/src/components/NavigationComponents/NavigationSection/index.module.scss
similarity index 94%
rename from src/components/NavigationSection/index.module.scss
rename to src/components/NavigationComponents/NavigationSection/index.module.scss
index 95d45f95..a30a8a9e 100644
--- a/src/components/NavigationSection/index.module.scss
+++ b/src/components/NavigationComponents/NavigationSection/index.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@import '../../../styles/mixins.scss';
 
 .navigation-section,
 %navigation-section {
diff --git a/src/components/NavigationSection/index.tsx b/src/components/NavigationComponents/NavigationSection/index.tsx
similarity index 100%
rename from src/components/NavigationSection/index.tsx
rename to src/components/NavigationComponents/NavigationSection/index.tsx
diff --git a/src/components/NavigationComponents/index.ts b/src/components/NavigationComponents/index.ts
new file mode 100644
index 00000000..50a2e108
--- /dev/null
+++ b/src/components/NavigationComponents/index.ts
@@ -0,0 +1,3 @@
+export { default as Navigation } from './Navigation';
+export { default as NavigationSection } from './NavigationSection';
+export { default as NavigationItem } from './NavigationItem';
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..838471ac
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,17 @@
+import * as ArticleComponents from './ArticleComponents';
+import * as BlogComponents from './BlogComponents';
+import * as CommonComponents from './CommonComponents';
+import * as DownloadComponents from './DownloadComponents';
+import * as NavigationComponents from './NavigationComponents';
+
+import { getApiComponents, Components as ApiComponents } from './ApiComponents';
+
+export {
+  ApiComponents,
+  ArticleComponents,
+  BlogComponents,
+  CommonComponents,
+  DownloadComponents,
+  NavigationComponents,
+  getApiComponents,
+};
diff --git a/src/components/connectGraphQlArticle.tsx b/src/connectGraphQlArticle.tsx
similarity index 96%
rename from src/components/connectGraphQlArticle.tsx
rename to src/connectGraphQlArticle.tsx
index d0671be0..4232a931 100644
--- a/src/components/connectGraphQlArticle.tsx
+++ b/src/connectGraphQlArticle.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useLocalization } from 'gatsby-theme-i18n';
-import { ArticleData } from '../types';
-import { ArticleLayoutProps } from './Layout/article';
-import { AboutNavigationKeys } from '../types/pages/about';
+import { ArticleData } from './types';
+import { ArticleLayoutProps } from './layouts/article';
+import { AboutNavigationKeys } from './types/pages/about';
 
 interface PageDefaultProps {
   editPath?: string;
diff --git a/src/hooks/useAutoClosableDropdown.tsx b/src/hooks/useAutoClosableDropdown.tsx
index 329c806f..a67d5564 100644
--- a/src/hooks/useAutoClosableDropdown.tsx
+++ b/src/hooks/useAutoClosableDropdown.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import Dropdown, { DropdownItem } from '../components/Dropdown';
+import { CommonComponents } from '../components';
+import { DropdownItem } from '../types';
 
 export const useAutoClosableDropdown = <T extends HTMLElement>(
   items: Array<DropdownItem>,
@@ -31,7 +32,11 @@ export const useAutoClosableDropdown = <T extends HTMLElement>(
 
   return {
     renderDropdown: (
-      <Dropdown items={items} elementRef={elementRef} shouldShow={shouldShow} />
+      <CommonComponents.Dropdown
+        items={items}
+        elementRef={elementRef}
+        shouldShow={shouldShow}
+      />
     ),
     visible: shouldShow,
     showDropdown: updateVisibility,
diff --git a/src/hooks/useFeatureToggles.ts b/src/hooks/useFeatureToggles.ts
index 9f2a0744..57770446 100644
--- a/src/hooks/useFeatureToggles.ts
+++ b/src/hooks/useFeatureToggles.ts
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
-import { FeatureToggleContext } from '../containers/FeatureToggles';
+import { FeatureToggleContext } from '../providers';
 
 export const useFeatureToggles = () => {
   const featureFlagContext = useContext(FeatureToggleContext);
diff --git a/src/hooks/useNavigationContainer.tsx b/src/hooks/useNavigationContainer.tsx
index 00446fd2..dc65207f 100644
--- a/src/hooks/useNavigationContainer.tsx
+++ b/src/hooks/useNavigationContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Navigation from '../components/Navigation';
+import { NavigationComponents } from '../components';
 import type { NavigationData, NavigationItemData } from '../types';
 
 type SectionTuple = [string, NavigationItemData[]][];
@@ -12,9 +12,13 @@ export const useNavigationContainer = (label: string) => {
   const onClick = () => setIsOpen(false);
 
   const renderContainer = ({ children }: React.PropsWithChildren) => (
-    <Navigation isOpen={isOpen} toggleNavigation={toggle} label={label}>
+    <NavigationComponents.Navigation
+      isOpen={isOpen}
+      toggleNavigation={toggle}
+      label={label}
+    >
       {children}
-    </Navigation>
+    </NavigationComponents.Navigation>
   );
 
   const renderSections = (sections: NavigationData): SectionTuple =>
diff --git a/src/components/Layout/article.tsx b/src/layouts/article.tsx
similarity index 77%
rename from src/components/Layout/article.tsx
rename to src/layouts/article.tsx
index 1d5671df..a3c3481e 100644
--- a/src/components/Layout/article.tsx
+++ b/src/layouts/article.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Article from '../Article';
-import Layout from './index';
-import AboutNavigation from '../../navigations/about';
-import { AboutNavigationKeys, PageTableOfContents } from '../../types';
+import Article from '../sections/Article';
+import DefaultLayout from './default';
+import AboutNavigation from '../navigations/about';
+import { AboutNavigationKeys, PageTableOfContents } from '../types';
 
 export interface ArticleLayoutProps {
   body: string;
@@ -28,7 +28,7 @@ const ArticleLayout = ({
   children,
   childrenPosition = 'after',
 }: ArticleLayoutProps): JSX.Element => (
-  <Layout title={title} description={description}>
+  <DefaultLayout title={title} description={description}>
     <main className="grid-container">
       {currentSlug && <AboutNavigation currentSlug={currentSlug} />}
       <Article
@@ -42,7 +42,7 @@ const ArticleLayout = ({
         {children}
       </Article>
     </main>
-  </Layout>
+  </DefaultLayout>
 );
 
 export default ArticleLayout;
diff --git a/src/components/Layout/index.tsx b/src/layouts/default.tsx
similarity index 74%
rename from src/components/Layout/index.tsx
rename to src/layouts/default.tsx
index 92012e73..cc60acb0 100644
--- a/src/components/Layout/index.tsx
+++ b/src/layouts/default.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { MotionConfig } from 'framer-motion';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import RandomContributor from '../RandomContributor';
-import { FeatureToggleProvider } from '../../containers/FeatureToggles';
-
-import Header from '../Header';
-import Footer from '../Footer';
-import SEO from '../Seo';
+import { CommonComponents } from '../components';
+import Header from '../sections/Header';
+import Footer from '../sections/Footer';
+import { FeatureToggleProvider } from '../providers';
 
 interface Props {
   title?: string;
@@ -40,12 +38,12 @@ const Layout = ({
 }: React.PropsWithChildren<Props>): JSX.Element => (
   <FeatureToggleProvider>
     <ThemeProvider theme={defaultTheme}>
-      <SEO title={title} description={description} img={img} />
+      <CommonComponents.SEO title={title} description={description} img={img} />
       <MotionConfig reducedMotion="user">
         <div className="layout-container">
           <Header />
           {children}
-          {showRandomContributor && <RandomContributor />}
+          {showRandomContributor && <CommonComponents.RandomContributor />}
           {showFooter && <Footer />}
         </div>
       </MotionConfig>
diff --git a/src/components/Layout/page.tsx b/src/layouts/page.tsx
similarity index 84%
rename from src/components/Layout/page.tsx
rename to src/layouts/page.tsx
index 126bb449..f34b23d0 100644
--- a/src/components/Layout/page.tsx
+++ b/src/layouts/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Article from '../Article';
-import Layout from '.';
-import { PageTableOfContents } from '../../types';
+import Article from '../sections/Article';
+import Layout from './default';
+import { PageTableOfContents } from '../types';
 
 interface Page {
   editPath?: string;
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
new file mode 100644
index 00000000..c5e67bc0
--- /dev/null
+++ b/src/mdxComponents.ts
@@ -0,0 +1,20 @@
+import { MdxLink } from 'gatsby-theme-i18n';
+import { ApiComponents, ArticleComponents } from './components';
+
+export const mdxComponents = {
+  code: ArticleComponents.InlineCode,
+  pre: ArticleComponents.Codebox,
+  inlineCode: ArticleComponents.InlineCode,
+  a: MdxLink,
+  table: ArticleComponents.Table,
+  blockquote: ArticleComponents.BlockQuote,
+  Alert: ArticleComponents.Alert,
+};
+
+export const apiMdxComponents = {
+  DataTag: ArticleComponents.DataTag,
+  a: ApiComponents.ApiLink,
+  h3: ApiComponents.H3,
+  h4: ApiComponents.H4,
+  h5: ApiComponents.H5,
+};
diff --git a/src/navigations/about.module.scss b/src/navigations/about.module.scss
index 61323e8a..e51618f1 100644
--- a/src/navigations/about.module.scss
+++ b/src/navigations/about.module.scss
@@ -1,5 +1,5 @@
-@import '../components/NavigationItem/index.module.scss';
-@import '../components/NavigationSection/index.module.scss';
+@import '../components/NavigationComponents/NavigationItem/index.module.scss';
+@import '../components/NavigationComponents/NavigationSection/index.module.scss';
 
 .title {
   @extend %navigation-item--with-bullet;
diff --git a/src/navigations/about.tsx b/src/navigations/about.tsx
index 838b52f1..47d4442c 100644
--- a/src/navigations/about.tsx
+++ b/src/navigations/about.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import classnames from 'classnames';
-import NavigationItem from '../components/NavigationItem';
-import NavigationSection from '../components/NavigationSection';
+import { NavigationComponents } from '../components';
 import { useNavigationContainer } from '../hooks/useNavigationContainer';
 import { AboutNavigationKeys } from '../types/pages/about';
 import { NavigationSectionData } from '../types';
@@ -82,7 +81,7 @@ const AboutNavigationSection = ({
   );
 
   return (
-    <NavigationSection
+    <NavigationComponents.NavigationSection
       isOpen
       label={title}
       title={sectionTitle}
@@ -95,12 +94,13 @@ interface Props {
   currentSlug: string;
 }
 
-const AboutNavigation = ({ currentSlug }: Props) => {
+const AboutNavigation = ({
+  currentSlug,
+  intl,
+}: Props & WrappedComponentProps) => {
   const { onClick, renderContainer, renderSections } =
     useNavigationContainer('About Navigation');
 
-  const intl = useIntl();
-
   const navigationSections = renderSections(aboutNavigation).map(
     ([key, data]) => (
       <AboutNavigationSection
@@ -110,7 +110,7 @@ const AboutNavigation = ({ currentSlug }: Props) => {
         currentSlug={currentSlug}
       >
         {data.map(item => (
-          <NavigationItem
+          <NavigationComponents.NavigationItem
             key={item.slug}
             title={intl.formatMessage({ id: item.title })}
             slug={item.slug}
@@ -125,4 +125,4 @@ const AboutNavigation = ({ currentSlug }: Props) => {
   return renderContainer({ children: navigationSections });
 };
 
-export default AboutNavigation;
+export default injectIntl(AboutNavigation);
diff --git a/src/navigations/api.module.scss b/src/navigations/api.module.scss
index 2928974f..c7ce4ee2 100644
--- a/src/navigations/api.module.scss
+++ b/src/navigations/api.module.scss
@@ -1,4 +1,4 @@
-@import '../components/NavigationSection/index.module.scss';
+@import '../components/NavigationComponents/NavigationSection/index.module.scss';
 
 .title {
   @extend %navigation-section-title;
diff --git a/src/navigations/api.tsx b/src/navigations/api.tsx
index 6543e2ed..986b5bf7 100644
--- a/src/navigations/api.tsx
+++ b/src/navigations/api.tsx
@@ -1,8 +1,7 @@
 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 { NavigationComponents } from '../components';
 import { useNavigationContainer } from '../hooks/useNavigationContainer';
 import { NavigationData, NavigationSectionData } from '../types';
 import styles from './api.module.scss';
@@ -28,7 +27,7 @@ const ApiNavigationSection = ({
   );
 
   return (
-    <NavigationSection
+    <NavigationComponents.NavigationSection
       isOpen
       label={title}
       title={sectionTitle}
@@ -53,7 +52,7 @@ const ApiNavigation = ({
       currentSlug={currentSlug}
     >
       {data.map(item => (
-        <NavigationItem
+        <NavigationComponents.NavigationItem
           key={item.slug}
           title={item.title}
           slug={item.slug}
diff --git a/src/navigations/blog.tsx b/src/navigations/blog.tsx
index 4ed8a93d..6b8d0868 100644
--- a/src/navigations/blog.tsx
+++ b/src/navigations/blog.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import classnames from 'classnames';
-import NavigationItem from '../components/NavigationItem';
-import NavigationSection from '../components/NavigationSection';
+import { NavigationComponents } from '../components';
 import { useNavigationContainer } from '../hooks/useNavigationContainer';
 import { NavigationItemData } from '../types';
 import styles from './blog.module.scss';
@@ -12,11 +11,13 @@ interface Props {
   currentCategory: string;
 }
 
-const BlogNavigation = ({ categories, currentCategory }: Props) => {
+const BlogNavigation = ({
+  categories,
+  currentCategory,
+  intl,
+}: Props & WrappedComponentProps) => {
   const { onClick, renderContainer } = useNavigationContainer('API Navigation');
 
-  const intl = useIntl();
-
   const title = intl.formatMessage({ id: 'navigation.blog.categories' });
 
   const getExtraClasses = (slug: string) =>
@@ -25,7 +26,7 @@ const BlogNavigation = ({ categories, currentCategory }: Props) => {
     });
 
   const navigationContent = categories.map(item => (
-    <NavigationItem
+    <NavigationComponents.NavigationItem
       key={item.slug}
       title={intl.formatMessage({ id: item.title })}
       slug={item.slug}
@@ -39,7 +40,7 @@ const BlogNavigation = ({ categories, currentCategory }: Props) => {
 
   return renderContainer({
     children: (
-      <NavigationSection
+      <NavigationComponents.NavigationSection
         isOpen
         label={title}
         title={navigationTitle}
@@ -49,4 +50,4 @@ const BlogNavigation = ({ categories, currentCategory }: Props) => {
   });
 };
 
-export default BlogNavigation;
+export default injectIntl(BlogNavigation);
diff --git a/src/navigations/learn.module.scss b/src/navigations/learn.module.scss
index c11b3be7..bcfda969 100644
--- a/src/navigations/learn.module.scss
+++ b/src/navigations/learn.module.scss
@@ -1,5 +1,5 @@
-@import '../components/NavigationItem/index.module.scss';
-@import '../components/NavigationSection/index.module.scss';
+@import '../components/NavigationComponents/NavigationItem/index.module.scss';
+@import '../components/NavigationComponents/NavigationSection/index.module.scss';
 
 .title {
   @extend %navigation-item--with-bullet;
diff --git a/src/navigations/learn.tsx b/src/navigations/learn.tsx
index 8b22f05f..3c30df2c 100644
--- a/src/navigations/learn.tsx
+++ b/src/navigations/learn.tsx
@@ -2,8 +2,7 @@ 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 { NavigationComponents } from '../components';
 import { useNavigationContainer } from '../hooks/useNavigationContainer';
 import { useNavigationSection } from '../hooks/useNavigationSection';
 import { useReadSections } from '../hooks/useReadSections';
@@ -36,7 +35,7 @@ const LearnNavigationSection = ({
   );
 
   return (
-    <NavigationSection
+    <NavigationComponents.NavigationSection
       label={title}
       isOpen={isSectionOpen}
       title={sectionTitle}
@@ -70,7 +69,7 @@ const LearnNavigation = ({ sections, currentSlug }: Props) => {
       currentSlug={currentSlug}
     >
       {data.map(item => (
-        <NavigationItem
+        <NavigationComponents.NavigationItem
           key={item.slug}
           title={item.title}
           slug={item.slug}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 9661d372..13ff5efb 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import Layout from '../components/Layout';
+import DefaultLayout from '../layouts/default';
 
 const NotFoundPage = (): JSX.Element => (
-  <Layout
+  <DefaultLayout
     title="Page not found"
     description="You have hit a route that does not exist."
   >
@@ -17,7 +17,7 @@ const NotFoundPage = (): JSX.Element => (
         </Link>
       </p>
     </main>
-  </Layout>
+  </DefaultLayout>
 );
 
 export default NotFoundPage;
diff --git a/src/pages/about/governance.tsx b/src/pages/about/governance.tsx
index 110a286b..f247c1a3 100644
--- a/src/pages/about/governance.tsx
+++ b/src/pages/about/governance.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index d08ec1db..72d17acf 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/about/releases.tsx b/src/pages/about/releases.tsx
index 56b85020..b0c13d7b 100644
--- a/src/pages/about/releases.tsx
+++ b/src/pages/about/releases.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import DownloadTable from '../../components/DownloadReleases/DownloadTable';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import { DownloadComponents } from '../../components';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { NodeReleaseData, AboutNavigationKeys } from '../../types';
 
 export interface ReleasesNodeReleases {
@@ -16,7 +16,7 @@ export default connectGraphQlArticle(ArticleLayout, {
   currentSlug: AboutNavigationKeys.releases,
   hideArticleComponents: true,
   articleContent: (props: ReleasesNodeReleases) => (
-    <DownloadTable
+    <DownloadComponents.DownloadTable
       nodeReleasesData={props.nodeReleases.nodeReleasesData.filter(
         release => release.status !== 'End-of-life'
       )}
diff --git a/src/pages/about/resources.tsx b/src/pages/about/resources.tsx
index 8f6fd144..af8c0b2d 100644
--- a/src/pages/about/resources.tsx
+++ b/src/pages/about/resources.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/about/security.tsx b/src/pages/about/security.tsx
index f832ab23..695b4ef4 100644
--- a/src/pages/about/security.tsx
+++ b/src/pages/about/security.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
index b819115b..c7d3b02c 100644
--- a/src/pages/download/index.tsx
+++ b/src/pages/download/index.tsx
@@ -2,14 +2,10 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { graphql } from 'gatsby';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
+import DefaultLayout from '../../layouts/default';
+import { DownloadComponents } from '../../components';
 import { detectOS } from '../../util/detectOS';
 import { getUpcomingReleases } from '../../util/getUpcomingReleases';
-import Layout from '../../components/Layout';
-import DownloadHeader from '../../components/DownloadHeader';
-import DownloadToggle from '../../components/DownloadToggle';
-import DownloadCards from '../../components/DownloadCards';
-import DownloadReleases from '../../components/DownloadReleases';
-import DownloadAdditional from '../../components/DownloadAdditional';
 import { NodeReleaseData } from '../../types';
 import styles from './index.module.scss';
 
@@ -48,9 +44,9 @@ const DownloadPage = ({ data: { nodeReleases } }: Props): JSX.Element => {
   const upcomingReleases = getUpcomingReleases(filteredReleases);
 
   return (
-    <Layout title="Download Node.js" description="Come get me!">
+    <DefaultLayout title="Download Node.js" description="Come get me!">
       <main className={`home-container ${styles.downloadPageContainer}`}>
-        <DownloadHeader release={selectedType} />
+        <DownloadComponents.DownloadHeader release={selectedType} />
         <p className={styles.releaseDescription}>
           <FormattedMessage id="pages.download.description" />{' '}
           <Link to="/download/package-manager">
@@ -58,22 +54,22 @@ const DownloadPage = ({ data: { nodeReleases } }: Props): JSX.Element => {
           </Link>
           .
         </p>
-        <DownloadToggle
+        <DownloadComponents.DownloadToggle
           selected={typeRelease}
           handleClick={handleTypeReleaseToggle}
         />
-        <DownloadCards line={selectedType} userOS={userOS} />
-        <DownloadReleases
+        <DownloadComponents.DownloadCards line={selectedType} userOS={userOS} />
+        <DownloadComponents.DownloadReleases
           nodeReleasesData={filteredReleases}
           upcomingReleases={upcomingReleases}
         />
-        <DownloadAdditional
+        <DownloadComponents.DownloadAdditional
           line={selectedType}
           selectedTypeRelease={typeRelease}
           handleTypeReleaseToggle={handleTypeReleaseToggle}
         />
       </main>
-    </Layout>
+    </DefaultLayout>
   );
 };
 
diff --git a/src/pages/download/package-manager.tsx b/src/pages/download/package-manager.tsx
index 1f52957c..0a995b56 100644
--- a/src/pages/download/package-manager.tsx
+++ b/src/pages/download/package-manager.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/download/releases.tsx b/src/pages/download/releases.tsx
index ff23a3af..92ae4265 100644
--- a/src/pages/download/releases.tsx
+++ b/src/pages/download/releases.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import DownloadTable from '../../components/DownloadReleases/DownloadTable';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import { DownloadComponents } from '../../components';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { NodeReleaseData, AboutNavigationKeys } from '../../types';
 
 export interface ReleasesNodeReleases {
@@ -16,7 +16,7 @@ export default connectGraphQlArticle(ArticleLayout, {
   currentSlug: AboutNavigationKeys.previousReleases,
   hideArticleComponents: true,
   articleContent: (props: ReleasesNodeReleases) => (
-    <DownloadTable
+    <DownloadComponents.DownloadTable
       nodeReleasesData={props.nodeReleases.nodeReleasesData.filter(
         release => release.status !== 'Pending'
       )}
diff --git a/src/pages/get-involved/collab-summit.tsx b/src/pages/get-involved/collab-summit.tsx
index 26e0cd24..5681c405 100644
--- a/src/pages/get-involved/collab-summit.tsx
+++ b/src/pages/get-involved/collab-summit.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/get-involved/contribute.tsx b/src/pages/get-involved/contribute.tsx
index 0914713b..75ef185e 100644
--- a/src/pages/get-involved/contribute.tsx
+++ b/src/pages/get-involved/contribute.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/get-involved/index.tsx b/src/pages/get-involved/index.tsx
index 9a8d88d4..18f6a342 100644
--- a/src/pages/get-involved/index.tsx
+++ b/src/pages/get-involved/index.tsx
@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby';
-import ArticleLayout from '../../components/Layout/article';
-import connectGraphQlArticle from '../../components/connectGraphQlArticle';
+import ArticleLayout from '../../layouts/article';
+import connectGraphQlArticle from '../../connectGraphQlArticle';
 import { AboutNavigationKeys } from '../../types';
 
 export default connectGraphQlArticle(ArticleLayout, {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9acdf9b7..29c466bf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,18 +3,16 @@ import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { graphql } from 'gatsby';
 import { IoLogoNodejs, IoMdGitPullRequest, IoMdRocket } from 'react-icons/io';
 
-import Layout from '../components/Layout';
-import Hero from '../components/Hero';
+import DefaultLayout from '../layouts/default';
+import { CommonComponents, DownloadComponents } from '../components';
 
-import { connectGraphQlCustom } from '../components/connectGraphQlArticle';
+import { connectGraphQlCustom } from '../connectGraphQlArticle';
 import { HomepageData, BannersIndex, NodeReleaseData } from '../types';
 
 import { ReactComponent as LeafsIllustrationFront } from '../images/illustrations/leafs-front.svg';
 import { ReactComponent as LeafsIllustrationMiddle } from '../images/illustrations/leafs-middle.svg';
 import { ReactComponent as LeafsIllustrationBack } from '../images/illustrations/leafs-back.svg';
 import { ReactComponent as DotsIllustration } from '../images/illustrations/dots.svg';
-import InstallTabs from '../components/InstallTabs';
-import Banner from '../components/Banner';
 import styles from './index.module.scss';
 
 interface NodeFeatureProps {
@@ -69,10 +67,14 @@ const Index = ({
   },
   intl,
 }: HomepageProps & WrappedComponentProps): JSX.Element => (
-  <Layout title={displayTitle} description={description} showRandomContributor>
+  <DefaultLayout
+    title={displayTitle}
+    description={description}
+    showRandomContributor
+  >
     <main className="home-container">
-      <Banner bannersIndex={bannersIndex} />
-      <Hero
+      <CommonComponents.Banner bannersIndex={bannersIndex} />
+      <CommonComponents.Hero
         title={displayTitle}
         subTitle={subTitle}
         nodeReleaseData={nodeReleasesData}
@@ -80,7 +82,7 @@ const Index = ({
 
       <section className={styles.nodeDemoContainer}>
         <div className={styles.nodeDemo}>
-          <InstallTabs />
+          <DownloadComponents.InstallTabs />
         </div>
         <LeafsIllustrationFront className={`${styles.leafsFront} animations`} />
         <LeafsIllustrationMiddle className={`${styles.leafsMid} animations`} />
@@ -99,7 +101,7 @@ const Index = ({
         ))}
       </section>
     </main>
-  </Layout>
+  </DefaultLayout>
 );
 
 export default connectGraphQlCustom(injectIntl(Index));
diff --git a/src/containers/FeatureToggles/index.tsx b/src/providers/FeatureToggles/index.tsx
similarity index 100%
rename from src/containers/FeatureToggles/index.tsx
rename to src/providers/FeatureToggles/index.tsx
diff --git a/src/containers/ReactIntl/index.tsx b/src/providers/ReactIntl/index.tsx
similarity index 100%
rename from src/containers/ReactIntl/index.tsx
rename to src/providers/ReactIntl/index.tsx
diff --git a/src/providers/index.ts b/src/providers/index.ts
new file mode 100644
index 00000000..401dcb26
--- /dev/null
+++ b/src/providers/index.ts
@@ -0,0 +1,2 @@
+export { default as ReactIntl } from './ReactIntl';
+export * from './FeatureToggles';
diff --git a/src/components/Article/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Article/__tests__/__snapshots__/index.test.tsx.snap
rename to src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Article/__tests__/index.test.tsx b/src/sections/Article/__tests__/index.test.tsx
similarity index 100%
rename from src/components/Article/__tests__/index.test.tsx
rename to src/sections/Article/__tests__/index.test.tsx
diff --git a/src/components/Article/index.module.scss b/src/sections/Article/index.module.scss
similarity index 100%
rename from src/components/Article/index.module.scss
rename to src/sections/Article/index.module.scss
diff --git a/src/components/Article/index.tsx b/src/sections/Article/index.tsx
similarity index 70%
rename from src/components/Article/index.tsx
rename to src/sections/Article/index.tsx
index 398faade..c0df98da 100644
--- a/src/components/Article/index.tsx
+++ b/src/sections/Article/index.tsx
@@ -1,22 +1,13 @@
 import React from 'react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
-import { MdxLink } from 'gatsby-theme-i18n';
+import { BlogComponents, ArticleComponents } from '../../components';
+import { mdxComponents } from '../../mdxComponents';
 import {
   PaginationInfo,
   BlogPostAuthor,
   TableOfContentsItem,
 } from '../../types';
-import AuthorList from '../../containers/AuthorList';
-import EditLink from '../EditLink';
-import Pagination from '../Pagination';
-import TableOfContents from '../TableOfContents';
-import BlogAuthorsList from '../BlogAuthorsList';
-import Codebox from '../Codebox';
-import InlineCode from '../Codebox/InlineCode';
-import Table from '../Table';
-import Alert from '../Alert';
-import BlockQuote from '../BlockQuote';
 import styles from './index.module.scss';
 
 interface Props {
@@ -37,27 +28,17 @@ interface Props {
   childrenPosition?: 'before' | 'after';
 }
 
-const mdxComponents = {
-  code: InlineCode,
-  pre: Codebox,
-  inlineCode: InlineCode,
-  a: MdxLink,
-  table: Table,
-  blockquote: BlockQuote,
-  Alert,
-};
-
 const renderBlogAuthors = (
   date: string | undefined,
   authors: BlogPostAuthor[] | undefined
-) => <BlogAuthorsList date={date} authors={authors || []} />;
+) => <BlogComponents.BlogAuthorsList date={date} authors={authors || []} />;
 
 const renderArticleAuthors = (authors: string[]) => (
-  <AuthorList authors={authors || []} />
+  <ArticleComponents.AuthorList authors={authors || []} />
 );
 
 const renderTOC = (tableOfContents: TableOfContentsItem[] | undefined) => (
-  <TableOfContents tableOfContents={tableOfContents || []} />
+  <ArticleComponents.TableOfContents tableOfContents={tableOfContents || []} />
 );
 
 const Article = ({
@@ -91,12 +72,12 @@ const Article = ({
     {childrenPosition === 'after' && children && <div>{children}</div>}
     {!blog && (
       <>
-        <EditLink
+        <ArticleComponents.EditLink
           absolutePath={absolutePath}
           relativePath={relativePath}
           editPath={editPath}
         />
-        <Pagination previous={previous} next={next} />
+        <ArticleComponents.Pagination previous={previous} next={next} />
       </>
     )}
   </article>
diff --git a/src/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Footer/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
rename to src/sections/Footer/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Footer/__tests__/index.test.tsx b/src/sections/Footer/__tests__/index.test.tsx
similarity index 100%
rename from src/components/Footer/__tests__/index.test.tsx
rename to src/sections/Footer/__tests__/index.test.tsx
diff --git a/src/components/Footer/index.module.scss b/src/sections/Footer/index.module.scss
similarity index 100%
rename from src/components/Footer/index.module.scss
rename to src/sections/Footer/index.module.scss
diff --git a/src/components/Footer/index.tsx b/src/sections/Footer/index.tsx
similarity index 100%
rename from src/components/Footer/index.tsx
rename to src/sections/Footer/index.tsx
diff --git a/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Header/__tests__/__snapshots__/index.test.tsx.snap
rename to src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Header/__tests__/index.test.tsx b/src/sections/Header/__tests__/index.test.tsx
similarity index 100%
rename from src/components/Header/__tests__/index.test.tsx
rename to src/sections/Header/__tests__/index.test.tsx
diff --git a/src/components/Header/index.module.scss b/src/sections/Header/index.module.scss
similarity index 100%
rename from src/components/Header/index.module.scss
rename to src/sections/Header/index.module.scss
diff --git a/src/components/Header/index.tsx b/src/sections/Header/index.tsx
similarity index 92%
rename from src/components/Header/index.tsx
rename to src/sections/Header/index.tsx
index 2d275e25..eaf694a7 100644
--- a/src/components/Header/index.tsx
+++ b/src/sections/Header/index.tsx
@@ -5,9 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { ReactComponent as LogoLight } from '../../images/logos/nodejs-logo-light-mode.svg';
 import { ReactComponent as LogoDark } from '../../images/logos/nodejs-logo-dark-mode.svg';
-import SearchBar from '../SearchBar';
-import DarkModeToggle from '../DarkModeToggle';
-import LanguageSelector from '../LanguageSelector';
+import { CommonComponents } from '../../components';
 import styles from './index.module.scss';
 
 const Header = (): JSX.Element => (
@@ -54,15 +52,15 @@ const Header = (): JSX.Element => (
         <ul className={styles.rightContainer}>
           <li className={styles.searchBar}>
             <span className="sr-only">Search Bar</span>
-            <SearchBar />
+            <CommonComponents.SearchBar />
           </li>
 
           <li>
-            <DarkModeToggle />
+            <CommonComponents.DarkModeToggle />
           </li>
 
           <li>
-            <LanguageSelector />
+            <CommonComponents.LanguageSelector />
           </li>
 
           <li>
diff --git a/src/templates/api.tsx b/src/templates/api.tsx
index 27154f0f..92f4f6d5 100644
--- a/src/templates/api.tsx
+++ b/src/templates/api.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import { graphql } from 'gatsby';
-import Article from '../components/Article';
-import Layout from '../components/Layout';
-import DataTag from '../components/DataTag';
-import SectionTitle from '../components/SectionTitle';
+import Article from '../sections/Article';
+import Layout from '../layouts/default';
+import {
+  ApiComponents,
+  CommonComponents,
+  getApiComponents,
+} from '../components';
+import { apiMdxComponents } from '../mdxComponents';
 import ApiNavigation from '../navigations/api';
-import { getApiComponents, Components } from '../components/ApiComponents';
 import { replaceDataTagFromString } from '../util/replaceDataTag';
 import type {
   ApiTemplateData,
@@ -50,19 +53,15 @@ const Api = ({
     tableOfContents.items?.map(filterTableOfContentsFromDataTag) || [];
 
   const components = {
-    DataTag,
     Metadata: getApiComponents({ fullVersion }),
-    a: Components.ApiLink,
-    h3: Components.H3,
-    h4: Components.H4,
-    h5: Components.H5,
+    ...apiMdxComponents,
   };
 
   return (
     <Layout title={`${displayTitle} | Node.js ${version} API`}>
       <main className={styles.apiContainer}>
         <ApiNavigation sections={navigationData} currentSlug={slug}>
-          <Components.VersionSelector
+          <ApiComponents.VersionSelector
             releases={nodeReleasesData}
             selectedRelease={version}
             apiAvailableVersions={apiAvailableVersions}
@@ -80,7 +79,9 @@ const Api = ({
           extraComponents={components}
           childrenPosition="before"
         >
-          <SectionTitle path={['home', 'documentation', version, title]} />
+          <CommonComponents.SectionTitle
+            path={['home', 'documentation', version, title]}
+          />
         </Article>
       </main>
     </Layout>
diff --git a/src/templates/blog.tsx b/src/templates/blog.tsx
index 702701a8..25c981ff 100644
--- a/src/templates/blog.tsx
+++ b/src/templates/blog.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
-import Layout from '../components/Layout';
-import BlogCard from '../components/BlogCard';
-import BlockQuote from '../components/BlockQuote';
+import DefaultLayout from '../layouts/default';
+import { BlogComponents, ArticleComponents } from '../components';
 import BlogNavigation from '../navigations/blog';
 import { blogPath } from '../../pathPrefixes';
 import { BlogCategory, BlogTemplateContext } from '../types';
@@ -16,11 +15,8 @@ const blogHomeSection = {
 const getCategoryName = (category: string) =>
   category.length ? `${blogPath}${category}/` : blogPath;
 
-const parseNavigationData = (categories: BlogCategory[]) =>
-  categories.map(({ node }) => ({
-    title: node.slug,
-    slug: `${blogPath}${node.name}/`,
-  }));
+const parseNavigationData = (c: BlogCategory[]) =>
+  c.map(({ node }) => ({ title: node.slug, slug: `${blogPath}${node.name}/` }));
 
 interface Props {
   pageContext: BlogTemplateContext;
@@ -47,7 +43,7 @@ const BlogTemplate = ({
   }, [category, intl]);
 
   return (
-    <Layout title="Blogs at Nodejs">
+    <DefaultLayout title="Blogs at Nodejs">
       <main className="grid-container">
         <BlogNavigation
           currentCategory={getCategoryName(currentCategory.name)}
@@ -56,18 +52,21 @@ const BlogTemplate = ({
         <div className={styles.blogGridContainer}>
           <div className={styles.blogCategoryHeader}>
             <h1>{currentCategory.slug}</h1>
-            <BlockQuote>
-              <span>{currentCategory.description}</span>
-            </BlockQuote>
+            <ArticleComponents.BlockQuote>
+              {currentCategory.description}
+            </ArticleComponents.BlockQuote>
           </div>
           <div className={styles.blogItems}>
             {posts.map(edge => (
-              <BlogCard key={edge.node.fields.slug} data={edge} />
+              <BlogComponents.BlogCard
+                key={edge.node.fields.slug}
+                data={edge}
+              />
             ))}
           </div>
         </div>
       </main>
-    </Layout>
+    </DefaultLayout>
   );
 };
 
diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx
index d273c8ce..6d5dbe86 100644
--- a/src/templates/learn.tsx
+++ b/src/templates/learn.tsx
@@ -1,9 +1,9 @@
 import { graphql } from 'gatsby';
 import React from 'react';
-import Article from '../components/Article';
-import Layout from '../components/Layout';
+import Article from '../sections/Article';
+import DefaultLayout from '../layouts/default';
 import LearnNavigation from '../navigations/learn';
-import { connectGraphQlCustom } from '../components/connectGraphQlArticle';
+import { connectGraphQlCustom } from '../connectGraphQlArticle';
 import { LearnTemplateContext, LearnTemplateData } from '../types';
 
 interface Props {
@@ -23,7 +23,7 @@ const LearnLayout = ({
   },
   pageContext: { slug, next, previous, relativePath, navigationData },
 }: Props): JSX.Element => (
-  <Layout title={displayTitle} description={description}>
+  <DefaultLayout title={displayTitle} description={description}>
     <main className="grid-container">
       <LearnNavigation sections={navigationData} currentSlug={slug} />
       <Article
@@ -36,7 +36,7 @@ const LearnLayout = ({
         relativePath={relativePath}
       />
     </main>
-  </Layout>
+  </DefaultLayout>
 );
 
 export default connectGraphQlCustom(LearnLayout);
diff --git a/src/templates/post.tsx b/src/templates/post.tsx
index 8ea7be25..3fd7a592 100644
--- a/src/templates/post.tsx
+++ b/src/templates/post.tsx
@@ -1,8 +1,8 @@
 import { graphql } from 'gatsby';
 import React from 'react';
-import Article from '../components/Article';
-import Layout from '../components/Layout';
-import RecentPosts from '../components/RecentPosts';
+import Article from '../sections/Article';
+import DefaultLayout from '../layouts/default';
+import { ArticleComponents } from '../components';
 import { PostTemplateData, PostTemplateContext } from '../types';
 import styles from '../styles/templates/post.module.scss';
 
@@ -22,9 +22,9 @@ const PostTemplate = ({
   },
   pageContext: { next, previous, relativePath, recent },
 }: Props): JSX.Element => (
-  <Layout title={title} description={excerpt}>
+  <DefaultLayout title={title} description={excerpt}>
     <main className={`grid-container ${styles.postContainer}`}>
-      <RecentPosts posts={recent} />
+      <ArticleComponents.RecentPosts posts={recent} />
       <Article
         title={title}
         body={body}
@@ -37,7 +37,7 @@ const PostTemplate = ({
         date={date}
       />
     </main>
-  </Layout>
+  </DefaultLayout>
 );
 
 export default PostTemplate;
diff --git a/src/types/dropdown.ts b/src/types/dropdown.ts
new file mode 100644
index 00000000..52bc847a
--- /dev/null
+++ b/src/types/dropdown.ts
@@ -0,0 +1,6 @@
+export interface DropdownItem {
+  title: string;
+  label: string;
+  onClick: () => void;
+  active?: boolean;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 657221ab..a16f9224 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -9,6 +9,7 @@ export * from './navigation';
 export * from './markdown';
 export * from './article';
 export * from './pages';
+export * from './dropdown';
 
 export interface HomepageData {
   article: {


Test patch:
diff --git a/src/components/Alert/index.module.scss b/src/components/ArticleComponents/Alert/index.module.scss
similarity index 100%
rename from src/components/Alert/index.module.scss
rename to src/components/ArticleComponents/Alert/index.module.scss
diff --git a/src/components/Alert/index.tsx b/src/components/ArticleComponents/Alert/index.tsx
similarity index 100%
rename from src/components/Alert/index.tsx
rename to src/components/ArticleComponents/Alert/index.tsx
diff --git a/src/components/Author/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap
similarity index 59%
rename from src/components/Author/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/ArticleComponents/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap
index 448e5f0c..9104dc53 100644
--- a/src/components/Author/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/ArticleComponents/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Author component does not render without a username 1`] = `<div />`;
+exports[`Author component does not render without a username 1`] = `
+<div>
+  <li>
+    <a
+      aria-label=" Github - opens in new tab"
+      class="link"
+      href="https://github.com/"
+      rel="noopener noreferrer"
+      style="margin-left: 0px;"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="https://github.com/.png?size="
+      />
+    </a>
+  </li>
+</div>
+`;
 
 exports[`Author component renders correctly 1`] = `
 <div>
diff --git a/src/components/Codebox/light.module.scss b/src/components/ArticleComponents/Codebox/light.module.scss
similarity index 100%
rename from src/components/Codebox/light.module.scss
rename to src/components/ArticleComponents/Codebox/light.module.scss
diff --git a/src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/DataTag/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/ArticleComponents/DataTag/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DataTag/__tests__/index.test.tsx b/src/components/ArticleComponents/DataTag/__tests__/index.test.tsx
similarity index 100%
rename from src/components/DataTag/__tests__/index.test.tsx
rename to src/components/ArticleComponents/DataTag/__tests__/index.test.tsx
diff --git a/src/components/DataTag/index.module.scss b/src/components/ArticleComponents/DataTag/index.module.scss
similarity index 100%
rename from src/components/DataTag/index.module.scss
rename to src/components/ArticleComponents/DataTag/index.module.scss
diff --git a/src/components/DataTag/index.tsx b/src/components/ArticleComponents/DataTag/index.tsx
similarity index 100%
rename from src/components/DataTag/index.tsx
rename to src/components/ArticleComponents/DataTag/index.tsx
diff --git a/src/components/EditLink/__tests__/__snapshots__/edit-link.test.tsx.snap b/src/components/ArticleComponents/EditLink/__tests__/__snapshots__/edit-link.test.tsx.snap
similarity index 100%
rename from src/components/EditLink/__tests__/__snapshots__/edit-link.test.tsx.snap
rename to src/components/ArticleComponents/EditLink/__tests__/__snapshots__/edit-link.test.tsx.snap
diff --git a/src/components/EditLink/__tests__/edit-link.test.tsx b/src/components/ArticleComponents/EditLink/__tests__/edit-link.test.tsx
similarity index 100%
rename from src/components/EditLink/__tests__/edit-link.test.tsx
rename to src/components/ArticleComponents/EditLink/__tests__/edit-link.test.tsx
diff --git a/src/components/EditLink/index.module.scss b/src/components/ArticleComponents/EditLink/index.module.scss
similarity index 100%
rename from src/components/EditLink/index.module.scss
rename to src/components/ArticleComponents/EditLink/index.module.scss
diff --git a/src/components/EditLink/index.tsx b/src/components/ArticleComponents/EditLink/index.tsx
similarity index 100%
rename from src/components/EditLink/index.tsx
rename to src/components/ArticleComponents/EditLink/index.tsx
diff --git a/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Pagination/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/ArticleComponents/Pagination/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Pagination/__tests__/index.test.tsx b/src/components/ArticleComponents/Pagination/__tests__/index.test.tsx
similarity index 94%
rename from src/components/Pagination/__tests__/index.test.tsx
rename to src/components/ArticleComponents/Pagination/__tests__/index.test.tsx
index 783e23b2..01f7de7e 100644
--- a/src/components/Pagination/__tests__/index.test.tsx
+++ b/src/components/ArticleComponents/Pagination/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Pagination from '..';
-import { createPaginationInfo } from '../../../__fixtures__/page';
+import { createPaginationInfo } from '../../../../__fixtures__/page';
 
 describe('Pagination component', () => {
   it('renders links to the next and previous page', () => {
diff --git a/src/components/RecentPosts/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/RecentPosts/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/RecentPosts/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/ArticleComponents/RecentPosts/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/RecentPosts/__tests__/index.test.tsx b/src/components/ArticleComponents/RecentPosts/__tests__/index.test.tsx
similarity index 83%
rename from src/components/RecentPosts/__tests__/index.test.tsx
rename to src/components/ArticleComponents/RecentPosts/__tests__/index.test.tsx
index 1a1a36aa..92457fe6 100644
--- a/src/components/RecentPosts/__tests__/index.test.tsx
+++ b/src/components/ArticleComponents/RecentPosts/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import RecentPosts from '..';
-import { createBlogPageContext } from '../../../__fixtures__/page';
+import { createBlogPageContext } from '../../../../__fixtures__/page';
 
 describe('RecentPosts component', (): void => {
   it('should render correctly', (): void => {
diff --git a/src/components/Table/index.tsx b/src/components/ArticleComponents/Table/index.tsx
similarity index 100%
rename from src/components/Table/index.tsx
rename to src/components/ArticleComponents/Table/index.tsx
diff --git a/src/components/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap b/src/components/ArticleComponents/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap
similarity index 100%
rename from src/components/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap
rename to src/components/ArticleComponents/TableOfContents/__tests__/__snapshots__/toc.test.tsx.snap
diff --git a/src/components/TableOfContents/__tests__/toc.test.tsx b/src/components/ArticleComponents/TableOfContents/__tests__/toc.test.tsx
similarity index 88%
rename from src/components/TableOfContents/__tests__/toc.test.tsx
rename to src/components/ArticleComponents/TableOfContents/__tests__/toc.test.tsx
index 9419228b..dc98d156 100644
--- a/src/components/TableOfContents/__tests__/toc.test.tsx
+++ b/src/components/ArticleComponents/TableOfContents/__tests__/toc.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import TableOfContents from '..';
-import { mockTableOfContents } from '../../../__fixtures__/page';
+import { mockTableOfContents } from '../../../../__fixtures__/page';
 
 describe('TOC component', () => {
   it('renders correctly', () => {
diff --git a/src/components/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap b/src/components/BlogComponents/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/BlogComponents/BlogAuthorsList/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/BlogAuthorsList/__tests__/index.test.tsx b/src/components/BlogComponents/BlogAuthorsList/__tests__/index.test.tsx
similarity index 91%
rename from src/components/BlogAuthorsList/__tests__/index.test.tsx
rename to src/components/BlogComponents/BlogAuthorsList/__tests__/index.test.tsx
index 83757c3f..e1a8bc75 100644
--- a/src/components/BlogAuthorsList/__tests__/index.test.tsx
+++ b/src/components/BlogComponents/BlogAuthorsList/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import BlogAuthor from '..';
-import { BlogPostAuthor } from '../../../types';
+import { BlogPostAuthor } from '../../../../types';
 
 describe('Blog Author component', () => {
   it('renders correctly', () => {
diff --git a/src/components/BlogCard/__tests__/__snapshots__/index.test.tsx.snap b/src/components/BlogComponents/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/BlogComponents/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/BlogCard/__tests__/index.test.tsx b/src/components/BlogComponents/BlogCard/__tests__/index.test.tsx
similarity index 94%
rename from src/components/BlogCard/__tests__/index.test.tsx
rename to src/components/BlogComponents/BlogCard/__tests__/index.test.tsx
index 52bc7bad..6b0b8618 100644
--- a/src/components/BlogCard/__tests__/index.test.tsx
+++ b/src/components/BlogComponents/BlogCard/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { BlogPost } from '../../../types';
+import { BlogPost } from '../../../../types';
 import BlogCard from '..';
 
 describe('Blog Card component', () => {
diff --git a/src/components/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap b/src/components/CommonComponents/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/CommonComponents/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/AnimatedPlaceholder/__tests__/index.test.tsx b/src/components/CommonComponents/AnimatedPlaceholder/__tests__/index.test.tsx
similarity index 100%
rename from src/components/AnimatedPlaceholder/__tests__/index.test.tsx
rename to src/components/CommonComponents/AnimatedPlaceholder/__tests__/index.test.tsx
diff --git a/src/components/AnimatedPlaceholder/index.module.scss b/src/components/CommonComponents/AnimatedPlaceholder/index.module.scss
similarity index 100%
rename from src/components/AnimatedPlaceholder/index.module.scss
rename to src/components/CommonComponents/AnimatedPlaceholder/index.module.scss
diff --git a/src/components/AnimatedPlaceholder/index.tsx b/src/components/CommonComponents/AnimatedPlaceholder/index.tsx
similarity index 100%
rename from src/components/AnimatedPlaceholder/index.tsx
rename to src/components/CommonComponents/AnimatedPlaceholder/index.tsx
diff --git a/src/components/Banner/__tests__/index.test.tsx b/src/components/CommonComponents/Banner/__tests__/index.test.tsx
similarity index 98%
rename from src/components/Banner/__tests__/index.test.tsx
rename to src/components/CommonComponents/Banner/__tests__/index.test.tsx
index fd000c36..b754866e 100644
--- a/src/components/Banner/__tests__/index.test.tsx
+++ b/src/components/CommonComponents/Banner/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Banner from '..';
-import { BannersIndex } from '../../../types';
+import { BannersIndex } from '../../../../types';
 
 const bannersIndex: BannersIndex = {
   endDate: '',
diff --git a/src/components/Hero/__tests__/__snapshots__/index.test.tsx.snap b/src/components/CommonComponents/Hero/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Hero/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/CommonComponents/Hero/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Hero/__tests__/index.test.tsx b/src/components/CommonComponents/Hero/__tests__/index.test.tsx
similarity index 87%
rename from src/components/Hero/__tests__/index.test.tsx
rename to src/components/CommonComponents/Hero/__tests__/index.test.tsx
index 7650082a..e1b41549 100644
--- a/src/components/Hero/__tests__/index.test.tsx
+++ b/src/components/CommonComponents/Hero/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { createNodeReleasesData } from '../../../__fixtures__/page';
+import { createNodeReleasesData } from '../../../../__fixtures__/page';
 
 import Hero from '..';
 
diff --git a/src/components/RandomContributor/__tests__/__snapshots__/index.test.tsx.snap b/src/components/CommonComponents/RandomContributor/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/RandomContributor/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/CommonComponents/RandomContributor/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/RandomContributor/__tests__/index.test.tsx b/src/components/CommonComponents/RandomContributor/__tests__/index.test.tsx
similarity index 75%
rename from src/components/RandomContributor/__tests__/index.test.tsx
rename to src/components/CommonComponents/RandomContributor/__tests__/index.test.tsx
index d894c79d..4b8a13ce 100644
--- a/src/components/RandomContributor/__tests__/index.test.tsx
+++ b/src/components/CommonComponents/RandomContributor/__tests__/index.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import RandomContributor from '..';
-import { useOnScreen } from '../../../hooks/useOnScreen';
-import { useNodeJsContributorsApi } from '../../../hooks/useNodeJsContributorsApi';
-import { createRandomContributorViewData } from '../../../__fixtures__/hooks';
+import { useOnScreen } from '../../../../hooks/useOnScreen';
+import { useNodeJsContributorsApi } from '../../../../hooks/useNodeJsContributorsApi';
+import { createRandomContributorViewData } from '../../../../__fixtures__/hooks';
 
-jest.mock('../../../hooks/useOnScreen');
-jest.mock('../../../hooks/useNodeJsContributorsApi');
+jest.mock('../../../../hooks/useOnScreen');
+jest.mock('../../../../hooks/useNodeJsContributorsApi');
 
 describe('RandomContributor component', () => {
   it('should render correctly', () => {
diff --git a/src/components/DownloadAdditional/DownloadableItem/downloadItems.ts b/src/components/DownloadComponents/DownloadAdditional/DownloadableItem/downloadItems.ts
similarity index 100%
rename from src/components/DownloadAdditional/DownloadableItem/downloadItems.ts
rename to src/components/DownloadComponents/DownloadAdditional/DownloadableItem/downloadItems.ts
diff --git a/src/components/DownloadAdditional/DownloadableItem/index.module.scss b/src/components/DownloadComponents/DownloadAdditional/DownloadableItem/index.module.scss
similarity index 100%
rename from src/components/DownloadAdditional/DownloadableItem/index.module.scss
rename to src/components/DownloadComponents/DownloadAdditional/DownloadableItem/index.module.scss
diff --git a/src/components/DownloadAdditional/DownloadableItem/index.tsx b/src/components/DownloadComponents/DownloadAdditional/DownloadableItem/index.tsx
similarity index 100%
rename from src/components/DownloadAdditional/DownloadableItem/index.tsx
rename to src/components/DownloadComponents/DownloadAdditional/DownloadableItem/index.tsx
diff --git a/src/components/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DownloadAdditional/__tests__/index.test.tsx b/src/components/DownloadComponents/DownloadAdditional/__tests__/index.test.tsx
similarity index 96%
rename from src/components/DownloadAdditional/__tests__/index.test.tsx
rename to src/components/DownloadComponents/DownloadAdditional/__tests__/index.test.tsx
index 9535103a..1a827fe0 100644
--- a/src/components/DownloadAdditional/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/DownloadAdditional/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render } from '@testing-library/react';
 import DownloadAdditional from '..';
-import { createNodeReleasesData } from '../../../__fixtures__/page';
+import { createNodeReleasesData } from '../../../../__fixtures__/page';
 
 describe('DownloadAdditional component', (): void => {
   const releaseData = createNodeReleasesData();
diff --git a/src/components/DownloadCards/DownloadCard/index.module.scss b/src/components/DownloadComponents/DownloadCards/DownloadCard/index.module.scss
similarity index 100%
rename from src/components/DownloadCards/DownloadCard/index.module.scss
rename to src/components/DownloadComponents/DownloadCards/DownloadCard/index.module.scss
diff --git a/src/components/DownloadCards/DownloadCard/index.tsx b/src/components/DownloadComponents/DownloadCards/DownloadCard/index.tsx
similarity index 100%
rename from src/components/DownloadCards/DownloadCard/index.tsx
rename to src/components/DownloadComponents/DownloadCards/DownloadCard/index.tsx
diff --git a/src/components/DownloadCards/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadCards/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DownloadCards/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/DownloadCards/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DownloadCards/__tests__/index.test.tsx b/src/components/DownloadComponents/DownloadCards/__tests__/index.test.tsx
similarity index 97%
rename from src/components/DownloadCards/__tests__/index.test.tsx
rename to src/components/DownloadComponents/DownloadCards/__tests__/index.test.tsx
index cd414ed6..2ba51d87 100644
--- a/src/components/DownloadCards/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/DownloadCards/__tests__/index.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen, fireEvent } from '@testing-library/react';
 
 import DownloadCards from '..';
-import { UserOS } from '../../../util/detectOS';
+import { UserOS } from '../../../../util/detectOS';
 
 describe('DownloadCards component', (): void => {
   it('renders correctly', (): void => {
diff --git a/src/components/DownloadHeader/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadHeader/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DownloadHeader/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/DownloadHeader/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DownloadHeader/__tests__/index.test.tsx b/src/components/DownloadComponents/DownloadHeader/__tests__/index.test.tsx
similarity index 83%
rename from src/components/DownloadHeader/__tests__/index.test.tsx
rename to src/components/DownloadComponents/DownloadHeader/__tests__/index.test.tsx
index 6a4217f2..8f046f4e 100644
--- a/src/components/DownloadHeader/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/DownloadHeader/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import DownloadHeader from '..';
-import { createNodeReleasesData } from '../../../__fixtures__/page';
+import { createNodeReleasesData } from '../../../../__fixtures__/page';
 
 describe('DownloadHeader component', (): void => {
   it('renders correctly', (): void => {
diff --git a/src/components/DownloadReleases/DownloadTable/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadReleases/DownloadTable/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DownloadReleases/DownloadTable/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/DownloadReleases/DownloadTable/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DownloadReleases/DownloadTable/__tests__/index.test.tsx b/src/components/DownloadComponents/DownloadReleases/DownloadTable/__tests__/index.test.tsx
similarity index 82%
rename from src/components/DownloadReleases/DownloadTable/__tests__/index.test.tsx
rename to src/components/DownloadComponents/DownloadReleases/DownloadTable/__tests__/index.test.tsx
index c2d56452..97354054 100644
--- a/src/components/DownloadReleases/DownloadTable/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/DownloadReleases/DownloadTable/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import DownloadTable from '..';
-import { createNodeReleasesData } from '../../../../__fixtures__/page';
+import { createNodeReleasesData } from '../../../../../__fixtures__/page';
 
 describe('DownloadTable component', (): void => {
   it('renders correctly', (): void => {
diff --git a/src/components/DownloadReleases/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadReleases/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/DownloadReleases/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/DownloadReleases/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/DownloadReleases/__tests__/index.test.tsx b/src/components/DownloadComponents/DownloadReleases/__tests__/index.test.tsx
similarity index 78%
rename from src/components/DownloadReleases/__tests__/index.test.tsx
rename to src/components/DownloadComponents/DownloadReleases/__tests__/index.test.tsx
index 84ebe2db..ef89a2e8 100644
--- a/src/components/DownloadReleases/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/DownloadReleases/__tests__/index.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import DownloadReleases from '..';
-import { getUpcomingReleases } from '../../../util/getUpcomingReleases';
-import { createNodeReleasesData } from '../../../__fixtures__/page';
+import { getUpcomingReleases } from '../../../../util/getUpcomingReleases';
+import { createNodeReleasesData } from '../../../../__fixtures__/page';
 
 const mockNodeReleasesData = createNodeReleasesData();
 const mockUpcomingReleases = getUpcomingReleases(mockNodeReleasesData);
diff --git a/src/components/InstallTabs/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/InstallTabs/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/InstallTabs/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/InstallTabs/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/InstallTabs/__tests__/__snapshots__/linux-panel.test.tsx.snap b/src/components/DownloadComponents/InstallTabs/__tests__/__snapshots__/linux-panel.test.tsx.snap
similarity index 100%
rename from src/components/InstallTabs/__tests__/__snapshots__/linux-panel.test.tsx.snap
rename to src/components/DownloadComponents/InstallTabs/__tests__/__snapshots__/linux-panel.test.tsx.snap
diff --git a/src/components/InstallTabs/__tests__/__snapshots__/macos-panel.test.tsx.snap b/src/components/DownloadComponents/InstallTabs/__tests__/__snapshots__/macos-panel.test.tsx.snap
similarity index 100%
rename from src/components/InstallTabs/__tests__/__snapshots__/macos-panel.test.tsx.snap
rename to src/components/DownloadComponents/InstallTabs/__tests__/__snapshots__/macos-panel.test.tsx.snap
diff --git a/src/components/InstallTabs/__tests__/index.test.tsx b/src/components/DownloadComponents/InstallTabs/__tests__/index.test.tsx
similarity index 91%
rename from src/components/InstallTabs/__tests__/index.test.tsx
rename to src/components/DownloadComponents/InstallTabs/__tests__/index.test.tsx
index 2b5d959c..17f1e54d 100644
--- a/src/components/InstallTabs/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/InstallTabs/__tests__/index.test.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import * as gatsby from 'gatsby';
 import InstallTabs from '../index';
-import * as detectOSModule from '../../../util/detectOS';
-import { UserOS } from '../../../util/detectOS';
+import * as detectOSModule from '../../../../util/detectOS';
+import { UserOS } from '../../../../util/detectOS';
 
-jest.mock('../../../util/detectOS');
+jest.mock('../../../../util/detectOS');
 
 jest
   .spyOn(gatsby, 'useStaticQuery')
diff --git a/src/components/UpcomingReleases/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/UpcomingReleases/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/UpcomingReleases/__tests__/__snapshots__/index.test.tsx.snap
rename to src/components/DownloadComponents/UpcomingReleases/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/UpcomingReleases/__tests__/index.test.tsx b/src/components/DownloadComponents/UpcomingReleases/__tests__/index.test.tsx
similarity index 76%
rename from src/components/UpcomingReleases/__tests__/index.test.tsx
rename to src/components/DownloadComponents/UpcomingReleases/__tests__/index.test.tsx
index c30b2719..a2f37294 100644
--- a/src/components/UpcomingReleases/__tests__/index.test.tsx
+++ b/src/components/DownloadComponents/UpcomingReleases/__tests__/index.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import UpcomingReleases from '..';
-import { getUpcomingReleases } from '../../../util/getUpcomingReleases';
-import { createNodeReleasesData } from '../../../__fixtures__/page';
+import { getUpcomingReleases } from '../../../../util/getUpcomingReleases';
+import { createNodeReleasesData } from '../../../../__fixtures__/page';
 
 const mockNodeReleasesData = createNodeReleasesData();
 const mockUpcomingReleases = getUpcomingReleases(mockNodeReleasesData);
diff --git a/src/hooks/__tests__/useFeatureToggles.test.tsx b/src/hooks/__tests__/useFeatureToggles.test.tsx
index 44b91085..e37e6837 100644
--- a/src/hooks/__tests__/useFeatureToggles.test.tsx
+++ b/src/hooks/__tests__/useFeatureToggles.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { useFeatureToggles } from '../useFeatureToggles';
-import { FeatureToggleProvider } from '../../containers/FeatureToggles';
+import { FeatureToggleProvider } from '../../providers';
 
 describe('useFeatureToggles', () => {
   const FeatureFlagRenderer = (): JSX.Element => {
diff --git a/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap b/src/layouts/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap
rename to src/layouts/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap b/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
similarity index 100%
rename from src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
rename to src/layouts/__tests__/__snapshots__/page.test.tsx.snap
diff --git a/src/components/Layout/__tests__/index.test.tsx b/src/layouts/__tests__/index.test.tsx
similarity index 92%
rename from src/components/Layout/__tests__/index.test.tsx
rename to src/layouts/__tests__/index.test.tsx
index fec803b2..1cc9bfe1 100644
--- a/src/components/Layout/__tests__/index.test.tsx
+++ b/src/layouts/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Layout from '..';
+import Layout from '../default';
 
 describe('Layout component', () => {
   it('renders correctly with data', () => {
diff --git a/src/components/Layout/__tests__/page.test.tsx b/src/layouts/__tests__/page.test.tsx
similarity index 78%
rename from src/components/Layout/__tests__/page.test.tsx
rename to src/layouts/__tests__/page.test.tsx
index 844d7ee5..6e117ede 100644
--- a/src/components/Layout/__tests__/page.test.tsx
+++ b/src/layouts/__tests__/page.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import PageLayout from '../page';
-import { mockTableOfContents } from '../../../__fixtures__/page';
-import mockMDXBodyContent from '../../../__fixtures__/mockMDXBodyContent';
+import { mockTableOfContents } from '../../__fixtures__/page';
+import mockMDXBodyContent from '../../__fixtures__/mockMDXBodyContent';
 
 describe('PageLayout component', () => {
   it('renders correctly with data', () => {