diff --git a/site/src/components/BetaPill.tsx b/site/src/components/BetaPill.tsx
new file mode 100644
index 00000000..9cfee2ba
--- /dev/null
+++ b/site/src/components/BetaPill.tsx
@@ -0,0 +1,33 @@
+import { twMerge } from '@/utils/twMerge';
+
+interface BetaPillProps {
+  className?: string;
+  style?: React.CSSProperties;
+  compact?: boolean;
+}
+
+export default function BetaPill({ className, style, compact }: BetaPillProps) {
+  return (
+    <span
+      className={twMerge(
+        'inline-flex items-center justify-center rounded-full border border-orange text-(length:--text) font-bold text-orange',
+        compact
+          ? 'h-5 px-2 font-display-compact sm:h-6 sm:px-3 sm:font-display'
+          : 'h-7 px-3 font-display lg:h-10 lg:border-2 lg:px-4 lg:text-h4',
+        className
+      )}
+      style={{ '--text': '0.75rem', ...style } as React.CSSProperties}
+    >
+      {compact ? (
+        <>
+          <span>v10</span>
+          <span className="hidden whitespace-pre uppercase sm:inline"> beta</span>
+        </>
+      ) : (
+        <>
+          v10<span className="whitespace-pre uppercase"> beta</span>
+        </>
+      )}
+    </span>
+  );
+}
diff --git a/site/src/components/NavBar/MobileNav.tsx b/site/src/components/NavBar/MobileNav.tsx
index ae9a0cf6..e1ae0439 100644
--- a/site/src/components/NavBar/MobileNav.tsx
+++ b/site/src/components/NavBar/MobileNav.tsx
@@ -2,6 +2,7 @@ import { Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
 import { ArrowUpRight } from 'lucide-react';
 import Logo from '@/assets/logos/videojs.svg?react';
+import BetaPill from '@/components/BetaPill';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 import GetStartedLink from './GetStartedLink';
 
@@ -52,12 +53,7 @@ export default function MobileNav({ navLinks, currentPath, children }: MobileNav
             <a href="/" className="flex h-7 items-center gap-3 lg:gap-4 lg:h-10">
               <Logo height="100%" />
               <span className="sr-only">Video.js video player</span>
-              <span
-                className="hidden h-full items-center justify-center rounded-full border border-orange px-3 font-display text-(length:--text) font-bold text-orange sm:inline-flex lg:border-2 lg:px-4 lg:text-h4"
-                style={{ '--text': '0.75rem' } as React.CSSProperties}
-              >
-                v10 <span className="whitespace-pre uppercase"> beta</span>
-              </span>
+              <BetaPill className="hidden sm:inline-flex" />
             </a>
             <Dialog.Close
               className={clsx(
diff --git a/site/src/components/NavBar/NavBar.astro b/site/src/components/NavBar/NavBar.astro
index e812ca6f..be291b9f 100644
--- a/site/src/components/NavBar/NavBar.astro
+++ b/site/src/components/NavBar/NavBar.astro
@@ -4,6 +4,7 @@ import { ArrowUpRight } from 'lucide-react';
 import Discord from '@/assets/logos/discord.svg?react';
 import GitHub from '@/assets/logos/github.svg?react';
 import Logo from '@/assets/logos/videojs.svg?react';
+import BetaPill from '@/components/BetaPill';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 import Search from '../Search';
 import GetStartedLink from './GetStartedLink';
@@ -41,11 +42,7 @@ const { class: className, dark = false } = Astro.props;
   <a href="/" class="flex h-7 items-center gap-3 lg:h-10 lg:gap-4">
     <Logo height="100%" />
     <span class="sr-only">Video.js video player</span>
-    <span
-      class="hidden h-full items-center justify-center rounded-full border border-orange px-3 font-display text-(length:--text) font-bold text-orange sm:inline-flex lg:border-2 lg:px-4 lg:text-h4"
-      style={{ "--text": "0.75rem" }}
-      >v10 <span class="whitespace-pre uppercase"> beta</span></span
-    >
+    <BetaPill className="hidden sm:inline-flex" />
   </a>
   <Search client:load className="mr-4 ml-auto sm:self-center" />
   {/* Desktop nav links */}
diff --git a/site/src/components/NavBar/NavBarDocs.astro b/site/src/components/NavBar/NavBarDocs.astro
index 32e803e6..0a4f91e8 100644
--- a/site/src/components/NavBar/NavBarDocs.astro
+++ b/site/src/components/NavBar/NavBarDocs.astro
@@ -4,6 +4,7 @@ import { ArrowUpRight } from 'lucide-react';
 import Discord from '@/assets/logos/discord.svg?react';
 import GitHub from '@/assets/logos/github.svg?react';
 import Logo from '@/assets/logos/videojs.svg?react';
+import BetaPill from '@/components/BetaPill';
 import Search from '@/components/Search';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 import GetStartedLink from './GetStartedLink';
@@ -40,15 +41,7 @@ const { class: className } = Astro.props;
   <a href="/" class="flex h-5 items-center gap-2 sm:h-6 sm:gap-3">
     <Logo height="100%" />
     <span class="sr-only">Video.js video player</span>
-    <span
-      class="inline-flex h-full items-center justify-center rounded-full border border-orange px-2 font-display-compact text-(length:--text) font-bold text-orange sm:px-3 sm:font-display"
-      style={{
-        "--text": "0.75rem",
-      } as React.CSSProperties}
-    >
-      <span>v10</span>
-      <span class="hidden whitespace-pre uppercase sm:inline"> beta</span>
-    </span>
+    <BetaPill compact />
   </a>
   <Search client:load className="mr-4 ml-auto sm:self-center" />
   {/* Desktop nav links */}
diff --git a/site/src/components/home/Header.astro b/site/src/components/home/Header.astro
index 5f2215dc..49c9e919 100644
--- a/site/src/components/home/Header.astro
+++ b/site/src/components/home/Header.astro
@@ -1,5 +1,6 @@
 ---
 import MuxLogoSmall from '@/assets/logos/mux-small.svg?react';
+import BetaPill from '@/components/BetaPill';
 import FrameworkControl from '@/components/home/FrameworkControl';
 import HeroVideo from '@/components/home/HeroVideo';
 import SkinControl from '@/components/home/SkinControl';
@@ -20,11 +21,10 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
   class="relative mx-auto mb-25 grid w-full max-w-305 grid-cols-1 px-5 pt-19 [grid-template-areas:var(--grid-template-areas)] md:py-0 md:[grid-template-areas:var(--md-grid-template-areas)]"
   style="--grid-template-areas: 'pill' 'title' 'description' 'video' 'mux' 'control'; --md-grid-template-areas: 'video' 'mux' 'description' 'control'"
 >
-  <span
-    class="mb-7 inline-flex h-7 items-center justify-center justify-self-center rounded-full border border-orange px-3 font-display text-(length:--text) font-bold text-orange sm:hidden"
-    style={{ "--text": "0.75rem", gridArea: "pill" }}
-    >v10 <span class="whitespace-pre uppercase">beta</span></span
-  >
+  <BetaPill
+    className="mb-7 justify-self-center sm:hidden"
+    style={{ gridArea: "pill" }}
+  />
   <h1
     class="z-10 mb-5 w-full self-center justify-self-center text-center font-display text-h2 text-balance uppercase [grid-area:var(--grid-area)] md:mb-0 md:px-5 md:text-h15 md:text-manila-light md:[grid-area:var(--md-grid-area)] lg:text-h1"
     style="--grid-area: title; --md-grid-area: video;"