diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx
index fa2180f5f7fbe..462221477b8e3 100644
--- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx
+++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx
@@ -6,6 +6,22 @@ import FormattedTime from '#site/components/Common/FormattedTime';
 import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
 import getReleaseData from '#site/next-data/releaseData';
 
+const BADGE_KIND_MAP = {
+  'End-of-life': 'warning',
+  Maintenance: 'neutral',
+  LTS: 'info',
+  Current: 'default',
+  Pending: 'default',
+} as const;
+
+const BADGE_TEXT_MAP = {
+  'End-of-life': 'End-of-Life (EOL)',
+  Maintenance: 'Maintenance LTS',
+  LTS: 'Active LTS',
+  Current: 'Current',
+  Pending: 'Pending',
+} as const;
+
 const DownloadReleasesTable: FC = async () => {
   const releaseData = await getReleaseData();
 
@@ -35,11 +51,8 @@ const DownloadReleasesTable: FC = async () => {
               <FormattedTime date={release.releaseDate} />
             </td>
             <td data-label="Status">
-              <Badge
-                kind={release.status === 'End-of-life' ? 'warning' : 'default'}
-                size="small"
-              >
-                {release.status}
+              <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
+                {BADGE_TEXT_MAP[release.status]}
               </Badge>
             </td>
             <td className="download-table-last">
diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx
index 3f0bf31f71edb..8abb1aa952d7e 100644
--- a/apps/site/components/Downloads/ReleaseModal/index.tsx
+++ b/apps/site/components/Downloads/ReleaseModal/index.tsx
@@ -34,34 +34,38 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
   return (
     <Modal open={isOpen} onOpenChange={closeModal}>
       {release.status === 'End-of-life' && (
-        <AlertBox
-          title={t('components.common.alertBox.warning')}
-          level="warning"
-          size="small"
-        >
-          {t.rich('components.releaseModal.unsupportedVersionWarning', {
-            link: text => (
-              <Link
-                onClick={closeModal}
-                href="/about/previous-releases#release-schedule"
-              >
-                {text}
-              </Link>
-            ),
-          })}
-        </AlertBox>
+        <div className="mb-4">
+          <AlertBox
+            title={t('components.common.alertBox.warning')}
+            level="warning"
+            size="small"
+          >
+            {t.rich('components.releaseModal.unsupportedVersionWarning', {
+              link: text => (
+                <Link
+                  onClick={closeModal}
+                  href="/about/previous-releases#release-schedule"
+                >
+                  {text}
+                </Link>
+              ),
+            })}
+          </AlertBox>
+        </div>
       )}
 
       {release.status === 'LTS' && (
-        <AlertBox
-          title={t('components.common.alertBox.info')}
-          level="info"
-          size="small"
-        >
-          {t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
-            link: text => <Link href="/download/current">{text}</Link>,
-          })}
-        </AlertBox>
+        <div className="mb-4">
+          <AlertBox
+            title={t('components.common.alertBox.info')}
+            level="info"
+            size="small"
+          >
+            {t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
+              link: text => <Link href="/download/current">{text}</Link>,
+            })}
+          </AlertBox>
+        </div>
       )}
 
       <Title>{modalHeading}</Title>
@@ -73,8 +77,6 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
           </LinkWithArrow>
         )}
 
-        <h5>{t('components.releaseModal.overview')}</h5>
-
         <ReleaseOverview release={release} />
 
         <h5>{t('components.releaseModal.minorVersions')}</h5>
diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs
index 97332983c9583..9942ac7f35e3e 100644
--- a/apps/site/next.mdx.use.mjs
+++ b/apps/site/next.mdx.use.mjs
@@ -1,5 +1,7 @@
 'use strict';
 
+import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
+
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
@@ -19,6 +21,8 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
+  // Standalone Badge Group
+  BadgeGroup,
   // Renders an container for Upcoming Node.js Meetings
   UpcomingMeetings,
 };
diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx
index cde8da1dc141d..c08fc9c9bc2ab 100644
--- a/apps/site/pages/en/index.mdx
+++ b/apps/site/pages/en/index.mdx
@@ -17,15 +17,33 @@ layout: home
   <div className="flex gap-4">
 
     <div className="flex flex-col gap-2">
-      <Button kind="special" className="!hidden dark:!block" href="/download">Install Node.js</Button>
+      <Button kind="special" className="!hidden dark:!block" href="/download">Get Node.js®</Button>
 
-      <Button kind="primary" className="!block dark:!hidden" href="/download">Install Node.js</Button>
+      <Button kind="primary" className="!block dark:!hidden" href="/download">Get Node.js®</Button>
 
       <Button kind="secondary" className="!block" href="/blog/announcements/node-18-eol-support">
         <span>Get security support</span>
         <br />
         <small className="!text-xs">for Node.js 18 and below</small>
       </Button>
+
+      <div className="flex flex-col xs:flex-row gap-2 justify-center xs:mt-6">
+        <WithNodeRelease status="LTS">
+          {({ release }) =>
+            <BadgeGroup size="small" kind="info" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
+              Node.js LTS
+            </BadgeGroup>}
+        </WithNodeRelease>
+
+        <WithNodeRelease status="Current">
+          {({ release }) =>
+            <BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
+              Node.js Current
+            </BadgeGroup>}
+        </WithNodeRelease>
+      </div>
+
+      <span className="italic text-center text-xs! text-neutral-800 dark:text-neutral-600">"LTS" refers to the long-term support version of Node.js. <Link href="/about/previous-releases">Learn more about Node.js releases.</Link></span>
     </div>
 
   </div>
diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css
index 6aa272d8ff19b..58e8101f89fbf 100644
--- a/packages/ui-components/src/Common/AlertBox/index.module.css
+++ b/packages/ui-components/src/Common/AlertBox/index.module.css
@@ -74,6 +74,14 @@
     }
   }
 
+  &.neutral {
+    @apply bg-neutral-600;
+
+    .title {
+      @apply bg-neutral-700;
+    }
+  }
+
   code {
     /* Ignore the styles from `markdown.css` */
     all: unset;
diff --git a/packages/ui-components/src/Common/AlertBox/index.stories.tsx b/packages/ui-components/src/Common/AlertBox/index.stories.tsx
index d900597de6e2f..12dfbeee31506 100644
--- a/packages/ui-components/src/Common/AlertBox/index.stories.tsx
+++ b/packages/ui-components/src/Common/AlertBox/index.stories.tsx
@@ -52,6 +52,16 @@ export const Danger: Story = {
   },
 };
 
+export const Neutral: Story = {
+  args: {
+    level: 'neutral',
+    title: 'Note',
+    children:
+      "This is a neutral informational message that doesn't fit into the other alert categories.",
+    size: 'default',
+  },
+};
+
 export const InMarkdown: Story = {
   args: {
     level: 'danger',
diff --git a/packages/ui-components/src/Common/AlertBox/index.tsx b/packages/ui-components/src/Common/AlertBox/index.tsx
index 346c8fb07e999..de4b1d3a5d634 100644
--- a/packages/ui-components/src/Common/AlertBox/index.tsx
+++ b/packages/ui-components/src/Common/AlertBox/index.tsx
@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type AlertBoxProps = PropsWithChildren<{
-  level: 'info' | 'success' | 'warning' | 'danger';
+  level: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
   title: string;
   size?: 'default' | 'small';
 }>;
diff --git a/packages/ui-components/src/Common/Badge/index.module.css b/packages/ui-components/src/Common/Badge/index.module.css
index 19bdba865743c..944bd2b39af77 100644
--- a/packages/ui-components/src/Common/Badge/index.module.css
+++ b/packages/ui-components/src/Common/Badge/index.module.css
@@ -35,4 +35,16 @@
       bg-warning-600
       dark:border-warning-600;
   }
+
+  &.info {
+    @apply border-info-200
+      bg-info-600
+      dark:border-info-800;
+  }
+
+  &.neutral {
+    @apply border-neutral-200
+      bg-neutral-600
+      dark:border-neutral-800;
+  }
 }
diff --git a/packages/ui-components/src/Common/Badge/index.stories.tsx b/packages/ui-components/src/Common/Badge/index.stories.tsx
index 86df07062de4d..b5be7b849a75c 100644
--- a/packages/ui-components/src/Common/Badge/index.stories.tsx
+++ b/packages/ui-components/src/Common/Badge/index.stories.tsx
@@ -23,6 +23,18 @@ export const Warning: Story = {
   },
 };
 
+export const Info: Story = {
+  args: {
+    kind: 'info',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    kind: 'neutral',
+  },
+};
+
 export const Small: Story = {
   args: {
     size: 'small',
diff --git a/packages/ui-components/src/Common/Badge/index.tsx b/packages/ui-components/src/Common/Badge/index.tsx
index 5b9730368e35d..1a6dc8efa6cc2 100644
--- a/packages/ui-components/src/Common/Badge/index.tsx
+++ b/packages/ui-components/src/Common/Badge/index.tsx
@@ -3,10 +3,11 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
 
-type BadgeKind = 'default' | 'warning' | 'error';
+type BadgeKind = 'default' | 'warning' | 'error' | 'info' | 'neutral';
+type BadgeSize = 'small' | 'medium';
 
 type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
-  size?: 'small' | 'medium';
+  size?: BadgeSize;
   kind?: BadgeKind;
 };
 
diff --git a/packages/ui-components/src/Common/BadgeGroup/index.module.css b/packages/ui-components/src/Common/BadgeGroup/index.module.css
index 754356aa6012c..7f53505bd92a4 100644
--- a/packages/ui-components/src/Common/BadgeGroup/index.module.css
+++ b/packages/ui-components/src/Common/BadgeGroup/index.module.css
@@ -1,8 +1,9 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply flex
-    w-fit
+  @apply xs:w-fit
+    flex
+    w-full
     items-center
     rounded-full
     border
@@ -35,7 +36,8 @@
         dark:text-green-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-green-700
         dark:text-green-300;
     }
@@ -52,7 +54,8 @@
         dark:text-danger-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-danger-700
         dark:text-danger-300;
     }
@@ -69,9 +72,46 @@
         dark:text-warning-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-warning-700
         dark:text-warning-300;
     }
   }
+
+  &.info {
+    @apply border-info-200
+      bg-info-100
+      dark:border-info-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-info-500
+        dark:text-info-300;
+    }
+
+    .message,
+    .message a:not(:hover) {
+      @apply text-info-700
+        dark:text-info-300;
+    }
+  }
+
+  &.neutral {
+    @apply border-neutral-200
+      bg-neutral-100
+      dark:border-neutral-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-neutral-500
+        dark:text-neutral-300;
+    }
+
+    .message,
+    .message a:not(:hover) {
+      @apply text-neutral-700
+        dark:text-neutral-300;
+    }
+  }
 }
diff --git a/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx b/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx
index ae100c07c653a..b3e746ca14cfc 100644
--- a/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx
+++ b/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx
@@ -14,6 +14,16 @@ export const Default: Story = {
   },
 };
 
+export const SmallDefault: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'default',
+    badgeText: 'New',
+    size: 'small',
+  },
+};
+
 export const Error: Story = {
   args: {
     href: '/',
@@ -32,4 +42,22 @@ export const Warning: Story = {
   },
 };
 
+export const Info: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'info',
+    badgeText: 'New',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'neutral',
+    badgeText: 'New',
+  },
+};
+
 export default { component: BadgeGroup } as Meta;
diff --git a/packages/ui-components/src/Common/BadgeGroup/index.tsx b/packages/ui-components/src/Common/BadgeGroup/index.tsx
index 2975fc8fe3f9b..dbbadebab464f 100644
--- a/packages/ui-components/src/Common/BadgeGroup/index.tsx
+++ b/packages/ui-components/src/Common/BadgeGroup/index.tsx
@@ -6,16 +6,16 @@ import type { LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
 
-type BadgeGroupKind = 'default' | 'warning' | 'error';
-
 type BadgeGroupProps = {
-  kind?: BadgeGroupKind;
+  kind?: ComponentProps<typeof Badge>['kind'];
+  size?: ComponentProps<typeof Badge>['size'];
   badgeText?: string;
   as: LinkLike;
 } & ComponentProps<LinkLike>;
 
 const BadgeGroup: FC<PropsWithChildren<BadgeGroupProps>> = ({
   kind = 'default',
+  size = 'medium',
   badgeText,
   children,
   as: Component = 'a',
@@ -23,11 +23,13 @@ const BadgeGroup: FC<PropsWithChildren<BadgeGroupProps>> = ({
 }) => (
   <Component className={`${styles.wrapper} ${styles[kind]}`} {...args}>
     {badgeText && (
-      <Badge kind={kind} className={styles.badge}>
+      <Badge kind={kind} size={size} className={styles.badge}>
         {badgeText}
       </Badge>
     )}
+
     <span className={styles.message}>{children}</span>
+
     {args.href && <ArrowRightIcon className={styles.icon} />}
   </Component>
 );
diff --git a/packages/ui-components/src/styles/markdown.css b/packages/ui-components/src/styles/markdown.css
index efdfa4c9a328b..b4f9a2cc73cde 100644
--- a/packages/ui-components/src/styles/markdown.css
+++ b/packages/ui-components/src/styles/markdown.css
@@ -80,7 +80,7 @@ main {
 
     &:hover {
       @apply text-green-900
-        dark:text-green-300;
+        dark:text-green-200;
     }
 
     &[role='button'] {