diff --git a/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
index 63fe656ca..936269e45 100644
--- a/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
@@ -20,7 +20,7 @@ export default function ParentDisclosureComponent({
               <div className="flex items-baseline gap-1 align-baseline">
                 <span className="parent-disclosure-title">{title}</span>
                 {title === "Experimental" && (
-                  <div className="h-fit rounded-full bg-beta-background px-2 py-1 text-xs/3 font-semibold text-beta-foreground">
+                  <div className="h-fit rounded-full bg-beta-background px-2 py-1 text-xs/3 font-semibold text-beta-foreground-soft">
                     BETA
                   </div>
                 )}
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 9a35b45aa..ba61e8fb8 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -46,6 +46,7 @@
 
     --beta-background: rgb(219 234 254);
     --beta-foreground: rgb(37 99 235);
+    --beta-foreground-soft: rgb(37 99 235 / 80%);
 
     --chat-bot-icon: #afe6ef;
     --chat-user-icon: #aface9;
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index 4b1df3063..2fd7cb24a 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -98,6 +98,7 @@ const config = {
         "success-foreground": "var(--success-foreground)",
         "beta-background": "var(--beta-background)",
         "beta-foreground": "var(--beta-foreground)",
+        "beta-foreground-soft": "var(--beta-foreground-soft)",
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",
         ice: "var(--ice)",