diff --git a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
index fdec58a34f..a4fec060f9 100644
--- a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
@@ -2,9 +2,8 @@ import { FC } from "react";
 // plane imports
 import { observer } from "mobx-react";
 import { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+import { getSubscriptionBackgroundColor, getDiscountPillStyle } from "@plane/ui";
 import { calculateYearlyDiscount, cn } from "@plane/utils";
-// plane web imports
-import { getDiscountPillStyle, getSubscriptionBackgroundColor } from "@/components/workspace/billing/subscription";
 
 type TPlanFrequencyToggleProps = {
   subscriptionType: EProductSubscriptionEnum;
diff --git a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
index 2eeb134d52..9067e124e0 100644
--- a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
@@ -10,12 +10,10 @@ import {
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
-import { getButtonStyling } from "@plane/ui";
+import { getButtonStyling, getUpgradeButtonStyle } from "@plane/ui";
 import { cn, getSubscriptionName } from "@plane/utils";
 // components
 import { DiscountInfo } from "@/components/license/modal/card/discount-info";
-// constants
-import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 import { TPlanDetail } from "@/constants/plans";
 // local imports
 import { captureSuccess } from "@/helpers/event-tracker.helper";
diff --git a/apps/web/ce/components/workspace/billing/root.tsx b/apps/web/ce/components/workspace/billing/root.tsx
index dd43284203..c089a4905f 100644
--- a/apps/web/ce/components/workspace/billing/root.tsx
+++ b/apps/web/ce/components/workspace/billing/root.tsx
@@ -4,10 +4,10 @@ import { observer } from "mobx-react";
 import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EProductSubscriptionEnum, TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { getSubscriptionTextColor } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { SettingsHeading } from "@/components/settings";
-import { getSubscriptionTextColor } from "@/components/workspace/billing/subscription";
 // local imports
 import { PlansComparison } from "./comparison/root";
 
diff --git a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
index ee9f93ed5b..746aea24ad 100644
--- a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
+++ b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
@@ -7,12 +7,8 @@ import { Tab } from "@headlessui/react";
 // plane imports
 // helpers
 import { EProductSubscriptionEnum, TBillingFrequency, TSubscriptionPrice } from "@plane/types";
+import { getSubscriptionBackgroundColor, getUpgradeCardVariantStyle } from "@plane/ui";
 import { cn, getBaseSubscriptionName, getSubscriptionName } from "@plane/utils";
-// components
-import {
-  getSubscriptionBackgroundColor,
-  getUpgradeCardVariantStyle,
-} from "@/components/workspace/billing/subscription";
 
 export type TBasePaidPlanCardProps = {
   planVariant: EProductSubscriptionEnum;
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
index 647d255180..6ab4d23a37 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -3,10 +3,8 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getButtonStyling, Loader } from "@plane/ui";
+import { getButtonStyling, getUpgradeButtonStyle, Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
-// components
-import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 // local imports
 import { DiscountInfo } from "./discount-info";
 
diff --git a/apps/web/core/components/license/modal/card/plan-upgrade.tsx b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
index 9fdd604566..6b88b7b493 100644
--- a/apps/web/core/components/license/modal/card/plan-upgrade.tsx
+++ b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
@@ -5,11 +5,10 @@ import { observer } from "mobx-react";
 // plane imports
 import { TALK_TO_SALES_URL } from "@plane/constants";
 import { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
+import { getDiscountPillStyle } from "@plane/ui";
 import { calculateYearlyDiscount, cn, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
 // components
 import { BasePaidPlanCard, TalkToSalesCard } from "@/components/license";
-// helpers
-import { getDiscountPillStyle } from "@/components/workspace/billing/subscription";
 // local components
 import { PlanCheckoutButton, TCheckoutParams } from "./checkout-button";
 
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
index 947682c608..41541562a2 100644
--- a/apps/web/core/components/license/modal/card/talk-to-sales.tsx
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -5,10 +5,8 @@ import { observer } from "mobx-react";
 // types
 // plane imports
 import { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getButtonStyling, Loader } from "@plane/ui";
+import { getButtonStyling, getUpgradeButtonStyle, Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
-// plane web imports
-import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
 
diff --git a/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
index a54b6b03a7..43d5a5da45 100644
--- a/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
@@ -2,9 +2,9 @@ import { FC } from "react";
 import { CheckCircle2, Minus, MinusCircle } from "lucide-react";
 import { EProductSubscriptionEnum } from "@plane/types";
 // plane imports
+import { getSubscriptionTextColor } from "@plane/ui";
 import { cn } from "@plane/utils";
 // constants
-import { getSubscriptionTextColor } from "@/components/workspace/billing/subscription";
 import { TPlanFeatureData } from "@/constants/plans";
 
 type TPlanFeatureDetailProps = {
diff --git a/packages/ui/src/billing/index.ts b/packages/ui/src/billing/index.ts
new file mode 100644
index 0000000000..75c2cf410a
--- /dev/null
+++ b/packages/ui/src/billing/index.ts
@@ -0,0 +1 @@
+export * from "./subscription";
diff --git a/apps/web/core/components/workspace/billing/subscription.ts b/packages/ui/src/billing/subscription.ts
similarity index 98%
rename from apps/web/core/components/workspace/billing/subscription.ts
rename to packages/ui/src/billing/subscription.ts
index 1853762a9d..98c03d337a 100644
--- a/apps/web/core/components/workspace/billing/subscription.ts
+++ b/packages/ui/src/billing/subscription.ts
@@ -2,10 +2,6 @@
 import { EProductSubscriptionEnum } from "@plane/types";
 import { cn } from "@plane/utils";
 
-// --------------- NOTE ----------------
-// This has to be in web application as tailwind won't be able to resolve the colors
-// ------------------------------------
-
 export const getSubscriptionTextColor = (
   planVariant: EProductSubscriptionEnum,
   shade: "200" | "400" = "200"
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index a21979fa13..365d63ed21 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -35,3 +35,4 @@ export * from "./toast";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./utils";
+export * from "./billing";