diff --git a/web/app/components/base/premium-badge/index.css b/web/app/components/base/premium-badge/index.css
index b160ba7e2c..61031cd4d2 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 shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden;
+    @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-all duration-100 ease-out;
     background-clip: padding-box, border-box;
   }
   .allowHover {