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 d51b618f92..2e4036d448 100644
--- a/services/web/frontend/js/shared/components/beta-badge-icon.tsx
+++ b/services/web/frontend/js/shared/components/beta-badge-icon.tsx
@@ -16,7 +16,7 @@ const BetaBadgeIcon: FC<{
     )
   } else {
     return (
-      <OLBadge bg="warning" className="beta-badge">
+      <OLBadge bg="warning-light-bg" text="warning">
         β
       </OLBadge>
     )
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
index c2a56d053e..353a8fdc2e 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
@@ -162,10 +162,24 @@ $primary: $bg-accent-01;
 $secondary: $bg-light-primary;
 $success: $bg-accent-01;
 $info: $bg-info-01;
-$warning: $bg-warning-03;
+$warning: $content-warning;
 $danger: $bg-danger-01;
 $light: $bg-light-tertiary;
 $dark: $neutral-90;
+$warning-light-gb: $bg-warning-03;
+
+// Theme colors
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'warning-light-bg': $warning-light-gb,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+);
 
 // Body colors
 $body-color: $content-primary;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
index c6f09687f0..a3b2f13d0f 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
@@ -10,10 +10,6 @@ $max-width: 160px;
   &:not(.badge-tag) {
     max-width: $max-width;
   }
-
-  &.bg-warning {
-    --bs-badge-color: var(--content-warning);
-  }
 }
 
 .badge-prepend {
diff --git a/services/web/test/frontend/components/shared/split-test-badge.spec.tsx b/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
index 80f1d28be3..1f77f2548d 100644
--- a/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
+++ b/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
@@ -29,7 +29,8 @@ describe('split test badge', function () {
 
     cy.findByRole('link', { name: /this is an alpha feature/i })
       .should('have.attr', 'href', '/alpha/participate')
-      .find('.badge.alpha-badge')
+      .find('.badge')
+      .contains('α')
   })
 
   it('does not render the alpha badge when user is not assigned to the variant', function () {
@@ -87,7 +88,8 @@ describe('split test badge', function () {
 
     cy.findByRole('link', { name: /this is a beta feature/i })
       .should('have.attr', 'href', '/beta/participate')
-      .find('.badge.beta-badge')
+      .find('.badge')
+      .contains('β')
   })
 
   it('does not render the beta badge when user is not assigned to the variant', function () {