diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.module.css b/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
index 616144b872ba2..3e7bdb6bb98ef 100644
--- a/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
+++ b/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
@@ -1,6 +1,11 @@
-.avatar {
-  @apply flex
-    size-8
+.item {
+  @apply xs:max-h-10
+    xs:max-w-10
+    flex
+    h-full
+    max-h-12
+    w-full
+    max-w-12
     items-center
     justify-center
     rounded-full
@@ -15,9 +20,26 @@
     dark:text-neutral-300;
 }
 
-.avatarRoot {
-  @apply -ml-2
-    size-8
-    flex-shrink-0
+.avatar {
+  @apply size-8
+    flex-shrink-0;
+
+  .wrapper {
+    @apply max-xs:block
+      max-xs:py-0;
+  }
+}
+
+.small {
+  @apply xs:size-8
+    xs:-ml-2
+    ml-0.5
+    size-10
+    first:ml-0;
+}
+
+.medium {
+  @apply -ml-2.5
+    size-10
     first:ml-0;
 }
diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.stories.tsx b/apps/site/components/Common/AvatarGroup/Avatar/index.stories.tsx
index 7f3a6430d87b8..8f72650102c0f 100644
--- a/apps/site/components/Common/AvatarGroup/Avatar/index.stories.tsx
+++ b/apps/site/components/Common/AvatarGroup/Avatar/index.stories.tsx
@@ -8,22 +8,23 @@ type Meta = MetaObj<typeof Avatar>;
 
 export const Default: Story = {
   args: {
-    src: getGitHubAvatarUrl('ovflowd'),
-    alt: 'ovflowd',
+    image: getGitHubAvatarUrl('ovflowd'),
+    nickname: 'ovflowd',
   },
 };
 
 export const NoSquare: Story = {
   args: {
-    src: '/static/images/logos/nodejs.png',
-    alt: 'SD',
+    image: '/static/images/logo-hexagon-card.png',
+    nickname: 'SD',
   },
 };
 
 export const FallBack: Story = {
   args: {
-    src: 'https://avatars.githubusercontent.com/u/',
-    alt: 'UA',
+    image: 'https://avatars.githubusercontent.com/u/',
+    nickname: 'John Doe',
+    fallback: 'JD',
   },
 };
 
diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.tsx b/apps/site/components/Common/AvatarGroup/Avatar/index.tsx
index 4837f9b40b585..c992fab126f5c 100644
--- a/apps/site/components/Common/AvatarGroup/Avatar/index.tsx
+++ b/apps/site/components/Common/AvatarGroup/Avatar/index.tsx
@@ -1,27 +1,53 @@
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import type { FC } from 'react';
+import classNames from 'classnames';
+import type { ComponentPropsWithoutRef, ElementRef } from 'react';
+import { forwardRef } from 'react';
+
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
 export type AvatarProps = {
-  src: string;
-  alt: string;
-  fallback: string;
+  image?: string;
+  name?: string;
+  nickname: string;
+  fallback?: string;
+  size?: 'small' | 'medium';
+  url?: string;
 };
 
-const Avatar: FC<AvatarProps> = ({ src, alt, fallback }) => (
-  <RadixAvatar.Root className={styles.avatarRoot}>
-    <RadixAvatar.Image
-      loading="lazy"
-      src={src}
-      alt={alt}
-      title={alt}
-      className={styles.avatar}
-    />
-    <RadixAvatar.Fallback delayMs={500} className={styles.avatar}>
-      {fallback}
-    </RadixAvatar.Fallback>
-  </RadixAvatar.Root>
-);
+const Avatar = forwardRef<
+  ElementRef<typeof RadixAvatar.Root>,
+  ComponentPropsWithoutRef<typeof RadixAvatar.Root> & AvatarProps
+>(({ image, nickname, name, fallback, url, size = 'small', ...props }, ref) => {
+  const Wrapper = url ? Link : 'div';
+
+  return (
+    <RadixAvatar.Root
+      {...props}
+      className={classNames(styles.avatar, styles[size], props.className)}
+      ref={ref}
+    >
+      <Wrapper
+        href={url || undefined}
+        target={url ? '_blank' : undefined}
+        className={styles.wrapper}
+      >
+        <RadixAvatar.Image
+          loading="lazy"
+          src={image}
+          alt={name || nickname}
+          className={styles.item}
+        />
+        <RadixAvatar.Fallback
+          delayMs={500}
+          className={classNames(styles.item, styles[size])}
+        >
+          {fallback}
+        </RadixAvatar.Fallback>
+      </Wrapper>
+    </RadixAvatar.Root>
+  );
+});
 
 export default Avatar;
diff --git a/apps/site/components/Common/AvatarGroup/Overlay/index.module.css b/apps/site/components/Common/AvatarGroup/Overlay/index.module.css
new file mode 100644
index 0000000000000..7c8188658b62c
--- /dev/null
+++ b/apps/site/components/Common/AvatarGroup/Overlay/index.module.css
@@ -0,0 +1,29 @@
+.overlay {
+  @apply flex
+    min-w-56
+    items-center
+    gap-2
+    p-3;
+}
+
+.user {
+  @apply grow;
+}
+
+.name {
+  @apply font-semibold
+    text-neutral-900
+    dark:text-neutral-300;
+}
+
+.nickname {
+  @apply font-medium
+    text-neutral-700
+    dark:text-neutral-500;
+}
+
+.arrow {
+  @apply w-3
+    fill-neutral-600
+    dark:fill-white;
+}
diff --git a/apps/site/components/Common/AvatarGroup/Overlay/index.stories.tsx b/apps/site/components/Common/AvatarGroup/Overlay/index.stories.tsx
new file mode 100644
index 0000000000000..1c462999ccd77
--- /dev/null
+++ b/apps/site/components/Common/AvatarGroup/Overlay/index.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import AvatarOverlay from '@/components/Common/AvatarGroup/Overlay';
+import { getAuthorWithId, getAuthorWithName } from '@/util/authorUtils';
+
+type Story = StoryObj<typeof AvatarOverlay>;
+type Meta = MetaObj<typeof AvatarOverlay>;
+
+export const Default: Story = {
+  args: getAuthorWithId(['nodejs'], true)[0],
+};
+
+export const FallBack: Story = {
+  args: getAuthorWithName(['Node.js'], true)[0],
+};
+
+export const WithoutName: Story = {
+  args: getAuthorWithId(['canerakdas'], true)[0],
+};
+
+export default { component: AvatarOverlay } as Meta;
diff --git a/apps/site/components/Common/AvatarGroup/Overlay/index.tsx b/apps/site/components/Common/AvatarGroup/Overlay/index.tsx
new file mode 100644
index 0000000000000..a622c9ebe1c58
--- /dev/null
+++ b/apps/site/components/Common/AvatarGroup/Overlay/index.tsx
@@ -0,0 +1,36 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import type { ComponentProps, FC } from 'react';
+
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
+import Link from '@/components/Link';
+
+import styles from './index.module.css';
+
+export type AvatarOverlayProps = ComponentProps<typeof Avatar> & {
+  url?: string;
+};
+
+const AvatarOverlay: FC<AvatarOverlayProps> = ({
+  image,
+  name,
+  nickname,
+  fallback,
+  url,
+}) => (
+  <Link className={styles.overlay} href={url} target="_blank">
+    <Avatar
+      image={image}
+      name={name}
+      nickname={nickname}
+      fallback={fallback}
+      size="medium"
+    />
+    <div className={styles.user}>
+      {name && <div className={styles.name}>{name}</div>}
+      {nickname && <div className={styles.nickname}>{nickname}</div>}
+    </div>
+    <ArrowUpRightIcon className={styles.arrow} />
+  </Link>
+);
+
+export default AvatarOverlay;
diff --git a/apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs b/apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs
index f04c7c1dbeb26..3ba01e856f083 100644
--- a/apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs
+++ b/apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs
@@ -22,8 +22,8 @@ const names = [
 ];
 
 const avatars = names.map(name => ({
-  src: getGitHubAvatarUrl(name),
-  alt: name,
+  image: getGitHubAvatarUrl(name),
+  nickname: name,
 }));
 
 describe('AvatarGroup', () => {
diff --git a/apps/site/components/Common/AvatarGroup/index.stories.tsx b/apps/site/components/Common/AvatarGroup/index.stories.tsx
index 6aef57bb904ed..0065bf2f3f009 100644
--- a/apps/site/components/Common/AvatarGroup/index.stories.tsx
+++ b/apps/site/components/Common/AvatarGroup/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
-import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
+import { getAuthorWithId } from '@/util/authorUtils';
 
 type Story = StoryObj<typeof AvatarGroup>;
 type Meta = MetaObj<typeof AvatarGroup>;
@@ -24,15 +24,13 @@ const names = [
 ];
 
 const unknownAvatar = {
-  src: 'https://avatars.githubusercontent.com/u/',
-  alt: 'unknown-avatar',
+  image: 'https://avatars.githubusercontent.com/u/',
+  nickname: 'unknown-avatar',
+  fallback: 'UA',
 };
 
 const defaultProps = {
-  avatars: [
-    unknownAvatar,
-    ...names.map(name => ({ src: getGitHubAvatarUrl(name), alt: name })),
-  ],
+  avatars: [unknownAvatar, ...getAuthorWithId(names, true)],
 };
 
 export const Default: Story = {
diff --git a/apps/site/components/Common/AvatarGroup/index.tsx b/apps/site/components/Common/AvatarGroup/index.tsx
index 4dea98b700d5d..87f8765f62a65 100644
--- a/apps/site/components/Common/AvatarGroup/index.tsx
+++ b/apps/site/components/Common/AvatarGroup/index.tsx
@@ -1,25 +1,31 @@
 'use client';
 
 import classNames from 'classnames';
-import type { ComponentProps, FC } from 'react';
-import { useState, useMemo } from 'react';
+import type { FC } from 'react';
+import { useState, useMemo, Fragment } from 'react';
 
+import type { AvatarProps } from '@/components/Common/AvatarGroup/Avatar';
 import Avatar from '@/components/Common/AvatarGroup/Avatar';
 import avatarstyles from '@/components/Common/AvatarGroup/Avatar/index.module.css';
-import { getAcronymFromString } from '@/util/stringUtils';
+import AvatarOverlay from '@/components/Common/AvatarGroup/Overlay';
+import Tooltip from '@/components/Common/Tooltip';
 
 import styles from './index.module.css';
 
 type AvatarGroupProps = {
-  avatars: Array<Omit<ComponentProps<typeof Avatar>, 'fallback'>>;
+  avatars: Array<AvatarProps>;
   limit?: number;
   isExpandable?: boolean;
+  size?: AvatarProps['size'];
+  container?: HTMLElement;
 };
 
 const AvatarGroup: FC<AvatarGroupProps> = ({
   avatars,
   limit = 10,
   isExpandable = true,
+  size = 'small',
+  container,
 }) => {
   const [showMore, setShowMore] = useState(false);
 
@@ -30,21 +36,34 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
 
   return (
     <div className={styles.avatarGroup}>
-      {renderAvatars.map((avatar, index) => (
-        <Avatar
-          src={avatar.src}
-          alt={avatar.alt}
-          fallback={getAcronymFromString(avatar.alt)}
-          key={index}
-        />
+      {renderAvatars.map(({ ...avatar }) => (
+        <Fragment key={avatar.nickname}>
+          <Tooltip
+            asChild
+            container={container}
+            content={<AvatarOverlay {...avatar} />}
+          >
+            <Avatar
+              {...avatar}
+              size={size}
+              className={classNames({
+                'cursor-pointer': avatar.url,
+                'pointer-events-none': !avatar.url,
+              })}
+            />
+          </Tooltip>
+        </Fragment>
       ))}
-
       {avatars.length > limit && (
         <span
           onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}
-          className={classNames(avatarstyles.avatarRoot, 'cursor-pointer')}
+          className={classNames(
+            avatarstyles.avatar,
+            avatarstyles[size],
+            'cursor-pointer'
+          )}
         >
-          <span className={avatarstyles.avatar}>
+          <span className={avatarstyles.item}>
             {`${showMore ? '-' : '+'}${avatars.length - limit}`}
           </span>
         </span>
diff --git a/apps/site/components/Common/BlogPostCard/__tests__/index.test.mjs b/apps/site/components/Common/BlogPostCard/__tests__/index.test.mjs
index f6a45912ae3a7..e4752d4b09dc9 100644
--- a/apps/site/components/Common/BlogPostCard/__tests__/index.test.mjs
+++ b/apps/site/components/Common/BlogPostCard/__tests__/index.test.mjs
@@ -65,38 +65,32 @@ describe('BlogPostCard', () => {
     );
 
     it('Renders all passed authors fullName(s), comma-separated', () => {
-      const authors = [
-        { fullName: 'Jane Doe', src: '' },
-        { fullName: 'John Doe', src: '' },
-      ];
+      const authors = ['Jane Doe', 'John Doe'];
 
       renderBlogPostCard({ authors });
 
       const fullNames = authors.reduce((prev, curr, index) => {
         if (index === 0) {
-          return curr.fullName;
+          return curr;
         }
 
-        return `${prev}, ${curr.fullName}`;
+        return `${prev}, ${curr}`;
       }, '');
 
       expect(screen.getByText(fullNames)).toBeVisible();
     });
 
     it('Renders all passed authors fullName(s), comma-separated', () => {
-      const authors = [
-        { fullName: 'Jane Doe', src: '' },
-        { fullName: 'John Doe', src: '' },
-      ];
+      const authors = ['Jane Doe', 'John Doe'];
 
       renderBlogPostCard({ authors });
 
       const fullNames = authors.reduce((prev, curr, index) => {
         if (index === 0) {
-          return curr.fullName;
+          return curr;
         }
 
-        return `${prev}, ${curr.fullName}`;
+        return `${prev}, ${curr}`;
       }, '');
 
       expect(screen.getByText(fullNames)).toBeVisible();
diff --git a/apps/site/components/Common/BlogPostCard/index.module.css b/apps/site/components/Common/BlogPostCard/index.module.css
index a2c84c21e5835..178d193cda6e7 100644
--- a/apps/site/components/Common/BlogPostCard/index.module.css
+++ b/apps/site/components/Common/BlogPostCard/index.module.css
@@ -33,6 +33,10 @@
 .footer {
   @apply flex
     gap-x-3;
+
+  div:first-child {
+    @apply overflow-visible;
+  }
 }
 
 .author {
diff --git a/apps/site/components/Common/BlogPostCard/index.stories.tsx b/apps/site/components/Common/BlogPostCard/index.stories.tsx
index 0311c67453386..dca5f00ccaa1c 100644
--- a/apps/site/components/Common/BlogPostCard/index.stories.tsx
+++ b/apps/site/components/Common/BlogPostCard/index.stories.tsx
@@ -11,12 +11,7 @@ export const Default: Story = {
     category: 'vulnerability',
     description:
       'Starting on March 15th and going through to March 17th (with much of the issue being mitigated on the 16th), users were receiving intermittent 404 responses when trying to download Node.js from nodejs.org, or even accessing parts of the website.',
-    authors: [
-      {
-        fullName: 'Hayden Bleasel',
-        src: 'https://avatars.githubusercontent.com/u/',
-      },
-    ],
+    authors: ['Claudio Wunder'],
     slug: '/blog/vulnerability/something',
     date: new Date('17 October 2023'),
   },
@@ -33,13 +28,7 @@ export const MoreThanOneAuthor: Story = {
   ...Default,
   args: {
     ...Default.args,
-    authors: [
-      ...(Default.args?.authors ?? []),
-      {
-        fullName: 'Jane Doe',
-        src: 'https://avatars.githubusercontent.com/u/',
-      },
-    ],
+    authors: [...(Default.args?.authors ?? []), 'Brian Muenzenmeyer'],
   },
 };
 
diff --git a/apps/site/components/Common/BlogPostCard/index.tsx b/apps/site/components/Common/BlogPostCard/index.tsx
index 2065f0b20d5d2..4f8696dd20565 100644
--- a/apps/site/components/Common/BlogPostCard/index.tsx
+++ b/apps/site/components/Common/BlogPostCard/index.tsx
@@ -1,22 +1,19 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import AvatarGroup from '@/components/Common/AvatarGroup';
 import FormattedTime from '@/components/Common/FormattedTime';
 import Preview from '@/components/Common/Preview';
 import Link from '@/components/Link';
+import WithAvatarGroup from '@/components/withAvatarGroup';
 import { mapBlogCategoryToPreviewType } from '@/util/blogUtils';
 
 import styles from './index.module.css';
 
-// @todo: this should probably be a global type?
-type Author = { fullName: string; src: string };
-
 type BlogPostCardProps = {
   title: string;
   category: string;
   description?: string;
-  authors?: Array<Author>;
+  authors?: Array<string>;
   date?: Date;
   slug?: string;
 };
@@ -31,8 +28,6 @@ const BlogPostCard: FC<BlogPostCardProps> = ({
 }) => {
   const t = useTranslations();
 
-  const avatars = authors.map(({ fullName, src }) => ({ alt: fullName, src }));
-
   const type = mapBlogCategoryToPreviewType(category);
 
   return (
@@ -52,10 +47,10 @@ const BlogPostCard: FC<BlogPostCardProps> = ({
       {description && <p className={styles.description}>{description}</p>}
 
       <footer className={styles.footer}>
-        <AvatarGroup avatars={avatars ?? []} />
+        <WithAvatarGroup names={authors} size="medium" clickable={false} />
 
         <div className={styles.author}>
-          {avatars && <p>{avatars.map(({ alt }) => alt).join(', ')}</p>}
+          {authors && <p>{authors.join(', ')}</p>}
 
           {date && <FormattedTime date={date} />}
         </div>
diff --git a/apps/site/components/Common/Tooltip/index.module.css b/apps/site/components/Common/Tooltip/index.module.css
new file mode 100644
index 0000000000000..475db244ae82b
--- /dev/null
+++ b/apps/site/components/Common/Tooltip/index.module.css
@@ -0,0 +1,41 @@
+.content {
+  @apply rounded-md
+    border
+    bg-white
+    text-sm
+    font-medium
+    text-neutral-900
+    shadow-lg
+    dark:bg-neutral-950
+    dark:text-white;
+
+  &.default {
+    @apply border-neutral-200
+      dark:border-neutral-900;
+
+    .arrow {
+      @apply fill-neutral-200
+        dark:fill-neutral-900;
+    }
+  }
+
+  &.error {
+    @apply border-danger-400
+      dark:border-danger-900;
+
+    .arrow {
+      @apply fill-danger-400
+        dark:fill-danger-900;
+    }
+  }
+
+  &.warning {
+    @apply border-warning-400
+      dark:border-warning-900;
+
+    .arrow {
+      @apply fill-warning-400
+        dark:fill-warning-900;
+    }
+  }
+}
diff --git a/apps/site/components/Common/Tooltip/index.stories.tsx b/apps/site/components/Common/Tooltip/index.stories.tsx
new file mode 100644
index 0000000000000..f37905ad80603
--- /dev/null
+++ b/apps/site/components/Common/Tooltip/index.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Button from '@/components/Common/Button';
+import Tooltip from '@/components/Common/Tooltip';
+
+type Story = StoryObj<typeof Tooltip>;
+type Meta = MetaObj<typeof Tooltip>;
+
+const defaultProps = {
+  children: <Button>Rocket Turtle</Button>,
+  content: <div className="p-3">🚀 🐢</div>,
+};
+
+export const Default: Story = {
+  args: defaultProps,
+};
+
+export const Warning: Story = {
+  args: {
+    ...defaultProps,
+    kind: 'warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...defaultProps,
+    kind: 'error',
+  },
+};
+
+export const LeftSide: Story = {
+  args: {
+    ...defaultProps,
+    side: 'left',
+  },
+  decorators: [
+    Story => (
+      <div className="flex w-72 justify-end">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const RightSide: Story = {
+  args: {
+    ...defaultProps,
+    side: 'left',
+  },
+  decorators: [
+    Story => (
+      <div className="flex w-72 justify-start">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const TopSide: Story = {
+  args: {
+    ...defaultProps,
+    side: 'top',
+  },
+  decorators: [
+    Story => (
+      <div className="flex h-72 items-end">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default { component: Tooltip } as Meta;
diff --git a/apps/site/components/Common/Tooltip/index.tsx b/apps/site/components/Common/Tooltip/index.tsx
new file mode 100644
index 0000000000000..ae1094b63f0b8
--- /dev/null
+++ b/apps/site/components/Common/Tooltip/index.tsx
@@ -0,0 +1,48 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+
+import styles from './index.module.css';
+
+type TooltipProps = {
+  asChild?: boolean;
+  content: ReactNode;
+  kind?: 'default' | 'warning' | 'error';
+  side?: ComponentProps<typeof TooltipPrimitive.Content>['side'];
+  container?: HTMLElement | null;
+};
+
+const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
+  kind = 'default',
+  children,
+  content,
+  asChild = false,
+  side = 'bottom',
+  container,
+}) => (
+  <TooltipPrimitive.Provider delayDuration={200}>
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger asChild={asChild}>
+        {children}
+      </TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal container={container}>
+        <TooltipPrimitive.Content
+          side={side}
+          sideOffset={4}
+          className={classNames(styles[kind], styles.content, {
+            'mx-1.5': side === 'top' || side === 'bottom',
+          })}
+        >
+          {content}
+          <TooltipPrimitive.Arrow
+            className={styles.arrow}
+            width={14}
+            height={6}
+          />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  </TooltipPrimitive.Provider>
+);
+
+export default Tooltip;
diff --git a/apps/site/components/Containers/MetaBar/index.stories.tsx b/apps/site/components/Containers/MetaBar/index.stories.tsx
index bf2ca8ac0e7d8..9d31de185720c 100644
--- a/apps/site/components/Containers/MetaBar/index.stories.tsx
+++ b/apps/site/components/Containers/MetaBar/index.stories.tsx
@@ -1,11 +1,10 @@
 import { CodeBracketIcon } from '@heroicons/react/24/outline';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import AvatarGroup from '@/components/Common/AvatarGroup';
 import MetaBar from '@/components/Containers/MetaBar';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
-import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
+import WithAvatarGroup from '@/components/withAvatarGroup';
 
 type Story = StoryObj<typeof MetaBar>;
 type Meta = MetaObj<typeof MetaBar>;
@@ -37,13 +36,7 @@ export const Default: Story = {
       'components.metabar.addedIn': 'v1.0.0',
       'components.metabar.author': 'The Node.js Project',
       'components.metabar.authors': (
-        <AvatarGroup
-          avatars={names.map(name => ({
-            src: getGitHubAvatarUrl(name),
-            alt: name,
-          }))}
-          limit={8}
-        />
+        <WithAvatarGroup usernames={names} limit={6} />
       ),
       'components.metabar.contribute': (
         <>
diff --git a/apps/site/components/Downloads/Release/LinkWithArrow.tsx b/apps/site/components/Downloads/Release/LinkWithArrow.tsx
index 4910383ad52d3..fb44bef842c21 100644
--- a/apps/site/components/Downloads/Release/LinkWithArrow.tsx
+++ b/apps/site/components/Downloads/Release/LinkWithArrow.tsx
@@ -18,10 +18,10 @@ const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = ({
 
   return (
     <Comp {...props}>
-      <>
+      <span>
         {children}
         <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />
-      </>
+      </span>
     </Comp>
   );
 };
diff --git a/apps/site/components/withAvatarGroup.tsx b/apps/site/components/withAvatarGroup.tsx
new file mode 100644
index 0000000000000..b0ff4b96ef6b6
--- /dev/null
+++ b/apps/site/components/withAvatarGroup.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import type { ComponentProps, FC } from 'react';
+
+import AvatarGroup from '@/components/Common/AvatarGroup';
+import type { AuthorProps } from '@/types';
+import { getAuthors } from '@/util/authorUtils';
+
+type WithAvatarGroupProps = Omit<
+  ComponentProps<typeof AvatarGroup>,
+  'avatars'
+> &
+  AuthorProps;
+
+const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
+  usernames,
+  names,
+  clickable = true,
+  ...props
+}) => (
+  <AvatarGroup
+    avatars={getAuthors({
+      usernames: usernames,
+      names: names,
+      clickable: clickable,
+    })}
+    {...props}
+  />
+);
+
+export default WithAvatarGroup;
diff --git a/apps/site/components/withBlogCategories.tsx b/apps/site/components/withBlogCategories.tsx
index 7be3f6a890a6a..f061e93013187 100644
--- a/apps/site/components/withBlogCategories.tsx
+++ b/apps/site/components/withBlogCategories.tsx
@@ -5,7 +5,7 @@ import BlogPostCard from '@/components/Common/BlogPostCard';
 import LinkTabs from '@/components/Common/LinkTabs';
 import Pagination from '@/components/Common/Pagination';
 import type { BlogPostsRSC } from '@/types';
-import { mapAuthorToCardAuthors } from '@/util/blogUtils';
+import { mapAuthorToCardAuthors } from '@/util/authorUtils';
 
 type WithBlogCategoriesProps = {
   categories: ComponentProps<typeof LinkTabs>['tabs'];
diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx
index 543d901d55f4b..1c895179c5b31 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/withMetaBar.tsx
@@ -2,14 +2,14 @@
 import { useFormatter } from 'next-intl';
 import type { FC } from 'react';
 
-import AvatarGroup from '@/components/Common/AvatarGroup';
 import MetaBar from '@/components/Containers/MetaBar';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
+import WithAvatarGroup from '@/components/withAvatarGroup';
 import { useClientContext } from '@/hooks/react-client';
 import useMediaQuery from '@/hooks/react-client/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
-import { getGitHubBlobUrl, getGitHubAvatarUrl } from '@/util/gitHubUtils';
+import { getGitHubBlobUrl } from '@/util/gitHubUtils';
 
 const WithMetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
@@ -20,13 +20,12 @@ const WithMetaBar: FC = () => {
 
   const usernames =
     frontmatter.authors?.split(',').map(author => author.trim()) ?? [];
-  const avatars = usernames.map(username => ({
-    src: getGitHubAvatarUrl(username),
-    alt: username,
-  }));
 
-  // Doing that because on mobile list on top of page and on desktop list on the right side
-  const shortAvatarList = useMediaQuery(
+  // Since we cannot show the same number of avatars in Mobile / Tablet
+  // resolution as we do on desktop and there is overflow, we are adjusting
+  // the number of avatars manually for the resolutions below
+  const isMobileResolution = useMediaQuery('(max-width: 670px)');
+  const isTabletResolution = useMediaQuery(
     '(min-width: 670px) and (max-width: 1280px)'
   );
 
@@ -35,10 +34,14 @@ const WithMetaBar: FC = () => {
       items={{
         'components.metabar.lastUpdated': lastUpdated,
         'components.metabar.readingTime': readingTime.text,
-        ...(avatars.length && {
-          [`components.metabar.${avatars.length > 1 ? 'authors' : 'author'}`]: (
-            <AvatarGroup avatars={avatars} limit={shortAvatarList ? 4 : 8} />
-          ),
+        ...(usernames.length && {
+          [`components.metabar.${usernames.length > 1 ? 'authors' : 'author'}`]:
+            (
+              <WithAvatarGroup
+                usernames={usernames}
+                limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
+              />
+            ),
         }),
         'components.metabar.contribute': (
           <>
diff --git a/apps/site/layouts/Post.tsx b/apps/site/layouts/Post.tsx
index e6cd3fc715949..ff74db2eea28c 100644
--- a/apps/site/layouts/Post.tsx
+++ b/apps/site/layouts/Post.tsx
@@ -1,16 +1,14 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import AvatarGroup from '@/components/Common/AvatarGroup';
 import Preview from '@/components/Common/Preview';
+import WithAvatarGroup from '@/components/withAvatarGroup';
 import WithBlogCrossLinks from '@/components/withBlogCrossLinks';
 import WithFooter from '@/components/withFooter';
 import WithMetaBar from '@/components/withMetaBar';
 import WithNavBar from '@/components/withNavBar';
 import { useClientContext } from '@/hooks/react-server';
-import {
-  mapAuthorToCardAuthors,
-  mapBlogCategoryToPreviewType,
-} from '@/util/blogUtils';
+import { mapAuthorToCardAuthors } from '@/util/authorUtils';
+import { mapBlogCategoryToPreviewType } from '@/util/blogUtils';
 
 import styles from './layouts.module.css';
 
@@ -31,14 +29,9 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
             <h1>{frontmatter.title}</h1>
 
             <section>
-              <AvatarGroup
-                avatars={authors.map(author => ({
-                  alt: author.fullName,
-                  src: author.src,
-                }))}
-              />
-
-              <p>{authors.map(author => author.fullName).join(', ')}</p>
+              <WithAvatarGroup names={authors} />
+
+              <p>{authors.join(', ')}</p>
             </section>
 
             <Preview title={frontmatter.title!} type={type} />
diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs
index 5aa0a41b6bd45..245c905ab71a5 100644
--- a/apps/site/next.config.mjs
+++ b/apps/site/next.config.mjs
@@ -90,6 +90,7 @@ const nextConfig = {
       '@radix-ui/react-slot',
       '@radix-ui/react-tabs',
       '@radix-ui/react-toast',
+      '@radix-ui/react-tooltip',
       '@orama/highlight',
       '@heroicons/react',
       'tailwindcss',
diff --git a/apps/site/package.json b/apps/site/package.json
index 0f83ed9671373..37dffb4c55a99 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -52,6 +52,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@savvywombat/tailwindcss-grid-areas": "~4.0.0",
     "@tailwindcss/container-queries": "~0.1.1",
     "@types/node": "20.16.5",
diff --git a/apps/site/types/author.ts b/apps/site/types/author.ts
new file mode 100644
index 0000000000000..9027163bc243f
--- /dev/null
+++ b/apps/site/types/author.ts
@@ -0,0 +1,12 @@
+export interface AuthorProps {
+  names?: Array<string>;
+  usernames?: Array<string>;
+  clickable?: boolean;
+  container?: HTMLElement | null;
+}
+
+export interface Author {
+  id: string;
+  name: string;
+  website?: string;
+}
diff --git a/apps/site/types/config.ts b/apps/site/types/config.ts
index 2d02e81e5da45..f307d15457aab 100644
--- a/apps/site/types/config.ts
+++ b/apps/site/types/config.ts
@@ -29,9 +29,3 @@ export interface SiteConfig {
   websiteBanners: Record<string, WebsiteBanner>;
   websiteBadges: Record<string, WebsiteBadge>;
 }
-
-export interface Author {
-  id: string;
-  name: string;
-  website: string;
-}
diff --git a/apps/site/types/index.ts b/apps/site/types/index.ts
index 567d44d0e088a..28cee2cbc8130 100644
--- a/apps/site/types/index.ts
+++ b/apps/site/types/index.ts
@@ -11,3 +11,4 @@ export * from './server';
 export * from './github';
 export * from './calendar';
 export * from './search';
+export * from './author';
diff --git a/apps/site/util/__tests__/authorUtils.test.mjs b/apps/site/util/__tests__/authorUtils.test.mjs
new file mode 100644
index 0000000000000..7a5a41d35db3a
--- /dev/null
+++ b/apps/site/util/__tests__/authorUtils.test.mjs
@@ -0,0 +1,98 @@
+import {
+  mapAuthorToCardAuthors,
+  getAuthorWithId,
+  getAuthorWithName,
+} from '../authorUtils';
+
+describe('mapAuthorToCardAuthors', () => {
+  it('maps authors to card authors with default avatar source', () => {
+    const author = 'John Doe';
+
+    const result = mapAuthorToCardAuthors(author);
+
+    expect(result).toEqual(['John Doe']);
+  });
+
+  it('handles multiple authors separated by various delimiters', () => {
+    const author = 'Alice, Bob, Charlie, David';
+
+    const result = mapAuthorToCardAuthors(author);
+    expect(result).toEqual(['Alice', 'Bob', 'Charlie', 'David']);
+  });
+
+  describe('when has more than one author', () => {
+    it.each([
+      ['Timothy J Fontaine, John Doe'],
+      ['Timothy J Fontaine and John Doe'],
+      ['Timothy J Fontaine;John Doe'],
+      ['Timothy J Fontaine & John Doe'],
+      ['Timothy J Fontaine by John Doe'],
+      ['Timothy J Fontaine prepared by John Doe'],
+      ['Timothy J Fontaine (@TimothyJFontaine) & John Doe (@JohnDoe)'],
+      ['Timothy J Fontaine (TimothyJFontaine) & John Doe (JohnDoe)'],
+    ])('returns the correct card authors', author => {
+      const result = mapAuthorToCardAuthors(author);
+
+      expect(result).toStrictEqual(['Timothy J Fontaine', 'John Doe']);
+    });
+  });
+
+  describe('when the author name does not have GitHub username', () => {
+    it('returns the correct card authors', () => {
+      const result = mapAuthorToCardAuthors('John Doe, Jane Doe');
+
+      expect(result).toStrictEqual(['John Doe', 'Jane Doe']);
+    });
+  });
+
+  describe('when the author name has GitHub username', () => {
+    it('returns the correct card authors', () => {
+      const result = mapAuthorToCardAuthors('Timothy J Fontaine');
+
+      expect(result).toStrictEqual(['Timothy J Fontaine']);
+    });
+  });
+});
+
+describe('getAuthorWithId', () => {
+  it('should return author details when author is found', () => {
+    const result = getAuthorWithId(['nodejs'], true);
+
+    expect(result).toEqual([
+      {
+        name: 'The Node.js Project',
+        nickname: 'nodejs',
+        fallback: 'TNJP',
+        url: 'https://github.com/nodejs',
+        image: 'https://avatars.githubusercontent.com/nodejs',
+      },
+    ]);
+  });
+});
+
+describe('getAuthorWithName', () => {
+  it('should return author details when author is found', () => {
+    const result = getAuthorWithName(['The Node.js Project'], true);
+
+    expect(result).toEqual([
+      {
+        name: 'The Node.js Project',
+        nickname: 'nodejs',
+        fallback: 'TNJP',
+        url: 'https://github.com/nodejs',
+        image: 'https://avatars.githubusercontent.com/nodejs',
+      },
+    ]);
+  });
+
+  it('should return fallback details when author is not found', () => {
+    const result = getAuthorWithName(['Caner Akdas'], true);
+
+    expect(result).toEqual([
+      {
+        nickname: 'Caner Akdas',
+        fallback: 'CA',
+      },
+    ]);
+  });
+});
diff --git a/apps/site/util/__tests__/blogUtils.test.mjs b/apps/site/util/__tests__/blogUtils.test.mjs
deleted file mode 100644
index 3d22068e50778..0000000000000
--- a/apps/site/util/__tests__/blogUtils.test.mjs
+++ /dev/null
@@ -1,82 +0,0 @@
-import { mapAuthorToCardAuthors } from '../blogUtils';
-
-describe('mapAuthorToCardAuthors', () => {
-  it('maps authors to card authors with default avatar source', () => {
-    const author = 'John Doe';
-
-    const result = mapAuthorToCardAuthors(author);
-
-    expect(result).toEqual([
-      {
-        fullName: 'John Doe',
-        src: 'https://ui-avatars.com/api/?name=John Doe',
-      },
-    ]);
-  });
-
-  it('handles multiple authors separated by various delimiters', () => {
-    const author = 'Alice, Bob, Charlie, David';
-
-    const result = mapAuthorToCardAuthors(author);
-    expect(result).toEqual([
-      { fullName: 'Alice', src: 'https://ui-avatars.com/api/?name=Alice' },
-      { fullName: 'Bob', src: 'https://ui-avatars.com/api/?name=Bob' },
-      { fullName: 'Charlie', src: 'https://ui-avatars.com/api/?name=Charlie' },
-      { fullName: 'David', src: 'https://ui-avatars.com/api/?name=David' },
-    ]);
-  });
-
-  describe('when has more than one author', () => {
-    it.each([
-      ['Timothy J Fontaine, John Doe'],
-      ['Timothy J Fontaine and John Doe'],
-      ['Timothy J Fontaine;John Doe'],
-      ['Timothy J Fontaine & John Doe'],
-      ['Timothy J Fontaine by John Doe'],
-      ['Timothy J Fontaine prepared by John Doe'],
-    ])('returns the correct card authors', author => {
-      const result = mapAuthorToCardAuthors(author);
-
-      expect(result).toStrictEqual([
-        {
-          fullName: 'Timothy J Fontaine',
-          src: 'https://avatars.githubusercontent.com/tjfontaine',
-        },
-        {
-          fullName: 'John Doe',
-          src: 'https://ui-avatars.com/api/?name=John Doe',
-        },
-      ]);
-    });
-  });
-
-  describe('when the author name does not have GitHub username', () => {
-    it('returns the correct card authors', () => {
-      const result = mapAuthorToCardAuthors('John Doe, Jane Doe');
-
-      expect(result).toStrictEqual([
-        {
-          fullName: 'John Doe',
-          src: 'https://ui-avatars.com/api/?name=John Doe',
-        },
-        {
-          fullName: 'Jane Doe',
-          src: 'https://ui-avatars.com/api/?name=Jane Doe',
-        },
-      ]);
-    });
-  });
-
-  describe('when the author name has GitHub username', () => {
-    it('returns the correct card authors', () => {
-      const result = mapAuthorToCardAuthors('Timothy J Fontaine');
-
-      expect(result).toStrictEqual([
-        {
-          fullName: 'Timothy J Fontaine',
-          src: 'https://avatars.githubusercontent.com/tjfontaine',
-        },
-      ]);
-    });
-  });
-});
diff --git a/apps/site/util/authorUtils.ts b/apps/site/util/authorUtils.ts
new file mode 100644
index 0000000000000..5a346a80bad95
--- /dev/null
+++ b/apps/site/util/authorUtils.ts
@@ -0,0 +1,79 @@
+import { authors } from '@/next.json.mjs';
+import type { AuthorProps } from '@/types';
+import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
+import { getAcronymFromString } from '@/util/stringUtils';
+
+export const mapAuthorToCardAuthors = (author: string) => {
+  // Clears text in parentheses
+  const cleanedAuthor = author.replace(/\s*\(.*?\)\s*/g, '').trim();
+
+  // Defines the separators such as (",", "and", ";", "&", "prepared by", "by")
+  const separators = /,|\band\b|;|&| prepared by | by /i;
+
+  return cleanedAuthor
+    .split(separators)
+    .map(name => name.trim())
+    .filter(Boolean);
+};
+
+export const getAuthorWithId = (usernames: Array<string>, hasUrl: boolean) => {
+  const mapIdToAuthor = (username: string) => {
+    const author = Object.values(authors).find(
+      ({ id }) => id.toLowerCase() === username.toLowerCase()
+    );
+
+    if (author) {
+      const { id, name, website } = author;
+
+      return {
+        image: getGitHubAvatarUrl(id),
+        name: name,
+        nickname: id,
+        fallback: getAcronymFromString(name),
+        url: hasUrl ? website : undefined,
+      };
+    }
+
+    return {
+      image: getGitHubAvatarUrl(username),
+      nickname: username,
+      fallback: getAcronymFromString(username),
+      url: hasUrl ? `https://github.com/${username}` : undefined,
+    };
+  };
+
+  return usernames.map(mapIdToAuthor);
+};
+
+export const getAuthorWithName = (names: Array<string>, hasUrl: boolean) => {
+  const mapNameToAuthor = (username: string) => {
+    if (Object.keys(authors).includes(username)) {
+      if (username in authors) {
+        const { id, name, website } = authors[username];
+
+        return {
+          image: getGitHubAvatarUrl(id),
+          name: name,
+          nickname: id,
+          fallback: getAcronymFromString(name),
+          url: hasUrl ? website : undefined,
+        };
+      }
+    }
+
+    return {
+      nickname: username,
+      fallback: getAcronymFromString(username),
+    };
+  };
+
+  return names.map(mapNameToAuthor);
+};
+
+export const getAuthors = ({ usernames, names, clickable }: AuthorProps) => {
+  if (usernames) {
+    return getAuthorWithId(usernames, clickable ?? true);
+  }
+
+  return getAuthorWithName(names || [], clickable ?? true);
+};
diff --git a/apps/site/util/blogUtils.ts b/apps/site/util/blogUtils.ts
index 2cc9a07fc3e14..6f63355fbabd6 100644
--- a/apps/site/util/blogUtils.ts
+++ b/apps/site/util/blogUtils.ts
@@ -1,8 +1,5 @@
-import { authors as authorsMap } from '@/next.json.mjs';
 import type { BlogPreviewType } from '@/types';
 
-import { getGitHubAvatarUrl } from './gitHubUtils';
-
 export const mapBlogCategoryToPreviewType = (type: string): BlogPreviewType => {
   switch (type) {
     case 'announcements':
@@ -15,18 +12,3 @@ export const mapBlogCategoryToPreviewType = (type: string): BlogPreviewType => {
       return 'announcements';
   }
 };
-
-// @todo: we should check about the future of GitHub avatars
-// and mapping them to the respective users
-// @see https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml
-export const mapAuthorToCardAuthors = (author: string) => {
-  const authors = author.split(/, | and |;| & | prepared by | by /i);
-
-  return authors.map(fullName => {
-    let src = `https://ui-avatars.com/api/?name=${fullName}`;
-
-    if (authorsMap[fullName]) src = getGitHubAvatarUrl(authorsMap[fullName].id);
-
-    return { fullName, src };
-  });
-};
diff --git a/package-lock.json b/package-lock.json
index 6e571e9622096..72682b1acb824 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-toast": "^1.2.2",
+        "@radix-ui/react-tooltip": "^1.1.3",
         "@savvywombat/tailwindcss-grid-areas": "~4.0.0",
         "@tailwindcss/container-queries": "~0.1.1",
         "@types/node": "20.16.5",
@@ -4206,6 +4207,216 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz",
+      "integrity": "sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",