diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index 8ec09ec1..d5c912f7 100644
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/ui-toolkit",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "A lightning nature UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/ui-toolkit/src/components/atoms/Pill/Pill.tsx b/packages/ui-toolkit/src/components/atoms/Pill/Pill.tsx
index d76becc5..025be2bc 100644
--- a/packages/ui-toolkit/src/components/atoms/Pill/Pill.tsx
+++ b/packages/ui-toolkit/src/components/atoms/Pill/Pill.tsx
@@ -30,15 +30,13 @@ const Pill = (props: Props) => {
     size: 20
   };
 
-  const baseClasses = cn('contentPrimary', 'absolute-center', 'cur-po', 'valign-wrapper', `pill12Size${size}`,
+  const baseClasses = cn('pill12Pill', 'absolute-center', 'cur-po', 'valign-wrapper', `pill12Size${size}`,
     {
-      borderPrimary: isOutlined && !isAccent && !isSelected,
-      pill12Pill: true,
+      'backgroundPrimary borderPrimary': isOutlined && !isAccent && !isSelected,
+      contentPrimary: !isAccent,
       pill12PillHover: !isSelected && !isAccent,
-      borderNeutral: isSelected && !isAccent,
-      borderAccent: isAccent,
-      pill12SelectedPill: !isAccent && isSelected,
-      contentAccent: isAccent,
+      'borderNeutral backgroundTertiary': isSelected && !isAccent,
+      'borderAccent contentAccent': isAccent,
       backgroundPositiveSubtle: isSelected && isAccent
     });