diff --git a/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx b/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx
index 47fd163d5c..7344ddb6f8 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-badge.tsx
@@ -1,7 +1,17 @@
 import Badge from '@/features/ui/components/bootstrap-5/badge'
 
 function OLBadge(props: React.ComponentProps<typeof Badge>) {
-  return <Badge {...props} />
+  let { bg, text, ...rest } = props
+
+  // For warning badges, use a light background by default. We still want the
+  // Bootstrap warning colour to be dark for text though, so make an
+  // adjustment here
+  if (bg === 'warning') {
+    bg = 'warning-light-bg'
+    text = 'warning'
+  }
+
+  return <Badge bg={bg} text={text} {...rest} />
 }
 
 export default OLBadge
diff --git a/services/web/frontend/js/shared/components/beta-badge-icon.tsx b/services/web/frontend/js/shared/components/beta-badge-icon.tsx
index 2e4036d448..b331c90175 100644
--- a/services/web/frontend/js/shared/components/beta-badge-icon.tsx
+++ b/services/web/frontend/js/shared/components/beta-badge-icon.tsx
@@ -15,11 +15,7 @@ const BetaBadgeIcon: FC<{
       </OLBadge>
     )
   } else {
-    return (
-      <OLBadge bg="warning-light-bg" text="warning">
-        β
-      </OLBadge>
-    )
+    return <OLBadge bg="warning">β</OLBadge>
   }
 }