diff --git a/apps/web/ce/components/license/modal/upgrade-modal.tsx b/apps/web/ce/components/license/modal/upgrade-modal.tsx
index d3ee1b15c40..2fc439d690b 100644
--- a/apps/web/ce/components/license/modal/upgrade-modal.tsx
+++ b/apps/web/ce/components/license/modal/upgrade-modal.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import {
@@ -19,7 +18,7 @@ import type { TCheckoutParams } from "@/components/license/modal/card/checkout-b
 
 // Constants
 const COMMON_CARD_CLASSNAME = "flex flex-col w-full h-full justify-end col-span-12 sm:col-span-6 xl:col-span-3";
-const COMMON_EXTRA_FEATURES_CLASSNAME = "pt-2 text-center text-11 text-accent-secondary font-medium hover:underline";
+const COMMON_EXTRA_FEATURES_CLASSNAME = "pt-2 text-center text-caption-md-medium text-accent-primary hover:underline";
 
 export type PaidPlanUpgradeModalProps = {
   isOpen: boolean;
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
index b885709a848..bb7f9a3aee7 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
@@ -18,7 +18,7 @@ export function PageNavigationPaneOutlineTabEmptyState() {
       <div className="flex flex-col items-center gap-y-6 text-center">
         <img
           src={resolvedPath}
-          className="w-[160px] h-[160px] object-contain"
+          className="w-[160px] h-[160px]"
           alt="An image depicting the outline of a page"
         />
         <div className="space-y-2.5">
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 968eee51b62..50c5333982c 100644
--- a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
@@ -1,8 +1,6 @@
-import type { FC } from "react";
 // plane imports
 import { observer } from "mobx-react";
 import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
-import { getSubscriptionBackgroundColor, getDiscountPillStyle } from "@plane/ui";
 import { calculateYearlyDiscount, cn } from "@plane/utils";
 
 type TPlanFrequencyToggleProps = {
@@ -14,26 +12,21 @@ type TPlanFrequencyToggleProps = {
 };
 
 export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
-  const { subscriptionType, monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  const { monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
   // derived values
   const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
 
   return (
-    <div className="flex w-full items-center cursor-pointer py-1 animate-slide-up">
-      <div
-        className={cn(
-          "flex space-x-1 rounded-md bg-accent-primary/80/10 p-0.5 w-full",
-          getSubscriptionBackgroundColor(subscriptionType, "50")
-        )}
-      >
+    <div className="flex w-full items-center cursor-pointer py-1">
+      <div className="flex space-x-1 rounded-md bg-layer-3 p-0.5 w-full">
         <button
           type="button"
           onClick={() => setSelectedFrequency("month")}
           className={cn(
-            "w-full rounded-sm px-1 py-0.5 text-11 font-medium leading-5 text-center",
+            "w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
             selectedFrequency === "month"
-              ? "bg-layer-transparent-selected text-primary shadow"
-              : "hover:bg-layer-transparent-hover text-tertiary hover:text-secondary"
+              ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+              : "text-tertiary hover:text-secondary"
           )}
         >
           Monthly
@@ -42,15 +35,15 @@ export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props:
           type="button"
           onClick={() => setSelectedFrequency("year")}
           className={cn(
-            "w-full rounded-sm px-1 py-0.5 text-11 font-medium leading-5 text-center",
+            "w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
             selectedFrequency === "year"
-              ? "bg-layer-transparent-selected text-primary shadow"
-              : "hover:bg-layer-transparent-hover text-tertiary hover:text-secondary"
+              ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+              : "text-tertiary hover:text-secondary"
           )}
         >
           Yearly
           {yearlyDiscount > 0 && (
-            <span className={cn(getDiscountPillStyle(subscriptionType), "rounded-full px-1 py-0.5 ml-1 text-9")}>
+            <span className="bg-accent-primary text-on-color rounded-full px-1 py-0.5 ml-1.5 text-caption-xs-regular">
               -{yearlyDiscount}%
             </span>
           )}
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 d0acf2268c6..cdc170c4468 100644
--- a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
@@ -59,15 +59,17 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
     <div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
       {/* Plan name and pricing section */}
       <div className="flex flex-col items-start">
-        <div className="flex w-full gap-2 items-center text-18 font-medium">
-          <span className="transition-all duration-300">{subscriptionName}</span>
+        <div className="flex w-full gap-2 items-center text-h4-semibold">
+          <span>{subscriptionName}</span>
           {subscriptionType === EProductSubscriptionEnum.PRO && (
-            <span className="px-2 rounded-sm text-on-color bg-accent-primary text-11">Popular</span>
+            <span className="px-2 py-0.5 rounded-sm text-on-color bg-accent-primary text-caption-sm-medium">
+              Popular
+            </span>
           )}
         </div>
-        <div className="flex gap-x-2 items-start text-tertiary pb-1 transition-all duration-300 animate-slide-up">
+        <div className="flex gap-x-2 items-start text-tertiary pb-1">
           {isSubscriptionActive && displayPrice !== undefined && (
-            <div className="flex items-center gap-1 text-20 text-primary font-semibold transition-all duration-300">
+            <div className="flex items-center gap-1 text-h3-semibold text-primary">
               <DiscountInfo
                 currency="$"
                 frequency={billingFrequency ?? "month"}
@@ -78,9 +80,9 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
             </div>
           )}
           <div className="pt-1">
-            {pricingDescription && <div className="transition-all duration-300">{pricingDescription}</div>}
+            {pricingDescription && <div>{pricingDescription}</div>}
             {pricingSecondaryDescription && (
-              <div className="text-11 text-placeholder transition-all duration-300">{pricingSecondaryDescription}</div>
+              <div className="text-caption-xs text-placeholder">{pricingSecondaryDescription}</div>
             )}
           </div>
         </div>
@@ -100,12 +102,12 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
       )}
 
       {/* Subscription button */}
-      <div className="flex flex-col gap-1 py-3 items-start transition-all duration-300">
+      <div className="flex flex-col gap-1 py-3 items-start">
         <Button
           variant="primary"
           size="lg"
           onClick={handleRedirection}
-          className="animate-slide-up w-full"
+          className="w-full"
           data-ph-element={
             isSubscriptionActive
               ? WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_UPGRADE_BUTTON(subscriptionType)
diff --git a/apps/web/ce/components/workspace/billing/root.tsx b/apps/web/ce/components/workspace/billing/root.tsx
index 230e253c0d7..2753887d179 100644
--- a/apps/web/ce/components/workspace/billing/root.tsx
+++ b/apps/web/ce/components/workspace/billing/root.tsx
@@ -5,8 +5,6 @@ import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY
 import { useTranslation } from "@plane/i18n";
 import type { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
-import { getSubscriptionTextColor } from "@plane/ui";
-import { cn } from "@plane/utils";
 // components
 import { SettingsHeading } from "@/components/settings/heading";
 // local imports
@@ -44,24 +42,20 @@ export const BillingRoot = observer(function BillingRoot() {
         title={t("workspace_settings.settings.billing_and_plans.heading")}
         description={t("workspace_settings.settings.billing_and_plans.description")}
       />
-      <div className={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
+      <div>
         <div className="py-6">
-          <div className={cn("px-6 py-4 border border-subtle rounded-lg")}>
-            <div className="flex gap-2 font-medium items-center justify-between">
+          <div className="px-6 py-4 rounded-lg bg-layer-1">
+            <div className="flex gap-2 items-center justify-between">
               <div className="flex flex-col gap-1">
-                <h4
-                  className={cn("text-18 leading-6 font-bold", getSubscriptionTextColor(EProductSubscriptionEnum.FREE))}
-                >
-                  Community
-                </h4>
-                <div className="text-13 text-secondary font-medium">
+                <h4 className="text-h4-bold text-primary">Community</h4>
+                <div className="text-caption-md-medium text-secondary">
                   Unlimited projects, issues, cycles, modules, pages, and storage
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="text-18 font-semibold mt-3">All plans</div>
+        <div className="text-h4-semibold mt-3">All plans</div>
       </div>
       <PlansComparison
         isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
diff --git a/apps/web/ce/components/workspace/edition-badge.tsx b/apps/web/ce/components/workspace/edition-badge.tsx
index 570657e3776..ec7f98675fb 100644
--- a/apps/web/ce/components/workspace/edition-badge.tsx
+++ b/apps/web/ce/components/workspace/edition-badge.tsx
@@ -8,6 +8,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import packageJson from "package.json";
 // local components
 import { PaidPlanUpgradeModal } from "../license";
+import { Button } from "@plane/propel/button";
 
 export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
   // states
@@ -24,16 +25,15 @@ export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
         handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
       />
       <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
-        <button
-          type="button"
-          tabIndex={-1}
-          className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-13 font-medium outline-none bg-plans-neutral-subtle text-plans-neutral-primary"
+        <Button
+          variant="tertiary"
+          size="lg"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
           aria-haspopup="dialog"
           aria-label={t("aria_labels.projects_sidebar.edition_badge")}
         >
           Community
-        </button>
+        </Button>
       </Tooltip>
     </>
   );
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 8f529dacb92..092e2119a1f 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
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { CheckCircle } from "lucide-react";
@@ -6,7 +5,6 @@ import { Tab } from "@headlessui/react";
 // plane imports
 // helpers
 import type { EProductSubscriptionEnum, TBillingFrequency, TSubscriptionPrice } from "@plane/types";
-import { getSubscriptionBackgroundColor, getUpgradeCardVariantStyle } from "@plane/ui";
 import { cn, getBaseSubscriptionName, getSubscriptionName } from "@plane/utils";
 
 export type TBasePaidPlanCardProps = {
@@ -33,24 +31,23 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
   // states
   const [selectedPlan, setSelectedPlan] = useState<TBillingFrequency>("month");
   const basePlan = getBaseSubscriptionName(planVariant);
-  const upgradeCardVariantStyle = getUpgradeCardVariantStyle(planVariant);
   // Plane details
   const planeName = getSubscriptionName(planVariant);
 
   return (
-    <div className={cn("flex flex-col py-6 px-3", upgradeCardVariantStyle)}>
+    <div className="flex flex-col py-6 px-3 bg-layer-2 rounded-xl border border-subtle">
       <Tab.Group selectedIndex={selectedPlan === "month" ? 0 : 1}>
         <div className="flex w-full justify-center h-9">
-          <Tab.List
-            className={cn("flex space-x-1 rounded-md p-0.5 w-60", getSubscriptionBackgroundColor(planVariant, "50"))}
-          >
+          <Tab.List className="flex space-x-1 rounded-md p-0.5 w-60 bg-layer-3">
             {prices.map((price: TSubscriptionPrice) => (
               <Tab
                 key={price.key}
                 className={({ selected }) =>
                   cn(
-                    "w-full rounded-sm py-1 text-13 font-medium leading-5",
-                    selected ? "bg-surface-1 text-primary shadow" : "text-tertiary hover:text-secondary"
+                    "w-full rounded-sm py-1 text-caption-md-medium leading-5",
+                    selected
+                      ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+                      : "text-tertiary hover:text-secondary"
                   )
                 }
                 onClick={() => setSelectedPlan(price.recurring)}
@@ -64,11 +61,11 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
           {prices.map((price: TSubscriptionPrice) => (
             <Tab.Panel key={price.key}>
               <div className="pt-6 text-center">
-                <div className="text-18 font-medium">Plane {planeName}</div>
+                <div className="text-h4-medium">Plane {planeName}</div>
                 {renderActionButton(price)}
               </div>
               <div className="px-2 pt-6 pb-2">
-                <div className="p-2 text-13 font-semibold">{`Everything in ${basePlan} +`}</div>
+                <div className="p-2 text-caption-md-semibold">{`Everything in ${basePlan} +`}</div>
                 <ul className="grid grid-cols-12 gap-x-4">
                   {features.map((feature) => (
                     <li
@@ -77,8 +74,8 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
                         "sm:col-span-6": !verticalFeatureList,
                       })}
                     >
-                      <p className="w-full text-13 font-medium leading-5 flex items-center line-clamp-1">
-                        <CheckCircle className="h-4 w-4 mr-2 text-tertiary flex-shrink-0" />
+                      <p className="w-full text-caption-md-medium leading-5 flex items-center line-clamp-1">
+                        <CheckCircle className="size-4 mr-2 text-tertiary flex-shrink-0" />
                         <span className="text-secondary truncate">{feature}</span>
                       </p>
                     </li>
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 977d7339d80..b08af00acd2 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -43,34 +43,30 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
 
   return (
     <>
-      <div className="pb-4 text-center transition-all duration-700 animate-slide-up">
-        <div className="text-20 font-semibold h-9 transition-all duration-300">
+      <div className="pb-4 text-center">
+        <div className="text-20 font-semibold h-9">
           {isLoading ? (
             <Loader className="flex flex-col items-center justify-center">
               <Loader.Item height="36px" width="4rem" />
             </Loader>
           ) : (
-            <span className="animate-fade-in">
-              <DiscountInfo
-                currency={price.currency}
-                frequency={price.recurring}
-                price={price.price}
-                subscriptionType={planVariant}
-                className="mr-1.5"
-              />
-            </span>
+            <DiscountInfo
+              currency={price.currency}
+              frequency={price.recurring}
+              price={price.price}
+              subscriptionType={planVariant}
+              className="mr-1.5"
+            />
           )}
         </div>
-        <div className="text-13 font-medium text-tertiary transition-all duration-300 animate-fade-in">
-          per user per month
-        </div>
+        <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
         <Loader className="flex flex-col items-center justify-center">
           <Loader.Item height="38px" width="14rem" />
         </Loader>
       ) : (
-        <div className="flex flex-col items-center justify-center w-full space-y-4 transition-all duration-300 animate-fade-in">
+        <div className="flex flex-col items-center justify-center w-full space-y-4">
           <Button
             variant="primary"
             size="lg"
@@ -89,7 +85,7 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
             {upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)}
           </Button>
           {isTrialAllowed && !isSelfHosted && (
-            <div className="mt-4 h-4 transition-all duration-300 animate-fade-in">
+            <div className="mt-4 h-4">
               {renderTrialButton &&
                 renderTrialButton({
                   productId: product?.id,
diff --git a/apps/web/core/components/license/modal/card/free-plan.tsx b/apps/web/core/components/license/modal/card/free-plan.tsx
index 0e4f7e29dbc..005c4df56a0 100644
--- a/apps/web/core/components/license/modal/card/free-plan.tsx
+++ b/apps/web/core/components/license/modal/card/free-plan.tsx
@@ -12,22 +12,24 @@ type FreePlanCardProps = {
 export const FreePlanCard = observer(function FreePlanCard(props: FreePlanCardProps) {
   const { isOnFreePlan } = props;
   return (
-    <div className="py-4 px-2 border border-subtle rounded-xl">
+    <div className="py-4 px-2 rounded-xl bg-layer-1">
       {isOnFreePlan && (
         <div className="py-2 px-3">
-          <span className="px-2 py-1 bg-surface-2 text-13 text-tertiary font-medium rounded-sm">Your plan</span>
+          <span className="px-2 py-1 bg-layer-2 text-caption-md-medium text-tertiary rounded-sm border border-subtle-1">
+            Your plan
+          </span>
         </div>
       )}
       <div className="px-4 py-2 font-semibold">
         <div className="text-20">Free</div>
-        <div className="text-13 text-tertiary">$0 per user per month</div>
+        <div className="text-caption-md text-tertiary">$0 per user per month</div>
       </div>
       <div className="px-2 pt-2 pb-3">
         <ul className="w-full grid grid-cols-12 gap-x-4">
           {FREE_PLAN_UPGRADE_FEATURES.map((feature) => (
             <li key={feature} className={cn("col-span-12 relative rounded-md p-2 flex")}>
-              <p className="w-full text-13 font-medium leading-5 flex items-center">
-                <CircleX className="h-4 w-4 mr-2 text-red-500 flex-shrink-0" />
+              <p className="w-full text-caption-md-medium leading-5 flex items-center">
+                <CircleX className="size-4 mr-2 text-danger-secondary flex-shrink-0" />
                 <span className="text-secondary truncate">{feature}</span>
               </p>
             </li>
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 d62c9a706df..218e19d23f9 100644
--- a/apps/web/core/components/license/modal/card/plan-upgrade.tsx
+++ b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
@@ -2,8 +2,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { TALK_TO_SALES_URL } from "@plane/constants";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getDiscountPillStyle } from "@plane/ui";
-import { calculateYearlyDiscount, cn, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
+import { calculateYearlyDiscount, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
 // components
 import { BasePaidPlanCard, TalkToSalesCard } from "@/components/license";
 // local components
@@ -72,7 +71,7 @@ export const PlanUpgradeCard = observer(function PlanUpgradeCard(props: PlanUpgr
         <>
           Yearly
           {yearlyDiscount > 0 && (
-            <span className={cn(getDiscountPillStyle(planVariant), "rounded-full px-1.5 py-0.5 ml-1 text-11")}>
+            <span className="bg-accent-primary text-on-color rounded-full px-1.5 py-0.5 ml-1 text-caption-sm">
               -{yearlyDiscount}%
             </span>
           )}
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 764b213dc51..45b85ca8a51 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
@@ -58,7 +58,7 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
             <>Quote on request</>
           )}
         </div>
-        <div className="text-13 font-medium text-tertiary">per user per month</div>
+        <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
         <Loader className="flex flex-col items-center justify-center">
@@ -70,7 +70,7 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
             Talk to Sales
           </a>
           {isTrialAllowed && !isSelfHosted && (
-            <div className="mt-4 h-4 transition-all duration-300 animate-fade-in">
+            <div className="mt-4 h-4">
               {renderTrialButton &&
                 renderTrialButton({
                   productId: product?.id,
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index 6a09a06ed69..4ab5576a56f 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -35,35 +35,31 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
   const getSubscriptionType = (planKey: TPlanePlans) => planDetails[planKey].id;
 
   return (
-    <div
-      className={`size-full px-2 overflow-x-auto horizontal-scrollbar scrollbar-sm transition-all duration-500 ease-out will-change-transform`}
-    >
+    <div className="size-full px-2 overflow-x-auto horizontal-scrollbar scrollbar-sm">
       <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
         <div className="h-full flex flex-col gap-y-10">
           <div
-            className={cn(
-              "flex-shrink-0 sticky top-2 z-10 bg-layer-1 grid gap-3 text-13 font-medium even:bg-layer-2 transition-all duration-500 ease-out will-change-transform"
-            )}
+            className={cn("flex-shrink-0 sticky top-2 z-10 bg-layer-1 grid gap-3 text-caption-md-medium")}
             style={{
               gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))`,
             }}
           >
-            <div className="col-span-1 p-3 space-y-0.5 text-14 font-medium" />
+            <div className="col-span-1 p-3 space-y-0.5 text-body-sm-medium" />
             {planeDetails}
           </div>
           {/* Plan Headers */}
           <section className="flex-shrink-0">
             {/* Plan Highlights */}
             <div
-              className="grid gap-3 py-1 text-13 text-secondary even:bg-surface-2 rounded-xs"
+              className="grid gap-3 py-1 text-caption-md text-secondary even:bg-surface-2 rounded-xs"
               style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
             >
-              <div className="col-span-1 p-3 text-14 font-medium">Highlights</div>
+              <div className="col-span-1 p-3 text-body-sm-medium">Highlights</div>
               {Object.entries(planHighlights).map(
                 ([planKey, highlights]) =>
                   shouldRenderPlanDetail(planKey as TPlanePlans) && (
                     <div key={planKey} className="col-span-1 p-3">
-                      <ul className="list-disc space-y-1">
+                      <ul className="list-disc space-y-1 text-body-xs-regular">
                         {highlights.map((highlight, index) => (
                           <li key={index}>{highlight}</li>
                         ))}
@@ -79,17 +75,17 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
             <>
               {planComparison.map((section, sectionIdx) => (
                 <section key={sectionIdx} className="flex-shrink-0">
-                  <h2 className="flex gap-2 items-start text-16 font-semibold text-tertiary mb-2 pl-2">
+                  <h2 className="flex gap-2 items-start text-h5-semibold text-secondary mb-2 pl-2">
                     {section.title} {section.comingSoon && <ComingSoonBadge />}
                   </h2>
                   <div className="border-t border-subtle">
                     {section.features.map((feature, featureIdx) => (
                       <div
                         key={featureIdx}
-                        className="grid gap-3 text-13 text-secondary even:bg-layer-2 rounded-xs"
+                        className="grid gap-3 text-caption-md text-secondary bg-layer-transparent even:bg-layer-1 rounded-xs"
                         style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
                       >
-                        <div className="col-span-1 p-3 flex items-center text-14 font-medium">
+                        <div className="col-span-1 p-3 flex items-center text-body-sm-medium">
                           <div className="w-full flex gap-2 items-start justify-between">
                             {feature.title} {feature.comingSoon && <ComingSoonBadge />}
                           </div>
@@ -99,7 +95,7 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
                             shouldRenderPlanDetail(planKey) && (
                               <div
                                 key={planKey}
-                                className="col-span-1 p-3 flex items-center justify-center text-center"
+                                className="col-span-1 p-3 flex items-center justify-center text-center text-body-xs-regular"
                               >
                                 <PlanFeatureDetail
                                   subscriptionType={getSubscriptionType(planKey)}
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 28a9b12fad9..0d5ba24a80b 100644
--- a/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
@@ -1,7 +1,6 @@
 import { CheckCircle2, Minus, MinusCircle } from "lucide-react";
 import type { EProductSubscriptionEnum } from "@plane/types";
 // plane imports
-import { getSubscriptionTextColor } from "@plane/ui";
 import { cn } from "@plane/utils";
 // constants
 import type { TPlanFeatureData } from "@/constants/plans";
@@ -18,7 +17,7 @@ export function PlanFeatureDetail(props: TPlanFeatureDetailProps) {
     return <Minus className="size-4 text-placeholder" />;
   }
   if (data === true) {
-    return <CheckCircle2 className={cn(getSubscriptionTextColor(subscriptionType), "size-4")} />;
+    return <CheckCircle2 className="size-4 text-accent-primary" />;
   }
   if (data === false) {
     return <MinusCircle className="size-4 text-placeholder" />;
diff --git a/apps/web/core/constants/plans.tsx b/apps/web/core/constants/plans.tsx
index 5140ab1a03e..c664132b444 100644
--- a/apps/web/core/constants/plans.tsx
+++ b/apps/web/core/constants/plans.tsx
@@ -53,7 +53,7 @@ export function ComingSoonBadge({ className }: { className?: string }) {
   return (
     <span
       className={cn(
-        "bg-[#3f76ff] text-on-color font-semibold text-9 py-0.5 px-1.5 w-fit whitespace-nowrap rounded-sm",
+        "bg-accent-primary text-on-color font-semibold text-9 py-0.5 px-1.5 w-fit whitespace-nowrap rounded-sm",
         className
       )}
     >
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index 95edf9e21be..62c38e114b3 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -24,7 +24,7 @@ export const buttonVariants = cva(
         secondary:
           "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
         tertiary:
-          "bg-layer-1 hover:bg-layer-1-hover active:bg-layer-1-active focus:bg-layer-1-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         ghost:
           "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
index b12cd5dabee..7a97fa462fa 100644
--- a/packages/propel/src/icon-button/helper.tsx
+++ b/packages/propel/src/icon-button/helper.tsx
@@ -16,7 +16,7 @@ export const iconButtonVariants = cva(
         secondary:
           "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
         tertiary:
-          "bg-layer-1 hover:bg-layer-1-hover active:bg-layer-1-active focus:bg-layer-1-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         ghost:
           "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
       },
diff --git a/packages/ui/src/billing/index.ts b/packages/ui/src/billing/index.ts
deleted file mode 100644
index 75c2cf410a8..00000000000
--- a/packages/ui/src/billing/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./subscription";
diff --git a/packages/ui/src/billing/subscription.ts b/packages/ui/src/billing/subscription.ts
deleted file mode 100644
index be8e20dc03e..00000000000
--- a/packages/ui/src/billing/subscription.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-// plane imports
-import { EProductSubscriptionEnum } from "@plane/types";
-import { cn } from "@plane/utils";
-
-export const getSubscriptionTextColor = (
-  planVariant: EProductSubscriptionEnum,
-  shade: "200" | "400" = "200"
-): string => {
-  const subscriptionColors = {
-    [EProductSubscriptionEnum.ONE]: {
-      "200": "text-custom-subscription-one-200",
-      "400": "text-custom-subscription-one-400",
-    },
-    [EProductSubscriptionEnum.PRO]: {
-      "200": "text-custom-subscription-pro-200",
-      "400": "text-custom-subscription-pro-400",
-    },
-    [EProductSubscriptionEnum.BUSINESS]: {
-      "200": "text-custom-subscription-business-200",
-      "400": "text-custom-subscription-business-400",
-    },
-    [EProductSubscriptionEnum.ENTERPRISE]: {
-      "200": "text-custom-subscription-enterprise-200",
-      "400": "text-custom-subscription-enterprise-400",
-    },
-    [EProductSubscriptionEnum.FREE]: {
-      "200": "text-custom-subscription-free-200",
-      "400": "text-custom-subscription-free-400",
-    },
-  };
-
-  return subscriptionColors[planVariant]?.[shade] ?? subscriptionColors[EProductSubscriptionEnum.FREE][shade];
-};
-
-export const getSubscriptionBackgroundColor = (
-  planVariant: EProductSubscriptionEnum,
-  shade: "50" | "100" | "200" | "400" = "100"
-): string => {
-  const subscriptionColors = {
-    [EProductSubscriptionEnum.ONE]: {
-      "50": "bg-custom-subscription-one-200/10",
-      "100": "bg-custom-subscription-one-200/20",
-      "200": "bg-custom-subscription-one-200",
-      "400": "bg-custom-subscription-one-400",
-    },
-    [EProductSubscriptionEnum.PRO]: {
-      "50": "bg-custom-subscription-pro-200/10",
-      "100": "bg-custom-subscription-pro-200/20",
-      "200": "bg-custom-subscription-pro-200",
-      "400": "bg-custom-subscription-pro-400",
-    },
-    [EProductSubscriptionEnum.BUSINESS]: {
-      "50": "bg-custom-subscription-business-200/10",
-      "100": "bg-custom-subscription-business-200/20",
-      "200": "bg-custom-subscription-business-200",
-      "400": "bg-custom-subscription-business-400",
-    },
-    [EProductSubscriptionEnum.ENTERPRISE]: {
-      "50": "bg-custom-subscription-enterprise-200/10",
-      "100": "bg-custom-subscription-enterprise-200/20",
-      "200": "bg-custom-subscription-enterprise-200",
-      "400": "bg-custom-subscription-enterprise-400",
-    },
-    [EProductSubscriptionEnum.FREE]: {
-      "50": "bg-custom-subscription-free-200/10",
-      "100": "bg-custom-subscription-free-200/20",
-      "200": "bg-custom-subscription-free-200",
-      "400": "bg-custom-subscription-free-400",
-    },
-  };
-
-  return subscriptionColors[planVariant]?.[shade] ?? subscriptionColors[EProductSubscriptionEnum.FREE][shade];
-};
-
-export const getSubscriptionBorderColor = (
-  planVariant: EProductSubscriptionEnum,
-  shade: "200" | "400" = "200"
-): string => {
-  const subscriptionColors = {
-    [EProductSubscriptionEnum.ONE]: {
-      "200": "border-custom-subscription-one-200",
-      "400": "border-custom-subscription-one-400",
-    },
-    [EProductSubscriptionEnum.PRO]: {
-      "200": "border-custom-subscription-pro-200",
-      "400": "border-custom-subscription-pro-400",
-    },
-    [EProductSubscriptionEnum.BUSINESS]: {
-      "200": "border-custom-subscription-business-200",
-      "400": "border-custom-subscription-business-400",
-    },
-    [EProductSubscriptionEnum.ENTERPRISE]: {
-      "200": "border-custom-subscription-enterprise-200",
-      "400": "border-custom-subscription-enterprise-400",
-    },
-    [EProductSubscriptionEnum.FREE]: {
-      "200": "border-custom-subscription-free-200",
-      "400": "border-custom-subscription-free-400",
-    },
-    default: "border-custom-subscription-free-400",
-  };
-
-  return subscriptionColors[planVariant]?.[shade] ?? subscriptionColors.default;
-};
-
-export const getUpgradeCardVariantStyle = (planVariant: EProductSubscriptionEnum): string | undefined => {
-  const COMMON_CLASSNAME = cn("bg-gradient-to-b from-0% to-40% border border-subtle-1 rounded-xl");
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn("from-custom-subscription-enterprise-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn("from-custom-subscription-business-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.PRO:
-      return cn("from-custom-subscription-pro-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.ONE:
-      return cn("from-custom-subscription-one-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn("from-custom-subscription-free-200/[0.14] to-transparent", COMMON_CLASSNAME);
-  }
-};
-
-export const getSuccessModalVariantStyle = (planVariant: EProductSubscriptionEnum) => {
-  const COMMON_CLASSNAME = cn("bg-gradient-to-b from-0% to-30% rounded-2xl");
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn("from-custom-subscription-enterprise-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn("from-custom-subscription-business-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.PRO:
-      return cn("from-custom-subscription-pro-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.ONE:
-      return cn("from-custom-subscription-one-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn("from-custom-subscription-free-200/[0.14] to-transparent", COMMON_CLASSNAME);
-  }
-};
-
-export const getBillingAndPlansCardVariantStyle = (planVariant: EProductSubscriptionEnum) => {
-  const COMMON_CLASSNAME = cn("bg-gradient-to-b from-0% to-50%");
-
-  switch (planVariant) {
-    case EProductSubscriptionEnum.ENTERPRISE:
-      return cn("from-custom-subscription-enterprise-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.BUSINESS:
-      return cn("from-custom-subscription-business-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.PRO:
-      return cn("from-custom-subscription-pro-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.ONE:
-      return cn("from-custom-subscription-one-200/[0.14] to-transparent", COMMON_CLASSNAME);
-    case EProductSubscriptionEnum.FREE:
-    default:
-      return cn("from-custom-subscription-free-200/[0.14] to-transparent", COMMON_CLASSNAME);
-  }
-};
-
-export const getSubscriptionTextAndBackgroundColor = (planVariant: EProductSubscriptionEnum) =>
-  cn(getSubscriptionTextColor(planVariant), getSubscriptionBackgroundColor(planVariant));
-
-export const getDiscountPillStyle = (planVariant: EProductSubscriptionEnum): string =>
-  cn(getSubscriptionBackgroundColor(planVariant, "200"), "text-on-color");
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 36aeaa97678..5792b26d42c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -30,5 +30,4 @@ export * from "./tag";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./utils";
-export * from "./billing";
 export * from "./oauth";