diff --git a/apps/site/components/withAvatarGroup.tsx b/apps/site/components/AvatarGroup.tsx
similarity index 62%
rename from apps/site/components/withAvatarGroup.tsx
rename to apps/site/components/AvatarGroup.tsx
index f9c3491dd8c92..978bf7dea5abf 100644
--- a/apps/site/components/withAvatarGroup.tsx
+++ b/apps/site/components/AvatarGroup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
+import AvatarGroupContainer from '@node-core/ui-components/Common/AvatarGroup';
 
 import Link from '#site/components/Link';
 import { getAuthors } from '#site/util/author';
@@ -8,19 +8,19 @@ import { getAuthors } from '#site/util/author';
 import type { AuthorProps } from '#site/types';
 import type { ComponentProps, FC } from 'react';
 
-type WithAvatarGroupProps = Omit<
-  ComponentProps<typeof AvatarGroup>,
+type AvatarGroupProps = Omit<
+  ComponentProps<typeof AvatarGroupContainer>,
   'avatars' | 'as'
 > &
   AuthorProps;
 
-const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
+const AvatarGroup: FC<AvatarGroupProps> = ({
   usernames,
   names,
   clickable = true,
   ...props
 }) => (
-  <AvatarGroup
+  <AvatarGroupContainer
     avatars={getAuthors({
       usernames,
       names,
@@ -31,4 +31,4 @@ const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
   />
 );
 
-export default WithAvatarGroup;
+export default AvatarGroup;
diff --git a/apps/site/components/Blog/BlogPostCard/index.tsx b/apps/site/components/Blog/BlogPostCard/index.tsx
index 0951d52022a11..a36b38c5fb576 100644
--- a/apps/site/components/Blog/BlogPostCard/index.tsx
+++ b/apps/site/components/Blog/BlogPostCard/index.tsx
@@ -1,9 +1,9 @@
 import Preview from '@node-core/ui-components/Common/Preview';
 import { useTranslations } from 'next-intl';
 
+import AvatarGroup from '#site/components/AvatarGroup';
 import FormattedTime from '#site/components/Common/FormattedTime';
 import Link from '#site/components/Link';
-import WithAvatarGroup from '#site/components/withAvatarGroup';
 import { mapBlogCategoryToPreviewType } from '#site/util/blog';
 
 import type { BlogCategory } from '#site/types';
@@ -49,7 +49,7 @@ const BlogPostCard: FC<BlogPostCardProps> = ({
       {description && <p className={styles.description}>{description}</p>}
 
       <footer className={styles.footer}>
-        <WithAvatarGroup names={authors} size="medium" clickable={false} />
+        <AvatarGroup names={authors} size="medium" clickable={false} />
 
         <div className={styles.author}>
           {authors && <p>{authors.join(', ')}</p>}
diff --git a/apps/site/components/withBlogCategories.tsx b/apps/site/components/BlogCategories.tsx
similarity index 91%
rename from apps/site/components/withBlogCategories.tsx
rename to apps/site/components/BlogCategories.tsx
index e4b58cebf793c..47fad39e8e942 100644
--- a/apps/site/components/withBlogCategories.tsx
+++ b/apps/site/components/BlogCategories.tsx
@@ -8,7 +8,7 @@ import { mapAuthorToCardAuthors } from '#site/util/author';
 import type { BlogPostsRSC } from '#site/types';
 import type { ComponentProps, FC } from 'react';
 
-type WithBlogCategoriesProps = {
+type BlogCategoriesProps = {
   categories: ComponentProps<typeof LinkTabs>['tabs'];
   blogData: BlogPostsRSC & { category: string; page: number };
 };
@@ -18,10 +18,7 @@ const mapPaginationPages = (category: string, pages: number) =>
     url: `/blog/${category}/page/${page + 1}`,
   }));
 
-const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
-  categories,
-  blogData,
-}) => {
+const BlogCategories: FC<BlogCategoriesProps> = ({ categories, blogData }) => {
   const t = useTranslations();
 
   return (
@@ -58,4 +55,4 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
   );
 };
 
-export default WithBlogCategories;
+export default BlogCategories;
diff --git a/apps/site/components/withBlogCrossLinks.tsx b/apps/site/components/BlogCrossLinks.tsx
similarity index 94%
rename from apps/site/components/withBlogCrossLinks.tsx
rename to apps/site/components/BlogCrossLinks.tsx
index 468100521dddc..dbc5c53837dec 100644
--- a/apps/site/components/withBlogCrossLinks.tsx
+++ b/apps/site/components/BlogCrossLinks.tsx
@@ -5,7 +5,7 @@ import { getBlogData } from '#site/util/blog';
 import type { BlogCategory } from '#site/types';
 import type { FC } from 'react';
 
-const WithBlogCrossLinks: FC = () => {
+const BlogCrossLinks: FC = () => {
   const { pathname } = getClientContext();
 
   // Extracts from the static URL the components used for the Blog Post slug
@@ -48,4 +48,4 @@ const WithBlogCrossLinks: FC = () => {
   );
 };
 
-export default WithBlogCrossLinks;
+export default BlogCrossLinks;
diff --git a/apps/site/components/withBreadcrumbs.tsx b/apps/site/components/Breadcrumbs.tsx
similarity index 91%
rename from apps/site/components/withBreadcrumbs.tsx
rename to apps/site/components/Breadcrumbs.tsx
index 753387ad35abd..a4641fd69b713 100644
--- a/apps/site/components/withBreadcrumbs.tsx
+++ b/apps/site/components/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Breadcrumbs from '@node-core/ui-components/Common/Breadcrumbs';
+import BreadcrumbsContainer from '@node-core/ui-components/Common/Breadcrumbs';
 import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
@@ -13,11 +13,11 @@ import type { NavigationKeys } from '#site/types';
 import type { BreadcrumbLink } from '@node-core/ui-components/Common/Breadcrumbs';
 import type { FC } from 'react';
 
-type WithBreadcrumbsProps = {
+type BreadcrumbsProps = {
   navKeys?: Array<NavigationKeys>;
 };
 
-const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
+const Breadcrumbs: FC<BreadcrumbsProps> = ({ navKeys = [] }) => {
   const { getSideNavigation } = useSiteNavigation();
   const t = useTranslations();
   const { pathname } = useClientContext();
@@ -64,7 +64,7 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
   };
 
   return (
-    <Breadcrumbs
+    <BreadcrumbsContainer
       links={getBreadcrumbs()}
       maxLength={maxLength}
       as={Link}
@@ -73,4 +73,4 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
   );
 };
 
-export default WithBreadcrumbs;
+export default Breadcrumbs;
diff --git a/apps/site/components/withDownloadSection.tsx b/apps/site/components/DownloadSection.tsx
similarity index 92%
rename from apps/site/components/withDownloadSection.tsx
rename to apps/site/components/DownloadSection.tsx
index 90d335b1fe4f4..b6fe875fecb30 100644
--- a/apps/site/components/withDownloadSection.tsx
+++ b/apps/site/components/DownloadSection.tsx
@@ -12,11 +12,11 @@ import {
 import type { NodeRelease, NodeReleaseStatus } from '../types';
 import type { FC, PropsWithChildren } from 'react';
 
-type WithDownloadSectionProps = PropsWithChildren<{
+type DownloadSectionProps = PropsWithChildren<{
   releases: Array<NodeRelease>;
 }>;
 
-const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
+const DownloadSection: FC<DownloadSectionProps> = async ({
   releases,
   children,
 }) => {
@@ -56,4 +56,4 @@ const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
   );
 };
 
-export default WithDownloadSection;
+export default DownloadSection;
diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
index 01ca87276cfa5..a652f97c467a9 100644
--- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
+++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
@@ -9,7 +9,7 @@ import { use, useMemo } from 'react';
 import CodeBox from '#site/components/Common/CodeBox';
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import Link from '#site/components/Link';
-import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
+import ReleaseAlertBox from '#site/components/ReleaseAlertBox';
 import {
   ReleaseContext,
   ReleasesContext,
@@ -149,7 +149,7 @@ const ReleaseCodeBox: FC = () => {
       </noscript>
 
       {/* Release status alert */}
-      <WithReleaseAlertBox release={context.release} releases={releases} />
+      <ReleaseAlertBox release={context.release} releases={releases} />
 
       {/* Community platform notice */}
       {platformInfo.exists && !platformInfo.recommended && (
diff --git a/apps/site/components/withFooter.tsx b/apps/site/components/Footer.tsx
similarity index 86%
rename from apps/site/components/withFooter.tsx
rename to apps/site/components/Footer.tsx
index 148aa7e65e08f..3e3fbab1afc40 100644
--- a/apps/site/components/withFooter.tsx
+++ b/apps/site/components/Footer.tsx
@@ -1,5 +1,5 @@
 import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
-import Footer from '@node-core/ui-components/Containers/Footer';
+import FooterContainer from '@node-core/ui-components/Containers/Footer';
 import { useTranslations } from 'next-intl';
 
 import { getClientContext } from '#site/client-context';
@@ -8,10 +8,10 @@ import { siteNavigation } from '#site/next.json.mjs';
 
 import type { FC } from 'react';
 
-import WithLegal from './withLegal';
+import FooterLegal from './FooterLegal';
 import WithNodeRelease from './withNodeRelease';
 
-const WithFooter: FC = () => {
+const Footer: FC = () => {
   const t = useTranslations();
   const { pathname } = getClientContext();
 
@@ -54,10 +54,10 @@ const WithFooter: FC = () => {
     </div>
   );
 
-  const legal = <WithLegal footerLinks={navigation.footerLinks} />;
+  const legal = <FooterLegal footerLinks={navigation.footerLinks} />;
 
   return (
-    <Footer
+    <FooterContainer
       navigation={navigation}
       as={Link}
       pathname={pathname}
@@ -66,4 +66,4 @@ const WithFooter: FC = () => {
   );
 };
 
-export default WithFooter;
+export default Footer;
diff --git a/apps/site/components/withLegal.tsx b/apps/site/components/FooterLegal.tsx
similarity index 96%
rename from apps/site/components/withLegal.tsx
rename to apps/site/components/FooterLegal.tsx
index 01d8f69f12b3a..fee06b3c329e9 100644
--- a/apps/site/components/withLegal.tsx
+++ b/apps/site/components/FooterLegal.tsx
@@ -31,7 +31,7 @@ const RICH_TRANSLATION_KEYS = [
   'cookiePolicy',
 ];
 
-const WithLegal: FC<LegalProps> = ({ footerLinks }) => {
+const FooterLegal: FC<LegalProps> = ({ footerLinks }) => {
   const t = useTranslations();
 
   /**
@@ -81,4 +81,4 @@ const WithLegal: FC<LegalProps> = ({ footerLinks }) => {
   );
 };
 
-export default WithLegal;
+export default FooterLegal;
diff --git a/apps/site/components/withLayout.tsx b/apps/site/components/Layout.tsx
similarity index 84%
rename from apps/site/components/withLayout.tsx
rename to apps/site/components/Layout.tsx
index 9902a411221ca..bcf0b689951a6 100644
--- a/apps/site/components/withLayout.tsx
+++ b/apps/site/components/Layout.tsx
@@ -21,12 +21,12 @@ const layouts = {
   article: ArticlePageLayout,
 } satisfies Record<Layouts, FC>;
 
-type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
+type LayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
 
-const WithLayout: FC<WithLayoutProps<Layouts>> = ({ layout, children }) => {
+const Layout: FC<LayoutProps<Layouts>> = ({ layout, children }) => {
   const LayoutComponent = layouts[layout] ?? DefaultLayout;
 
   return <LayoutComponent>{children}</LayoutComponent>;
 };
 
-export default WithLayout;
+export default Layout;
diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/MetaBar.tsx
similarity index 91%
rename from apps/site/components/withMetaBar.tsx
rename to apps/site/components/MetaBar.tsx
index 64b796734972a..4d88cabd0ba9f 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/MetaBar.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import MetaBar from '@node-core/ui-components/Containers/MetaBar';
+import MetaBarContainer from '@node-core/ui-components/Containers/MetaBar';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 import { defaultLocale } from '@node-core/website-i18n';
 import { useFormatter, useLocale, useTranslations } from 'next-intl';
 
+import AvatarGroup from '#site/components/AvatarGroup';
 import Link from '#site/components/Link';
-import WithAvatarGroup from '#site/components/withAvatarGroup';
 import useClientContext from '#site/hooks/useClientContext';
 import useMediaQuery from '#site/hooks/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '#site/next.calendar.constants.mjs';
@@ -15,7 +15,7 @@ import { getGitHubBlobUrl } from '#site/util/github';
 
 import type { FC } from 'react';
 
-const WithMetaBar: FC = () => {
+const MetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
   const lastUpdated = frontmatter.date
@@ -41,7 +41,7 @@ const WithMetaBar: FC = () => {
   const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
-    <MetaBar
+    <MetaBarContainer
       heading={t('components.metabar.tableOfContents')}
       as={Link}
       aria-label={t('components.metabar.metadata')}
@@ -52,7 +52,7 @@ const WithMetaBar: FC = () => {
           [t(
             `components.metabar.${usernames.length > 1 ? 'authors' : 'author'}`
           )]: (
-            <WithAvatarGroup
+            <AvatarGroup
               usernames={usernames}
               limit={isSmallerThanDesktop ? 5 : 8}
             />
@@ -78,4 +78,4 @@ const WithMetaBar: FC = () => {
   );
 };
 
-export default WithMetaBar;
+export default MetaBar;
diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/NavBar.tsx
similarity index 87%
rename from apps/site/components/withNavBar.tsx
rename to apps/site/components/NavBar.tsx
index 722fb3ede57f0..6473bf42d6ab7 100644
--- a/apps/site/components/withNavBar.tsx
+++ b/apps/site/components/NavBar.tsx
@@ -3,7 +3,7 @@
 import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import SkipToContentButton from '@node-core/ui-components/Common/SkipToContentButton';
-import NavBar from '@node-core/ui-components/Containers/NavBar';
+import NavBarContainer from '@node-core/ui-components/Containers/NavBar';
 // TODO(@AvivKeller): I don't like that we are importing styles from another module
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
@@ -13,9 +13,9 @@ import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 
 import Link from '#site/components/Link';
-import WithBanner from '#site/components/withBanner';
-import WithNodejsLogo from '#site/components/withNodejsLogo';
-import WithSearch from '#site/components/withSearch';
+import Search from '#site/components/Search';
+import SiteLogo from '#site/components/SiteLogo';
+import WebsiteBanner from '#site/components/WebsiteBanner';
 import useSiteNavigation from '#site/hooks/useSiteNavigation';
 import { useRouter, usePathname } from '#site/navigation.mjs';
 
@@ -33,7 +33,7 @@ const ThemeToggle = dynamic(
   }
 );
 
-const WithNavBar: FC = () => {
+const NavBar: FC = () => {
   const { navigationItems } = useSiteNavigation();
   const { theme, setTheme } = useTheme();
   const { replace } = useRouter();
@@ -51,9 +51,9 @@ const WithNavBar: FC = () => {
         {t('components.common.skipToContent')}
       </SkipToContentButton>
 
-      <WithBanner section="index" />
+      <WebsiteBanner section="index" />
 
-      <NavBar
+      <NavBarContainer
         navItems={navigationItems.map(
           ([, { label, link, target, accent }]) => ({
             link,
@@ -64,12 +64,12 @@ const WithNavBar: FC = () => {
         )}
         pathname={pathname}
         as={Link}
-        Logo={WithNodejsLogo}
+        Logo={SiteLogo}
         sidebarItemTogglerAriaLabel={t(
           'components.containers.navBar.controls.toggle'
         )}
       >
-        <WithSearch />
+        <Search />
 
         <ThemeToggle
           onChange={setTheme}
@@ -96,9 +96,9 @@ const WithNavBar: FC = () => {
         >
           <GitHubIcon />
         </Link>
-      </NavBar>
+      </NavBarContainer>
     </div>
   );
 };
 
-export default WithNavBar;
+export default NavBar;
diff --git a/apps/site/components/withReleaseAlertBox.tsx b/apps/site/components/ReleaseAlertBox.tsx
similarity index 92%
rename from apps/site/components/withReleaseAlertBox.tsx
rename to apps/site/components/ReleaseAlertBox.tsx
index a09a743b58869..e438d453aaecd 100644
--- a/apps/site/components/withReleaseAlertBox.tsx
+++ b/apps/site/components/ReleaseAlertBox.tsx
@@ -6,15 +6,12 @@ import Link from '#site/components/Link';
 import type { NodeRelease } from '#site/types';
 import type { FC } from 'react';
 
-type WithReleaseAlertBoxProps = {
+type ReleaseAlertBoxProps = {
   release: NodeRelease;
   releases: Array<NodeRelease>;
 };
 
-const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({
-  release,
-  releases,
-}) => {
+const ReleaseAlertBox: FC<ReleaseAlertBoxProps> = ({ release, releases }) => {
   const t = useTranslations();
 
   switch (release.status) {
@@ -75,4 +72,4 @@ const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({
   }
 };
 
-export default WithReleaseAlertBox;
+export default ReleaseAlertBox;
diff --git a/apps/site/components/withReleaseSelect.tsx b/apps/site/components/ReleaseSelect.tsx
similarity index 91%
rename from apps/site/components/withReleaseSelect.tsx
rename to apps/site/components/ReleaseSelect.tsx
index 53a7469212988..79e363a68d083 100644
--- a/apps/site/components/withReleaseSelect.tsx
+++ b/apps/site/components/ReleaseSelect.tsx
@@ -36,12 +36,12 @@ const groupReleasesByStatus = (releases: Array<NodeRelease>) => {
   }));
 };
 
-type WithReleaseSelectProps = Omit<
+type ReleaseSelectProps = Omit<
   ComponentProps<typeof StatelessSelect>,
   'values' | 'as'
 >;
 
-const WithReleaseSelect: FC<WithReleaseSelectProps> = async ({ ...props }) => {
+const ReleaseSelect: FC<ReleaseSelectProps> = async ({ ...props }) => {
   const releaseData = await provideReleaseData();
   const navigation = groupReleasesByStatus(releaseData);
 
@@ -56,4 +56,4 @@ const WithReleaseSelect: FC<WithReleaseSelectProps> = async ({ ...props }) => {
   );
 };
 
-export default WithReleaseSelect;
+export default ReleaseSelect;
diff --git a/apps/site/components/Releases/ReleaseModal.tsx b/apps/site/components/Releases/ReleaseModal.tsx
index 269689a586199..16f4db8c6e671 100644
--- a/apps/site/components/Releases/ReleaseModal.tsx
+++ b/apps/site/components/Releases/ReleaseModal.tsx
@@ -1,9 +1,9 @@
 import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
 
+import ReleaseAlertBox from '#site/components/ReleaseAlertBox';
 import MinorReleasesTable from '#site/components/Releases/MinorReleasesTable';
 import ReleaseOverview from '#site/components/Releases/ReleaseOverview';
-import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
 
 import type { NodeRelease } from '#site/types';
 import type { ComponentProps, FC } from 'react';
@@ -31,7 +31,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
 
   return (
     <Modal {...props}>
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <Title>{modalHeading}</Title>
 
diff --git a/apps/site/components/withSearch.tsx b/apps/site/components/Search.tsx
similarity index 97%
rename from apps/site/components/withSearch.tsx
rename to apps/site/components/Search.tsx
index a8c0a620affda..a458f1f63b1e1 100644
--- a/apps/site/components/withSearch.tsx
+++ b/apps/site/components/Search.tsx
@@ -73,7 +73,7 @@ export const useOrama = () => {
   }, []) as unknown as OramaCloud;
 };
 
-const WithSearch: FC = () => {
+const Search: FC = () => {
   const t = useTranslations();
   const client = useOrama();
 
@@ -89,4 +89,4 @@ const WithSearch: FC = () => {
   );
 };
 
-export default WithSearch;
+export default Search;
diff --git a/apps/site/components/withSidebar.tsx b/apps/site/components/Sidebar.tsx
similarity index 90%
rename from apps/site/components/withSidebar.tsx
rename to apps/site/components/Sidebar.tsx
index fb9f04b2c27da..8f13afa7d855d 100644
--- a/apps/site/components/withSidebar.tsx
+++ b/apps/site/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Sidebar from '@node-core/ui-components/Containers/Sidebar';
+import SidebarContainer from '@node-core/ui-components/Containers/Sidebar';
 import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
 
@@ -14,7 +14,7 @@ import type { FormattedMessage, NavigationKeys } from '#site/types';
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
-type WithSidebarProps = {
+type SidebarProps = {
   navKeys: Array<NavigationKeys>;
   context?: Record<string, RichTranslationValues>;
 };
@@ -40,7 +40,7 @@ const mapItem = ([, item]: [string, MappedItem]): SidebarMappedEntry => ({
   items: item.items ? item.items.map(mapItem) : [],
 });
 
-const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
+const Sidebar: FC<SidebarProps> = ({ navKeys, context, ...props }) => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname()!;
   const t = useTranslations();
@@ -63,7 +63,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
     );
 
   return (
-    <Sidebar
+    <SidebarContainer
       ref={sidebarRef}
       groups={mappedSidebarItems}
       pathname={pathname}
@@ -76,4 +76,4 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   );
 };
 
-export default WithSidebar;
+export default Sidebar;
diff --git a/apps/site/components/withNodejsLogo.tsx b/apps/site/components/SiteLogo.tsx
similarity index 62%
rename from apps/site/components/withNodejsLogo.tsx
rename to apps/site/components/SiteLogo.tsx
index e00597fc8997d..ea3ad6218f051 100644
--- a/apps/site/components/withNodejsLogo.tsx
+++ b/apps/site/components/SiteLogo.tsx
@@ -1,18 +1,18 @@
-import NodejsLogo from '@node-core/ui-components/Common/NodejsLogo';
+import NodejsLogoContainer from '@node-core/ui-components/Common/NodejsLogo';
 import { useTranslations } from 'next-intl';
 
 import { siteConfig } from '#site/next.json.mjs';
 
 import type { FC } from 'react';
 
-const WithNodejsLogo: FC = () => {
+const SiteLogo: FC = () => {
   const t = useTranslations();
   return (
-    <NodejsLogo
+    <NodejsLogoContainer
       variant={siteConfig.logoVariant}
       aria-label={t('layouts.logo')}
     />
   );
 };
 
-export default WithNodejsLogo;
+export default SiteLogo;
diff --git a/apps/site/components/withSupporters.tsx b/apps/site/components/Supporters.tsx
similarity index 80%
rename from apps/site/components/withSupporters.tsx
rename to apps/site/components/Supporters.tsx
index 876035b78458d..6a3b8826230f6 100644
--- a/apps/site/components/withSupporters.tsx
+++ b/apps/site/components/Supporters.tsx
@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
 
 import SupportersList from './Common/Supporters';
 
-const WithSupporters: FC<PropsWithChildren> = async () => {
+const Supporters: FC<PropsWithChildren> = async () => {
   const supporters = await provideSupporters();
 
   return (
@@ -14,4 +14,4 @@ const WithSupporters: FC<PropsWithChildren> = async () => {
   );
 };
 
-export default WithSupporters;
+export default Supporters;
diff --git a/apps/site/components/withBadgeGroup.tsx b/apps/site/components/WebsiteBadge.tsx
similarity index 75%
rename from apps/site/components/withBadgeGroup.tsx
rename to apps/site/components/WebsiteBadge.tsx
index be4263437700c..97075f2291449 100644
--- a/apps/site/components/withBadgeGroup.tsx
+++ b/apps/site/components/WebsiteBadge.tsx
@@ -1,4 +1,4 @@
-import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
+import BadgeGroupContainer from '@node-core/ui-components/Common/BadgeGroup';
 
 import Link from '#site/components/Link';
 import { siteConfig } from '#site/next.json.mjs';
@@ -6,12 +6,12 @@ import { dateIsBetween } from '#site/util/date';
 
 import type { FC } from 'react';
 
-const WithBadgeGroup: FC<{ section: string }> = ({ section }) => {
+const WebsiteBadge: FC<{ section: string }> = ({ section }) => {
   const badge = siteConfig.websiteBadges[section];
 
   if (badge && dateIsBetween(badge.startDate, badge.endDate)) {
     return (
-      <BadgeGroup
+      <BadgeGroupContainer
         as={Link}
         badgeText={badge.title}
         kind={badge.kind}
@@ -21,11 +21,11 @@ const WithBadgeGroup: FC<{ section: string }> = ({ section }) => {
         target={/^https?:/.test(badge.link) ? '_blank' : undefined}
       >
         {badge.text}
-      </BadgeGroup>
+      </BadgeGroupContainer>
     );
   }
 
   return null;
 };
 
-export default WithBadgeGroup;
+export default WebsiteBadge;
diff --git a/apps/site/components/withBanner.tsx b/apps/site/components/WebsiteBanner.tsx
similarity index 86%
rename from apps/site/components/withBanner.tsx
rename to apps/site/components/WebsiteBanner.tsx
index b8a186d01b23a..44755d62509f3 100644
--- a/apps/site/components/withBanner.tsx
+++ b/apps/site/components/WebsiteBanner.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
-import Banner from '@node-core/ui-components/Common/Banner';
+import BannerContainer from '@node-core/ui-components/Common/Banner';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
@@ -13,7 +13,7 @@ import type { FC } from 'react';
 
 const STORAGE_KEY = 'banner-dismissal';
 
-const WithBanner: FC<{ section: string }> = ({ section }) => {
+const WebsiteBanner: FC<{ section: string }> = ({ section }) => {
   const banner = siteConfig.websiteBanners[section];
   const t = useTranslations();
 
@@ -35,7 +35,7 @@ const WithBanner: FC<{ section: string }> = ({ section }) => {
     };
 
     return (
-      <Banner
+      <BannerContainer
         type={banner.type}
         aria-label={t(`components.banner.${bannerType}`)}
         closeButtonAriaLabel={t('components.banner.close')}
@@ -47,11 +47,11 @@ const WithBanner: FC<{ section: string }> = ({ section }) => {
           banner.text
         )}
         {banner.link && <ArrowUpRightIcon />}
-      </Banner>
+      </BannerContainer>
     );
   }
 
   return null;
 };
 
-export default WithBanner;
+export default WebsiteBanner;
diff --git a/apps/site/layouts/About.tsx b/apps/site/layouts/About.tsx
index ea6260b27f1f5..4c53a24799298 100644
--- a/apps/site/layouts/About.tsx
+++ b/apps/site/layouts/About.tsx
@@ -1,32 +1,32 @@
 import Article from '@node-core/ui-components/Containers/Article';
 
-import WithBreadcrumbs from '#site/components/withBreadcrumbs';
-import WithFooter from '#site/components/withFooter';
-import WithMetaBar from '#site/components/withMetaBar';
-import WithNavBar from '#site/components/withNavBar';
-import WithSidebar from '#site/components/withSidebar';
+import Breadcrumbs from '#site/components/Breadcrumbs';
+import Footer from '#site/components/Footer';
+import MetaBar from '#site/components/MetaBar';
+import NavBar from '#site/components/NavBar';
+import Sidebar from '#site/components/Sidebar';
 
 import type { FC, PropsWithChildren } from 'react';
 
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
-    <WithNavBar />
+    <NavBar />
 
     <Article>
-      <WithSidebar navKeys={['about', 'getInvolved']} />
+      <Sidebar navKeys={['about', 'getInvolved']} />
 
       <div>
         <main id="main" tabIndex={-1}>
           {children}
         </main>
 
-        <WithMetaBar />
+        <MetaBar />
       </div>
 
-      <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
+      <Breadcrumbs navKeys={['about', 'getInvolved']} />
     </Article>
 
-    <WithFooter />
+    <Footer />
   </>
 );
 
diff --git a/apps/site/layouts/ArticlePage.tsx b/apps/site/layouts/ArticlePage.tsx
index 37216ae07be11..ebca2366de34a 100644
--- a/apps/site/layouts/ArticlePage.tsx
+++ b/apps/site/layouts/ArticlePage.tsx
@@ -1,29 +1,29 @@
 import Article from '@node-core/ui-components/Containers/Article';
 
-import WithFooter from '#site/components/withFooter';
-import WithMetaBar from '#site/components/withMetaBar';
-import WithNavBar from '#site/components/withNavBar';
-import WithSidebar from '#site/components/withSidebar';
+import Footer from '#site/components/Footer';
+import MetaBar from '#site/components/MetaBar';
+import NavBar from '#site/components/NavBar';
+import Sidebar from '#site/components/Sidebar';
 
 import type { FC, PropsWithChildren } from 'react';
 
 const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
-    <WithNavBar />
+    <NavBar />
 
     <Article>
-      <WithSidebar navKeys={[]} />
+      <Sidebar navKeys={[]} />
 
       <div>
         <main id="main" tabIndex={-1}>
           {children}
         </main>
 
-        <WithMetaBar />
+        <MetaBar />
       </div>
     </Article>
 
-    <WithFooter />
+    <Footer />
   </>
 );
 
diff --git a/apps/site/layouts/Blog.tsx b/apps/site/layouts/Blog.tsx
index 17fb23029e896..7cf0755dd23a0 100644
--- a/apps/site/layouts/Blog.tsx
+++ b/apps/site/layouts/Blog.tsx
@@ -2,9 +2,9 @@ import { useTranslations } from 'next-intl';
 
 import { getClientContext } from '#site/client-context';
 import BlogHeader from '#site/components/Blog/BlogHeader';
-import WithBlogCategories from '#site/components/withBlogCategories';
-import WithFooter from '#site/components/withFooter';
-import WithNavBar from '#site/components/withNavBar';
+import BlogCategories from '#site/components/BlogCategories';
+import Footer from '#site/components/Footer';
+import NavBar from '#site/components/NavBar';
 import { getBlogData } from '#site/util/blog';
 
 import type { BlogCategory } from '#site/types';
@@ -51,13 +51,13 @@ const BlogLayout: FC = () => {
 
   return (
     <>
-      <WithNavBar />
+      <NavBar />
 
       <div className={styles.blogLayout}>
         <main id="main" tabIndex={-1}>
           <BlogHeader category={blogData.category} />
 
-          <WithBlogCategories
+          <BlogCategories
             blogData={blogData}
             categories={mapCategoriesToTabs([
               'all',
@@ -71,7 +71,7 @@ const BlogLayout: FC = () => {
         </main>
       </div>
 
-      <WithFooter />
+      <Footer />
     </>
   );
 };
diff --git a/apps/site/layouts/Default.tsx b/apps/site/layouts/Default.tsx
index 14fe4a4cb5134..070eb657e29ad 100644
--- a/apps/site/layouts/Default.tsx
+++ b/apps/site/layouts/Default.tsx
@@ -1,17 +1,17 @@
 import Article from '@node-core/ui-components/Containers/Article';
 
-import WithFooter from '#site/components/withFooter';
-import WithNavBar from '#site/components/withNavBar';
-import WithSidebar from '#site/components/withSidebar';
+import Footer from '#site/components/Footer';
+import NavBar from '#site/components/NavBar';
+import Sidebar from '#site/components/Sidebar';
 
 import type { FC, PropsWithChildren } from 'react';
 
 const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
-    <WithNavBar />
+    <NavBar />
 
     <Article>
-      <WithSidebar navKeys={[]} />
+      <Sidebar navKeys={[]} />
 
       <div>
         <main id="main" tabIndex={-1}>
@@ -20,7 +20,7 @@ const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
       </div>
     </Article>
 
-    <WithFooter />
+    <Footer />
   </>
 );
 
diff --git a/apps/site/layouts/Download.tsx b/apps/site/layouts/Download.tsx
index dee2e309dc0fa..9694c5077efb4 100644
--- a/apps/site/layouts/Download.tsx
+++ b/apps/site/layouts/Download.tsx
@@ -1,7 +1,7 @@
 import { getClientContext } from '#site/client-context';
-import WithDownloadSection from '#site/components/withDownloadSection';
-import WithFooter from '#site/components/withFooter';
-import WithNavBar from '#site/components/withNavBar';
+import DownloadSection from '#site/components/DownloadSection';
+import Footer from '#site/components/Footer';
+import NavBar from '#site/components/NavBar';
 import provideReleaseData from '#site/next-data/providers/releaseData';
 
 import type { FC, PropsWithChildren } from 'react';
@@ -15,19 +15,17 @@ const DownloadLayout: FC<PropsWithChildren> = async ({ children }) => {
 
   return (
     <>
-      <WithNavBar />
+      <NavBar />
 
       <div className={styles.downloadLayout}>
         <main id="main" tabIndex={-1}>
           <h1>{frontmatter.title}</h1>
 
-          <WithDownloadSection releases={releases}>
-            {children}
-          </WithDownloadSection>
+          <DownloadSection releases={releases}>{children}</DownloadSection>
         </main>
       </div>
 
-      <WithFooter />
+      <Footer />
     </>
   );
 };
diff --git a/apps/site/layouts/DownloadArchive.tsx b/apps/site/layouts/DownloadArchive.tsx
index e9e43288e5fc6..ffa15902eeddb 100644
--- a/apps/site/layouts/DownloadArchive.tsx
+++ b/apps/site/layouts/DownloadArchive.tsx
@@ -1,5 +1,5 @@
-import WithFooter from '#site/components/withFooter';
-import WithNavBar from '#site/components/withNavBar';
+import Footer from '#site/components/Footer';
+import NavBar from '#site/components/NavBar';
 
 import type { FC, PropsWithChildren } from 'react';
 
@@ -7,7 +7,7 @@ import styles from './layouts.module.css';
 
 const DownloadArchiveLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
-    <WithNavBar />
+    <NavBar />
 
     <div className={styles.downloadLayout}>
       <main id="main" tabIndex={-1}>
@@ -15,7 +15,7 @@ const DownloadArchiveLayout: FC<PropsWithChildren> = ({ children }) => (
       </main>
     </div>
 
-    <WithFooter />
+    <Footer />
   </>
 );
 
diff --git a/apps/site/layouts/GlowingBackdrop.tsx b/apps/site/layouts/GlowingBackdrop.tsx
index bbfb16430d05d..375ad27dde1e6 100644
--- a/apps/site/layouts/GlowingBackdrop.tsx
+++ b/apps/site/layouts/GlowingBackdrop.tsx
@@ -1,8 +1,8 @@
 import GlowingBackdrop from '@node-core/ui-components/Common/GlowingBackdrop';
 import classNames from 'classnames';
 
-import WithFooter from '#site/components/withFooter';
-import WithNavBar from '#site/components/withNavBar';
+import Footer from '#site/components/Footer';
+import NavBar from '#site/components/NavBar';
 
 import type { FC, PropsWithChildren } from 'react';
 
@@ -16,7 +16,7 @@ const GlowingBackdropLayout: FC<
   PropsWithChildren<GlowingBackdropLayoutProps>
 > = ({ kind = 'home', children }) => (
   <>
-    <WithNavBar />
+    <NavBar />
 
     <div className={styles.centeredLayout}>
       <GlowingBackdrop />
@@ -32,7 +32,7 @@ const GlowingBackdropLayout: FC<
       </main>
     </div>
 
-    <WithFooter />
+    <Footer />
   </>
 );
 
diff --git a/apps/site/layouts/Post.tsx b/apps/site/layouts/Post.tsx
index 123bafe87ccdc..39b99c635ec6e 100644
--- a/apps/site/layouts/Post.tsx
+++ b/apps/site/layouts/Post.tsx
@@ -1,12 +1,12 @@
 import Preview from '@node-core/ui-components/Common/Preview';
 
 import { getClientContext } from '#site/client-context';
+import AvatarGroup from '#site/components/AvatarGroup';
+import BlogCrossLinks from '#site/components/BlogCrossLinks';
 import EOLAlert from '#site/components/EOL/EOLAlert';
-import WithAvatarGroup from '#site/components/withAvatarGroup';
-import WithBlogCrossLinks from '#site/components/withBlogCrossLinks';
-import WithFooter from '#site/components/withFooter';
-import WithMetaBar from '#site/components/withMetaBar';
-import WithNavBar from '#site/components/withNavBar';
+import Footer from '#site/components/Footer';
+import MetaBar from '#site/components/MetaBar';
+import NavBar from '#site/components/NavBar';
 import { mapAuthorToCardAuthors } from '#site/util/author';
 import { mapBlogCategoryToPreviewType } from '#site/util/blog';
 
@@ -23,7 +23,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <>
-      <WithNavBar />
+      <NavBar />
 
       <div className={styles.contentLayout}>
         <div></div>
@@ -35,7 +35,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
             <h1>{frontmatter.title}</h1>
 
             <section>
-              <WithAvatarGroup names={authors} size="medium" />
+              <AvatarGroup names={authors} size="medium" />
 
               <p>{authors.join(', ')}</p>
             </section>
@@ -44,14 +44,14 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
 
             {children}
 
-            <WithBlogCrossLinks />
+            <BlogCrossLinks />
           </main>
         </div>
 
-        <WithMetaBar />
+        <MetaBar />
       </div>
 
-      <WithFooter />
+      <Footer />
     </>
   );
 };
diff --git a/apps/site/mdx/components.mjs b/apps/site/mdx/components.mjs
index 7ae15c06dba08..32ff226dcc86b 100644
--- a/apps/site/mdx/components.mjs
+++ b/apps/site/mdx/components.mjs
@@ -32,16 +32,16 @@ import Link from '#site/components/Link';
 import UpcomingMeetings from '#site/components/MDX/Calendar/UpcomingMeetings';
 import MDXCodeBox from '#site/components/MDX/CodeBox';
 import MDXImage from '#site/components/MDX/Image';
+import ReleaseAlertBox from '#site/components/ReleaseAlertBox';
 import MinorReleasesTable from '#site/components/Releases/MinorReleasesTable';
 import PreviousReleasesTable from '#site/components/Releases/PreviousReleasesTable';
 import ReleaseOverview from '#site/components/Releases/ReleaseOverview';
-import WithBadgeGroup from '#site/components/withBadgeGroup';
-import WithBanner from '#site/components/withBanner';
+import ReleaseSelect from '#site/components/ReleaseSelect';
+import Supporters from '#site/components/Supporters';
+import WebsiteBadge from '#site/components/WebsiteBadge';
+import WebsiteBanner from '#site/components/WebsiteBanner';
 import WithDownloadArchive from '#site/components/withDownloadArchive';
 import WithNodeRelease from '#site/components/withNodeRelease';
-import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
-import WithReleaseSelect from '#site/components/withReleaseSelect';
-import WithSupporters from '#site/components/withSupporters';
 import { ReleaseProvider } from '#site/providers/releaseProvider';
 
 /**
@@ -67,7 +67,7 @@ export default {
   // Renders a Download Button
   DownloadButton,
   // Renders a stateless Release Select Component
-  WithReleaseSelect,
+  ReleaseSelect,
   // Group of components that enable you to select versions for Node.js
   // releases and download selected versions. Uses `releaseProvider` as a provider
   Release: {
@@ -90,11 +90,11 @@ export default {
   DownloadsTable,
   PreviousReleasesTable,
   WithNodeRelease,
-  WithReleaseAlertBox,
-  WithBanner,
-  WithBadgeGroup,
-  // HOC for providing Backers Data
-  WithSupporters,
+  ReleaseAlertBox,
+  WebsiteBanner,
+  WebsiteBadge,
+  // Renders the list of supporters
+  Supporters,
   BadgeGroup,
   ReleaseOverview,
   MinorReleasesTable,
diff --git a/apps/site/next.dynamic.page.mjs b/apps/site/next.dynamic.page.mjs
index 246477af72228..e8eef3729267d 100644
--- a/apps/site/next.dynamic.page.mjs
+++ b/apps/site/next.dynamic.page.mjs
@@ -9,7 +9,7 @@ import { notFound, redirect } from 'next/navigation';
 import { locale as getRootLocale } from 'next/root-params';
 
 import { setClientContext } from '#site/client-context';
-import WithLayout from '#site/components/withLayout';
+import Layout from '#site/components/Layout';
 import { PAGE_VIEWPORT } from '#site/next.dynamic.constants.mjs';
 import { dynamicRouter } from '#site/next.dynamic.mjs';
 import { MatterProvider } from '#site/providers/matterProvider';
@@ -121,7 +121,7 @@ export const renderPage = props => {
   // within a server-side context
   return (
     <MatterProvider {...props.context}>
-      <WithLayout layout={props.layout}>{props.content}</WithLayout>
+      <Layout layout={props.layout}>{props.content}</Layout>
     </MatterProvider>
   );
 };
diff --git a/apps/site/pages/ar/about/partners.mdx b/apps/site/pages/ar/about/partners.mdx
index ed673eb6349d6..eaec427d7f50a 100644
--- a/apps/site/pages/ar/about/partners.mdx
+++ b/apps/site/pages/ar/about/partners.mdx
@@ -25,7 +25,7 @@ layout: about
 الداعمون هم أفراد ومؤسسات يقدّمون دعمًا ماليًا لمشروع Node.js
 عبر [OpenCollective](https://opencollective.com/nodejs) و[GitHub Sponsors](https://github.com/sponsors/nodejs).
 
-<WithSupporters />
+<Supporters />
 
 ## برنامج استدامة المنظومة (ESP)
 
diff --git a/apps/site/pages/ar/download/archive/index.mdx b/apps/site/pages/ar/download/archive/index.mdx
index d85cfa3272636..4e6548da0b5aa 100644
--- a/apps/site/pages/ar/download/archive/index.mdx
+++ b/apps/site/pages/ar/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>إصدارات أخرى</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>تحميل Binary</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/ar/index.mdx b/apps/site/pages/ar/index.mdx
index b2167a51be057..7889d7612fd3b 100644
--- a/apps/site/pages/ar/index.mdx
+++ b/apps/site/pages/ar/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">شغّل JavaScript في كل مكان</h1>
diff --git a/apps/site/pages/en/about/partners.mdx b/apps/site/pages/en/about/partners.mdx
index 5498ebbdab72b..b5841f1de6955 100644
--- a/apps/site/pages/en/about/partners.mdx
+++ b/apps/site/pages/en/about/partners.mdx
@@ -25,7 +25,7 @@ without we can't test and release new versions of Node.js.
 Supporters are individuals and organizations who financially support the Node.js project
 through [OpenCollective](https://opencollective.com/nodejs) and [GitHub Sponsors](https://github.com/sponsors/nodejs).
 
-<WithSupporters />
+<Supporters />
 
 ## Ecosystem Sustainability Program (ESP)
 
diff --git a/apps/site/pages/en/download/archive/index.mdx b/apps/site/pages/en/download/archive/index.mdx
index a6dba27546f57..4271fa5d9ebcd 100644
--- a/apps/site/pages/en/download/archive/index.mdx
+++ b/apps/site/pages/en/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>Other releases</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Binary Downloads</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx
index e2552634be402..1c7a2ac954f73 100644
--- a/apps/site/pages/en/index.mdx
+++ b/apps/site/pages/en/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Run JavaScript Everywhere</h1>
diff --git a/apps/site/pages/es/index.mdx b/apps/site/pages/es/index.mdx
index 6aaafd6466538..7af1e1cf9540b 100644
--- a/apps/site/pages/es/index.mdx
+++ b/apps/site/pages/es/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Ejecuta JavaScript en cualquier parte</h1>
diff --git a/apps/site/pages/fr/about/partners.mdx b/apps/site/pages/fr/about/partners.mdx
index 9b58d868a40e9..4ad59d463294a 100644
--- a/apps/site/pages/fr/about/partners.mdx
+++ b/apps/site/pages/fr/about/partners.mdx
@@ -25,7 +25,7 @@ sans lesquels nous ne pourrions pas tester et publier de nouvelles versions de N
 Les sponsors sont des personnes et des organisations qui soutiennent financièrement le projet Node.js
 via [OpenCollective](https://opencollective.com/nodejs) et [GitHub Sponsors](https://github.com/sponsors/nodejs).
 
-<WithSupporters />
+<Supporters />
 
 ## Programme de durabilité des écosystèmes (ESP)
 
diff --git a/apps/site/pages/fr/download/archive/index.mdx b/apps/site/pages/fr/download/archive/index.mdx
index 619e279891aed..a1f94a01b55d9 100644
--- a/apps/site/pages/fr/download/archive/index.mdx
+++ b/apps/site/pages/fr/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>Autres publications</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Téléchargements binaires</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/fr/index.mdx b/apps/site/pages/fr/index.mdx
index e8654fe0b0908..d7ea68e7af7b8 100644
--- a/apps/site/pages/fr/index.mdx
+++ b/apps/site/pages/fr/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Exécuter du JavaScript partout</h1>
diff --git a/apps/site/pages/id/about/partners.mdx b/apps/site/pages/id/about/partners.mdx
index eb597c6371754..18b7c0bde823d 100644
--- a/apps/site/pages/id/about/partners.mdx
+++ b/apps/site/pages/id/about/partners.mdx
@@ -23,7 +23,7 @@ dan pengembangan berkelanjutan dari Node.js.
 Pendukung adalah individu dan organisasi yang memberikan dukungan finansial bagi proyek Node.js
 melalui [OpenCollective](https://opencollective.com/nodejs) dan [GitHub Sponsors](https://github.com/sponsors/nodejs).
 
-<WithSupporters />
+<Supporters />
 
 ## ## Ecosystem Sustainability Program (ESP)
 
diff --git a/apps/site/pages/id/download/archive/index.mdx b/apps/site/pages/id/download/archive/index.mdx
index 6be27c8a202b4..26524f85a8366 100644
--- a/apps/site/pages/id/download/archive/index.mdx
+++ b/apps/site/pages/id/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>Rilis lainnya</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Unduhan Biner</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/id/index.mdx b/apps/site/pages/id/index.mdx
index 9d3ed115cf6f0..9155e9ee6660b 100644
--- a/apps/site/pages/id/index.mdx
+++ b/apps/site/pages/id/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Jalankan JavaScript Di Mana Saja</h1>
diff --git a/apps/site/pages/ja/about/partners.mdx b/apps/site/pages/ja/about/partners.mdx
index 0bb5e4a97dae8..73775ba6109c4 100644
--- a/apps/site/pages/ja/about/partners.mdx
+++ b/apps/site/pages/ja/about/partners.mdx
@@ -19,7 +19,7 @@ Node.jsの成功と継続的な発展に欠かせないパートナーのみな
 
 サポーターとは[OpenCollective](https://opencollective.com/nodejs) と [GitHub Sponsors](https://github.com/sponsors/nodejs) を通じて、Node.jsプロジェクトを経済的に支援している個人および組織を指します。
 
-<WithSupporters />
+<Supporters />
 
 ## エコシステム持続可能性プログラム（ESP）
 
diff --git a/apps/site/pages/ja/download/archive/index.mdx b/apps/site/pages/ja/download/archive/index.mdx
index a09cf15013bb5..fea713f083fd8 100644
--- a/apps/site/pages/ja/download/archive/index.mdx
+++ b/apps/site/pages/ja/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>その他のリリース</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>バイナリーのダウンロード</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/ja/index.mdx b/apps/site/pages/ja/index.mdx
index 9e77091eccabf..38a76a3a97b08 100644
--- a/apps/site/pages/ja/index.mdx
+++ b/apps/site/pages/ja/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">どこでもJavaScriptを使おう</h1>
diff --git a/apps/site/pages/pt-br/about/partners.mdx b/apps/site/pages/pt-br/about/partners.mdx
index 498d9788a4c2b..1be1197f280ab 100644
--- a/apps/site/pages/pt-br/about/partners.mdx
+++ b/apps/site/pages/pt-br/about/partners.mdx
@@ -20,7 +20,7 @@ Os parceiros de infraestrutura fornecem um apoio fundamental para o projeto Node
 Apoiadores são indivíduos e organizações que disponibilizam recursos financeiros através do
 [OpenCollective](https://opencollective.com/nodejs) para o projeto Node.js.
 
-<WithSupporters />
+<Supporters />
 
 ## Programa de Sustentabilidade do Ecossistema (_ESP_)
 
diff --git a/apps/site/pages/pt-br/download/archive/index.mdx b/apps/site/pages/pt-br/download/archive/index.mdx
index a7fd6055615b0..25e22cf458c04 100644
--- a/apps/site/pages/pt-br/download/archive/index.mdx
+++ b/apps/site/pages/pt-br/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>Outros lançamentos</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Downloads dos Binários</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/pt-br/index.mdx b/apps/site/pages/pt-br/index.mdx
index b272db5b359fc..928ede17a6e5c 100644
--- a/apps/site/pages/pt-br/index.mdx
+++ b/apps/site/pages/pt-br/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Execute JavaScript em Qualquer Lugar</h1>
diff --git a/apps/site/pages/ro/about/partners.mdx b/apps/site/pages/ro/about/partners.mdx
index a434b7bf701ca..b0857b1e09fad 100644
--- a/apps/site/pages/ro/about/partners.mdx
+++ b/apps/site/pages/ro/about/partners.mdx
@@ -19,7 +19,7 @@ Partenerii de infrastructură oferă un sprijin important proiectului Node.js, p
 
 Susținătorii sunt persoane și organizații care sprijină financiar proiectul Node.js prin [OpenCollective](https://opencollective.com/nodejs) și [Sponsori GitHub](https://github.com/sponsors/nodejs).
 
-<WithSupporters />
+<Supporters />
 
 ## Programul de sustenabilitate a ecosistemului (ESP)
 
diff --git a/apps/site/pages/ro/download/archive/index.mdx b/apps/site/pages/ro/download/archive/index.mdx
index fb4c7b0772c06..bba6e14045f85 100644
--- a/apps/site/pages/ro/download/archive/index.mdx
+++ b/apps/site/pages/ro/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>Alte lansări</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Descărcări binare</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/ro/index.mdx b/apps/site/pages/ro/index.mdx
index 9a1bb893f7446..e467a53ebcbf5 100644
--- a/apps/site/pages/ro/index.mdx
+++ b/apps/site/pages/ro/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Rulează JavaScript oriunde</h1>
diff --git a/apps/site/pages/ta/about/partners.mdx b/apps/site/pages/ta/about/partners.mdx
index 1cced744351e8..538091e8ee827 100644
--- a/apps/site/pages/ta/about/partners.mdx
+++ b/apps/site/pages/ta/about/partners.mdx
@@ -19,7 +19,7 @@ Node.js-இன் வெற்றிக்கும் அதன் தொடர
 
 ஆதரவாளர்கள் என்பது [OpenCollective](https://opencollective.com/nodejs) வாயிலாக Node.js திட்டத்திற்கு நிதி உதவி வழங்கும் தனிநபர்கள் மற்றும் அமைப்புகள் ஆவர்.
 
-<WithSupporters />
+<Supporters />
 
 ## சூழல் மண்டல நிலைத்தன்மை திட்டம் (ESP)
 
diff --git a/apps/site/pages/ta/download/archive/index.mdx b/apps/site/pages/ta/download/archive/index.mdx
index 0ff11391d2cb8..27749ef767f74 100644
--- a/apps/site/pages/ta/download/archive/index.mdx
+++ b/apps/site/pages/ta/download/archive/index.mdx
@@ -18,7 +18,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
       <ReleaseOverview release={release} />
 
       <ul className='flex list-none flex-col gap-2 p-0 text-sm'>
@@ -37,7 +37,7 @@ layout: download-archive
       </ul>
 
       <h2>பிற வெளியீடுகள்</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>பைனரி பதிவிறக்கங்கள்</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/ta/index.mdx b/apps/site/pages/ta/index.mdx
index 17858bd7cdfdf..f2c27cafb2f5c 100644
--- a/apps/site/pages/ta/index.mdx
+++ b/apps/site/pages/ta/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">JavaScript ஐ எங்கும் இயக்க</h1>
diff --git a/apps/site/pages/uk/about/partners.mdx b/apps/site/pages/uk/about/partners.mdx
index 77113c1fbb1f0..c4909754908cf 100644
--- a/apps/site/pages/uk/about/partners.mdx
+++ b/apps/site/pages/uk/about/partners.mdx
@@ -19,7 +19,7 @@ layout: about
 
 Підтримувачі — це особи та організації, які підтримують проєкт Node.js фінансово через [OpenCollective](https://opencollective.com/nodejs) та [GitHub Sponsors](https://github.com/sponsors/nodejs).
 
-<WithSupporters />
+<Supporters />
 
 ## Програма підтримки екосистеми (ESP)
 
diff --git a/apps/site/pages/uk/download/archive/index.mdx b/apps/site/pages/uk/download/archive/index.mdx
index 84b1c322d02d3..7e1a44090bdba 100644
--- a/apps/site/pages/uk/download/archive/index.mdx
+++ b/apps/site/pages/uk/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -43,7 +43,7 @@ layout: download-archive
       </ul>
 
       <h2>Інші релізи</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Завантаження бінарних файлів</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/uk/index.mdx b/apps/site/pages/uk/index.mdx
index 7107e5353a7c7..73999e8f5ded3 100644
--- a/apps/site/pages/uk/index.mdx
+++ b/apps/site/pages/uk/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">Запускайте JavaScript будь‑де</h1>
diff --git a/apps/site/pages/zh-cn/download/archive/index.mdx b/apps/site/pages/zh-cn/download/archive/index.mdx
index 3d01373d2cb9c..8d30d73d9df2f 100644
--- a/apps/site/pages/zh-cn/download/archive/index.mdx
+++ b/apps/site/pages/zh-cn/download/archive/index.mdx
@@ -19,7 +19,7 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox release={release} releases={releases} />
+      <ReleaseAlertBox release={release} releases={releases} />
 
       <ReleaseOverview release={release} />
 
@@ -42,7 +42,7 @@ layout: download-archive
       </ul>
 
       <h2>其他版本</h2>
-      <WithReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
+      <ReleaseSelect placeholder={version} defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>二进制文件</h2>
       <DownloadsTable source={binaries} />
diff --git a/apps/site/pages/zh-cn/index.mdx b/apps/site/pages/zh-cn/index.mdx
index 4fa3e0da66336..2d10a4a86cd32 100644
--- a/apps/site/pages/zh-cn/index.mdx
+++ b/apps/site/pages/zh-cn/index.mdx
@@ -4,7 +4,7 @@ layout: home
 ---
 
 <section>
-  <WithBadgeGroup section="index" />
+  <WebsiteBadge section="index" />
 
   <div>
     <h1 className="special">在任何地方运行 JavaScript</h1>
diff --git a/docs/adding-pages.md b/docs/adding-pages.md
index 11c1a4ad5986d..6a7886146b523 100644
--- a/docs/adding-pages.md
+++ b/docs/adding-pages.md
@@ -66,7 +66,7 @@ In cases where content has been syndicated from another source, you should also
 
 ### 3. Choose the Appropriate Layout
 
-Available layouts are defined in `apps/site/layouts/`, and mapped in `components/withLayout`.
+Available layouts are defined in `apps/site/layouts/`, and mapped in `components/Layout`.
 
 ### 4. Update Navigation (if needed)
 
@@ -279,7 +279,7 @@ This tutorial will guide you through...
 To create a custom layout:
 
 1. Add your layout component to `apps/site/layouts/`
-2. Update the layout mapping in `apps/site/components/withLayout.tsx`
+2. Update the layout mapping in `apps/site/components/Layout.tsx`
 3. Document the layout purpose and usage
 
 ### Dynamic Content