diff --git a/services/web/frontend/js/shared/components/beta-badge.tsx b/services/web/frontend/js/shared/components/beta-badge.tsx
index 9f27e98803..332c674002 100644
--- a/services/web/frontend/js/shared/components/beta-badge.tsx
+++ b/services/web/frontend/js/shared/components/beta-badge.tsx
@@ -4,6 +4,7 @@ import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { bsVersion } from '@/features/utils/bootstrap-5'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
 
 type TooltipProps = {
   id: string
@@ -14,6 +15,28 @@ type TooltipProps = {
   >['placement']
 }
 
+function BS5BetaBadge({
+  badgeClass,
+}: {
+  badgeClass: ReturnType<typeof chooseBadgeClass>
+}) {
+  if (badgeClass === 'info-badge') {
+    return <MaterialIcon type="info" className="align-middle info-badge" />
+  } else if (badgeClass === 'alpha-badge') {
+    return (
+      <OLBadge bg="primary" className="alpha-badge">
+        α
+      </OLBadge>
+    )
+  } else {
+    return (
+      <OLBadge bg="warning" className="beta-badge">
+        β
+      </OLBadge>
+    )
+  }
+}
+
 const BetaBadge: FC<{
   tooltip: TooltipProps
   url?: string
@@ -36,12 +59,7 @@ const BetaBadge: FC<{
         </span>
         <BootstrapVersionSwitcher
           bs3={<span className={classnames('badge', badgeClass)} />}
-          bs5={
-            <MaterialIcon
-              type="info"
-              className={classnames('align-middle', badgeClass)}
-            />
-          }
+          bs5={<BS5BetaBadge badgeClass={badgeClass} />}
         />
       </a>
     </OLTooltip>
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss b/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
index e35528af78..67a0740ca4 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
@@ -3,9 +3,9 @@
 }
 
 .alpha-badge {
-  color: var(--green-50);
+  font-family: $font-family-monospace;
 }
 
-.beta-badge {
-  color: var(--yellow-40);
+.split-test-badge-tooltip .tooltip-inner {
+  white-space: pre-wrap;
 }