diff --git a/web/app/components/base/premium-badge/index.css b/web/app/components/base/premium-badge/index.css
index d92a2a2b2a..be8f9e6ae6 100644
--- a/web/app/components/base/premium-badge/index.css
+++ b/web/app/components/base/premium-badge/index.css
@@ -2,7 +2,7 @@
 
 @layer components {
   .premium-badge {
-    @apply inline-flex justify-center items-center rounded-full border border-white/95 text-white
+    @apply inline-flex justify-center items-center rounded-full border box-border border-[rgba(255,255,255,0.8)] text-white
   }
 
   /* m is for the regular button */
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 8d1eda8a78..c6befcc0d9 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -94,7 +94,11 @@ const Header = () => {
             <div className='select-none'>
               <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
                 <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
-                <div className='system-xs-medium !px-1'>Upgrade</div>
+                <div className='system-xs-medium'>
+                  <span className='p-1'>
+                    Upgrade
+                  </span>
+                </div>
               </PremiumBadge>
             </div>
           )}