diff --git a/apps/dashboard/next.config.ts b/apps/dashboard/next.config.ts
index 78531427e9d..58a70941593 100644
--- a/apps/dashboard/next.config.ts
+++ b/apps/dashboard/next.config.ts
@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 };
 
 const baseNextConfig: NextConfig = {
+  serverExternalPackages: ["pino-pretty"],
   async headers() {
     return [
       {
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 61b82ff70a3..2b22c8f197f 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -48,8 +48,6 @@
     "@radix-ui/react-tooltip": "1.1.4",
     "@sentry/nextjs": "8.38.0",
     "@shazow/whatsabi": "^0.16.0",
-    "@stripe/react-stripe-js": "^2.8.1",
-    "@stripe/stripe-js": "^3.5.0",
     "@tanstack/react-query": "5.60.2",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/service-utils": "workspace:*",
diff --git a/apps/dashboard/src/@/actions/billing.ts b/apps/dashboard/src/@/actions/billing.ts
new file mode 100644
index 00000000000..a3dc991138c
--- /dev/null
+++ b/apps/dashboard/src/@/actions/billing.ts
@@ -0,0 +1,117 @@
+"use server";
+
+import "server-only";
+import { API_SERVER_URL, getAbsoluteUrlFromPath } from "@/constants/env";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import type { ProductSKU } from "../lib/billing";
+
+export type RedirectCheckoutOptions = {
+  teamSlug: string;
+  sku: ProductSKU;
+  redirectPath?: string;
+  metadata?: Record<string, string>;
+};
+export async function redirectToCheckout(
+  options: RedirectCheckoutOptions,
+): Promise<{ status: number }> {
+  if (!options.teamSlug) {
+    return {
+      status: 400,
+    };
+  }
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      status: 401,
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${options.teamSlug}/checkout/create-link`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        sku: options.sku,
+        redirectTo: getAbsoluteUrlFromPath(
+          options.redirectPath ||
+            `/team/${options.teamSlug}/~/settings/billing`,
+        ).toString(),
+        metadata: options.metadata || {},
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (!res.ok) {
+    return {
+      status: res.status,
+    };
+  }
+  const json = await res.json();
+  if (!json.result) {
+    return {
+      status: 500,
+    };
+  }
+
+  // redirect to the stripe checkout session
+  redirect(json.result);
+}
+
+export type BillingPortalOptions = {
+  teamSlug: string | undefined;
+  redirectPath?: string;
+};
+export async function redirectToBillingPortal(
+  options: BillingPortalOptions,
+): Promise<{ status: number }> {
+  if (!options.teamSlug) {
+    return {
+      status: 400,
+    };
+  }
+  const token = await getAuthToken();
+  if (!token) {
+    return {
+      status: 401,
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${options.teamSlug}/checkout/create-session-link`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        redirectTo: getAbsoluteUrlFromPath(
+          options.redirectPath ||
+            `/team/${options.teamSlug}/~/settings/billing`,
+        ).toString(),
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    return {
+      status: res.status,
+    };
+  }
+
+  const json = await res.json();
+
+  if (!json.result) {
+    return {
+      status: 500,
+    };
+  }
+
+  // redirect to the stripe billing portal
+  redirect(json.result);
+}
diff --git a/apps/dashboard/src/@/api/team-subscription.ts b/apps/dashboard/src/@/api/team-subscription.ts
new file mode 100644
index 00000000000..b5d91133a86
--- /dev/null
+++ b/apps/dashboard/src/@/api/team-subscription.ts
@@ -0,0 +1,62 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+import type { ProductSKU } from "../lib/billing";
+
+type InvoiceLine = {
+  // amount for this line item
+  amount: number;
+  // statement descriptor
+  description: string | null;
+  // the thirdweb product sku or null if it is not recognized
+  thirdwebSku: ProductSKU | null;
+};
+
+type Invoice = {
+  // total amount excluding tax
+  amount: number | null;
+  // the ISO currency code (e.g. USD)
+  currency: string;
+  // the line items on the invoice
+  lines: InvoiceLine[];
+};
+
+export type TeamSubscription = {
+  id: string;
+  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT";
+  status:
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | "paused";
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  trialStart: string | null;
+  trialEnd: string | null;
+  upcomingInvoice: Invoice;
+};
+
+export async function getTeamSubscriptions(slug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(
+    `${API_SERVER_URL}/v1/teams/${slug}/subscriptions`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as TeamSubscription[];
+  }
+  return null;
+}
diff --git a/apps/dashboard/src/@/api/team.ts b/apps/dashboard/src/@/api/team.ts
index e60af9f4615..b91fabbbd74 100644
--- a/apps/dashboard/src/@/api/team.ts
+++ b/apps/dashboard/src/@/api/team.ts
@@ -13,9 +13,10 @@ export type Team = {
   deletedAt?: string;
   bannedAt?: string;
   image?: string;
-  billingPlan: "pro" | "growth" | "free";
+  billingPlan: "pro" | "growth" | "free" | "starter";
   billingStatus: "validPayment" | (string & {}) | null;
   billingEmail: string | null;
+  growthTrialEligible: boolean | null;
 };
 
 export async function getTeamBySlug(slug: string) {
diff --git a/apps/dashboard/src/@/components/billing.tsx b/apps/dashboard/src/@/components/billing.tsx
new file mode 100644
index 00000000000..5f2485ea978
--- /dev/null
+++ b/apps/dashboard/src/@/components/billing.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  type BillingPortalOptions,
+  type RedirectCheckoutOptions,
+  redirectToBillingPortal,
+  redirectToCheckout,
+} from "../actions/billing";
+import { Button, type ButtonProps } from "./ui/button";
+
+type CheckoutButtonProps = RedirectCheckoutOptions & ButtonProps;
+export function CheckoutButton({
+  onClick,
+  teamSlug,
+  sku,
+  metadata,
+  redirectPath,
+  children,
+  ...restProps
+}: CheckoutButtonProps) {
+  return (
+    <Button
+      {...restProps}
+      onClick={async (e) => {
+        onClick?.(e);
+        await redirectToCheckout({
+          teamSlug,
+          sku,
+          metadata,
+          redirectPath,
+        });
+      }}
+    >
+      {children}
+    </Button>
+  );
+}
+
+type BillingPortalButtonProps = BillingPortalOptions & ButtonProps;
+export function BillingPortalButton({
+  onClick,
+  teamSlug,
+  redirectPath,
+  children,
+  ...restProps
+}: BillingPortalButtonProps) {
+  return (
+    <Button
+      {...restProps}
+      onClick={async (e) => {
+        onClick?.(e);
+        await redirectToBillingPortal({
+          teamSlug,
+          redirectPath,
+        });
+      }}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/@/constants/env.ts b/apps/dashboard/src/@/constants/env.ts
index a174c2dc2b1..faf219c8263 100644
--- a/apps/dashboard/src/@/constants/env.ts
+++ b/apps/dashboard/src/@/constants/env.ts
@@ -33,3 +33,16 @@ export const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
 export const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
 // Comma-separated list of chain IDs to disable faucet for.
 export const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;
+
+export function getAbsoluteUrlFromPath(path: string) {
+  const url = new URL(
+    isProd
+      ? "https://thirdweb.com"
+      : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
+          ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
+          : "http://localhost:3000") || "https://thirdweb-dev.com",
+  );
+
+  url.pathname = path;
+  return url;
+}
diff --git a/apps/dashboard/src/@/lib/billing.ts b/apps/dashboard/src/@/lib/billing.ts
new file mode 100644
index 00000000000..58dfeffcf13
--- /dev/null
+++ b/apps/dashboard/src/@/lib/billing.ts
@@ -0,0 +1,13 @@
+// keep in line with product SKUs in the backend
+export type ProductSKU =
+  | "plan:starter"
+  | "plan:growth"
+  | "plan:custom"
+  | "product:ecosystem_wallets"
+  | "product:engine_standard"
+  | "product:engine_premium"
+  | "usage:storage"
+  | "usage:in_app_wallet"
+  | "usage:aa_sponsorship"
+  | "usage:aa_sponsorship_op_grant"
+  | null;
diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts
index 26317e53c94..f3b5f976741 100644
--- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts
+++ b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts
@@ -30,7 +30,7 @@ export const accountPlan = {
 } as const;
 
 type AccountStatus = (typeof accountStatus)[keyof typeof accountStatus];
-export type AccountPlan = (typeof accountPlan)[keyof typeof accountPlan];
+type AccountPlan = (typeof accountPlan)[keyof typeof accountPlan];
 
 export type AuthorizedWallet = {
   id: string;
@@ -288,30 +288,6 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {
   });
 }
 
-export function useAccountUsage() {
-  const { user, isLoggedIn } = useLoggedInUser();
-
-  return useQuery({
-    queryKey: accountKeys.usage(user?.address as string),
-    queryFn: async () => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/usage`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data as UsageBillableByService;
-    },
-    enabled: !!user?.address && isLoggedIn,
-  });
-}
-
 export function useAccountCredits() {
   const { user, isLoggedIn } = useLoggedInUser();
 
@@ -498,51 +474,6 @@ export function useUpdateAccount() {
   });
 }
 
-export function useUpdateAccountPlan(waitForWebhook?: boolean) {
-  const { user } = useLoggedInUser();
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (input: { plan: string; feedback?: string }) => {
-      invariant(user?.address, "walletAddress is required");
-
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/plan`, {
-        method: "PUT",
-
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
-
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      // Wait for account plan to update via stripe webhook
-      // TODO: find a better way to notify the client that the plan has been updated
-      if (waitForWebhook) {
-        await new Promise((resolve) => setTimeout(resolve, 1000 * 10));
-      }
-
-      return json.data;
-    },
-    onSuccess: async () => {
-      return Promise.all([
-        // invalidate usage data as limits are different
-        queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        }),
-        queryClient.invalidateQueries({
-          queryKey: accountKeys.usage(user?.address as string),
-        }),
-      ]);
-    },
-  });
-}
-
 export function useUpdateNotifications() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
@@ -575,36 +506,6 @@ export function useUpdateNotifications() {
   });
 }
 
-export function useCreateBillingSession(enabled = false) {
-  const { user } = useLoggedInUser();
-
-  return useQuery({
-    queryKey: accountKeys.billingSession(user?.address as string),
-    queryFn: async () => {
-      invariant(user?.address, "walletAddress is required");
-
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/account/billingSession`,
-        {
-          method: "GET",
-
-          headers: {
-            "Content-Type": "application/json",
-          },
-        },
-      );
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
-    },
-    enabled,
-  });
-}
-
 export function useConfirmEmail() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
@@ -681,40 +582,6 @@ export function useResendEmailConfirmation() {
   });
 }
 
-export function useCreatePaymentMethod() {
-  const { user } = useLoggedInUser();
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (paymentMethodId: string) => {
-      invariant(user?.address, "walletAddress is required");
-
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/paymentMethod`, {
-        method: "POST",
-
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          paymentMethodId,
-        }),
-      });
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
-    },
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(user?.address as string),
-      });
-    },
-  });
-}
-
 export function useApiKeys() {
   const { user, isLoggedIn } = useLoggedInUser();
   return useQuery({
diff --git a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
index 32c9cff669c..d7d137e31d1 100644
--- a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
@@ -1,6 +1,5 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { ClientOnly } from "components/ClientOnly/ClientOnly";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { Suspense } from "react";
 import { DeployedContractsPageHeader } from "../DeployedContractsPageHeader";
 import { DeployedContractsTable } from "./DeployedContractsTable";
@@ -13,7 +12,6 @@ export function DeployedContractsPage(props: {
 }) {
   return (
     <div className={props.className}>
-      <BillingAlerts className="mb-10" />
       <DeployedContractsPageHeader />
       <div className="h-6" />
       <Suspense fallback={<Loading />}>
diff --git a/apps/dashboard/src/app/account/devices/page.tsx b/apps/dashboard/src/app/account/devices/page.tsx
index 9f368180eaf..225df43a100 100644
--- a/apps/dashboard/src/app/account/devices/page.tsx
+++ b/apps/dashboard/src/app/account/devices/page.tsx
@@ -2,7 +2,6 @@
 
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { useAuthorizedWallets } from "@3rdweb-sdk/react/hooks/useApi";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { AuthorizedWalletsTable } from "components/settings/AuthorizedWallets/AuthorizedWalletsTable";
 
 // TODO - remove ChakraProviderSetup after migrating AuthorizedWalletsTable
@@ -13,7 +12,6 @@ export default function Page() {
 
   return (
     <div className="container py-8">
-      <BillingAlerts className="mb-10" />
       <div className="flex flex-col gap-8">
         <div className="flex flex-col gap-2">
           <div className="flex flex-col justify-between gap-4">
diff --git a/apps/dashboard/src/app/account/page.tsx b/apps/dashboard/src/app/account/page.tsx
index 45859311b43..f1ae3ab1b00 100644
--- a/apps/dashboard/src/app/account/page.tsx
+++ b/apps/dashboard/src/app/account/page.tsx
@@ -1,7 +1,6 @@
 import { getTeams } from "@/api/team";
 import { getMembers } from "@/api/team-members";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { redirect } from "next/navigation";
 import { AccountTeamsUI } from "./overview/AccountTeamsUI";
 import { getAccount } from "./settings/getAccount";
@@ -40,7 +39,6 @@ export default async function Page() {
 
   return (
     <div className="container grow py-8">
-      <BillingAlerts className="mb-10" />
       <AccountTeamsUI
         teamsWithRole={teamsWithRole}
         client={getThirdwebClient()}
diff --git a/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx b/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx
index 4d588cecd4a..e0f5b66463b 100644
--- a/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx
+++ b/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import type { ThirdwebClient } from "thirdweb";
 import { upload } from "thirdweb/storage";
 import { AccountSettingsPageUI } from "./AccountSettingsPageUI";
@@ -12,7 +11,6 @@ export function AccountSettingsPage(props: {
 }) {
   return (
     <div>
-      <BillingAlerts className="mb-10" />
       <AccountSettingsPageUI
         account={props.account}
         updateAccountImage={async (file) => {
diff --git a/apps/dashboard/src/app/account/settings/getAccount.ts b/apps/dashboard/src/app/account/settings/getAccount.ts
index 6eb240dca23..1e997495db4 100644
--- a/apps/dashboard/src/app/account/settings/getAccount.ts
+++ b/apps/dashboard/src/app/account/settings/getAccount.ts
@@ -4,11 +4,8 @@ import { getAuthToken } from "../../api/lib/getAuthToken";
 
 export async function getAccount() {
   const authToken = await getAuthToken();
-  const apiServerURL = new URL(API_SERVER_URL);
 
-  apiServerURL.pathname = "/v1/account/me";
-
-  const res = await fetch(apiServerURL, {
+  const res = await fetch(`${API_SERVER_URL}/v1/account/me`, {
     method: "GET",
     headers: {
       Authorization: `Bearer ${authToken}`,
diff --git a/apps/dashboard/src/app/account/wallets/page.tsx b/apps/dashboard/src/app/account/wallets/page.tsx
index 5c3e09c61b6..e7d2e7e88c4 100644
--- a/apps/dashboard/src/app/account/wallets/page.tsx
+++ b/apps/dashboard/src/app/account/wallets/page.tsx
@@ -1,10 +1,8 @@
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { LinkWalletUI } from "./LinkWalletUI";
 
 export default async function Page() {
   return (
     <div className="grow">
-      <BillingAlerts className="mb-10" />
       <LinkWalletUI
         // TODO -  fetch the wallets of current user
         wallets={[]}
diff --git a/apps/dashboard/src/app/components/TeamPlanBadge.tsx b/apps/dashboard/src/app/components/TeamPlanBadge.tsx
index 85ca6b559a1..3e06098b10b 100644
--- a/apps/dashboard/src/app/components/TeamPlanBadge.tsx
+++ b/apps/dashboard/src/app/components/TeamPlanBadge.tsx
@@ -1,14 +1,15 @@
+import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
 export function TeamPlanBadge(props: {
-  plan: "free" | "growth" | "pro";
+  plan: Team["billingPlan"];
   className?: string;
 }) {
   return (
     <Badge
       variant={
-        props.plan === "free"
+        props.plan === "free" || props.plan === "starter"
           ? "secondary"
           : props.plan === "growth"
             ? "success"
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx
new file mode 100644
index 00000000000..ab1c87e5868
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx
@@ -0,0 +1,112 @@
+import type { UserOpStats } from "@/api/analytics";
+import { defineChain } from "thirdweb";
+import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
+import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
+
+export async function TotalSponsoredChartCardUI({
+  data,
+  aggregatedData,
+  searchParams,
+  className,
+  onlyMainnet,
+  title,
+  description,
+}: {
+  data: UserOpStats[];
+  aggregatedData: UserOpStats[];
+  searchParams?: { [key: string]: string | string[] | undefined };
+  className?: string;
+  onlyMainnet?: boolean;
+  title?: string;
+  description?: string;
+}) {
+  const chains = await Promise.all(
+    data.map(
+      (item) =>
+        // eslint-disable-next-line no-restricted-syntax
+        item.chainId && getChainMetadata(defineChain(Number(item.chainId))),
+    ),
+  ).then((chains) => chains.filter((c) => c) as ChainMetadata[]);
+
+  // Process data to combine by date and chain type
+  const dateMap = new Map<string, { mainnet: number; testnet: number }>();
+  for (const item of data) {
+    const chain = chains.find((c) => c.chainId === Number(item.chainId));
+
+    const existing = dateMap.get(item.date) || { mainnet: 0, testnet: 0 };
+    if (chain?.testnet) {
+      existing.testnet += item.sponsoredUsd;
+    } else {
+      existing.mainnet += item.sponsoredUsd;
+    }
+    dateMap.set(item.date, existing);
+  }
+
+  // Convert to array and sort by date
+  const timeSeriesData = Array.from(dateMap.entries())
+    .map(([date, values]) => ({
+      date,
+      mainnet: values.mainnet,
+      testnet: values.testnet,
+      total: values.mainnet + values.testnet,
+    }))
+    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+  const processedAggregatedData = {
+    mainnet: aggregatedData
+      .filter(
+        (d) => !chains.find((c) => c.chainId === Number(d.chainId))?.testnet,
+      )
+      .reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
+    testnet: aggregatedData
+      .filter(
+        (d) => chains.find((c) => c.chainId === Number(d.chainId))?.testnet,
+      )
+      .reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
+    total: aggregatedData.reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
+  };
+
+  const chartConfig = {
+    mainnet: {
+      label: "Mainnet Chains",
+      color: "hsl(var(--chart-1))",
+    },
+    testnet: {
+      label: "Testnet Chains",
+      color: "hsl(var(--chart-2))",
+    },
+    total: {
+      label: "All Chains",
+      color: "hsl(var(--chart-3))",
+    },
+  };
+
+  return (
+    <CombinedBarChartCard
+      isCurrency
+      title={title || "Total Sponsored"}
+      description={description}
+      chartConfig={chartConfig}
+      data={timeSeriesData}
+      hideTabs={onlyMainnet}
+      activeChart={
+        onlyMainnet
+          ? "mainnet"
+          : ((searchParams?.totalSponsored as keyof typeof chartConfig) ??
+            "mainnet")
+      }
+      queryKey="totalSponsored"
+      existingQueryParams={searchParams}
+      aggregateFn={(_data, key) => processedAggregatedData[key]}
+      className={className}
+      // Get the trend from the last two COMPLETE periods
+      trendFn={(data, key) =>
+        data.filter((d) => (d[key] as number) > 0).length >= 3
+          ? ((data[data.length - 2]?.[key] as number) ?? 0) /
+              ((data[data.length - 3]?.[key] as number) ?? 0) -
+            1
+          : undefined
+      }
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
index 40e91d7e593..f17957d3bfd 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
@@ -8,7 +8,6 @@ import { notFound, redirect } from "next/navigation";
 
 import type {
   InAppWalletStats,
-  UserOpStats,
   WalletStats,
   WalletUserStats,
 } from "@/api/analytics";
@@ -19,11 +18,6 @@ import {
   getLastNDaysRange,
 } from "components/analytics/date-range-selector";
 
-import {
-  type ChainMetadata,
-  defineChain,
-  getChainMetadata,
-} from "thirdweb/chains";
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
 import { AnalyticsHeader } from "../../components/Analytics/AnalyticsHeader";
 import { CombinedBarChartCard } from "../../components/Analytics/CombinedBarChartCard";
@@ -34,6 +28,7 @@ import { getTeamBySlug } from "@/api/team";
 import { getAccount } from "app/account/settings/getAccount";
 import { EmptyStateCard } from "app/team/components/Analytics/EmptyStateCard";
 import { Changelog, type ChangelogItem } from "components/dashboard/Changelog";
+import { TotalSponsoredChartCardUI } from "./_components/TotalSponsoredCard";
 
 // revalidate every 5 minutes
 export const revalidate = 300;
@@ -170,13 +165,12 @@ export default async function TeamOverviewPage(props: {
                 )}
               </div>
               {userOpUsage.length > 0 ? (
-                <div className="">
-                  <TotalSponsoredCard
-                    searchParams={searchParams}
-                    data={userOpUsageTimeSeries}
-                    aggregatedData={userOpUsage}
-                  />
-                </div>
+                <TotalSponsoredChartCardUI
+                  searchParams={searchParams}
+                  data={userOpUsageTimeSeries}
+                  aggregatedData={userOpUsage}
+                  className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
+                />
               ) : (
                 <EmptyStateCard
                   metric="Sponsored Transactions"
@@ -257,6 +251,7 @@ function UsersChartCard({
 
   return (
     <CombinedBarChartCard
+      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       title="Users"
       chartConfig={chartConfig}
       activeChart={
@@ -321,97 +316,3 @@ function AuthMethodDistributionCard({ data }: { data: InAppWalletStats[] }) {
     />
   );
 }
-
-async function TotalSponsoredCard({
-  data,
-  aggregatedData,
-  searchParams,
-}: {
-  data: UserOpStats[];
-  aggregatedData: UserOpStats[];
-  searchParams: { [key: string]: string | string[] | undefined };
-}) {
-  const chains = await Promise.all(
-    data.map(
-      (item) =>
-        // eslint-disable-next-line no-restricted-syntax
-        item.chainId && getChainMetadata(defineChain(Number(item.chainId))),
-    ),
-  ).then((chains) => chains.filter((c) => c) as ChainMetadata[]);
-
-  // Process data to combine by date and chain type
-  const dateMap = new Map<string, { mainnet: number; testnet: number }>();
-  for (const item of data) {
-    const chain = chains.find((c) => c.chainId === Number(item.chainId));
-
-    const existing = dateMap.get(item.date) || { mainnet: 0, testnet: 0 };
-    if (chain?.testnet) {
-      existing.testnet += item.sponsoredUsd;
-    } else {
-      existing.mainnet += item.sponsoredUsd;
-    }
-    dateMap.set(item.date, existing);
-  }
-
-  // Convert to array and sort by date
-  const timeSeriesData = Array.from(dateMap.entries())
-    .map(([date, values]) => ({
-      date,
-      mainnet: values.mainnet,
-      testnet: values.testnet,
-      total: values.mainnet + values.testnet,
-    }))
-    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
-
-  const processedAggregatedData = {
-    mainnet: aggregatedData
-      .filter(
-        (d) => !chains.find((c) => c.chainId === Number(d.chainId))?.testnet,
-      )
-      .reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
-    testnet: aggregatedData
-      .filter(
-        (d) => chains.find((c) => c.chainId === Number(d.chainId))?.testnet,
-      )
-      .reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
-    total: aggregatedData.reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
-  };
-
-  const chartConfig = {
-    mainnet: {
-      label: "Mainnet Chains",
-      color: "hsl(var(--chart-1))",
-    },
-    testnet: {
-      label: "Testnet Chains",
-      color: "hsl(var(--chart-2))",
-    },
-    total: {
-      label: "All Chains",
-      color: "hsl(var(--chart-3))",
-    },
-  };
-
-  return (
-    <CombinedBarChartCard
-      isCurrency
-      title="Total Sponsored"
-      chartConfig={chartConfig}
-      data={timeSeriesData}
-      activeChart={
-        (searchParams?.totalSponsored as keyof typeof chartConfig) ?? "mainnet"
-      }
-      queryKey="totalSponsored"
-      existingQueryParams={searchParams}
-      aggregateFn={(_data, key) => processedAggregatedData[key]}
-      // Get the trend from the last two COMPLETE periods
-      trendFn={(data, key) =>
-        data.filter((d) => (d[key] as number) > 0).length >= 3
-          ? ((data[data.length - 2]?.[key] as number) ?? 0) /
-              ((data[data.length - 3]?.[key] as number) ?? 0) -
-            1
-          : undefined
-      }
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
index 0f197e8f03c..ceb8b62a3ed 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx
@@ -154,8 +154,8 @@ export function EcosystemWalletUsersChartCard(props: {
             chartData.every((data) => data[authMethod] === 0),
           ) ? (
           <EmptyChartState>
-            <div className="flex flex-col items-center justify-center">
-              <span className="mb-6 text-lg">
+            <div className="flex flex-col items-center justify-center px-4">
+              <span className="mb-6 text-center text-lg">
                 Connect users to your app with social logins
               </span>
               <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/layout.tsx
index c40be11f46d..1947747134c 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/layout.tsx
@@ -1,4 +1,3 @@
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { EcosystemLayoutSlug } from "./components/EcosystemSlugLayout";
 
 export default async function Layout(props: {
@@ -11,7 +10,6 @@ export default async function Layout(props: {
       params={await props.params}
       ecosystemLayoutPath={`/team/${team_slug}/~/ecosystem`}
     >
-      <BillingAlerts className="mb-10" />
       {props.children}
     </EcosystemLayoutSlug>
   );
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/ConfirmEngineTierDialog.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/ConfirmEngineTierDialog.tsx
deleted file mode 100644
index 03ec0d8cf72..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/ConfirmEngineTierDialog.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { RocketIcon } from "lucide-react";
-import { MONTHLY_PRICE_USD } from "./tier-card";
-
-export const ConfirmEngineTierDialog = (props: {
-  tier: "STARTER" | "PREMIUM";
-  onConfirm: () => void;
-  onOpenChange: (v: boolean) => void;
-  open: boolean;
-}) => {
-  const { tier, onConfirm, open, onOpenChange } = props;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="z-[10001] md:max-w-[400px]"
-        dialogOverlayClassName="z-[10000]"
-      >
-        <DialogHeader>
-          <DialogTitle className="pr-4 leading-snug">
-            Are you sure you want to deploy a{" "}
-            {tier === "STARTER" ? "Standard" : "Premium"} Engine?
-          </DialogTitle>
-
-          <DialogDescription>
-            You will be charged ${MONTHLY_PRICE_USD[tier]} per month for the
-            subscription
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter className="mt-5">
-          <Button onClick={() => onOpenChange(false)} variant="outline">
-            Cancel
-          </Button>
-          <Button onClick={onConfirm} variant="primary" className="gap-2">
-            <RocketIcon className="size-3" />
-            Deploy now
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/page.tsx
index d4dfe384e13..df10460d08f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/page.tsx
@@ -1,112 +1,8 @@
-"use client";
-
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { accountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { ConfirmEngineTierDialog } from "app/team/[team_slug]/(team)/~/engine/(general)/create/ConfirmEngineTierDialog";
-import { EngineTierCard } from "app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card";
-import { LazyOnboardingBilling } from "components/onboarding/LazyOnboardingBilling";
-import { OnboardingModal } from "components/onboarding/Modal";
-import { THIRDWEB_API_HOST } from "constants/urls";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useState } from "react";
-import { toast } from "sonner";
+import { EngineTierCard } from "./tier-card";
 
 export default function Page() {
-  const trackEvent = useTrack();
-  const router = useDashboardRouter();
-  const [selectedTier, setSelectedTier] = useState<"STARTER" | "PREMIUM">();
-  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] =
-    useState(false);
-
-  const accountQuery = useAccount();
-  const [isBillingModalOpen, setIsBillingModalOpen] = useState(false);
-
-  async function createEngineInstance(tier: "STARTER" | "PREMIUM") {
-    trackEvent({
-      category: "engine",
-      action: "click",
-      label: "clicked-cloud-hosted",
-      tier: tier,
-    });
-
-    try {
-      toast.info("Starting Engine deployment");
-
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/add-cloud-hosted`,
-        {
-          method: "POST",
-          headers: {
-            "Content-type": "application/json",
-          },
-          body: JSON.stringify({
-            tier: tier,
-          }),
-        },
-      );
-
-      if (!res.ok) {
-        if (res.status === 409) {
-          toast.warning(
-            "There is a pending Engine deployment. Please contact support@thirdweb.com if this takes longer than 2 hours.",
-          );
-          return;
-        }
-
-        const json = await res.json();
-        const error =
-          json.error?.message ??
-          "Unexpected error. Please try again or visit https://thirdweb.com/support.";
-        throw error;
-      }
-
-      toast.success(
-        "Thank you! Your Engine deployment will begin shortly. You can view the progress in Overview page.",
-      );
-    } catch (e) {
-      toast.error(`${e}`);
-    }
-  }
-
   return (
     <div>
-      {selectedTier && (
-        <ConfirmEngineTierDialog
-          tier={selectedTier}
-          onOpenChange={setIsConfirmationDialogOpen}
-          open={isConfirmationDialogOpen}
-          onConfirm={async () => {
-            setIsConfirmationDialogOpen(false);
-
-            // If Payment is already setup, deploy the Engine
-            if (accountQuery.data?.status === accountStatus.validPayment) {
-              await createEngineInstance(selectedTier);
-            } else {
-              trackEvent({
-                category: "engine",
-                action: "click",
-                label: "clicked-add-payment-method",
-              });
-              setIsBillingModalOpen(true);
-            }
-          }}
-        />
-      )}
-
-      <OnboardingModal isOpen={isBillingModalOpen}>
-        <LazyOnboardingBilling
-          onSave={async () => {
-            if (!selectedTier) {
-              return;
-            }
-
-            await createEngineInstance(selectedTier);
-            setIsBillingModalOpen(false);
-          }}
-          onCancel={() => setIsBillingModalOpen(false)}
-        />
-      </OnboardingModal>
-
       <h1 className="mb-2 font-semibold text-2xl tracking-tight">
         Choose an Engine deployment
       </h1>
@@ -116,36 +12,9 @@ export default function Page() {
       </p>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        <EngineTierCard
-          tier="STARTER"
-          onClick={() => {
-            setSelectedTier("STARTER");
-            setIsConfirmationDialogOpen(true);
-          }}
-        />
-
-        <EngineTierCard
-          tier="PREMIUM"
-          isPrimaryCta
-          onClick={() => {
-            setSelectedTier("PREMIUM");
-            setIsConfirmationDialogOpen(true);
-          }}
-        />
-
-        <EngineTierCard
-          tier="ENTERPRISE"
-          previousTier="Premium Engine"
-          onClick={() => {
-            trackEvent({
-              category: "engine",
-              action: "click",
-              label: "clicked-cloud-hosted",
-              tier: "ENTERPRISE",
-            });
-            router.push("/contact-us");
-          }}
-        />
+        <EngineTierCard tier="STARTER" />
+        <EngineTierCard tier="PREMIUM" isPrimaryCta />
+        <EngineTierCard tier="ENTERPRISE" previousTier="Premium Engine" />
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
index 126f6af86e3..f1912ddad57 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
@@ -3,7 +3,11 @@
 import { Button } from "@/components/ui/button";
 import type { EngineTier } from "@3rdweb-sdk/react/hooks/useEngine";
 import { Flex, Spacer } from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
 import { CheckIcon } from "lucide-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { CheckoutButton } from "../../../../../../../../@/components/billing";
 
 interface EngineTierCardConfig {
   name: string;
@@ -40,25 +44,19 @@ const ENGINE_TIER_CARD_CONFIG: Record<EngineTier, EngineTierCardConfig> = {
   },
 };
 
-export const MONTHLY_PRICE_USD: Record<EngineTier, number> = {
-  STARTER: 99,
-  PREMIUM: 299,
-  ENTERPRISE: 0,
-};
-
 export const EngineTierCard = ({
   tier,
   previousTier,
   isPrimaryCta = false,
-  onClick,
   ctaText,
 }: {
   tier: EngineTier;
   previousTier?: string;
   isPrimaryCta?: boolean;
-  onClick: () => void;
   ctaText?: string;
 }) => {
+  const trackEvent = useTrack();
+  const params = useParams<{ team_slug: string }>();
   const { name, monthlyPriceUsd } = ENGINE_TIER_CARD_CONFIG[tier];
   let features = ENGINE_TIER_CARD_CONFIG[tier].features;
   if (tier === "PREMIUM") {
@@ -68,18 +66,18 @@ export const EngineTierCard = ({
   const defaultCtaText =
     monthlyPriceUsd === "custom" ? "Contact us" : "Deploy now";
 
-  const card = (
+  return (
     <div
-      className="flex flex-col gap-6 rounded-xl border border-border bg-muted/20 p-6"
+      className="flex flex-col gap-6 rounded-xl border border-border bg-muted/50 p-6"
       style={{
-        background: isPrimaryCta
-          ? "linear-gradient(to top, hsl(var(--muted)), hsl(var(--muted)/50%))"
+        backgroundImage: isPrimaryCta
+          ? "linear-gradient(to top, hsl(var(--muted)) 40%, transparent)"
           : undefined,
       }}
     >
       <Flex flexDir="column" gap={4}>
         {/* Name */}
-        <h3 className="font-semibold text-3xl tracking-tight">{name}</h3>
+        <h3 className="font-semibold text-2xl tracking-tight">{name}</h3>
 
         {/* Price */}
         {monthlyPriceUsd === "custom" ? (
@@ -114,11 +112,43 @@ export const EngineTierCard = ({
       <Spacer />
 
       {/* CTA */}
-      <Button onClick={onClick} variant={isPrimaryCta ? "default" : "outline"}>
-        {ctaText ?? defaultCtaText}
-      </Button>
+      {tier === "ENTERPRISE" ? (
+        <Button
+          onClick={() => {
+            trackEvent({
+              category: "engine",
+              action: "click",
+              label: "clicked-cloud-hosted",
+              tier,
+            });
+          }}
+          variant={isPrimaryCta ? "default" : "outline"}
+          asChild
+        >
+          <Link href="/contact-us">{ctaText ?? defaultCtaText}</Link>
+        </Button>
+      ) : (
+        <CheckoutButton
+          sku={
+            tier === "STARTER"
+              ? "product:engine_standard"
+              : "product:engine_premium"
+          }
+          redirectPath={`/team/${params?.team_slug}/~/engine`}
+          teamSlug={params?.team_slug || "~"}
+          onClick={() => {
+            trackEvent({
+              category: "engine",
+              action: "click",
+              label: "clicked-cloud-hosted",
+              tier,
+            });
+          }}
+          variant={isPrimaryCta ? "default" : "outline"}
+        >
+          {ctaText ?? defaultCtaText}
+        </CheckoutButton>
+      )}
     </div>
   );
-
-  return card;
 };
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/layout.tsx
index 4808a082b91..d64041c92b6 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/layout.tsx
@@ -1,6 +1,5 @@
 import type { SidebarLink } from "@/components/blocks/Sidebar";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -27,9 +26,6 @@ export default async function Layout(props: {
   ];
 
   return (
-    <SidebarLayout sidebarLinks={sidebarLinks}>
-      <BillingAlerts className="mb-10" />
-      {props.children}
-    </SidebarLayout>
+    <SidebarLayout sidebarLinks={sidebarLinks}>{props.children}</SidebarLayout>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx
index 6c414773146..9cb3ab45fd2 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx
@@ -1,4 +1,3 @@
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { EngineSidebarLayout } from "./_components/EnginePageLayout";
 
 export default async function Layout(props: {
@@ -11,7 +10,6 @@ export default async function Layout(props: {
   const params = await props.params;
   return (
     <EngineSidebarLayout engineId={params.engineId} teamSlug={params.team_slug}>
-      <BillingAlerts className="mb-10" />
       {props.children}
     </EngineSidebarLayout>
   );
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
index 27a941cab92..b6b2abc60cc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
@@ -22,7 +22,6 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 
 type SortyById = "name" | "createdAt";
@@ -62,7 +61,6 @@ export function TeamProjectsPage(props: {
   return (
     <div className="container ">
       <div className="h-10" />
-      <BillingAlerts className="mb-10" />
 
       {/* Filters + Add New */}
       <div className="flex flex-col gap-4 md:flex-row md:items-center">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx
deleted file mode 100644
index a2e46a8c581..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
-import { accountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { Billing } from "components/settings/Account/Billing";
-
-export const SettingsBillingPage = (props: {
-  teamId: string | undefined;
-}) => {
-  const meQuery = useAccount({
-    refetchInterval: (query) => {
-      const status = query.state?.status as string;
-      const isInvalidPayment =
-        status === accountStatus.invalidPayment ||
-        status === accountStatus.invalidPaymentMethod;
-
-      return isInvalidPayment ? 1000 : false;
-    },
-  });
-
-  const { data: account } = meQuery;
-
-  if (!account) {
-    return <GenericLoadingPage />;
-  }
-
-  return <Billing account={account} teamId={props.teamId} />;
-};
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx
new file mode 100644
index 00000000000..f2a52b0444b
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { addDays } from "date-fns";
+import { teamStub, teamSubscriptionsStub } from "stories/stubs";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../../stories/utils";
+import { PlanInfoCard } from "./PlanInfoCard";
+
+const meta = {
+  title: "Billing/PlanInfoCard",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  const team = teamStub("foo", "growth");
+  const zeroUsageOnDemandSubs = teamSubscriptionsStub("plan:growth");
+  const trialPlanZeroUsageOnDemandSubs = teamSubscriptionsStub("plan:growth", {
+    trialEnd: addDays(new Date(), 7).toISOString(),
+  });
+
+  const subsWith1Usage = teamSubscriptionsStub("plan:growth", {
+    usage: {
+      storage: {
+        amount: 10000,
+        quantity: 4,
+      },
+    },
+  });
+
+  const subsWith4Usage = teamSubscriptionsStub("plan:growth", {
+    usage: {
+      storage: {
+        amount: 10000,
+        quantity: 4,
+      },
+      aaSponsorshipAmount: {
+        amount: 7500,
+        quantity: 4,
+      },
+      aaSponsorshipOpGrantAmount: {
+        amount: 2500,
+        quantity: 4,
+      },
+      inAppWalletAmount: {
+        amount: 40000,
+        quantity: 100,
+      },
+    },
+  });
+
+  return (
+    <div className="container flex max-w-[1130px] flex-col gap-12 lg:p-10">
+      <BadgeContainer label="On-demand Subscriptions with 0 usage">
+        <PlanInfoCard team={team} subscriptions={zeroUsageOnDemandSubs} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Trial Plan - On-demand Subscriptions with 0 usage">
+        <PlanInfoCard
+          team={team}
+          subscriptions={trialPlanZeroUsageOnDemandSubs}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="On-demand Subscriptions with 1 usage">
+        <PlanInfoCard team={team} subscriptions={subsWith1Usage} />
+      </BadgeContainer>
+
+      <BadgeContainer label="On-demand Subscriptions with 4 usage">
+        <PlanInfoCard team={team} subscriptions={subsWith4Usage} />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx
new file mode 100644
index 00000000000..5278a84cb77
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx
@@ -0,0 +1,197 @@
+import type { Team } from "@/api/team";
+import type { TeamSubscription } from "@/api/team-subscription";
+import { BillingPortalButton } from "@/components/billing";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { differenceInDays, isAfter } from "date-fns";
+import { format } from "date-fns/format";
+import { CircleAlertIcon } from "lucide-react";
+import { getValidTeamPlan } from "../../../../../../components/TeamHeader/getValidTeamPlan";
+
+export function PlanInfoCard(props: {
+  subscriptions: TeamSubscription[];
+  team: Team;
+}) {
+  const { subscriptions, team } = props;
+  const validPlan = getValidTeamPlan(team);
+  const isActualFreePlan = team.billingPlan === "free";
+
+  const planSub = subscriptions.find(
+    (subscription) => subscription.type === "PLAN",
+  );
+
+  // considers hours, mins ... etc as well
+  const trialEndsInFuture =
+    planSub?.trialEnd && isAfter(new Date(planSub.trialEnd), new Date());
+
+  const trialEndsAfterDays = planSub?.trialEnd
+    ? differenceInDays(new Date(planSub.trialEnd), new Date())
+    : 0;
+
+  return (
+    <div className="rounded-lg border border-border bg-muted/50">
+      <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
+        <div>
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold text-2xl capitalize tracking-tight">
+              {validPlan} Plan
+            </h3>
+            {trialEndsInFuture && <Badge>Trial</Badge>}
+          </div>
+          {trialEndsAfterDays > 0 && (
+            <p className="text-muted-foreground text-sm">
+              Your trial ends in {trialEndsAfterDays} days
+            </p>
+          )}
+        </div>
+        <div>
+          <BillingPortalButton teamSlug={team.slug} variant="outline">
+            Manage Billing
+          </BillingPortalButton>
+        </div>
+
+        {isActualFreePlan && (
+          <div>
+            {/* manage team billing */}
+            <BillingPortalButton teamSlug={team.slug} variant="outline">
+              Manage Billing
+            </BillingPortalButton>
+
+            <Button asChild variant="outline">
+              <TrackedLinkTW
+                category="account"
+                href="/pricing"
+                label="pricing-plans"
+                target="_blank"
+                className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
+              >
+                View Pricing
+              </TrackedLinkTW>
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="p-4 lg:p-6">
+        {isActualFreePlan ? (
+          <div className="flex flex-col items-center py-8 text-center max-sm:gap-4">
+            <CircleAlertIcon className="mb-3 text-muted-foreground lg:size-6" />
+            <p>Your plan includes a fixed amount of free usage</p>
+            <p>
+              To unlock additional usage, Upgrade your plan to Starer or Growth
+            </p>
+          </div>
+        ) : (
+          <BillingInfo subscriptions={subscriptions} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function BillingInfo({
+  subscriptions,
+}: {
+  subscriptions: TeamSubscription[];
+}) {
+  const planSubscription = subscriptions.find(
+    (subscription) => subscription.type === "PLAN",
+  );
+
+  const usageSubscription = subscriptions.find(
+    (subscription) => subscription.type === "USAGE",
+  );
+
+  // only plan and usage subscriptions are considered for now
+  const totalUsd = getAllSubscriptionsTotal(
+    subscriptions.filter((sub) => sub.type === "PLAN" || sub.type === "USAGE"),
+  );
+
+  return (
+    <div>
+      {planSubscription && (
+        <SubscriptionOverview
+          subscription={planSubscription}
+          title="Monthly Plan Cost"
+        />
+      )}
+
+      <Separator className="my-4" />
+
+      {usageSubscription && (
+        <SubscriptionOverview
+          subscription={usageSubscription}
+          title="On-Demand Charges"
+        />
+      )}
+
+      <Separator className="my-4" />
+
+      <div className="flex items-center justify-between gap-6">
+        <h5 className="font-medium text-lg">Total Upcoming Bill</h5>
+        <p className="text-foreground">{totalUsd}</p>
+      </div>
+    </div>
+  );
+}
+
+function SubscriptionOverview(props: {
+  subscription: TeamSubscription;
+  title: string;
+}) {
+  const { subscription } = props;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between gap-6">
+        <div>
+          <h5 className="font-medium text-lg">{props.title} </h5>
+          <p className="text-muted-foreground text-sm lg:text-base">
+            {format(
+              new Date(props.subscription.currentPeriodStart),
+              "MMMM dd yyyy",
+            )}{" "}
+            -{" "}
+            {format(
+              new Date(props.subscription.currentPeriodEnd),
+              "MMMM dd yyyy",
+            )}{" "}
+          </p>
+        </div>
+
+        <p className="text-muted-foreground">
+          {formatCurrencyAmount(
+            subscription.upcomingInvoice.amount || 0,
+            subscription.upcomingInvoice.currency,
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function getAllSubscriptionsTotal(subscriptions: TeamSubscription[]) {
+  let totalCents = 0;
+  let currency = "USD";
+
+  for (const subscription of subscriptions) {
+    const amount = subscription.upcomingInvoice.amount;
+    currency = subscription.upcomingInvoice.currency;
+    if (amount) {
+      totalCents += amount;
+    }
+  }
+
+  return formatCurrencyAmount(totalCents, currency);
+}
+
+function formatCurrencyAmount(centsAmount: number, currency: string) {
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: currency,
+  }).format(centsAmount / 100);
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/page.tsx
index 68de40cd4bd..4a50b76a257 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/page.tsx
@@ -1,22 +1,38 @@
 import { getTeamBySlug } from "@/api/team";
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
-import { notFound } from "next/navigation";
-import { SettingsBillingPage } from "./BillingSettingsPage";
+import { getTeamSubscriptions } from "@/api/team-subscription";
+import { redirect } from "next/navigation";
+import { Billing } from "../../../../../../../components/settings/Account/Billing";
+import { getAccount } from "../../../../../../account/settings/getAccount";
 
 export default async function Page(props: {
   params: Promise<{
     team_slug: string;
   }>;
 }) {
-  const team = await getTeamBySlug((await props.params).team_slug);
+  const params = await props.params;
+
+  const account = await getAccount();
+  if (!account) {
+    redirect(
+      `/login?next=${encodeURIComponent(`/team/${params.team_slug}/settings/billing`)}`,
+    );
+  }
+
+  const team = await getTeamBySlug(params.team_slug);
 
   if (!team) {
-    notFound();
+    redirect("/team");
+  }
+
+  const subscriptions = await getTeamSubscriptions(team.slug);
+
+  if (!subscriptions) {
+    return (
+      <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
+        Something went wrong. Please try again later.
+      </div>
+    );
   }
 
-  return (
-    <ChakraProviderSetup>
-      <SettingsBillingPage teamId={team.id} />
-    </ChakraProviderSetup>
-  );
+  return <Billing team={team} subscriptions={subscriptions} />;
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx
index c8856d4a166..b576c0adbd4 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx
@@ -1,21 +1,13 @@
 "use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { ApplyForOpCreditsModal } from "components/onboarding/ApplyForOpCreditsModal";
+import type { Team } from "@/api/team";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { ApplyForOpCredits } from "components/onboarding/ApplyForOpCreditsModal";
 import { Heading, LinkButton } from "tw-components";
 
-export const SettingsGasCreditsPage = () => {
-  const { isPending } = useLoggedInUser();
-
-  if (isPending) {
-    return (
-      <div className="grid min-h-[400px] w-full place-items-center">
-        <Spinner className="size-10" />
-      </div>
-    );
-  }
-
+export const SettingsGasCreditsPage = (props: {
+  team: Team;
+  account: Account;
+}) => {
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-row items-center gap-4">
@@ -33,7 +25,7 @@ export const SettingsGasCreditsPage = () => {
         </LinkButton>
       </div>
 
-      <ApplyForOpCreditsModal />
+      <ApplyForOpCredits team={props.team} account={props.account} />
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/page.tsx
index d10f6f4e3d4..54cfcc6a23a 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/page.tsx
@@ -1,10 +1,33 @@
+import { getTeamBySlug } from "@/api/team";
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { redirect } from "next/navigation";
+import { getAccount } from "../../../../../../account/settings/getAccount";
 import { SettingsGasCreditsPage } from "./SettingsCreditsPage";
 
-export default function Page() {
+export default async function Page(props: {
+  params: Promise<{
+    team_slug: string;
+  }>;
+}) {
+  const params = await props.params;
+
+  const account = await getAccount();
+
+  if (!account) {
+    return redirect(
+      `/login?next=${encodeURIComponent(`/team/${params.team_slug}/~/settings/credits`)}`,
+    );
+  }
+
+  const team = await getTeamBySlug(params.team_slug);
+
+  if (!team) {
+    return redirect("/team");
+  }
+
   return (
     <ChakraProviderSetup>
-      <SettingsGasCreditsPage />
+      <SettingsGasCreditsPage team={team} account={account} />
     </ChakraProviderSetup>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
index 6a8c22fa0f7..222d01b92a4 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
@@ -1,7 +1,7 @@
-import type { Team } from "@/api/team";
 import { Toaster } from "@/components/ui/sonner";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
+import { teamStub } from "../../../../../../../stories/stubs";
 import { mobileViewport } from "../../../../../../../stories/utils";
 import {
   DeleteTeamCard,
@@ -33,16 +33,7 @@ export const Mobile: Story = {
   },
 };
 
-const testTeam: Team = {
-  id: "team-id-foo-bar",
-  name: "Team XYZ",
-  slug: "team-slug-foo-bar",
-  createdAt: "2023-07-07T19:21:33.604Z",
-  updatedAt: "2024-07-11T00:01:02.241Z",
-  billingStatus: "validPayment",
-  billingPlan: "free",
-  billingEmail: "foo@example.com",
-};
+const testTeam = teamStub("foo", "free");
 
 function Story() {
   return (
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/layout.tsx
index ed3fe9e5d3b..7d22fb821bb 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/layout.tsx
@@ -1,5 +1,4 @@
 import { getTeamBySlug } from "@/api/team";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { notFound } from "next/navigation";
 import { SettingsLayout } from "./SettingsLayout";
 
@@ -15,10 +14,5 @@ export default async function Layout(props: {
     notFound();
   }
 
-  return (
-    <SettingsLayout team={team}>
-      <BillingAlerts className="mb-10" />
-      {props.children}
-    </SettingsLayout>
-  );
+  return <SettingsLayout team={team}>{props.children}</SettingsLayout>;
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/layout.tsx
index c18d7134106..7bd6c02a61f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/layout.tsx
@@ -1,5 +1,4 @@
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -9,22 +8,30 @@ export default async function Layout(props: {
 }) {
   const params = await props.params;
   return (
-    <SidebarLayout
-      sidebarLinks={[
-        {
-          href: `/team/${params.team_slug}/~/usage`,
-          exactMatch: true,
-          label: "Overview",
-        },
-        {
-          href: `/team/${params.team_slug}/~/usage/storage`,
-          exactMatch: true,
-          label: "Storage",
-        },
-      ]}
-    >
-      <BillingAlerts className="mb-10" />
-      {props.children}
-    </SidebarLayout>
+    <div className="flex grow flex-col">
+      <div className="border-border border-b py-10">
+        <div className="container">
+          <h1 className="font-semibold text-3xl tracking-tight lg:px-2">
+            Usage
+          </h1>
+        </div>
+      </div>
+      <SidebarLayout
+        sidebarLinks={[
+          {
+            href: `/team/${params.team_slug}/~/usage`,
+            exactMatch: true,
+            label: "Overview",
+          },
+          {
+            href: `/team/${params.team_slug}/~/usage/storage`,
+            exactMatch: true,
+            label: "Storage",
+          },
+        ]}
+      >
+        {props.children}
+      </SidebarLayout>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx
index c69825da0d4..624301c8287 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx
@@ -1,29 +1,31 @@
-import type { UsageBillableByService } from "@3rdweb-sdk/react/hooks/useApi";
-import { useMemo } from "react";
-import { toNumber, toPercent, toSize } from "utils/number";
+import { getInAppWalletUsage, getUserOpUsage } from "@/api/analytics";
+import type { Team } from "@/api/team";
+import type { TeamSubscription } from "@/api/team-subscription";
+import { Button } from "@/components/ui/button";
+import type {
+  Account,
+  UsageBillableByService,
+} from "@3rdweb-sdk/react/hooks/useApi";
+import { InAppWalletUsersChartCardUI } from "components/embedded-wallets/Analytics/InAppWalletUsersChartCard";
+import Link from "next/link";
+import { Suspense, useMemo } from "react";
+import { toPercent, toSize } from "utils/number";
+import { TotalSponsoredChartCardUI } from "../../../../_components/TotalSponsoredCard";
 import { UsageCard } from "./UsageCard";
 
-interface UsageProps {
+type UsageProps = {
   usage: UsageBillableByService;
-}
-
-export const Usage: React.FC<UsageProps> = ({ usage: usageData }) => {
-  const bundlerMetrics = useMemo(() => {
-    const metric = {
-      title: "Total sponsored fees",
-      total: 0,
-    };
-
-    if (!usageData) {
-      return metric;
-    }
-
-    return {
-      title: metric.title,
-      total: usageData.billableUsd.bundler,
-    };
-  }, [usageData]);
+  subscriptions: TeamSubscription[];
+  account: Account;
+  team: Team;
+};
 
+export const Usage: React.FC<UsageProps> = ({
+  usage: usageData,
+  subscriptions,
+  account,
+  team,
+}) => {
   const storageMetrics = useMemo(() => {
     if (!usageData) {
       return {};
@@ -46,35 +48,13 @@ export const Usage: React.FC<UsageProps> = ({ usage: usageData }) => {
     };
   }, [usageData]);
 
-  const walletsMetrics = useMemo(() => {
-    if (!usageData) {
-      return {};
-    }
-
-    const numOfWallets = usageData.usage.embeddedWallets.countWalletAddresses;
-    const limitWallets = usageData.limits.embeddedWallets;
-    const percent = toPercent(numOfWallets, limitWallets);
-
-    return {
-      total: `${toNumber(numOfWallets)} / ${toNumber(
-        limitWallets,
-      )} (${percent}%)`,
-      progress: percent,
-      ...(usageData.billableUsd.embeddedWallets > 0
-        ? {
-            overage: usageData.billableUsd.embeddedWallets,
-          }
-        : {}),
-    };
-  }, [usageData]);
-
   const rpcMetrics = useMemo(() => {
     if (!usageData) {
       return {};
     }
 
     return {
-      title: "Unlimited requests",
+      title: "Unlimited Requests",
       total: (
         <span className="text-muted-foreground">
           {usageData.rateLimits.rpc} Requests Per Second
@@ -89,7 +69,7 @@ export const Usage: React.FC<UsageProps> = ({ usage: usageData }) => {
     }
 
     return {
-      title: "Unlimited requests",
+      title: "Unlimited Requests",
       total: (
         <span className="text-muted-foreground">
           {usageData.rateLimits.storage} Requests Per Second
@@ -98,35 +78,170 @@ export const Usage: React.FC<UsageProps> = ({ usage: usageData }) => {
     };
   }, [usageData]);
 
+  const usageSub = subscriptions.find((sub) => sub.type === "USAGE");
+
   return (
-    <div className="flex grow flex-col gap-12">
-      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
-        <UsageCard
-          {...rpcMetrics}
-          name="RPC"
-          tooltip="RPC usage is calculated by requests per second."
-        />
-        <UsageCard
-          {...gatewayMetrics}
-          name="Storage Gateway"
-          tooltip="Storage gateway usage is calculated by GB per file size."
-        />
-        <UsageCard
-          {...storageMetrics}
-          name="Storage Pinning"
-          tooltip="Storage pinning usage is calculated by GB per file size."
-        />
-        <UsageCard
-          {...walletsMetrics}
-          name="Email Wallets"
-          tooltip="Email wallet (with managed recovery code) usage is calculated by monthly active wallets (i.e. active as defined by at least 1 user log-in via email or social within the billing period month)."
-        />
-        <UsageCard
-          {...bundlerMetrics}
-          name="Account Abstraction"
-          tooltip="(Gasless, Paymaster, Bundler) usage is calculated by sponsored network fees."
-        />
-      </div>
+    <div className="flex grow flex-col gap-8">
+      {usageSub && (
+        <>
+          <InAppWalletUsersChartCard
+            accountId={account.id}
+            from={new Date(usageSub.currentPeriodStart)}
+            to={new Date(usageSub.currentPeriodEnd)}
+          />
+
+          <TotalSponsoredCard
+            accountId={account.id}
+            from={new Date(usageSub.currentPeriodStart)}
+            to={new Date(usageSub.currentPeriodEnd)}
+          />
+        </>
+      )}
+
+      <UsageCard
+        {...rpcMetrics}
+        name="RPC"
+        description="Amount of RPC requests allowed per second in your plan"
+      />
+
+      <UsageCard
+        {...gatewayMetrics}
+        name="Storage Gateway"
+        description="Amount of storage gateway requests allowed per second in your plan"
+      />
+
+      <UsageCard
+        {...storageMetrics}
+        name="Storage Pinning"
+        description="Amount of IPFS Storage pinning allowed in your plan"
+      >
+        <Button
+          variant="outline"
+          className="top-6 right-6 mt-6 md:absolute md:mt-0"
+          asChild
+          size="sm"
+        >
+          <Link href={`/team/${team.slug}/~/usage/storage`}>
+            View Pinned Files
+          </Link>
+        </Button>
+      </UsageCard>
     </div>
   );
 };
+
+type ChartCardProps = {
+  from: Date;
+  to: Date;
+  accountId: string;
+};
+
+function InAppWalletUsersChartCard(props: ChartCardProps) {
+  const title = "In-App Wallets";
+  const description =
+    "Number of unique users interacting with your apps using in-app wallets every day";
+
+  return (
+    <Suspense
+      fallback={
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={[]}
+          isPending={true}
+          title={title}
+          description={description}
+        />
+      }
+    >
+      <AsyncInAppWalletUsersChartCard
+        {...props}
+        title={title}
+        description={description}
+      />
+    </Suspense>
+  );
+}
+
+async function AsyncInAppWalletUsersChartCard(
+  props: ChartCardProps & {
+    title: string;
+    description: string;
+  },
+) {
+  const inAppWalletUsage = await getInAppWalletUsage({
+    period: "day",
+    from: props.from,
+    to: props.to,
+    accountId: props.accountId,
+  }).catch(() => null);
+
+  return (
+    <InAppWalletUsersChartCardUI
+      inAppWalletStats={inAppWalletUsage || []}
+      isPending={false}
+      title={props.title}
+      description={props.description}
+    />
+  );
+}
+
+function TotalSponsoredCard(props: ChartCardProps) {
+  const title = "Total Sponsored";
+  const description =
+    "Total amount of USD sponsored across all mainnets with account abstraction";
+
+  return (
+    <Suspense
+      fallback={
+        <TotalSponsoredChartCardUI
+          data={[]}
+          aggregatedData={[]}
+          className="bg-muted/50"
+          onlyMainnet
+          description={description}
+          title={title}
+        />
+      }
+    >
+      <AsyncTotalSponsoredChartCard
+        {...props}
+        title={title}
+        description={description}
+      />
+    </Suspense>
+  );
+}
+
+async function AsyncTotalSponsoredChartCard(
+  props: ChartCardProps & {
+    description: string;
+    title: string;
+  },
+) {
+  const { accountId, from, to } = props;
+  const [userOpUsageTimeSeries, userOpUsage] = await Promise.all([
+    // User operations usage
+    getUserOpUsage({
+      accountId: accountId,
+      from: from,
+      to: to,
+      period: "week",
+    }),
+    getUserOpUsage({
+      accountId: accountId,
+      from: from,
+      to: to,
+      period: "all",
+    }),
+  ]);
+
+  return (
+    <TotalSponsoredChartCardUI
+      data={userOpUsageTimeSeries}
+      aggregatedData={userOpUsage}
+      className="bg-muted/50"
+      onlyMainnet
+      description={props.description}
+      title={props.title}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx
index fe396c39301..4e3734d08dd 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx
@@ -1,6 +1,4 @@
-import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { CircleHelpIcon } from "lucide-react";
 import type { JSX } from "react";
 import { toUSD } from "utils/number";
 
@@ -10,7 +8,8 @@ interface UsageCardProps {
   title?: string;
   total?: string | number | JSX.Element;
   progress?: number;
-  tooltip?: string;
+  description: string;
+  children?: JSX.Element;
 }
 
 export const UsageCard: React.FC<UsageCardProps> = ({
@@ -19,21 +18,18 @@ export const UsageCard: React.FC<UsageCardProps> = ({
   total,
   overage,
   progress,
-  tooltip,
+  description,
+  children,
 }) => {
   return (
-    <div className="relative flex min-h-[150px] flex-col rounded-lg border border-border bg-muted/50 p-4">
-      <h3 className="pr-10 font-medium text-lg">{name}</h3>
-      {tooltip && (
-        <ToolTipLabel label={tooltip}>
-          <CircleHelpIcon className="absolute top-4 right-4 size-5 text-muted-foreground hover:text-foreground" />
-        </ToolTipLabel>
-      )}
+    <div className="relative flex min-h-[190px] flex-col rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
+      <h3 className="mb-1 font-semibold text-xl">{name}</h3>
+      <p className="text-muted-foreground"> {description}</p>
 
       <div className="h-6" />
 
       <div className="mt-auto flex flex-col gap-1.5">
-        {title && <p className="text-foreground text-sm">{title}</p>}
+        {title && <p className="text-foreground">{title}</p>}
 
         {total !== undefined && (
           <p className="text-muted-foreground text-sm">
@@ -50,6 +46,8 @@ export const UsageCard: React.FC<UsageCardProps> = ({
           </p>
         )}
       </div>
+
+      {children}
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx
index 7530c6ec28b..ce12c42f57e 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx
@@ -1,14 +1,6 @@
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import type {
-  Account,
-  UsageBillableByService,
-} from "@3rdweb-sdk/react/hooks/useApi";
-import { format } from "date-fns/format";
-import Link from "next/link";
+import { getTeamBySlug } from "@/api/team";
+import { getTeamSubscriptions } from "@/api/team-subscription";
 import { redirect } from "next/navigation";
-import { PLANS } from "utils/pricing";
 import { getAccount } from "../../../../../account/settings/getAccount";
 import { getAccountUsage } from "./getAccountUsage";
 import { Usage } from "./overview/components/Usage";
@@ -22,13 +14,23 @@ export default async function Page(props: {
   const account = await getAccount();
 
   if (!account) {
-    return redirect(
+    redirect(
       `/login?next=${encodeURIComponent(`/team/${params.team_slug}/~/usage`)}`,
     );
   }
 
-  const accountUsage = await getAccountUsage();
-  if (!accountUsage) {
+  const team = await getTeamBySlug(params.team_slug);
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  const [accountUsage, subscriptions] = await Promise.all([
+    getAccountUsage(),
+    getTeamSubscriptions(team.slug),
+  ]);
+
+  if (!accountUsage || !subscriptions) {
     return (
       <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
         Something went wrong. Please try again later.
@@ -37,114 +39,11 @@ export default async function Page(props: {
   }
 
   return (
-    <div className="flex grow flex-col gap-10">
-      <PlanInfoCard
-        account={account}
-        accountUsage={accountUsage}
-        team_slug={params.team_slug}
-      />
-      <Usage usage={accountUsage} />
-    </div>
+    <Usage
+      usage={accountUsage}
+      subscriptions={subscriptions}
+      account={account}
+      team={team}
+    />
   );
 }
-
-function PlanInfoCard(props: {
-  account: Account;
-  accountUsage: UsageBillableByService;
-  team_slug: string;
-}) {
-  const { account, accountUsage } = props;
-
-  return (
-    <div className="rounded-lg border bg-muted/50">
-      <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
-        <h3 className="font-semibold text-2xl tracking-tight">
-          {PLANS[account.plan as keyof typeof PLANS].title} Plan
-        </h3>
-
-        <div className="flex items-center gap-3">
-          <Button asChild variant="outline" className="gap-2">
-            <Link href={`/team/${props.team_slug}/~/settings/billing`}>
-              Manage Billing
-            </Link>
-          </Button>
-
-          <Button asChild variant="outline" className="gap-2">
-            <TrackedLinkTW
-              href="/pricing"
-              category="billingAccount"
-              label="learn-more-pricing"
-              target="_blank"
-            >
-              View all plans
-            </TrackedLinkTW>
-          </Button>
-        </div>
-      </div>
-
-      <Separator />
-
-      <div className="p-6 lg:p-6">
-        <BillingInfo account={account} usage={accountUsage} />
-      </div>
-    </div>
-  );
-}
-
-function BillingInfo({
-  account,
-  usage,
-}: {
-  account: Account;
-  usage: UsageBillableByService;
-}) {
-  if (
-    !account.currentBillingPeriodStartsAt ||
-    !account.currentBillingPeriodEndsAt
-  ) {
-    return null;
-  }
-
-  const totalUsd = getBillingAmountInUSD(usage);
-
-  return (
-    <div>
-      <div>
-        <h5 className="font-medium">Current Billing Cycle</h5>
-        <p className="text-muted-foreground">
-          {format(
-            new Date(account.currentBillingPeriodStartsAt),
-            "MMMM dd yyyy",
-          )}{" "}
-          -{" "}
-          {format(
-            new Date(account.currentBillingPeriodEndsAt),
-            "MMMM dd yyyy",
-          )}{" "}
-        </p>
-      </div>
-
-      <Separator className="my-4" />
-
-      <div className="flex items-center gap-2">
-        <h5 className="font-medium">Total Upcoming Bill</h5>
-        <p className="text-lg text-muted-foreground">{totalUsd}</p>
-      </div>
-    </div>
-  );
-}
-
-function getBillingAmountInUSD(usage: UsageBillableByService) {
-  let total = 0;
-
-  if (usage.billableUsd) {
-    for (const amount of Object.values(usage.billableUsd)) {
-      total += amount;
-    }
-  }
-
-  return new Intl.NumberFormat(undefined, {
-    style: "currency",
-    currency: "USD",
-  }).format(total);
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/storage/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/storage/page.tsx
index ea7da43ad1d..d563ce1578a 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/storage/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/storage/page.tsx
@@ -6,16 +6,12 @@ import { YourFilesSection } from "./your-files";
 
 export default function Page() {
   return (
-    <div>
-      <h1 className="font-semibold text-3xl tracking-tight">Storage</h1>
-      <div className="h-6" />
-      <div className="flex flex-col gap-14">
-        <YourFilesSection />
-        <GatewaySection />
-        <CLISection />
-        <SDKSection />
-        <GuidesSection />
-      </div>
+    <div className="flex flex-col gap-14">
+      <YourFilesSection />
+      <GatewaySection />
+      <CLISection />
+      <SDKSection />
+      <GuidesSection />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx
index 81bf85e75eb..46963a67fdc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx
@@ -1,6 +1,5 @@
 import type { SidebarLink } from "@/components/blocks/Sidebar";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -30,10 +29,5 @@ export default async function Layout(props: {
     },
   ];
 
-  return (
-    <SidebarLayout sidebarLinks={links}>
-      <BillingAlerts className="mb-10" />
-      {props.children}
-    </SidebarLayout>
-  );
+  return <SidebarLayout sidebarLinks={links}>{props.children}</SidebarLayout>;
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
index 404020300c8..d5b0f0e8e26 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
@@ -245,6 +245,7 @@ function UsersChartCard({
 
   return (
     <CombinedBarChartCard
+      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       title="Users"
       chartConfig={chartConfig}
       activeChart={chartKey}
@@ -383,6 +384,7 @@ async function TotalSponsoredCard({
       isCurrency
       title="Total Sponsored"
       chartConfig={chartConfig}
+      className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
       data={timeSeriesData}
       activeChart={
         (searchParams?.totalSponsored as keyof typeof chartConfig) ?? "mainnet"
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/layout.tsx
index 243249f2987..9f55b41239f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/layout.tsx
@@ -1,5 +1,4 @@
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -41,7 +40,6 @@ export default async function Layout(props: {
           },
         ]}
       >
-        <BillingAlerts className="mb-10" />
         {props.children}
       </SidebarLayout>
     </div>
diff --git a/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx b/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx
index 1af39675ce1..bd7c2d306f8 100644
--- a/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx
+++ b/apps/dashboard/src/app/team/components/Analytics/CombinedBarChartCard.tsx
@@ -8,6 +8,8 @@ type CombinedBarChartConfig<K extends string> = {
   [key in K]: { label: string; color: string };
 };
 
+// TODO - don't reload page on tab change -> make this a client component, load all the charts at once on server and switch between them on client
+
 export function CombinedBarChartCard<
   T extends string,
   K extends Exclude<T, "date">,
@@ -27,6 +29,9 @@ export function CombinedBarChartCard<
         1
       : undefined,
   existingQueryParams,
+  className,
+  hideTabs,
+  description,
 }: {
   title?: string;
   chartConfig: CombinedBarChartConfig<K>;
@@ -37,51 +42,60 @@ export function CombinedBarChartCard<
   aggregateFn?: (d: typeof data, key: K) => number | undefined;
   trendFn?: (d: typeof data, key: K) => number | undefined;
   existingQueryParams?: { [key: string]: string | string[] | undefined };
+  className?: string;
+  hideTabs?: boolean;
+  description?: string;
 }) {
   return (
-    <Card className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0">
+    <Card className={className}>
       <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0">
         {title && (
           <div className="flex flex-1 flex-col justify-center gap-1 p-6">
             <CardTitle className="font-semibold text-lg">{title}</CardTitle>
+            {description && (
+              <p className="text-muted-foreground text-sm"> {description}</p>
+            )}
           </div>
         )}
-        <div className="max-md:no-scrollbar overflow-x-auto border-t">
-          <div className="flex flex-nowrap">
-            {Object.keys(chartConfig).map((chart: string) => {
-              const key = chart as K;
-              return (
-                <Link
-                  href={{
-                    query: {
-                      ...existingQueryParams,
-                      [queryKey]: key,
-                    },
-                  }}
-                  prefetch
-                  scroll={false}
-                  key={chart}
-                  data-active={activeChart === chart}
-                  className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-muted/50"
-                >
-                  <Stat
-                    label={chartConfig[key].label}
-                    value={
-                      isCurrency
-                        ? toUSD(aggregateFn(data, key) ?? 0)
-                        : (aggregateFn(data, key) ?? 0)
-                    }
-                    trend={trendFn(data, key) || undefined}
-                  />
-                  <div
-                    className="absolute right-0 bottom-0 left-0 h-0 bg-foreground transition-all duration-300 ease-out data-[active=true]:h-[3px]"
+
+        {!hideTabs && (
+          <div className="max-md:no-scrollbar overflow-x-auto border-t">
+            <div className="flex flex-nowrap">
+              {Object.keys(chartConfig).map((chart: string) => {
+                const key = chart as K;
+                return (
+                  <Link
+                    href={{
+                      query: {
+                        ...existingQueryParams,
+                        [queryKey]: key,
+                      },
+                    }}
+                    prefetch
+                    scroll={false}
+                    key={chart}
                     data-active={activeChart === chart}
-                  />
-                </Link>
-              );
-            })}
+                    className="relative z-30 flex min-w-[200px] flex-1 flex-col justify-center gap-1 border-l first:border-l-0 hover:bg-muted/50"
+                  >
+                    <Stat
+                      label={chartConfig[key].label}
+                      value={
+                        isCurrency
+                          ? toUSD(aggregateFn(data, key) ?? 0)
+                          : (aggregateFn(data, key) ?? 0)
+                      }
+                      trend={trendFn(data, key) || undefined}
+                    />
+                    <div
+                      className="absolute right-0 bottom-0 left-0 h-0 bg-foreground transition-all duration-300 ease-out data-[active=true]:h-[3px]"
+                      data-active={activeChart === chart}
+                    />
+                  </Link>
+                );
+              })}
+            </div>
           </div>
-        </div>
+        )}
       </CardHeader>
       <CardContent className="px-2 sm:p-6 sm:pl-0">
         <BarChart
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/getValidTeamPlan.tsx b/apps/dashboard/src/app/team/components/TeamHeader/getValidTeamPlan.tsx
index 063d444cf77..0af61b93e0f 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/getValidTeamPlan.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/getValidTeamPlan.tsx
@@ -1,17 +1,9 @@
 import type { Team } from "@/api/team";
 
 export function getValidTeamPlan(team: Team): Team["billingPlan"] {
-  switch (true) {
-    case team.billingPlan === "pro" && team.billingStatus === "validPayment": {
-      return "pro";
-    }
-    case team.billingPlan === "growth" &&
-      team.billingStatus === "validPayment": {
-      return "growth";
-    }
-
-    default: {
-      return "free";
-    }
+  if (team.billingStatus !== "validPayment") {
+    return "free";
   }
+
+  return team.billingPlan;
 }
diff --git a/apps/dashboard/src/components/analytics/empty-chart-state.tsx b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
index dbdbb51f903..9dfd382f935 100644
--- a/apps/dashboard/src/components/analytics/empty-chart-state.tsx
+++ b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
@@ -27,7 +27,7 @@ export function EmptyChartState({ children }: { children?: React.ReactNode }) {
 
   return (
     <div className="relative z-0 h-full w-full">
-      <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center font-semibold text-base text-muted-foreground">
+      <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center font-medium text-base text-muted-foreground">
         {children ?? "No data available"}
       </div>
       <SkeletonBarChart data={barChartData} />
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx
new file mode 100644
index 00000000000..4a7e4783f55
--- /dev/null
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx
@@ -0,0 +1,131 @@
+import type { InAppWalletStats } from "@/api/analytics";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { InAppWalletAuth } from "thirdweb/wallets";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { InAppWalletUsersChartCardUI } from "./InAppWalletUsersChartCard";
+
+const meta = {
+  title: "Charts/InAppWallets",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Component() {
+  const title = "This is Title";
+  const description =
+    "This is an example of a description about in-app wallet usage chart";
+  return (
+    <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+      <BadgeContainer label="30 days">
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={createInAppWalletStatsStub(30)}
+          isPending={false}
+          title={title}
+          description={description}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="60 days">
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={createInAppWalletStatsStub(60)}
+          isPending={false}
+          title={title}
+          description={description}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="10 days">
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={createInAppWalletStatsStub(10)}
+          isPending={false}
+          title={title}
+          description={description}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Empty List">
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={createInAppWalletStatsStub(0)}
+          isPending={false}
+          title={title}
+          description={description}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Pending">
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={[]}
+          isPending={true}
+          title={title}
+          description={description}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+const authMethodsToPickFrom: InAppWalletAuth[] = [
+  "google",
+  "apple",
+  "facebook",
+  "discord",
+  "line",
+  "x",
+  "coinbase",
+  "farcaster",
+  "telegram",
+  "github",
+  "twitch",
+  "steam",
+  "guest",
+  "email",
+  "phone",
+  "passkey",
+  "wallet",
+];
+
+const pickRandomAuthMethod = () => {
+  const picked =
+    authMethodsToPickFrom[
+      Math.floor(Math.random() * authMethodsToPickFrom.length)
+    ] || "google";
+
+  const capitalized = picked.charAt(0).toUpperCase() + picked.slice(1);
+  return capitalized;
+};
+
+function createInAppWalletStatsStub(days: number): InAppWalletStats[] {
+  const stubbedData: InAppWalletStats[] = [];
+
+  let d = days;
+  while (d !== 0) {
+    const uniqueWallets = Math.floor(Math.random() * 100);
+    stubbedData.push({
+      date: new Date(2024, 1, d).toLocaleString(),
+      uniqueWalletsConnected: uniqueWallets,
+      authenticationMethod: pickRandomAuthMethod(),
+    });
+
+    if (Math.random() > 0.7) {
+      d--;
+    }
+  }
+
+  return stubbedData;
+}
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
index 6c775cddcab..18c261e9770 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
@@ -28,9 +28,11 @@ type ChartData = Record<string, number> & {
 };
 const defaultLabel = "Unknown Auth";
 
-export function InAppWalletUsersChartCard(props: {
+export function InAppWalletUsersChartCardUI(props: {
   inAppWalletStats: InAppWalletStats[];
   isPending: boolean;
+  title: string;
+  description: string;
 }) {
   const { inAppWalletStats } = props;
   const topChainsToShow = 10;
@@ -113,32 +115,28 @@ export function InAppWalletUsersChartCard(props: {
 
   return (
     <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
-      <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
-        Unique Users
+      <h3 className="mb-1 font-semibold text-xl tracking-tight">
+        {props.title}
       </h3>
-      <p className="mb-3 text-muted-foreground text-sm">
-        The total number of active in-app wallet users on your project.
-      </p>
-
-      <div className="top-6 right-6 mb-4 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
-        <ExportToCSVButton
-          className="bg-background"
-          fileName="Connect Wallets"
-          disabled={disableActions}
-          getData={async () => {
-            // Shows the number of each type of wallet connected on all dates
-            const header = ["Date", ...uniqueAuthMethods];
-            const rows = chartData.map((data) => {
-              const { time, ...rest } = data;
-              return [
-                time,
-                ...uniqueAuthMethods.map((w) => (rest[w] || 0).toString()),
-              ];
-            });
-            return { header, rows };
-          }}
-        />
-      </div>
+      <p className="mb-3 text-muted-foreground text-sm">{props.description}</p>
+
+      <ExportToCSVButton
+        className="top-6 right-6 mb-4 w-full bg-background md:absolute md:mb-0 md:flex md:w-auto"
+        fileName="Connect Wallets"
+        disabled={disableActions}
+        getData={async () => {
+          // Shows the number of each type of wallet connected on all dates
+          const header = ["Date", ...uniqueAuthMethods];
+          const rows = chartData.map((data) => {
+            const { time, ...rest } = data;
+            return [
+              time,
+              ...uniqueAuthMethods.map((w) => (rest[w] || 0).toString()),
+            ];
+          });
+          return { header, rows };
+        }}
+      />
 
       {/* Chart */}
       <ChartContainer
@@ -150,8 +148,8 @@ export function InAppWalletUsersChartCard(props: {
         ) : chartData.length === 0 ||
           chartData.every((data) => data.sponsoredUsd === 0) ? (
           <EmptyChartState>
-            <div className="flex flex-col items-center justify-center">
-              <span className="mb-6 text-lg">
+            <div className="flex flex-col items-center justify-center px-4">
+              <span className="mb-6 text-center text-lg">
                 Connect users to your app with social logins
               </span>
               <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
@@ -210,6 +208,7 @@ export function InAppWalletUsersChartCard(props: {
               tickLine={false}
               axisLine={false}
               tickFormatter={(value) => formatTickerNumber(value)}
+              tickMargin={10}
             />
 
             <ChartTooltip
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
index 92baeaa62da..6363f9d6440 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
@@ -4,7 +4,7 @@ import {
 } from "components/analytics/date-range-selector";
 import { getInAppWalletUsage } from "data/analytics/wallets/in-app";
 import { RangeSelector } from "../../analytics/range-selector";
-import { InAppWalletUsersChartCard } from "./InAppWalletUsersChartCard";
+import { InAppWalletUsersChartCardUI } from "./InAppWalletUsersChartCard";
 
 export async function InAppWalletAnalytics({
   clientId,
@@ -29,9 +29,11 @@ export async function InAppWalletAnalytics({
       <div className="h-6" />
 
       <div className="flex flex-col gap-4 lg:gap-6">
-        <InAppWalletUsersChartCard
+        <InAppWalletUsersChartCardUI
           inAppWalletStats={stats || []}
           isPending={false}
+          title="Unique Users"
+          description="The total number of active in-app wallet users on your project."
         />
       </div>
     </div>
diff --git a/apps/dashboard/src/components/homepage/sections/FeatureItem.tsx b/apps/dashboard/src/components/homepage/sections/FeatureItem.tsx
index 6fb21364759..6f70f6a58f6 100644
--- a/apps/dashboard/src/components/homepage/sections/FeatureItem.tsx
+++ b/apps/dashboard/src/components/homepage/sections/FeatureItem.tsx
@@ -1,52 +1,29 @@
-import { Flex, Tooltip } from "@chakra-ui/react";
-import { CircleCheckIcon, CircleDollarSignIcon } from "lucide-react";
-import { Card, Text } from "tw-components";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
 
-interface FeatureItemProps {
+type FeatureItemProps = {
   text: string | string[];
-}
+};
 
-export const FeatureItem: React.FC<FeatureItemProps> = ({ text }) => {
+export function FeatureItem({ text }: FeatureItemProps) {
   const titleStr = Array.isArray(text) ? text[0] : text;
 
   return (
-    <Flex gap={2} alignItems="flex-start">
-      <CircleCheckIcon className="size-6 fill-white text-black" />
+    <div className="flex items-center gap-2">
+      <CheckIcon className="size-4 shrink-0 text-green-500" />
       {Array.isArray(text) ? (
-        <Flex alignItems="center" justifyItems="center" gap={2}>
-          <Text>{titleStr}</Text>
-          <Tooltip
-            label={
-              <Card
-                py={2}
-                px={4}
-                bgColor="backgroundHighlight"
-                borderRadius="lg"
-              >
-                <Text size="label.sm" lineHeight={1.5}>
-                  {text[1]}
-                </Text>
-              </Card>
-            }
-            p={0}
-            bg="transparent"
-            boxShadow="none"
-          >
-            <Flex display={{ base: "none", md: "block" }} mb={-0.5}>
-              <CircleDollarSignIcon className="relative size-4 text-blue-500" />
-            </Flex>
-          </Tooltip>
-          <Text
-            className="text-muted-foreground"
-            minW="max-content"
-            display={{ base: "block", md: "none" }}
-          >
-            {text[1]}
-          </Text>
-        </Flex>
+        <div className="flex items-center gap-2">
+          <p className="text-muted-foreground">
+            {titleStr}{" "}
+            <span className="text-muted-foreground md:hidden">{text[1]}</span>
+          </p>
+          <ToolTipLabel label={text[1]}>
+            <CircleDollarSignIcon className="hidden size-4 text-muted-foreground md:block" />
+          </ToolTipLabel>
+        </div>
       ) : (
-        <Text>{titleStr}</Text>
+        <p className="text-muted-foreground">{titleStr}</p>
       )}
-    </Flex>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
index f1fe0e2cf75..b7a05bd6665 100644
--- a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
+++ b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
@@ -1,185 +1,155 @@
+import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
-import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
-import { Box, type CardProps, Flex } from "@chakra-ui/react";
-import {
-  Card,
-  Heading,
-  Text,
-  TrackedLinkButton,
-  type TrackedLinkButtonProps,
-} from "tw-components";
-import { PLANS } from "utils/pricing";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { TEAM_PLANS } from "utils/pricing";
+import { CheckoutButton } from "../../../@/components/billing";
 import { remainingDays } from "../../../utils/date-utils";
 import { FeatureItem } from "./FeatureItem";
-import { UpgradeModal } from "./UpgradeModal";
 
-interface PricingCardProps {
-  name: AccountPlan;
-  ctaProps: TrackedLinkButtonProps;
-  ctaTitle?: string;
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+type PricingCardProps = {
+  team?: Team;
+  billingPlan: Exclude<Team["billingPlan"], "free">;
+  cta?: {
+    hint?: string;
+    title: string;
+    href: string;
+    target?: "_blank";
+    tracking: {
+      category: string;
+      label?: string;
+    };
+    variant?: ButtonProps["variant"];
+  };
   ctaHint?: string;
-  onDashboard?: boolean;
-  cardProps?: CardProps;
   highlighted?: boolean;
   current?: boolean;
   canTrialGrowth?: boolean;
-  size?: "sm" | "lg";
   activeTrialEndsAt?: string;
-}
+};
 
 export const PricingCard: React.FC<PricingCardProps> = ({
-  name,
-  ctaTitle,
-  ctaHint,
-  ctaProps,
-  cardProps,
-  onDashboard,
-  size = "lg",
+  team,
+  billingPlan,
+  cta,
   highlighted = false,
   current = false,
   canTrialGrowth = false,
   activeTrialEndsAt,
 }) => {
-  const plan = PLANS[name];
+  const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
 
   const remainingTrialDays =
     (activeTrialEndsAt ? remainingDays(activeTrialEndsAt) : 0) || 0;
 
-  const content = (
-    <Card
-      w="full"
-      as={Flex}
-      gap={10}
-      flexDir="column"
-      p={{ base: 6, md: 10 }}
-      zIndex={999}
-      background={highlighted ? "black" : "transparent"}
-      borderColor={current ? "blue.500" : "gray.900"}
-      {...cardProps}
+  return (
+    <div
+      className={cn(
+        "z-[999] flex w-full flex-col gap-6 rounded-xl border border-border bg-muted/50 p-4 md:p-6",
+        current && "border-blue-500",
+      )}
+      style={
+        highlighted
+          ? {
+              backgroundImage:
+                "linear-gradient(to top, hsl(var(--muted)) 30%, transparent)",
+            }
+          : undefined
+      }
     >
-      <Flex flexDir="column" gap={6}>
-        <Flex flexDir="column" gap={3}>
-          <div className="flex flex-row items-center gap-2">
-            <Heading
-              as="h3"
-              size={size === "lg" ? "title.lg" : "title.sm"}
-              textTransform="capitalize"
-            >
+      <div className="flex flex-col gap-5">
+        {/* Title + Desc */}
+        <div>
+          <div className="mb-2 flex flex-row items-center gap-2">
+            <h3 className="font-semibold text-2xl capitalize tracking-tight">
               {plan.title}
-            </Heading>
+            </h3>
             {current && <Badge className="capitalize">Current plan</Badge>}
           </div>
-          <Text maxW={320} h={12}>
+          <p className="max-w-[320px] text-muted-foreground">
             {plan.description}
-          </Text>
-        </Flex>
-        <Flex direction="column" gap={0.5}>
-          <Flex alignItems={{ base: "center", md: "flex-end" }} gap={2}>
-            <Heading
-              size={size === "lg" ? "title.2xl" : "title.md"}
-              lineHeight={1}
-            >
+          </p>
+        </div>
+
+        {/* Price */}
+        <div className="flex flex-col gap-0.5">
+          <div className="flex items-center gap-2">
+            <span className="font-semibold text-3xl text-foreground tracking-tight">
               {isCustomPrice ? (
                 plan.price
               ) : canTrialGrowth ? (
                 <>
-                  <Box as="span" textDecor="line-through" opacity={0.4}>
+                  <span className="text-muted-foreground line-through">
                     ${plan.price}
-                  </Box>{" "}
+                  </span>{" "}
                   $0
                 </>
               ) : (
                 `$${plan.price}`
               )}
-            </Heading>
+            </span>
+
+            {!isCustomPrice && (
+              <span className="text-muted-foreground">/ month</span>
+            )}
+          </div>
 
-            {!isCustomPrice && <Text size="body.lg">/ month</Text>}
-          </Flex>
           {remainingTrialDays > 0 && (
-            <Text size="body.sm" fontStyle="italic">
+            <p className="text-muted-foreground text-sm">
               Your free trial will{" "}
               {remainingTrialDays > 1
                 ? `end in ${remainingTrialDays} days.`
                 : "end today."}
-            </Text>
+            </p>
           )}
-        </Flex>
-      </Flex>
-      <Flex
-        flexDir="column"
-        gap={3}
-        grow={1}
-        alignItems="flex-start"
-        className="!text-foreground"
-      >
+        </div>
+      </div>
+
+      <div className="flex grow flex-col items-start gap-2.5 text-foreground">
         {plan.subTitle && (
-          <Text className="!text-foreground" fontWeight="medium">
-            {plan.subTitle}
-          </Text>
+          <p className="font-medium text-foreground">{plan.subTitle}</p>
         )}
 
         {plan.features.map((f) => (
           <FeatureItem key={Array.isArray(f) ? f[0] : f} text={f} />
         ))}
-      </Flex>
-      {name === accountPlan.growth && onDashboard ? (
-        <UpgradeModal
-          name={name}
-          ctaProps={ctaProps}
-          ctaTitle={ctaTitle}
-          ctaHint={ctaHint}
-          canTrialGrowth={canTrialGrowth}
-        />
-      ) : (
-        <Flex flexDir="column" gap={3} position="relative" mb={3}>
-          {ctaTitle && (
-            <>
-              <TrackedLinkButton
-                variant="outline"
-                py={6}
-                label={ctaProps.label ?? name}
-                size={size === "lg" ? "md" : "sm"}
-                {...ctaProps}
+      </div>
+
+      {cta && (
+        <div className="flex flex-col gap-3">
+          {team && billingPlan !== "pro" ? (
+            <CheckoutButton
+              variant={cta.variant || "outline"}
+              teamSlug={team.slug}
+              sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
+            >
+              {cta.title}
+            </CheckoutButton>
+          ) : (
+            <Button variant={cta.variant || "outline"} asChild>
+              <TrackedLinkTW
+                href={cta.href}
+                label={cta.tracking?.label}
+                category={cta.tracking?.category}
+                target={cta.target}
               >
-                {ctaTitle}
-              </TrackedLinkButton>
-              {ctaHint && (
-                <Text
-                  textAlign="center"
-                  size="body.sm"
-                  w="full"
-                  position={{ base: "static", xl: "absolute" }}
-                  top={ctaTitle ? 14 : -9}
-                >
-                  {ctaHint}
-                </Text>
-              )}
-            </>
+                {cta.title}
+              </TrackedLinkTW>
+            </Button>
           )}
-        </Flex>
+
+          {cta.hint && (
+            <p className="text-center text-muted-foreground text-sm">
+              {cta.hint}
+            </p>
+          )}
+        </div>
       )}
-    </Card>
+    </div>
   );
-
-  if (highlighted) {
-    return (
-      <div className="-m-2 relative flex items-center justify-center p-2">
-        <Box
-          position="absolute"
-          bgGradient="linear(to-b, #4DABEE, #692AC1)"
-          top={0}
-          left={0}
-          bottom={0}
-          right={0}
-          borderRadius="3xl"
-          overflow="visible"
-          filter="blur(8px)"
-        />
-        {content}
-      </div>
-    );
-  }
-
-  return content;
 };
diff --git a/apps/dashboard/src/components/homepage/sections/PricingSection.tsx b/apps/dashboard/src/components/homepage/sections/PricingSection.tsx
deleted file mode 100644
index 049fc996f7a..00000000000
--- a/apps/dashboard/src/components/homepage/sections/PricingSection.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
-import { Box, Container, Flex, SimpleGrid } from "@chakra-ui/react";
-import { Heading, Text, TrackedLink } from "tw-components";
-import { CONTACT_US_URL } from "utils/pricing";
-import { PricingCard } from "./PricingCard";
-
-interface PricingSectionProps {
-  trackingCategory: string;
-  onHomepage?: boolean;
-  canTrialGrowth?: boolean;
-}
-
-export const PricingSection: React.FC<PricingSectionProps> = ({
-  trackingCategory,
-  onHomepage,
-  canTrialGrowth,
-}) => {
-  return (
-    <Container maxW="6xl">
-      <Flex flexDir="column" pt={{ base: 8, lg: 24 }} gap={{ base: 8, md: 16 }}>
-        <Flex flexDir="column" gap={6}>
-          <Heading
-            as={onHomepage ? "h2" : "h1"}
-            size={onHomepage ? "display.sm" : "display.md"}
-            textAlign="center"
-            px={{ base: 2, md: 0 }}
-          >
-            Simple, transparent & flexible{" "}
-            <Box bgGradient="linear(to-r, #4DABEE, #692AC1)" bgClip="text">
-              pricing for every team.
-            </Box>
-          </Heading>
-          {onHomepage && (
-            <Text textAlign="center" size="body.lg">
-              Learn more about{" "}
-              <TrackedLink
-                category={trackingCategory}
-                href="/pricing"
-                label="pricing-plans"
-                color="blue.500"
-              >
-                pricing plans
-              </TrackedLink>
-              .
-            </Text>
-          )}
-        </Flex>
-
-        <SimpleGrid columns={{ base: 1, xl: 3 }} gap={{ base: 6, xl: 8 }}>
-          <PricingCard
-            name={accountPlan.free}
-            ctaTitle="Get started for free"
-            ctaProps={{
-              category: trackingCategory,
-              href: "/team/~/~/settings/billing",
-            }}
-          />
-
-          <PricingCard
-            highlighted
-            ctaTitle={
-              canTrialGrowth ? "Claim your 1-month free" : "Get started"
-            }
-            name={accountPlan.growth}
-            ctaHint={
-              canTrialGrowth
-                ? "Your free trial will end after 30 days."
-                : undefined
-            }
-            canTrialGrowth={canTrialGrowth}
-            ctaProps={{
-              category: trackingCategory,
-              label: canTrialGrowth ? "claimGrowthTrial" : undefined,
-              href: "/team/~/~/settings/billing",
-              bgColor: "white",
-              color: "black",
-              _hover: {
-                bgColor: "white",
-                opacity: 0.8,
-              },
-            }}
-          />
-
-          <PricingCard
-            name={accountPlan.pro}
-            ctaTitle="Contact us"
-            ctaProps={{
-              category: trackingCategory,
-              href: CONTACT_US_URL,
-              isExternal: true,
-            }}
-          />
-        </SimpleGrid>
-      </Flex>
-    </Container>
-  );
-};
diff --git a/apps/dashboard/src/components/homepage/sections/UpgradeModal.tsx b/apps/dashboard/src/components/homepage/sections/UpgradeModal.tsx
deleted file mode 100644
index 07c0d74ff87..00000000000
--- a/apps/dashboard/src/components/homepage/sections/UpgradeModal.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import {
-  type AccountPlan,
-  accountPlan,
-  useAccount,
-} from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useEffect } from "react";
-import {
-  Button,
-  Heading,
-  Text,
-  type TrackedLinkButtonProps,
-} from "tw-components";
-import { PLANS } from "utils/pricing";
-import { FeatureItem } from "./FeatureItem";
-
-interface UpgradeModalProps {
-  name: AccountPlan;
-  ctaTitle?: string;
-  ctaHint?: string;
-  ctaProps: TrackedLinkButtonProps;
-  canTrialGrowth?: boolean;
-}
-
-export const UpgradeModal: React.FC<UpgradeModalProps> = ({
-  name,
-  ctaTitle,
-  ctaHint,
-  ctaProps,
-  canTrialGrowth,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const plan = PLANS[name];
-  const account = useAccount();
-  const trackEvent = useTrack();
-
-  // We close the modal when the user is on the Growth plan successfully
-  // FIXME: this needs to be re-worked
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (account.data?.plan === accountPlan.growth) {
-      onClose();
-    }
-  }, [account.data?.plan, onClose]);
-
-  return (
-    <>
-      <Flex flexDir="column" gap={3} position="relative" mb={3}>
-        {ctaTitle && (
-          <Button
-            onClick={() => {
-              trackEvent({
-                category: "account",
-                action: "click",
-                label: "open-upgrade-modal",
-              });
-              onOpen();
-            }}
-            colorScheme="primary"
-          >
-            {ctaTitle}
-          </Button>
-        )}
-        {ctaHint && (
-          <Text
-            textAlign="center"
-            size="body.sm"
-            w="full"
-            position={{ base: "static", xl: "absolute" }}
-            top={ctaTitle ? 14 : -9}
-          >
-            {ctaHint}
-          </Text>
-        )}
-      </Flex>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalHeader>
-            <Heading size="title.md" mt={2}>
-              Are you sure you want to upgrade to the Growth plan?
-            </Heading>
-          </ModalHeader>
-          <ModalBody p={6} as={Flex} gap={4} flexDir="column">
-            <Flex
-              flexDir="column"
-              gap={3}
-              grow={1}
-              alignItems="flex-start"
-              className="!text-foreground"
-            >
-              <Text className="!text-foreground" fontWeight="medium">
-                This entails unlocking exclusive features below:
-              </Text>
-
-              {plan.features.map((f) => (
-                <FeatureItem key={Array.isArray(f) ? f[0] : f} text={f} />
-              ))}
-
-              <Text fontWeight="medium" size="body.md" color="faded" mt={2}>
-                You will be charged $99 per month for the subscription
-                {canTrialGrowth && " after the 30-day trial period"}.
-              </Text>
-            </Flex>
-          </ModalBody>
-          <ModalFooter as={Flex} gap={3}>
-            <Button onClick={onClose} variant="ghost">
-              Cancel
-            </Button>
-            <Button {...ctaProps}>Upgrade</Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
index 672f3c39f4c..bd131b3ed10 100644
--- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
+++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
@@ -1,4 +1,4 @@
-import { accountPlan, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { Flex, FormControl, Input, Textarea } from "@chakra-ui/react";
 import { Select as ChakraSelect } from "chakra-react-select";
 import { ChakraNextImage } from "components/Image";
@@ -8,6 +8,7 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { Button, FormHelperText, FormLabel } from "tw-components";
+import type { Team } from "../../@/api/team";
 import { PlanToCreditsRecord } from "./ApplyForOpCreditsModal";
 
 interface FormSchema {
@@ -26,12 +27,15 @@ interface FormSchema {
 
 interface ApplyForOpCreditsFormProps {
   onClose: () => void;
+  plan: Team["billingPlan"];
+  account: Account;
 }
 
 export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
   onClose,
+  account,
+  plan,
 }) => {
-  const { data: account } = useAccount();
   const [, setHasAppliedForOpGrant] = useLocalStorage(
     `appliedForOpGrant-${account?.id}`,
     false,
@@ -41,7 +45,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
       firstname: "",
       lastname: "",
       thirdweb_account_id: account?.id || "",
-      plan_type: PlanToCreditsRecord[account?.plan || accountPlan.free].title,
+      plan_type: PlanToCreditsRecord[plan].title,
       email: account?.email || "",
       company: "",
       website: "",
@@ -50,7 +54,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
       superchain_chain: "",
       what_would_you_like_to_meet_about_: "",
     }),
-    [account],
+    [account, plan],
   );
 
   const form = useForm<FormSchema>({
diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
index 05bc9d5d467..55f0c5076aa 100644
--- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
+++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
@@ -1,10 +1,5 @@
 import { Badge } from "@/components/ui/badge";
-import {
-  type AccountPlan,
-  accountPlan,
-  accountStatus,
-  useAccount,
-} from "@3rdweb-sdk/react/hooks/useApi";
+import { type Account, accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
 import {
   Alert,
   AlertDescription,
@@ -12,15 +7,15 @@ import {
   Box,
   Flex,
   SimpleGrid,
-  useDisclosure,
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
 import { Button, Card, Heading, Text } from "tw-components";
+import type { Team } from "../../@/api/team";
+import { getValidTeamPlan } from "../../app/team/components/TeamHeader/getValidTeamPlan";
 import { ApplyForOpCreditsForm } from "./ApplyForOpCreditsForm";
-import { LazyOnboardingBilling } from "./LazyOnboardingBilling";
-import { OnboardingModal } from "./Modal";
 import { PlanCard } from "./PlanCard";
 
 export type CreditsRecord = {
@@ -33,14 +28,20 @@ export type CreditsRecord = {
   ctaHref?: string;
 };
 
-export const PlanToCreditsRecord: Record<AccountPlan, CreditsRecord> = {
-  [accountPlan.free]: {
+export const PlanToCreditsRecord: Record<Team["billingPlan"], CreditsRecord> = {
+  free: {
+    title: "Free",
+    upTo: true,
+    credits: "$250",
+    color: "#3b394b",
+  },
+  starter: {
     title: "Starter",
     upTo: true,
     credits: "$250",
     color: "#3b394b",
   },
-  [accountPlan.growth]: {
+  growth: {
     title: "Growth",
     upTo: true,
     credits: "$2,500",
@@ -54,7 +55,7 @@ export const PlanToCreditsRecord: Record<AccountPlan, CreditsRecord> = {
     ctaTitle: "Upgrade for $99",
     ctaHref: "/team/~/~/settings/billing",
   },
-  [accountPlan.pro]: {
+  pro: {
     title: "Pro",
     credits: "$3,000+",
     color: "#282B6F",
@@ -66,22 +67,23 @@ export const PlanToCreditsRecord: Record<AccountPlan, CreditsRecord> = {
     ctaTitle: "Contact Us",
     ctaHref: "https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro",
   },
-  [accountPlan.enterprise]: {
-    title: "Enterprise",
-    credits: "Custom",
-    color: "#000000",
-  },
 };
 
-export const ApplyForOpCreditsModal: React.FC = () => {
-  const paymentMethodModalState = useDisclosure();
+export function ApplyForOpCredits(props: {
+  team: Team;
+  account: Account;
+}) {
+  const { account, team } = props;
+  const validTeamPlan = getValidTeamPlan(team);
+  const hasValidPaymentMethod = validTeamPlan !== "free";
+
   const [page, setPage] = useState<"eligible" | "form">("eligible");
-  const [hasAddedPaymentMethod, setHasAddedPaymentMethod] = useState(false);
-  const account = useAccount();
+
   const [hasAppliedForOpGrant] = useLocalStorage(
-    `appliedForOpGrant-${account?.data?.id || ""}`,
+    `appliedForOpGrant-${team.id}`,
     false,
   );
+
   const trackEvent = useTrack();
 
   // TODO: find better way to track impressions
@@ -94,18 +96,9 @@ export const ApplyForOpCreditsModal: React.FC = () => {
     });
   }, [trackEvent]);
 
-  const hasValidPayment = useMemo(() => {
-    return (
-      !!(account?.data?.status === accountStatus.validPayment) ||
-      hasAddedPaymentMethod
-    );
-  }, [account?.data?.status, hasAddedPaymentMethod]);
-
-  const isFreePlan = account.data?.plan === accountPlan.free;
-  const isProPlan = account.data?.plan === accountPlan.pro;
-
-  const creditsRecord =
-    PlanToCreditsRecord[account.data?.plan || accountPlan.free];
+  const isStarterPlan = validTeamPlan === "starter";
+  const isProPlan = validTeamPlan === "pro";
+  const creditsRecord = PlanToCreditsRecord[validTeamPlan];
 
   return (
     <>
@@ -136,7 +129,7 @@ export const ApplyForOpCreditsModal: React.FC = () => {
               </Flex>
             </Card>
             <Flex gap={4} flexDir="column">
-              {!hasValidPayment && (
+              {!hasValidPaymentMethod && (
                 <Alert
                   status="info"
                   borderRadius="lg"
@@ -152,21 +145,12 @@ export const ApplyForOpCreditsModal: React.FC = () => {
                       You need to add a payment method to be able to claim
                       credits. This is to prevent abuse, you will not be
                       charged.{" "}
-                      <Text
-                        as="span"
-                        onClick={() => {
-                          paymentMethodModalState.onOpen();
-                          trackEvent({
-                            category: "op-sponsorship",
-                            action: "add-payment-method",
-                            label: "open",
-                          });
-                        }}
-                        color="blue.500"
-                        cursor="pointer"
+                      <Link
+                        className="text-link-foreground hover:text-foreground"
+                        href={`/team/${props.team.slug}/~/settings/billing`}
                       >
-                        Add a payment method
-                      </Text>
+                        Upgrade to Starter plan to get started
+                      </Link>
                       .
                     </AlertDescription>
                   </Flex>
@@ -176,7 +160,7 @@ export const ApplyForOpCreditsModal: React.FC = () => {
                 colorScheme="primary"
                 onClick={() => setPage("form")}
                 w="full"
-                isDisabled={!hasValidPayment || hasAppliedForOpGrant}
+                isDisabled={!hasValidPaymentMethod || hasAppliedForOpGrant}
               >
                 {hasAppliedForOpGrant ? "Already applied" : "Apply Now"}
               </Button>
@@ -187,10 +171,10 @@ export const ApplyForOpCreditsModal: React.FC = () => {
                   Or upgrade and get access to more credits:
                 </Text>
                 <SimpleGrid
-                  columns={{ base: 1, md: isFreePlan ? 2 : 1 }}
+                  columns={{ base: 1, md: isStarterPlan ? 2 : 1 }}
                   gap={4}
                 >
-                  {isFreePlan && (
+                  {isStarterPlan && (
                     <PlanCard
                       creditsRecord={PlanToCreditsRecord[accountPlan.growth]}
                     />
@@ -212,30 +196,10 @@ export const ApplyForOpCreditsModal: React.FC = () => {
           onClose={() => {
             setPage("eligible");
           }}
+          plan={validTeamPlan}
+          account={account}
         />
       )}
-      {/* // Add Payment Method Modal */}
-      <OnboardingModal isOpen={paymentMethodModalState.isOpen}>
-        <LazyOnboardingBilling
-          onSave={() => {
-            setHasAddedPaymentMethod(true);
-            paymentMethodModalState.onClose();
-            trackEvent({
-              category: "op-sponsorship",
-              action: "add-payment-method",
-              label: "success",
-            });
-          }}
-          onCancel={() => {
-            paymentMethodModalState.onClose();
-            trackEvent({
-              category: "op-sponsorship",
-              action: "add-payment-method",
-              label: "cancel",
-            });
-          }}
-        />
-      </OnboardingModal>
     </>
   );
-};
+}
diff --git a/apps/dashboard/src/components/onboarding/Billing.tsx b/apps/dashboard/src/components/onboarding/Billing.tsx
deleted file mode 100644
index 5477e91b942..00000000000
--- a/apps/dashboard/src/components/onboarding/Billing.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { accountKeys } from "@3rdweb-sdk/react/cache-keys";
-import { useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Elements } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
-import { useQueryClient } from "@tanstack/react-query";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTheme } from "next-themes";
-import { OnboardingPaymentForm } from "./PaymentForm";
-import { TitleAndDescription } from "./Title";
-
-// only load stripe if the key is available
-const stripePromise = process.env.NEXT_PUBLIC_STRIPE_KEY
-  ? loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY)
-  : null;
-
-interface OnboardingBillingProps {
-  onSave: () => void;
-  onCancel: () => void;
-}
-
-const OnboardingBilling: React.FC<OnboardingBillingProps> = ({
-  onSave,
-  onCancel,
-}) => {
-  const { theme } = useTheme();
-  const trackEvent = useTrack();
-  const queryClient = useQueryClient();
-  const { user } = useLoggedInUser();
-
-  const mutation = useUpdateAccount();
-
-  const handleCancel = () => {
-    trackEvent({
-      category: "account",
-      action: "onboardSkippedBilling",
-      label: "attempt",
-    });
-
-    mutation.mutate(
-      {
-        onboardSkipped: true,
-      },
-      {
-        onSuccess: () => {
-          trackEvent({
-            category: "account",
-            action: "onboardSkippedBilling",
-            label: "success",
-          });
-        },
-        onError: (error) => {
-          trackEvent({
-            category: "account",
-            action: "onboardSkippedBilling",
-            label: "error",
-            error,
-          });
-        },
-      },
-    );
-
-    onCancel();
-  };
-
-  return (
-    <div>
-      <TitleAndDescription
-        heading="Add a payment method"
-        description="thirdweb is free to get started. Add a payment method to prevent service interruptions when you exceed limits."
-      />
-      <div className="h-4" />
-      <Elements
-        stripe={stripePromise}
-        options={{
-          mode: "setup",
-          paymentMethodCreation: "manual",
-          currency: "usd",
-          paymentMethodConfiguration:
-            process.env.NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID,
-          appearance: {
-            theme: theme === "dark" ? "night" : "stripe",
-            ...appearance,
-          },
-        }}
-      >
-        <OnboardingPaymentForm
-          onSave={() => {
-            queryClient.invalidateQueries({
-              queryKey: accountKeys.me(user?.address as string),
-            });
-            onSave();
-          }}
-          onCancel={handleCancel}
-        />
-      </Elements>
-    </div>
-  );
-};
-
-export default OnboardingBilling;
-
-const appearance = {
-  variables: {
-    fontFamily: "Inter, system-ui, sans-serif",
-    fontSizeBase: "15px",
-    colorPrimary: "rgb(51, 133, 255)",
-    colorDanger: "#FCA5A5",
-    spacingUnit: "4px",
-  },
-  rules: {
-    ".Input": {
-      boxShadow: "none",
-      backgroundColor: "transparent",
-    },
-    ".Input:hover": {
-      borderColor: "rgb(51, 133, 255)",
-      boxShadow: "none",
-    },
-    ".Label": {
-      marginBottom: "12px",
-      fontWeight: "500",
-    },
-  },
-};
diff --git a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx
index 65689e58ce4..6b686bc4c77 100644
--- a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx
+++ b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx
@@ -1,118 +1,58 @@
-import {
-  type AccountPlan,
-  accountPlan,
-  useUpdateAccountPlan,
-} from "@3rdweb-sdk/react/hooks/useApi";
+import { Button } from "@/components/ui/button";
 import { PricingCard } from "components/homepage/sections/PricingCard";
-import { useTrack } from "hooks/analytics/useTrack";
+import { ArrowRightIcon } from "lucide-react";
 import { TitleAndDescription } from "./Title";
 
-interface OnboardingChoosePlanProps {
-  onSave: () => void;
-}
-
-const OnboardingChoosePlan: React.FC<OnboardingChoosePlanProps> = ({
-  onSave,
-}) => {
-  const trackEvent = useTrack();
-  const mutation = useUpdateAccountPlan();
-
-  const handleSave = (plan: AccountPlan) => {
-    trackEvent({
-      category: "account",
-      action: "choosePlan",
-      label: "attempt",
-    });
-
-    // free is default, so no need to update account
-    if (plan === accountPlan.free) {
-      trackEvent({
-        category: "account",
-        action: "choosePlan",
-        label: "success",
-        data: {
-          plan,
-        },
-      });
-
-      onSave();
-      return;
-    }
-
-    mutation.mutate(
-      {
-        plan,
-      },
-      {
-        onSuccess: () => {
-          onSave();
-
-          trackEvent({
-            category: "account",
-            action: "choosePlan",
-            label: "success",
-            data: {
-              plan,
-            },
-          });
-        },
-        onError: (error) => {
-          trackEvent({
-            category: "account",
-            action: "choosePlan",
-            label: "error",
-            error,
-          });
-        },
-      },
-    );
-  };
-
+function OnboardingChoosePlan(props: {
+  skipPlan: () => void;
+  canTrialGrowth: boolean;
+}) {
   return (
-    <>
+    <div>
       <TitleAndDescription
         heading="Choose your plan"
         description="Get started for free with our Starter plan or subscribe to Growth plan to unlock higher rate limits and advanced features."
       />
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+
+      <Button
+        variant="ghost"
+        onClick={props.skipPlan}
+        className="absolute top-4 right-4 inline-flex items-center gap-2"
+      >
+        Continue with free plan <ArrowRightIcon className="size-4" />
+      </Button>
+
+      <div className="h-4" />
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <PricingCard
-          size="sm"
-          name={accountPlan.free}
-          ctaTitle="Get started for free"
-          ctaProps={{
-            category: "account",
-            onClick: (e) => {
-              e.preventDefault();
-              handleSave(accountPlan.free);
+          billingPlan="starter"
+          cta={{
+            title: "Get started for free",
+            href: "/team/~/billing/subscribe/plan:starter",
+            tracking: {
+              category: "account",
             },
-            label: "freePlan",
-            href: "/",
           }}
-          onDashboard
         />
 
         <PricingCard
-          size="sm"
-          ctaTitle="Claim your 1-month free"
-          name={accountPlan.growth}
-          ctaHint="Your free trial will end after 30 days."
-          canTrialGrowth={true}
-          ctaProps={{
-            category: "account",
-            label: "growthPlan",
-            onClick: (e) => {
-              e.preventDefault();
-              handleSave(accountPlan.growth);
+          billingPlan="growth"
+          cta={{
+            title: "Claim your 1-month free",
+            hint: "Your free trial will end after 30 days.",
+            tracking: {
+              category: "account",
+              label: "growthPlan",
             },
-            href: "/",
-            variant: "solid",
-            colorScheme: "blue",
+            href: "/team/~/billing/subscribe/plan:growth",
+            variant: "default",
           }}
-          onDashboard
+          canTrialGrowth={props.canTrialGrowth}
         />
       </div>
-    </>
+    </div>
   );
-};
+}
 
 export default OnboardingChoosePlan;
diff --git a/apps/dashboard/src/components/onboarding/LazyOnboardingBilling.tsx b/apps/dashboard/src/components/onboarding/LazyOnboardingBilling.tsx
deleted file mode 100644
index b5d01a8a19a..00000000000
--- a/apps/dashboard/src/components/onboarding/LazyOnboardingBilling.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import dynamic from "next/dynamic";
-
-export const LazyOnboardingBilling = dynamic(() => import("./Billing"), {
-  loading: () => (
-    <div className="flex h-[300px] items-center justify-center">
-      <Spinner className="size-5" />
-    </div>
-  ),
-});
diff --git a/apps/dashboard/src/components/onboarding/Modal.tsx b/apps/dashboard/src/components/onboarding/Modal.tsx
index 9c3e2c61467..48816c59d2d 100644
--- a/apps/dashboard/src/components/onboarding/Modal.tsx
+++ b/apps/dashboard/src/components/onboarding/Modal.tsx
@@ -3,14 +3,14 @@ import { cn } from "@/lib/utils";
 import { IconLogo } from "components/logo";
 import type { ComponentWithChildren } from "types/component-with-children";
 
-interface OnboardingModalProps {
+interface TWModalProps {
   isOpen: boolean;
   wide?: boolean;
   // Pass this props to make the modal closable (it will enable backdrop + the "x" icon)
   onOpenChange?: (open: boolean) => void;
 }
 
-export const OnboardingModal: ComponentWithChildren<OnboardingModalProps> = ({
+export const TWModal: ComponentWithChildren<TWModalProps> = ({
   children,
   isOpen,
   wide,
diff --git a/apps/dashboard/src/components/onboarding/PaymentForm.tsx b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
deleted file mode 100644
index 6fe0b8e5a9a..00000000000
--- a/apps/dashboard/src/components/onboarding/PaymentForm.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { useCreatePaymentMethod } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  PaymentElement,
-  useElements,
-  useStripe,
-} from "@stripe/react-stripe-js";
-import { PaymentVerificationFailureAlert } from "components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert";
-import { useErrorHandler } from "contexts/error-handler";
-import { useTrack } from "hooks/analytics/useTrack";
-import { type FormEvent, useState } from "react";
-
-interface OnboardingPaymentForm {
-  onSave: () => void;
-  onCancel: () => void;
-}
-
-export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
-  onSave,
-  onCancel,
-}) => {
-  const stripe = useStripe();
-  const elements = useElements();
-  const trackEvent = useTrack();
-  const { onError } = useErrorHandler();
-  const [paymentFailureCode, setPaymentFailureCode] = useState("");
-
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  const mutation = useCreatePaymentMethod();
-
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (!stripe || !elements) {
-      return;
-    }
-
-    setSaving(true);
-
-    const { error: submitError } = await elements.submit();
-    if (submitError) {
-      setSaving(false);
-      if (submitError.code) {
-        return setPaymentFailureCode(submitError.code);
-      }
-      return onError(submitError);
-    }
-
-    const { error: createError, paymentMethod } =
-      await stripe.createPaymentMethod({
-        elements,
-      });
-
-    if (createError) {
-      setSaving(false);
-      return onError(createError);
-    }
-
-    trackEvent({
-      category: "account",
-      action: "addPaymentMethod",
-      label: "attempt",
-    });
-
-    mutation.mutate(paymentMethod.id, {
-      onSuccess: () => {
-        onSave();
-        setPaymentFailureCode("");
-        setSaving(false);
-
-        trackEvent({
-          category: "account",
-          action: "addPaymentMethod",
-          label: "success",
-        });
-      },
-      // biome-ignore lint/suspicious/noExplicitAny: FIXME
-      onError: (error: any) => {
-        const failureCode = error?.message;
-        setPaymentFailureCode(failureCode || "generic_decline");
-        setSaving(false);
-
-        trackEvent({
-          category: "account",
-          action: "addPaymentMethod",
-          label: "error",
-          error: failureCode,
-        });
-      },
-    });
-  };
-
-  return (
-    <form id="payment-form" onSubmit={handleSubmit}>
-      <div className="flex flex-col gap-6">
-        <PaymentElement
-          onLoaderStart={() => setLoading(false)}
-          options={{ terms: { card: "never" } }}
-        />
-
-        {loading ? (
-          <div className="flex min-h-[100px] items-center justify-center">
-            <Spinner className="size-5" />
-          </div>
-        ) : (
-          <div className="flex flex-col gap-6">
-            {paymentFailureCode ? (
-              <PaymentVerificationFailureAlert
-                paymentFailureCode={paymentFailureCode}
-              />
-            ) : (
-              <Alert variant="info">
-                <AlertTitle className="text-sm">
-                  A temporary hold will be placed and immediately released on
-                  your payment method.
-                </AlertTitle>
-              </Alert>
-            )}
-
-            <div className="flex justify-end gap-4">
-              <Button variant="outline" onClick={onCancel} disabled={saving}>
-                I'll do this later
-              </Button>
-
-              <Button className="gap-2" type="submit" disabled={!stripe}>
-                {loading && <Spinner className="size-4" />}
-                Add payment
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-    </form>
-  );
-};
diff --git a/apps/dashboard/src/components/onboarding/index.tsx b/apps/dashboard/src/components/onboarding/index.tsx
index c5b4ca86f78..2bde307f48a 100644
--- a/apps/dashboard/src/components/onboarding/index.tsx
+++ b/apps/dashboard/src/components/onboarding/index.tsx
@@ -13,7 +13,6 @@ import {
 import { useActiveWallet } from "thirdweb/react";
 import { useTrack } from "../../hooks/analytics/useTrack";
 import type { OnboardingState } from "./types";
-import { skipBilling } from "./utils";
 
 const LazyOnboardingUI = lazy(() => import("./on-boarding-ui.client"));
 
@@ -73,7 +72,7 @@ export const Onboarding: React.FC<{
       setState("skipped");
     }
     // user hasn't skipped onboarding, has valid email and no valid payment yet
-    else if (!skipBilling(account)) {
+    else if (!account.onboardSkipped) {
       setState("plan");
     }
   }, [account, state, wallet]);
@@ -82,11 +81,6 @@ export const Onboarding: React.FC<{
     return null;
   }
 
-  if (state === "billing" && !process.env.NEXT_PUBLIC_STRIPE_KEY) {
-    // can't do billing without stripe key
-    return null;
-  }
-
   // if we somehow get into this state, do not render anything
   if (state === "onboarding" && account.emailConfirmedAt) {
     console.error("Onboarding state is invalid, skipping rendering");
@@ -99,17 +93,6 @@ export const Onboarding: React.FC<{
     return null;
   }
 
-  if (state === "billing" && skipBilling(account)) {
-    console.error("Billing state is invalid, skipping rendering");
-    trackEvent({
-      category: "account",
-      action: "onboardingStateInvalid",
-      label: "billing",
-      data: { state, skipBilling },
-    });
-    return null;
-  }
-
   return (
     <Suspense fallback={null}>
       <LazyOnboardingUI
diff --git a/apps/dashboard/src/components/onboarding/on-boarding-ui.client.tsx b/apps/dashboard/src/components/onboarding/on-boarding-ui.client.tsx
index 0777e43c109..d18d4922513 100644
--- a/apps/dashboard/src/components/onboarding/on-boarding-ui.client.tsx
+++ b/apps/dashboard/src/components/onboarding/on-boarding-ui.client.tsx
@@ -5,10 +5,9 @@ import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { Suspense, lazy, useState } from "react";
 import { ChakraProviderSetup } from "../../@/components/ChakraProviderSetup";
 import { useTrack } from "../../hooks/analytics/useTrack";
-import { LazyOnboardingBilling } from "./LazyOnboardingBilling";
-import { OnboardingModal } from "./Modal";
+import { TWModal } from "./Modal";
 import type { OnboardingState } from "./types";
-import { skipBilling } from "./utils";
+import { useSkipOnboarding } from "./useSkipOnboarding";
 
 const OnboardingConfirmEmail = lazy(() => import("./ConfirmEmail"));
 const OnboardingLinkWallet = lazy(() => import("./LinkWallet"));
@@ -24,6 +23,7 @@ function OnboardingUI(props: {
   const trackEvent = useTrack();
   const { account, state, setState, onOpenChange } = props;
   const [updatedEmail, setUpdatedEmail] = useState<string | undefined>();
+  const skipOnboarding = useSkipOnboarding();
 
   const handleSave = (email?: string) => {
     // if account is not ready yet we cannot do anything here
@@ -41,8 +41,9 @@ function OnboardingUI(props: {
         nextStep = "confirmLinking";
         break;
       case "confirming":
+        // after confirming, only show plan if user has not skipped onboarding earlier or trial period has ended
         nextStep =
-          skipBilling(account) || account?.trialPeriodEndedAt
+          account.onboardSkipped || account?.trialPeriodEndedAt
             ? "skipped"
             : "plan";
         break;
@@ -50,9 +51,6 @@ function OnboardingUI(props: {
         nextStep = "skipped";
         break;
       case "plan":
-        nextStep = "billing";
-        break;
-      case "billing":
         nextStep = "skipped";
         break;
       default:
@@ -95,7 +93,7 @@ function OnboardingUI(props: {
 
   return (
     <ChakraProviderSetup>
-      <OnboardingModal
+      <TWModal
         isOpen={!!state}
         wide={state === "plan"}
         onOpenChange={onOpenChange}
@@ -142,17 +140,16 @@ function OnboardingUI(props: {
 
         {state === "plan" && (
           <Suspense fallback={<Loading />}>
-            <OnboardingChoosePlan onSave={handleSave} />
+            <OnboardingChoosePlan
+              skipPlan={() => {
+                setState("skipped");
+                skipOnboarding();
+              }}
+              canTrialGrowth={!account.trialPeriodEndedAt}
+            />
           </Suspense>
         )}
-
-        {state === "billing" && (
-          <LazyOnboardingBilling
-            onSave={handleSave}
-            onCancel={() => setState("skipped")}
-          />
-        )}
-      </OnboardingModal>
+      </TWModal>
     </ChakraProviderSetup>
   );
 }
diff --git a/apps/dashboard/src/components/onboarding/types.ts b/apps/dashboard/src/components/onboarding/types.ts
index 3bdad470925..ca814393d62 100644
--- a/apps/dashboard/src/components/onboarding/types.ts
+++ b/apps/dashboard/src/components/onboarding/types.ts
@@ -4,6 +4,5 @@ export type OnboardingState =
   | "confirming"
   | "confirmLinking"
   | "plan"
-  | "billing"
   | "skipped"
   | undefined;
diff --git a/apps/dashboard/src/components/onboarding/useSkipOnboarding.tsx b/apps/dashboard/src/components/onboarding/useSkipOnboarding.tsx
new file mode 100644
index 00000000000..eb0928d309d
--- /dev/null
+++ b/apps/dashboard/src/components/onboarding/useSkipOnboarding.tsx
@@ -0,0 +1,40 @@
+import { useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import { useTrack } from "../../hooks/analytics/useTrack";
+
+export function useSkipOnboarding() {
+  const mutation = useUpdateAccount();
+  const trackEvent = useTrack();
+
+  async function skipOnboarding() {
+    trackEvent({
+      category: "account",
+      action: "onboardSkippedBilling",
+      label: "attempt",
+    });
+
+    return mutation.mutateAsync(
+      {
+        onboardSkipped: true,
+      },
+      {
+        onSuccess: () => {
+          trackEvent({
+            category: "account",
+            action: "onboardSkippedBilling",
+            label: "success",
+          });
+        },
+        onError: (error) => {
+          trackEvent({
+            category: "account",
+            action: "onboardSkippedBilling",
+            label: "error",
+            error,
+          });
+        },
+      },
+    );
+  }
+
+  return skipOnboarding;
+}
diff --git a/apps/dashboard/src/components/onboarding/utils.ts b/apps/dashboard/src/components/onboarding/utils.ts
deleted file mode 100644
index c8ca0e2899c..00000000000
--- a/apps/dashboard/src/components/onboarding/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type Account, accountStatus } from "@3rdweb-sdk/react/hooks/useApi";
-
-export const skipBilling = (account: Account) => {
-  return (
-    account.status === accountStatus.validPayment ||
-    account.status === accountStatus.paymentVerification ||
-    account.onboardSkipped
-  );
-};
diff --git a/apps/dashboard/src/components/settings/Account/AccountForm.tsx b/apps/dashboard/src/components/settings/Account/AccountForm.tsx
index 02f9b31d32f..ca826d681c7 100644
--- a/apps/dashboard/src/components/settings/Account/AccountForm.tsx
+++ b/apps/dashboard/src/components/settings/Account/AccountForm.tsx
@@ -3,7 +3,6 @@ import { cn } from "@/lib/utils";
 import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { Flex, FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { type ChangeEvent, useState } from "react";
@@ -26,7 +25,6 @@ interface AccountFormProps {
   account: Account;
   horizontal?: boolean;
   previewEnabled?: boolean;
-  showBillingButton?: boolean;
   showSubscription?: boolean;
   hideName?: boolean;
   buttonProps?: ButtonProps;
@@ -47,7 +45,6 @@ export const AccountForm: React.FC<AccountFormProps> = ({
   horizontal = false,
   previewEnabled = false,
   hideName = false,
-  showBillingButton = false,
   showSubscription = false,
   disableUnchanged = false,
   padded = true,
@@ -221,11 +218,9 @@ export const AccountForm: React.FC<AccountFormProps> = ({
         <div
           className={cn(
             "flex w-full flex-row items-center gap-2",
-            showBillingButton ? "justify-between" : "justify-end",
+            "justify-end",
           )}
         >
-          {showBillingButton && <ManageBillingButton account={account} />}
-
           {!previewEnabled && (
             <Button
               {...buttonProps}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/ApplyCouponCard.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/ApplyCouponCard.stories.tsx
index 2c24e69e214..adfc2faf100 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/ApplyCouponCard.stories.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/ApplyCouponCard.stories.tsx
@@ -60,7 +60,6 @@ function Story() {
           onCouponApplied={undefined}
           prefillPromoCode="XYZ"
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
 
@@ -69,9 +68,6 @@ function Story() {
           submit={statusStub(200)}
           onCouponApplied={undefined}
           isPaymentSetup={false}
-          onAddPayment={() => {
-            console.log("show payment modal");
-          }}
         />
       </BadgeContainer>
 
@@ -80,7 +76,6 @@ function Story() {
           submit={statusStub(200)}
           onCouponApplied={undefined}
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
 
@@ -89,7 +84,6 @@ function Story() {
           submit={statusStub(400)}
           onCouponApplied={undefined}
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
 
@@ -98,7 +92,6 @@ function Story() {
           submit={statusStub(401)}
           onCouponApplied={undefined}
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
 
@@ -107,7 +100,6 @@ function Story() {
           submit={statusStub(409)}
           onCouponApplied={undefined}
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
 
@@ -116,7 +108,6 @@ function Story() {
           submit={statusStub(429)}
           onCouponApplied={undefined}
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
 
@@ -125,7 +116,6 @@ function Story() {
           submit={statusStub(500)}
           onCouponApplied={undefined}
           isPaymentSetup={true}
-          onAddPayment={() => {}}
         />
       </BadgeContainer>
       <Toaster richColors />
diff --git a/apps/dashboard/src/components/settings/Account/Billing/BillingPricing.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/BillingPricing.stories.tsx
new file mode 100644
index 00000000000..aa100f9c7c2
--- /dev/null
+++ b/apps/dashboard/src/components/settings/Account/Billing/BillingPricing.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { teamStub } from "../../../../stories/stubs";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { BillingPricing } from "./Pricing";
+
+const meta = {
+  title: "Billing/PricingCards",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1132px] flex-col gap-12 py-10">
+      <BadgeContainer label="Free">
+        <BillingPricing
+          team={teamStub("foo", "free")}
+          trialPeriodEndedAt={undefined}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Starter">
+        <BillingPricing
+          team={teamStub("foo", "starter")}
+          trialPeriodEndedAt={undefined}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Growth">
+        <BillingPricing
+          team={teamStub("foo", "growth")}
+          trialPeriodEndedAt={undefined}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Pro">
+        <BillingPricing
+          team={teamStub("foo", "pro")}
+          trialPeriodEndedAt={undefined}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx b/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx
index 00dd244c40e..4b245914f79 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx
@@ -2,6 +2,7 @@
 
 import { DangerSettingCard } from "@/components/blocks/DangerSettingCard";
 import { SettingsCard } from "@/components/blocks/SettingsCard";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Form,
   FormControl,
@@ -11,7 +12,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Spinner } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { format, fromUnixTime } from "date-fns";
@@ -53,7 +53,6 @@ function ApplyCouponCard(props: {
     isFreeWalletsCoupon: boolean,
   ) => void;
   isPaymentSetup: boolean;
-  onAddPayment: () => void;
 }) {
   const searchParams = useSearchParams();
   const couponCode = searchParams?.get("coupon");
@@ -63,7 +62,6 @@ function ApplyCouponCard(props: {
       prefillPromoCode={couponCode || undefined}
       scrollIntoView={!!couponCode}
       isPaymentSetup={props.isPaymentSetup}
-      onAddPayment={props.onAddPayment}
       submit={async (promoCode: string) => {
         const res = await fetch("/api/server-proxy/api/v1/coupons/redeem", {
           method: "POST",
@@ -108,7 +106,6 @@ export function ApplyCouponCardUI(props: {
   prefillPromoCode?: string;
   scrollIntoView?: boolean;
   isPaymentSetup: boolean;
-  onAddPayment: () => void;
 }) {
   const containerRef = useRef<HTMLFormElement | null>(null);
   const form = useForm<z.infer<typeof couponFormSchema>>({
@@ -137,7 +134,6 @@ export function ApplyCouponCardUI(props: {
 
   async function onSubmit(values: z.infer<typeof couponFormSchema>) {
     if (!props.isPaymentSetup) {
-      props.onAddPayment();
       return;
     }
 
@@ -199,11 +195,11 @@ export function ApplyCouponCardUI(props: {
           bottomText={
             props.isPaymentSetup
               ? ""
-              : "A valid payment method must be added to apply a coupon"
+              : "A valid payment method must be added to apply a coupon."
           }
           saveButton={{
             variant: "default",
-            disabled: false,
+            disabled: !props.isPaymentSetup,
             isPending: applyCoupon.isPending,
             label: "Apply Coupon",
             type: "submit",
@@ -220,7 +216,11 @@ export function ApplyCouponCardUI(props: {
               <FormItem>
                 <FormLabel>Coupon Code</FormLabel>
                 <FormControl>
-                  <Input {...field} className="lg:max-w-[450px]" />
+                  <Input
+                    {...field}
+                    className="lg:max-w-[450px]"
+                    disabled={!props.isPaymentSetup}
+                  />
                 </FormControl>
               </FormItem>
             )}
@@ -280,7 +280,6 @@ export function CouponDetailsCardUI(props: {
 export function CouponSection(props: {
   teamId: string | undefined;
   isPaymentSetup: boolean;
-  onAddPayment: () => void;
 }) {
   const [showShareModal, setShowShareModal] = useState(false);
   const loggedInUser = useLoggedInUser();
@@ -372,7 +371,6 @@ export function CouponSection(props: {
               });
             }}
             isPaymentSetup={props.isPaymentSetup}
-            onAddPayment={props.onAddPayment}
           />
         </Suspense>
       )}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
index 7ea5a4041fc..3418bdb6066 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
@@ -43,7 +43,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
   }
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border border-border bg-muted/50 p-4">
+    <div className="flex flex-col gap-2 rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
       <div className="relative">
         <div className="absolute top-0 right-0">
           {isOpCredit ? (
@@ -69,10 +69,12 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
           ) : null}
         </div>
 
-        <h3 className="text-foreground">{creditTitle}</h3>
+        <h3 className="text-foreground text-xl tracking-tight">
+          {creditTitle}
+        </h3>
       </div>
 
-      <div className="flex gap-4">
+      <div className="mt-1 flex gap-6">
         <div>
           <h4 className="font-medium text-muted-foreground text-sm">
             Remaining Credits
diff --git a/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx b/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
deleted file mode 100644
index 2ae0f15c75c..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Textarea,
-} from "@chakra-ui/react";
-import { ChevronDownIcon, XIcon } from "lucide-react";
-import { useRef, useState } from "react";
-import { Button, Text } from "tw-components";
-
-const DOWNGRADE_OPTIONS = {
-  customer_service: "Not happy with customer service",
-  low_quality: "Low quality products",
-  missing_features: "Missing features",
-  switched_service: "Switched to another service",
-  too_complex: "Too complex",
-  too_expensive: "Too expensive",
-  unused: "No longer in use",
-  other: "Other",
-};
-
-interface BillingDowngradeDialogProps {
-  oldPlan: string;
-  newPlan: string;
-  oldPlanFeatures: Array<string | string[]>;
-  loading: boolean;
-  onClose: () => void;
-  onConfirm: (feedback: string) => void;
-}
-
-export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
-  oldPlan,
-  newPlan,
-  oldPlanFeatures,
-  loading,
-  onClose,
-  onConfirm,
-}) => {
-  const cancelRef = useRef<HTMLButtonElement>(null);
-  const [feedback, setFeedback] = useState("");
-  const [otherFeedback, setOtherFeedback] = useState("");
-
-  return (
-    // @ts-expect-error - this works fine
-    <AlertDialog isOpen leastDestructiveRef={cancelRef} onClose={onClose}>
-      <AlertDialogOverlay>
-        <AlertDialogContent minW={{ base: "auto", md: "lg" }}>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            Are you sure you want to downgrade to {newPlan} plan?
-          </AlertDialogHeader>
-
-          <AlertDialogBody>
-            <Flex flexDir="column" gap={8}>
-              <Flex flexDir="column" gap={4}>
-                <Text>
-                  You will lose access to these features & rate limits:
-                </Text>
-                <Flex flexDir="column" gap={2}>
-                  {oldPlanFeatures.map((feat) => (
-                    <div
-                      className="flex flex-row items-center gap-2"
-                      key={Array.isArray(feat) ? feat[0] : feat}
-                    >
-                      <XIcon className="size-4 text-destructive-text" />
-                      <Text>{Array.isArray(feat) ? feat[0] : feat}</Text>
-                    </div>
-                  ))}
-                </Flex>
-              </Flex>
-
-              <Flex flexDir="column" gap={4}>
-                <Text>Why are you downgrading?</Text>
-                <Menu>
-                  {({ isOpen }) => (
-                    <>
-                      <MenuButton
-                        isActive={isOpen}
-                        as={Button}
-                        variant="outline"
-                        w="full"
-                        fontSize="small"
-                        textAlign="left"
-                        rightIcon={<ChevronDownIcon className="size-4" />}
-                      >
-                        {feedback
-                          ? DOWNGRADE_OPTIONS[
-                              feedback as keyof typeof DOWNGRADE_OPTIONS
-                            ]
-                          : "Choose reason"}
-                      </MenuButton>
-                      <MenuList>
-                        {Object.keys(DOWNGRADE_OPTIONS).map((reason) => (
-                          <MenuItem
-                            key={reason}
-                            value={reason}
-                            onClick={() => setFeedback(reason)}
-                          >
-                            {
-                              DOWNGRADE_OPTIONS[
-                                reason as keyof typeof DOWNGRADE_OPTIONS
-                              ]
-                            }
-                          </MenuItem>
-                        ))}
-                      </MenuList>
-                    </>
-                  )}
-                </Menu>
-                {feedback === "other" && (
-                  <Textarea
-                    value={otherFeedback}
-                    onChange={(e) => setOtherFeedback(e.target.value)}
-                    placeholder="Please specify the reason."
-                  />
-                )}
-              </Flex>
-            </Flex>
-          </AlertDialogBody>
-
-          <AlertDialogFooter>
-            <div className="flex flex-row items-center gap-3">
-              <Button
-                onClick={() =>
-                  onConfirm(feedback === "other" ? otherFeedback : feedback)
-                }
-                isLoading={loading}
-                isDisabled={
-                  !feedback.length || (feedback === "other" && !otherFeedback)
-                }
-                size="sm"
-                variant="outline"
-              >
-                Downgrade to {newPlan}
-              </Button>
-              <Button ref={cancelRef} onClick={onClose} size="sm">
-                Keep {oldPlan} plan
-              </Button>
-            </div>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialogOverlay>
-    </AlertDialog>
-  );
-};
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Header.tsx b/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
deleted file mode 100644
index a951911c51b..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Flex } from "@chakra-ui/react";
-import { AlertCircleIcon, CheckCircleIcon, InfoIcon } from "lucide-react";
-import { Text } from "tw-components";
-
-interface BillingHeaderProps {
-  validPayment: boolean;
-  paymentVerification: boolean;
-}
-
-export const BillingHeader: React.FC<BillingHeaderProps> = ({
-  validPayment,
-  paymentVerification,
-}) => {
-  return (
-    <Flex direction="column" gap={1}>
-      <h1 className="font-semibold text-xl tracking-tight">Billing Info</h1>
-
-      <div className="flex flex-row items-center gap-2">
-        <Text size="body.md">
-          Manage your payment methods, billing information and invoices.
-        </Text>
-
-        <Badge className="capitalize" variant="outline">
-          <span className="flex flex-row items-center gap-2">
-            <Icon
-              validPayment={validPayment}
-              paymentVerification={paymentVerification}
-            />
-            <Text size="label.sm" as="span">
-              {validPayment
-                ? "Valid payment"
-                : paymentVerification
-                  ? "Needs verification"
-                  : "Invalid payment"}
-            </Text>
-          </span>
-        </Badge>
-      </div>
-    </Flex>
-  );
-};
-
-function Icon(props: {
-  validPayment: boolean;
-  paymentVerification: boolean;
-}) {
-  if (props.validPayment) {
-    return <CheckCircleIcon className="size-4 text-success-text" />;
-  }
-  if (props.paymentVerification) {
-    return <InfoIcon className="size-4 text-warning-text" />;
-  }
-  return <AlertCircleIcon className="size-4 text-error-text" />;
-}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx b/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx
deleted file mode 100644
index 76b1baedc64..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import {
-  type Account,
-  accountStatus,
-  useCreateBillingSession,
-} from "@3rdweb-sdk/react/hooks/useApi";
-import { useMemo } from "react";
-import { useTrack } from "../../../../hooks/analytics/useTrack";
-
-interface ManageBillingButtonProps {
-  account: Account;
-  loading?: boolean;
-  loadingText?: string;
-  onClick?: () => void;
-}
-
-export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
-  account,
-  loading,
-  loadingText,
-  onClick,
-}) => {
-  const trackEvent = useTrack();
-
-  const [buttonLabel, buttonText] = useMemo(() => {
-    switch (account.status) {
-      case accountStatus.invalidPayment:
-      case accountStatus.validPayment: {
-        return ["manage", "Manage billing"];
-      }
-      case accountStatus.paymentVerification: {
-        return ["verifyPaymentMethod", "Verify your payment method →"];
-      }
-      case accountStatus.invalidPaymentMethod: {
-        return ["addAnotherPayment", "Add another payment method →"];
-      }
-      default: {
-        return ["addPayment", "Add payment method"];
-      }
-    }
-  }, [account.status]);
-
-  const query = useCreateBillingSession(buttonLabel === "manage");
-  const url = useMemo(() => {
-    switch (buttonLabel) {
-      case "verifyPaymentMethod":
-        return account.stripePaymentActionUrl;
-      case "manage":
-        return query.data?.url;
-    }
-  }, [query.data, buttonLabel, account.stripePaymentActionUrl]);
-
-  if (url) {
-    return (
-      <Button asChild>
-        <TrackedLinkTW href={url} category="billingAccount" label={buttonLabel}>
-          {buttonText}
-        </TrackedLinkTW>
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      disabled={loading || !onClick}
-      onClick={(e) => {
-        trackEvent({
-          category: "billingAccount",
-          label: buttonLabel,
-          action: "click",
-        });
-
-        if (loading) {
-          e.preventDefault();
-          return;
-        }
-
-        if (!["verifyPaymentMethod", "manage"].includes(buttonLabel)) {
-          e.preventDefault();
-          onClick?.();
-        }
-      }}
-      className="gap-2"
-    >
-      {loading && <Spinner className="size-4" />}
-      {loading ? loadingText : buttonText}
-    </Button>
-  );
-};
diff --git a/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx b/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx
index a8e1db33b6d..fc4d1bf79d1 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx
@@ -1,37 +1,26 @@
-import { Badge } from "@/components/ui/badge";
-import { useAccount, useAccountCredits } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex } from "@chakra-ui/react";
-import { Card, Heading, Text } from "tw-components";
-import { PLANS } from "utils/pricing";
+"use client";
+
+// TODO - convert to RSC
+
+import { useAccountCredits } from "@3rdweb-sdk/react/hooks/useApi";
 import { CreditsItem } from "./CreditsItem";
 
-export const BillingPlanCard = () => {
+export const CreditsInfoCard = () => {
   const { data: credits } = useAccountCredits();
-  const { data: account } = useAccount();
-
-  const opCredit = credits?.find((crd) => crd.name.startsWith("OP -"));
-  const restCredits = credits?.filter((crd) => !crd.name.startsWith("OP -"));
 
-  if (!account) {
+  if (!credits) {
     return null;
   }
 
-  return (
-    <Card as={Flex} flexDir="column" gap={2}>
-      <div className="flex flex-row items-center gap-2">
-        <Heading size="title.xs">Your current plan is</Heading>
-        <Badge className="capitalize">
-          {PLANS[account.plan as keyof typeof PLANS].title}
-        </Badge>
-      </div>
+  const opCredit = credits.find((crd) => crd.name.startsWith("OP -"));
+  const restCredits = credits.filter((crd) => !crd.name.startsWith("OP -"));
 
-      <Flex flexDir="column" gap={4}>
-        <Text size="body.md" />
-        <CreditsItem credit={opCredit} isOpCreditDefault={true} />
-        {restCredits?.map((credit) => (
-          <CreditsItem key={credit.couponId} credit={credit} />
-        ))}
-      </Flex>
-    </Card>
+  return (
+    <section className="flex flex-col gap-4">
+      <CreditsItem credit={opCredit} isOpCreditDefault={true} />
+      {restCredits?.map((credit) => (
+        <CreditsItem key={credit.couponId} credit={credit} />
+      ))}
+    </section>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
index a59c1ef73ee..0c385ad8e95 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
@@ -1,125 +1,186 @@
-import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
-import { SimpleGrid } from "@chakra-ui/react";
+import type { Team } from "@/api/team";
 import { PricingCard } from "components/homepage/sections/PricingCard";
 import { useMemo } from "react";
-import { CONTACT_US_URL } from "utils/pricing";
+import { getValidTeamPlan } from "../../../../app/team/components/TeamHeader/getValidTeamPlan";
+import { CONTACT_US_URL } from "../../../../utils/pricing";
+
+// TODO - move this in app router folder in other pr
 
 interface BillingPricingProps {
-  plan: string;
+  team: Team;
   trialPeriodEndedAt: string | undefined;
-  canTrialGrowth: boolean;
-  validPayment: boolean;
-  paymentVerification: boolean;
-  invalidPayment: boolean;
-  loading: boolean;
-  onSelect: (plan: AccountPlan) => void;
 }
 
+type CtaLink = {
+  label: string;
+  href: string;
+  target?: "_blank";
+};
+
 export const BillingPricing: React.FC<BillingPricingProps> = ({
-  plan,
+  team,
   trialPeriodEndedAt,
-  canTrialGrowth,
-  validPayment,
-  paymentVerification,
-  invalidPayment,
-  loading,
-  onSelect,
 }) => {
-  const isPro = plan === accountPlan.pro || plan === accountPlan.enterprise;
+  const validTeamPlan = getValidTeamPlan(team);
+  const starterPlanSubscribeRoute = `/team/${team.slug}/billing/subscribe/plan:starter`;
+  const growthPlanSubscribeRoute = `/team/${team.slug}/billing/subscribe/plan:growth`;
+  const contactUsHref = "/contact-us";
 
-  const freeCtaTitle = useMemo(() => {
-    if (!validPayment) {
-      return "Get started for free";
-    }
-    if (plan !== accountPlan.free) {
-      return "Downgrade";
-    }
+  const starterCta: CtaLink | undefined = useMemo(() => {
+    switch (validTeamPlan) {
+      // free > starter
+      case "free": {
+        return {
+          label: "Get started for free",
+          href: starterPlanSubscribeRoute,
+        };
+      }
 
-    return undefined;
-  }, [plan, validPayment]);
+      // starter > starter
+      case "starter": {
+        return undefined;
+      }
 
-  const growthCtaTitle = useMemo(() => {
-    const trialTitle = "Claim your 1-month free";
+      // growth > starter
+      case "growth": {
+        return {
+          label: "Downgrade",
+          href: starterPlanSubscribeRoute,
+        };
+      }
 
-    if (!validPayment) {
-      return canTrialGrowth ? trialTitle : "Get started";
-    }
-    // pro/enterprise cant change plan
-    if (isPro) {
-      return "Contact us";
+      // pro > starter
+      case "pro": {
+        return {
+          label: "Contact us",
+          href: contactUsHref,
+          target: "_blank",
+        };
+      }
     }
+  }, [validTeamPlan, starterPlanSubscribeRoute]);
+
+  const growthCardCta: CtaLink | undefined = useMemo(() => {
+    const trialTitle = "Claim your 1-month free";
+
+    switch (validTeamPlan) {
+      // free > growth
+      case "free": {
+        return {
+          label: team.growthTrialEligible ? trialTitle : "Get started",
+          href: growthPlanSubscribeRoute,
+        };
+      }
+
+      // starter > growth
+      case "starter": {
+        return {
+          label: team.growthTrialEligible ? trialTitle : "Upgrade",
+          href: growthPlanSubscribeRoute,
+        };
+      }
+
+      // growth > growth
+      case "growth": {
+        return undefined;
+      }
 
-    if (plan === accountPlan.free) {
-      return canTrialGrowth ? trialTitle : "Upgrade";
+      // pro > growth
+      case "pro": {
+        return {
+          label: "Contact us",
+          href: contactUsHref,
+          target: "_blank",
+        };
+      }
     }
+  }, [team, validTeamPlan, growthPlanSubscribeRoute]);
 
-    return undefined;
-  }, [validPayment, isPro, plan, canTrialGrowth]);
+  const proCta: CtaLink | undefined = useMemo(() => {
+    // pro > pro
+    if (validTeamPlan === "pro") {
+      return undefined;
+    }
 
-  const handleSelect = (newPlan: AccountPlan) => {
-    onSelect(newPlan);
-  };
+    // others
+    return {
+      label: "Contact us",
+      href: contactUsHref,
+      target: "_blank",
+    };
+  }, [validTeamPlan]);
 
   return (
-    <SimpleGrid columns={{ base: 1, xl: 3 }} gap={{ base: 6, xl: 8 }}>
+    <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+      {/* Starter */}
       <PricingCard
-        current={plan === accountPlan.free}
-        size="sm"
-        name={accountPlan.free}
-        ctaTitle={freeCtaTitle}
-        ctaProps={{
-          onClick: (e) => {
-            e.preventDefault();
-            handleSelect(accountPlan.free);
-          },
-          isLoading: loading,
-          isDisabled: loading || invalidPayment || paymentVerification,
-          category: "account",
-          label: "freePlan",
-          href: "/pricing",
-        }}
-        onDashboard
+        billingPlan="starter"
+        current={validTeamPlan === "starter"}
+        cta={
+          starterCta
+            ? {
+                title: starterCta.label,
+                href: starterCta.href,
+                target: starterCta.target,
+                tracking: {
+                  category: "account",
+                  label: "starterPlan",
+                },
+              }
+            : undefined
+        }
+        team={team}
       />
 
+      {/* Growth */}
       <PricingCard
+        billingPlan="growth"
         activeTrialEndsAt={
-          plan === accountPlan.growth ? trialPeriodEndedAt : undefined
+          validTeamPlan === "growth" ? trialPeriodEndedAt : undefined
         }
-        current={plan === accountPlan.growth}
-        size="sm"
-        name={accountPlan.growth}
-        ctaTitle={growthCtaTitle}
-        ctaHint="Your free trial will end after 30 days."
-        canTrialGrowth={canTrialGrowth}
-        ctaProps={{
-          onClick: (e) => {
-            e.preventDefault();
-            handleSelect(accountPlan.growth);
-          },
-          isLoading: loading,
-          isDisabled: loading || invalidPayment || paymentVerification,
-          category: "account",
-          label: canTrialGrowth ? "claimGrowthTrial" : "growthPlan",
-          href: "/pricing",
-          variant: "solid",
-          colorScheme: "blue",
-        }}
-        onDashboard
+        current={validTeamPlan === "growth"}
+        cta={
+          growthCardCta
+            ? {
+                title: growthCardCta.label,
+                href: growthCardCta.href,
+                target: growthCardCta.target,
+                tracking: {
+                  category: "account",
+                  label: team.growthTrialEligible
+                    ? "claimGrowthTrial"
+                    : "growthPlan",
+                },
+                variant: "default",
+                hint: team.growthTrialEligible
+                  ? "Your free trial will end after 30 days."
+                  : undefined,
+              }
+            : undefined
+        }
+        canTrialGrowth={team.growthTrialEligible || false}
+        // upsell growth plan if user is on free plan
+        highlighted={validTeamPlan === "free"}
+        team={team}
       />
 
       <PricingCard
-        current={isPro}
-        size="sm"
-        name={accountPlan.pro}
-        ctaTitle="Contact us"
-        ctaProps={{
-          category: "account",
-          label: "proPlan",
-          href: CONTACT_US_URL,
-          isExternal: true,
-        }}
-        onDashboard
+        billingPlan="pro"
+        current={validTeamPlan === "pro"}
+        cta={
+          proCta
+            ? {
+                title: proCta.label,
+                target: proCta.target,
+                href: CONTACT_US_URL,
+                tracking: {
+                  category: "account",
+                  label: "proPlan",
+                },
+              }
+            : undefined
+        }
       />
-    </SimpleGrid>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
deleted file mode 100644
index f0b9256326a..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
+++ /dev/null
@@ -1,423 +0,0 @@
-"use client";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { cn } from "@/lib/utils";
-import {
-  type Account,
-  type UsageBillableByService,
-  accountStatus,
-  useAccount,
-  useAccountUsage,
-} from "@3rdweb-sdk/react/hooks/useApi";
-import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import * as Sentry from "@sentry/nextjs";
-import { OnboardingModal } from "components/onboarding/Modal";
-import { format } from "date-fns";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useLocalStorage } from "hooks/useLocalStorage";
-import { ExternalLinkIcon, XIcon } from "lucide-react";
-import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
-import { ManageBillingButton } from "../ManageButton";
-import { RecurringPaymentFailureAlert } from "./RecurringPaymentFailureAlert";
-
-type AlertConditionType = {
-  shouldShowAlert: boolean;
-  key: string;
-  title: string;
-  description: string;
-  status: "error" | "warning";
-  componentType:
-    | "serviceCutoff"
-    | "recurringPayment"
-    | "paymentVerification"
-    | "usage";
-};
-
-export const BillingAlerts = (props: {
-  className?: string;
-}) => {
-  const pathname = usePathname();
-  const { isLoggedIn } = useLoggedInUser();
-  const usageQuery = useAccountUsage();
-  const meQuery = useAccount({
-    refetchInterval: (account) =>
-      account.state.data?.status === accountStatus.invalidPayment ||
-      account.state.data?.status === accountStatus.invalidPaymentMethod ||
-      account.state.data?.status === accountStatus.paymentVerification
-        ? 1000
-        : false,
-  });
-
-  if (
-    !isLoggedIn ||
-    !meQuery.data ||
-    !usageQuery.data ||
-    pathname?.includes("/support")
-  ) {
-    return null;
-  }
-
-  return (
-    <BillingAlertsUI
-      usageData={usageQuery.data}
-      dashboardAccount={meQuery.data}
-      className={props.className}
-    />
-  );
-};
-
-export function BillingAlertsUI(props: {
-  usageData: UsageBillableByService;
-  dashboardAccount: Account;
-  className?: string;
-}) {
-  const { usageData, dashboardAccount } = props;
-  const trackEvent = useTrack();
-
-  const [dismissedAlerts, setDismissedAlerts] = useLocalStorage<
-    Record<string, number> | undefined
-  >(`dismissed-billing-alert-${dashboardAccount.id}`, undefined, {});
-
-  const handleDismiss = useCallback(
-    (key: string) => {
-      const currentDismissedAlerts = dismissedAlerts || {};
-
-      const updatedAlerts = {
-        ...currentDismissedAlerts,
-        [key]: Date.now(),
-      };
-
-      setDismissedAlerts(updatedAlerts);
-
-      trackEvent({
-        category: "billing",
-        action: "dismiss_alert",
-        label: key,
-      });
-    },
-    [dismissedAlerts, setDismissedAlerts, trackEvent],
-  );
-
-  // Alert shouldShowAlerts based on the possible states of the account
-  const alertConditions = useMemo<AlertConditionType[]>(() => {
-    const { usage, limits, rateLimitedAt } = usageData;
-
-    // Define alert shouldShowAlerts including the directly computed ones
-    const paymentFailureAlerts: AlertConditionType[] = [
-      {
-        shouldShowAlert:
-          dashboardAccount.status === accountStatus.paymentVerification,
-        key: "verifyPaymentAlert",
-        title: "Your payment method requires verification",
-        description:
-          "Please verify your payment method to continue using our services without interruption.",
-        status: "error",
-        componentType: "paymentVerification",
-      },
-      {
-        shouldShowAlert:
-          dashboardAccount.status === accountStatus.invalidPaymentMethod,
-        key: "invalidPaymentMethodAlert",
-        title: "Your payment method is invalid",
-        description:
-          "Your current payment method is invalid. Please update your payment method to continue using our services.",
-        status: "error",
-        componentType: "paymentVerification",
-      },
-      ...(dashboardAccount.recurringPaymentFailures?.map((failure) => {
-        const serviceCutoffDate = failure.serviceCutoffDate
-          ? format(new Date(failure.serviceCutoffDate), "MMMM d, yyyy")
-          : null;
-
-        const isPassedCutoff = new Date(failure.serviceCutoffDate) < new Date();
-        return {
-          shouldShowAlert: true,
-          key: failure.paymentFailureCode,
-          title: isPassedCutoff
-            ? "Some of your services have been cancelled due to outstanding payments"
-            : "Your payment method failed",
-          description: failure.subscriptionDescription
-            ? `${failure.subscriptionDescription} ${serviceCutoffDate ? `(due by ${serviceCutoffDate})` : ""}`
-            : "",
-          status: "error",
-          componentType: isPassedCutoff ? "serviceCutoff" : "recurringPayment",
-        } satisfies AlertConditionType;
-      }) ?? []),
-    ];
-
-    // Directly compute usage and rate limit shouldShowAlerts within useMemo
-    const exceededUsage_50 =
-      usage.embeddedWallets.countWalletAddresses >=
-        limits.embeddedWallets / 2 ||
-      usage.storage.sumFileSizeBytes >= limits.storage / 2;
-
-    const exceededUsage_100 =
-      usage.embeddedWallets.countWalletAddresses >= limits.embeddedWallets ||
-      usage.storage.sumFileSizeBytes >= limits.storage;
-
-    const hasHardLimits =
-      dashboardAccount.status !== accountStatus.validPayment;
-    const isFreePlan = dashboardAccount.plan === "free";
-    const isGrowthPlan = dashboardAccount.plan === "growth";
-    const usageAlerts: AlertConditionType[] = [
-      {
-        // Show alert if user has exceeded 50% of their usage limit and has not yet exceeded 100% of their usage limit and has hard limits
-        shouldShowAlert:
-          !!(exceededUsage_50 && !exceededUsage_100) && hasHardLimits,
-        key: "usage_50_alert",
-        title: "You are nearing your usage limit",
-        description:
-          "To prevent service interruptions, please add a valid payment method or upgrade your plan.",
-        status: "warning",
-        componentType: "usage",
-      },
-      {
-        // if the user has exceeded 100% of their usage limit and is has hard limits enforced
-        shouldShowAlert: !!exceededUsage_100 && hasHardLimits,
-        key: "usage_100_alert",
-        title: "You have exceeded your usage limit",
-        description:
-          "To continue using our services, add a valid payment method or upgrade your plan.",
-        status: "error",
-        componentType: "usage",
-      },
-      {
-        // if its NOT a free plan and the user has exceeded 100% of their usage limit
-        shouldShowAlert: !!exceededUsage_100 && !hasHardLimits,
-        key: "usage_100_alert",
-        title: "You have exceeded your usage limit",
-        // if free or growth plan, included the upgrade plan message
-        description: `Overages are now being charged.${isFreePlan || isGrowthPlan ? " Consider upgrading your plan to increase your included limits." : ""}`,
-        status: "warning",
-        componentType: "usage",
-      },
-      {
-        // only show RPC warning if the user has exceeded their RPC rate limit and has hard limits
-        shouldShowAlert: !!rateLimitedAt?.rpc && hasHardLimits,
-        key: "rate_rpc_alert",
-        title: "You have exceeded your RPC rate limit",
-        description:
-          "To prevent service interruptions, add a valid payment method or upgrade your plan.",
-        status: "warning",
-        componentType: "usage",
-      },
-      {
-        // only show Storage warning if the user has exceeded their Storage rate limit and has hard limits
-        shouldShowAlert: !!rateLimitedAt?.storage && hasHardLimits,
-        key: "rate_storage_alert",
-        title: "You have exceeded your Storage Gateway rate limit",
-        description:
-          "To prevent service interruptions, add a valid payment method or upgrade your plan.",
-        status: "warning",
-        componentType: "usage",
-      },
-    ];
-
-    return [...paymentFailureAlerts, ...usageAlerts];
-  }, [dashboardAccount, usageData]);
-
-  if (alertConditions.length === 0) {
-    return null;
-  }
-
-  const alerts = alertConditions
-    .map((alert, index) => {
-      const shouldShowAlert = alert.shouldShowAlert;
-      const isDismissed = alert.key in (dismissedAlerts ?? {});
-      const isDismissedMoreThanAWeekAgo =
-        (dismissedAlerts?.[alert.key] ?? 0) <
-        Date.now() - 1000 * 60 * 60 * 24 * 7;
-
-      if (shouldShowAlert && (!isDismissed || isDismissedMoreThanAWeekAgo)) {
-        switch (alert.componentType) {
-          case "recurringPayment": {
-            return (
-              <RecurringPaymentFailureAlert
-                // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                key={index}
-                affectedServices={[alert.description].filter((v) => v)}
-                paymentFailureCode={alert.key}
-                dashboardAccount={dashboardAccount}
-              />
-            );
-          }
-          case "serviceCutoff": {
-            return (
-              <RecurringPaymentFailureAlert
-                isServiceCutoff={true}
-                // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                key={index}
-                affectedServices={[alert.description].filter((v) => v)}
-                paymentFailureCode={alert.key}
-                dashboardAccount={dashboardAccount}
-              />
-            );
-          }
-          case "paymentVerification": {
-            return (
-              <AddPaymentNotification
-                // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                key={index}
-                status={alert.status}
-                title={alert.title}
-                description={alert.description}
-                ctaText="Verify payment method"
-                ctaHref="/team/~/~/settings/billing"
-                label="verifyPaymentAlert"
-                dashboardAccount={dashboardAccount}
-              />
-            );
-          }
-          case "usage": {
-            return (
-              <AddPaymentNotification
-                // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                key={index}
-                status={alert.status}
-                onDismiss={() => handleDismiss(alert.key)}
-                title={alert.title}
-                description={alert.description}
-                ctaText="Upgrade your plan"
-                ctaHref="/team/~/~/settings/billing"
-                label="upgradePlanAlert"
-                dashboardAccount={dashboardAccount}
-              />
-            );
-          }
-        }
-      }
-      return null;
-    })
-    .filter((v) => !!v);
-
-  if (alerts.length === 0) {
-    return null;
-  }
-
-  return (
-    <ErrorBoundary FallbackComponent={BillingAlertsErrorBoundary}>
-      <div className={cn("flex flex-col gap-4", props.className)}>{alerts}</div>
-    </ErrorBoundary>
-  );
-}
-
-type AddPaymentNotificationProps = {
-  status: "error" | "warning";
-  onDismiss?: () => void;
-  title: string;
-  description?: string;
-  showCTAs?: boolean;
-  ctaText?: string;
-  ctaHref?: string;
-  label?: string;
-  dashboardAccount: Account;
-};
-
-const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
-  status,
-  onDismiss,
-  title,
-  description = "To ensure there are no future interruptions to your services, please add your payment method.",
-  ctaText = "Add a payment method",
-  ctaHref = "/team/~/~/settings/billing",
-  label = "addPaymentAlert",
-  showCTAs = true,
-  dashboardAccount,
-}) => {
-  // TODO: We should find a way to move this deeper into the
-  // TODO: ManageBillingButton component and set an optional field to override
-  const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false);
-
-  const handlePaymentAdded = () => {
-    setPaymentMethodSaving(true);
-    setIsPaymentMethodOpen(false);
-  };
-
-  const isBilling = ctaHref === "/team/~/~/settings/billing";
-
-  return (
-    <Alert
-      variant={status === "error" ? "destructive" : "warning"}
-      className="relative py-6"
-    >
-      <OnboardingModal isOpen={isPaymentMethodOpen}>
-        <LazyOnboardingBilling
-          onSave={handlePaymentAdded}
-          onCancel={() => setIsPaymentMethodOpen(false)}
-        />
-      </OnboardingModal>
-
-      <AlertTitle>{title}</AlertTitle>
-      <AlertDescription>{description}</AlertDescription>
-
-      {showCTAs && (
-        <div className="mt-4 flex flex-col gap-3 md:flex-row">
-          {isBilling ? (
-            <ManageBillingButton
-              account={dashboardAccount}
-              loading={paymentMethodSaving}
-              loadingText="Verifying payment method"
-              onClick={() => setIsPaymentMethodOpen(true)}
-            />
-          ) : (
-            <Button variant="outline" asChild>
-              <TrackedLinkTW
-                href={ctaHref}
-                category="billing"
-                label={label}
-                target="_blank"
-                className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              >
-                {ctaText}
-              </TrackedLinkTW>
-            </Button>
-          )}
-
-          <Button variant="outline" asChild>
-            <TrackedLinkTW
-              href="/support"
-              category="billing"
-              label="support"
-              target="_blank"
-              className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
-            >
-              Contact Support
-              <ExternalLinkIcon className="size-4" />
-            </TrackedLinkTW>
-          </Button>
-        </div>
-      )}
-
-      {onDismiss && (
-        <Button
-          size="icon"
-          aria-label="Close"
-          variant="ghost"
-          onClick={onDismiss}
-          className="absolute top-2 right-2 text-muted-foreground hover:text-foreground"
-        >
-          <XIcon className="size-5" />
-        </Button>
-      )}
-    </Alert>
-  );
-};
-
-function BillingAlertsErrorBoundary(errorProps: FallbackProps) {
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    Sentry.withScope((scope) => {
-      scope.setTag("component-crashed", "true");
-      scope.setTag("component-crashed-boundary", "BillingAlertsErrorBoundary");
-      scope.setLevel("fatal");
-      Sentry.captureException(errorProps.error);
-    });
-  }, [errorProps.error]);
-
-  return null;
-}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
deleted file mode 100644
index 5ba0f1be8d1..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { accountStatus } from "@3rdweb-sdk/react/hooks/useApi";
-import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
-import { ThirdwebProvider } from "thirdweb/react";
-import {
-  createBillableServiceUsageDataStub,
-  createDashboardAccountStub,
-} from "../../../../../stories/stubs";
-import { BillingAlertsUI } from "./Alert";
-
-const meta = {
-  title: "blocks/BillingAlerts",
-  component: Story,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-} satisfies Meta<typeof Story>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Desktop: Story = {
-  args: {},
-};
-
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
-function yesterday(d: Date) {
-  return new Date(d.getTime() - 24 * 60 * 60 * 1000);
-}
-
-function tomorrow(d: Date) {
-  return new Date(d.getTime() + 24 * 60 * 60 * 1000);
-}
-
-function Story() {
-  return (
-    <ThirdwebProvider>
-      <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
-        <BadgeContainer label="#usage">
-          <BillingAlertsUI
-            dashboardAccount={createDashboardAccountStub("foo")}
-            usageData={createBillableServiceUsageDataStub()}
-          />
-        </BadgeContainer>
-
-        <BadgeContainer label="#paymentVerification">
-          <BillingAlertsUI
-            dashboardAccount={createDashboardAccountStub("foo", {
-              status: accountStatus.paymentVerification,
-              stripePaymentActionUrl: "https://example.com",
-            })}
-            usageData={createBillableServiceUsageDataStub({
-              limits: {
-                embeddedWallets: 100,
-                storage: 100,
-              },
-            })}
-          />
-        </BadgeContainer>
-
-        <BadgeContainer label="#serviceCutoff">
-          <BillingAlertsUI
-            dashboardAccount={createDashboardAccountStub("foo", {
-              recurringPaymentFailures: [
-                {
-                  subscriptionId: "s1",
-                  subscriptionDescription: "s1 desc",
-                  paymentFailureCode: "400",
-                  serviceCutoffDate: yesterday(new Date()).toISOString(),
-                },
-              ],
-            })}
-            usageData={createBillableServiceUsageDataStub({
-              limits: {
-                embeddedWallets: 100,
-                storage: 100,
-              },
-            })}
-          />
-        </BadgeContainer>
-
-        <BadgeContainer label="#recurringPayment">
-          <BillingAlertsUI
-            dashboardAccount={createDashboardAccountStub("foo", {
-              recurringPaymentFailures: [
-                {
-                  subscriptionId: "s1",
-                  subscriptionDescription: "s1 desc",
-                  paymentFailureCode: "400",
-                  serviceCutoffDate: tomorrow(new Date()).toISOString(),
-                },
-              ],
-            })}
-            usageData={createBillableServiceUsageDataStub({
-              limits: {
-                embeddedWallets: 100,
-                storage: 100,
-              },
-            })}
-          />
-        </BadgeContainer>
-
-        <BadgeContainer label="usage + serviceCutoff">
-          <BillingAlertsUI
-            dashboardAccount={createDashboardAccountStub("foo", {
-              recurringPaymentFailures: [
-                {
-                  subscriptionId: "s1",
-                  subscriptionDescription: "s1 desc",
-                  paymentFailureCode: "400",
-                  serviceCutoffDate: yesterday(new Date()).toISOString(),
-                },
-              ],
-            })}
-            usageData={createBillableServiceUsageDataStub()}
-          />
-        </BadgeContainer>
-      </div>
-    </ThirdwebProvider>
-  );
-}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
deleted file mode 100644
index f6463150be1..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { getBillingPaymentMethodVerificationFailureResponse } from "lib/billing";
-import { ExternalLinkIcon } from "lucide-react";
-
-type PaymentVerificationFailureAlertProps = {
-  onDismiss?: () => void;
-  paymentFailureCode: string;
-};
-
-export const PaymentVerificationFailureAlert: React.FC<
-  PaymentVerificationFailureAlertProps
-> = ({ paymentFailureCode = "generic_decline" }) => {
-  const { title, reason, resolution } =
-    getBillingPaymentMethodVerificationFailureResponse({ paymentFailureCode });
-
-  return (
-    <Alert variant="destructive">
-      <AlertTitle>{title}</AlertTitle>
-      <AlertDescription>
-        <p>
-          {reason ? `${reason}. ` : ""}
-          {resolution ? `${resolution}.` : ""}
-        </p>
-
-        <TrackedLinkTW
-          className="mt-3 flex items-center gap-2 text-muted-foreground hover:text-foreground"
-          href="/support"
-          category="billing"
-          label="support"
-          target="_blank"
-        >
-          Contact Support
-          <ExternalLinkIcon className="size-4" />
-        </TrackedLinkTW>
-      </AlertDescription>
-    </Alert>
-  );
-};
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
deleted file mode 100644
index 7ed9339dbdf..00000000000
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { type Account, accountStatus } from "@3rdweb-sdk/react/hooks/useApi";
-import { OnboardingModal } from "components/onboarding/Modal";
-import { getRecurringPaymentFailureResponse } from "lib/billing";
-import { ExternalLinkIcon, XIcon } from "lucide-react";
-import { useState } from "react";
-import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
-import { ManageBillingButton } from "../ManageButton";
-
-type RecurringPaymentFailureAlertProps = {
-  isServiceCutoff?: boolean;
-  onDismiss?: () => void;
-  affectedServices?: string[];
-  paymentFailureCode: string;
-  dashboardAccount: Account;
-};
-
-export const RecurringPaymentFailureAlert: React.FC<
-  RecurringPaymentFailureAlertProps
-> = ({
-  dashboardAccount,
-  isServiceCutoff = false,
-  onDismiss,
-  affectedServices = [],
-  paymentFailureCode = "bank_decline",
-}) => {
-  // TODO: We should find a way to move this deeper into the
-  // TODO: ManageBillingButton component and set an optional field to override
-  const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false);
-
-  const handlePaymentAdded = () => {
-    setPaymentMethodSaving(true);
-    setIsPaymentMethodOpen(false);
-  };
-
-  const { title, reason, resolution } = getRecurringPaymentFailureResponse({
-    paymentFailureCode,
-  });
-
-  const header = isServiceCutoff
-    ? "You have lost access to some paid services"
-    : title;
-
-  return (
-    <Alert variant="destructive" className="py-6">
-      <OnboardingModal isOpen={isPaymentMethodOpen}>
-        <LazyOnboardingBilling
-          onSave={handlePaymentAdded}
-          onCancel={() => setIsPaymentMethodOpen(false)}
-        />
-      </OnboardingModal>
-
-      <AlertTitle>{header}</AlertTitle>
-      <AlertDescription>
-        {reason ? `${reason}. ` : ""}
-        {resolution ? `${resolution}. ` : ""}
-        {isServiceCutoff
-          ? ""
-          : "We will retry several times over the next 10 days after your invoice date, after which you will lose access to your services."}
-      </AlertDescription>
-
-      <div className="mt-4 flex flex-col gap-4 text-muted-foreground text-sm">
-        {affectedServices.length > 0 && (
-          <div className="flex flex-col">
-            <p className="mb-1"> Affected services: </p>
-            <ul className="list-disc pl-3.5">
-              {affectedServices.map((service) => (
-                <li key={service}>
-                  <span>{service}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-
-        <div className="flex flex-col gap-3 md:flex-row">
-          <ManageBillingButton
-            account={dashboardAccount}
-            loading={paymentMethodSaving}
-            loadingText="Verifying payment method"
-            onClick={
-              dashboardAccount.status === accountStatus.validPayment ||
-              dashboardAccount.status === accountStatus.invalidPayment
-                ? undefined
-                : () => setIsPaymentMethodOpen(true)
-            }
-          />
-
-          <Button variant="outline" asChild>
-            <TrackedLinkTW
-              href="/support"
-              category="billing"
-              label="support"
-              target="_blank"
-              className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
-            >
-              Contact Support
-              <ExternalLinkIcon className="size-4" />
-            </TrackedLinkTW>
-          </Button>
-        </div>
-      </div>
-
-      {onDismiss && (
-        <Button
-          size="icon"
-          aria-label="Close"
-          variant="ghost"
-          onClick={onDismiss}
-          className="absolute top-2 right-2 text-muted-foreground hover:text-foreground"
-        >
-          <XIcon className="size-5" />
-        </Button>
-      )}
-    </Alert>
-  );
-};
diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
index 4cb22ad345b..e39fb021f64 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/index.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
@@ -1,311 +1,41 @@
-"use client";
-import {
-  type Account,
-  type AccountPlan,
-  accountPlan,
-  accountStatus,
-  useUpdateAccountPlan,
-} from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex } from "@chakra-ui/react";
-import { StepsCard } from "components/dashboard/StepsCard";
-import { OnboardingModal } from "components/onboarding/Modal";
-import { AccountForm } from "components/settings/Account/AccountForm";
-import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { ExternalLinkIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Heading, Text, TrackedLink } from "tw-components";
-import { PLANS } from "utils/pricing";
-import { LazyOnboardingBilling } from "../../../onboarding/LazyOnboardingBilling";
+import type { Team } from "@/api/team";
+import type { TeamSubscription } from "@/api/team-subscription";
+import { PlanInfoCard } from "../../../../app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard";
+import { getValidTeamPlan } from "../../../../app/team/components/TeamHeader/getValidTeamPlan";
 import { CouponSection } from "./CouponCard";
-import { BillingDowngradeDialog } from "./DowngradeDialog";
-import { BillingHeader } from "./Header";
-import { BillingPlanCard } from "./PlanCard";
+import { CreditsInfoCard } from "./PlanCard";
 import { BillingPricing } from "./Pricing";
 
+// TODO - move this in app router folder in other pr
+
 interface BillingProps {
-  account: Account;
-  teamId: string | undefined;
+  team: Team;
+  subscriptions: TeamSubscription[];
 }
 
-export const Billing: React.FC<BillingProps> = ({ account, teamId }) => {
-  const updatePlanMutation = useUpdateAccountPlan(
-    account?.plan === accountPlan.free,
-  );
-  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
-  const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-  const [selectedPlan, setSelectedPlan] = useState<AccountPlan | undefined>();
-  const trackEvent = useTrack();
-
-  const [stepsCompleted, setStepsCompleted] = useState<
-    | undefined
-    | {
-        account: boolean;
-        payment: boolean;
-      }
-  >();
-
-  const [downgradePlan, setDowngradePlan] = useState<AccountPlan | undefined>();
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Billing plan changed.",
-    "Failed to change your billing plan.",
-  );
-
-  const validPayment = account.status === accountStatus.validPayment;
-  const paymentVerification =
-    account.status === accountStatus.paymentVerification;
-  const invalidPayment = account.status === accountStatus.invalidPayment;
-
-  const handleUpdatePlan = useCallback(
-    (plan: AccountPlan, feedback?: string) => {
-      const action = downgradePlan ? "downgradePlan" : "upgradePlan";
-      setDowngradePlan(undefined);
-
-      trackEvent({
-        category: "account",
-        action,
-        label: "attempt",
-      });
-
-      updatePlanMutation.mutate(
-        {
-          plan,
-          feedback,
-        },
-        {
-          onSuccess: () => {
-            onSuccess();
-
-            trackEvent({
-              category: "account",
-              action,
-              label: "success",
-              data: {
-                plan,
-                feedback,
-              },
-            });
-          },
-          onError: (error) => {
-            onError(error);
-
-            trackEvent({
-              category: "account",
-              action,
-              label: "error",
-              error,
-            });
-          },
-        },
-      );
-    },
-    [downgradePlan, onError, onSuccess, trackEvent, updatePlanMutation],
-  );
-
-  const handlePlanSelect = (plan: AccountPlan) => {
-    if (invalidPayment || paymentVerification) {
-      return;
-    }
+export const Billing: React.FC<BillingProps> = ({ team, subscriptions }) => {
+  const validPayment = team.billingStatus === "validPayment";
+  const validPlan = getValidTeamPlan(team);
 
-    if (!validPayment) {
-      setSelectedPlan(plan);
-      setIsPaymentModalOpen(true);
-      return;
-    }
-    // downgrade from Growth to Free
-    if (plan === accountPlan.free || account.plan === accountPlan.growth) {
-      setDowngradePlan(plan);
-    } else {
-      handleUpdatePlan(plan);
-    }
-  };
-
-  const handlePaymentAdded = () => {
-    setPaymentMethodSaving(true);
-    setIsPaymentModalOpen(false);
-  };
-
-  const handleDowngradeAlertClose = () => {
-    setDowngradePlan(undefined);
-  };
-
-  const steps = useMemo(() => {
-    if (!stepsCompleted) {
-      return [];
-    }
-
-    return [
-      {
-        title: (
-          <div className="flex flex-row items-center justify-between gap-2">
-            <Heading
-              size="label.md"
-              opacity={!stepsCompleted.account ? 1 : 0.6}
-            >
-              Enter billing account info
-            </Heading>
-            {stepsCompleted.account && (
-              <Button
-                size="sm"
-                variant="link"
-                colorScheme="blue"
-                fontWeight="normal"
-                onClick={() =>
-                  setStepsCompleted({ account: false, payment: false })
-                }
-              >
-                Edit
-              </Button>
-            )}
-          </div>
-        ),
-        description:
-          "This information will be used for billing notifications and invoices.",
-        completed: stepsCompleted.account,
-        children: (
-          <AccountForm
-            account={account}
-            previewEnabled={stepsCompleted.account}
-            horizontal
-            onSave={() => setStepsCompleted({ account: true, payment: false })}
-          />
-        ),
-        showCompletedChildren: true,
-      },
-      {
-        title: "Add a payment method",
-        description: "Click the link below to your payment method.",
-        completed: stepsCompleted.payment,
-        children: (
-          <ManageBillingButton
-            account={account}
-            loading={paymentMethodSaving}
-            loadingText="Verifying payment method"
-            onClick={() => setIsPaymentModalOpen(true)}
-          />
-        ),
-      },
-    ];
-  }, [account, paymentMethodSaving, stepsCompleted]);
-
-  // FIXME: this entire flow needs to be re-worked
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (account) {
-      setStepsCompleted({
-        account: !!account.email,
-        payment: validPayment,
-      });
-    }
-  }, [validPayment, account]);
-
-  // FIXME: this entire flow needs to be re-worked
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (account) {
-      const paymentCompleted = validPayment;
-
-      if (paymentCompleted && paymentMethodSaving) {
-        // user chose a growth plan before adding a payment method,
-        // and didn't have it already set, so update it here when payment
-        // method is available.
-        if (
-          account.plan !== accountPlan.growth &&
-          selectedPlan === accountPlan.growth
-        ) {
-          handleUpdatePlan(selectedPlan);
-          setSelectedPlan(undefined);
-        }
-      }
-
-      if (paymentCompleted || paymentVerification) {
-        setPaymentMethodSaving(false);
-      }
-    }
-  }, [
-    account,
-    validPayment,
-    paymentVerification,
-    selectedPlan,
-    paymentMethodSaving,
-    handleUpdatePlan,
-  ]);
-
-  const showSteps =
-    account.status === accountStatus.noCustomer ||
-    account.status === accountStatus.noPayment ||
-    account.status === accountStatus.invalidPayment ||
-    account.status === accountStatus.invalidPaymentMethod;
+  const planSubscription = subscriptions.find((sub) => sub.type === "PLAN");
 
   return (
-    <Flex flexDir="column" gap={8}>
-      <OnboardingModal isOpen={isPaymentModalOpen}>
-        <LazyOnboardingBilling
-          onSave={handlePaymentAdded}
-          onCancel={() => setIsPaymentModalOpen(false)}
-        />
-      </OnboardingModal>
-
-      {showSteps ? (
-        <>
-          <StepsCard title="Get started with billing" steps={steps} />
-        </>
-      ) : (
-        <>
-          <BillingHeader
-            validPayment={validPayment}
-            paymentVerification={paymentVerification}
-          />
-          <BillingPlanCard />
-          <AccountForm account={account} disableUnchanged showBillingButton />
-        </>
-      )}
-
-      <BillingPricing
-        plan={account.plan}
-        trialPeriodEndedAt={account.trialPeriodEndedAt}
-        canTrialGrowth={!account.trialPeriodEndedAt}
-        validPayment={validPayment}
-        paymentVerification={paymentVerification}
-        invalidPayment={invalidPayment}
-        loading={paymentMethodSaving || updatePlanMutation.isPending}
-        onSelect={handlePlanSelect}
-      />
-
-      <TrackedLink
-        textAlign="center"
-        category="account"
-        href="/pricing"
-        label="pricing-plans"
-        color="blue.500"
-        isExternal
-      >
-        <div className="flex flex-row items-center gap-2">
-          <Text color="blue.500">Learn more about thirdweb&apos;s pricing</Text>
-          <ExternalLinkIcon className="size-4" />
-        </div>
-      </TrackedLink>
-
-      {downgradePlan && (
-        <BillingDowngradeDialog
-          oldPlan={PLANS[account.plan].title}
-          newPlan={PLANS[downgradePlan].title}
-          oldPlanFeatures={PLANS[account.plan].features}
-          onClose={handleDowngradeAlertClose}
-          onConfirm={(feedback) => handleUpdatePlan(downgradePlan, feedback)}
-          loading={updatePlanMutation.isPending}
+    <div className="flex flex-col gap-12">
+      <PlanInfoCard team={team} subscriptions={subscriptions} />
+
+      <div>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          {validPlan === "free" ? "Select a Plan" : "Plans"}
+        </h2>
+        <div className="h-3" />
+        <BillingPricing
+          team={team}
+          trialPeriodEndedAt={planSubscription?.trialEnd ?? undefined}
         />
-      )}
+      </div>
 
-      <CouponSection
-        teamId={teamId}
-        onAddPayment={() => {
-          setIsPaymentModalOpen(true);
-        }}
-        isPaymentSetup={validPayment}
-      />
-    </Flex>
+      <CreditsInfoCard />
+      <CouponSection teamId={team.id} isPaymentSetup={validPayment} />
+    </div>
   );
 };
diff --git a/apps/dashboard/src/lib/billing.ts b/apps/dashboard/src/lib/billing.ts
deleted file mode 100644
index 588ef285c08..00000000000
--- a/apps/dashboard/src/lib/billing.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-const PaymentFailureCode = {
-  BLOCKLIST: "blocklist",
-  CARD_VELOCITY_EXCEEDED: "card_velocity_exceeded",
-  CASHAPP_PAYMENT_DECLINED: "cashapp_payment_declined",
-  CARD_DECLINE: "card_decline",
-  DO_NOT_HONOR: "do_not_honor",
-  EXPIRED_CARD: "expired_card",
-  GENERIC_DECLINE: "generic_decline",
-  HIGHEST_RISK_LEVEL: "highest_risk_level",
-  INCORRECT_CVC: "incorrect_cvc",
-  INCORRECT_NUMBER: "incorrect_number",
-  INVALID_NUMBER: "invalid_number",
-  INSUFFICIENT_FUNDS: "insufficient_funds",
-  INVALID_ACCOUNT: "invalid_account",
-  INVALID_AMOUNT: "invalid_amount",
-  INVALID_CVC: "invalid_cvc",
-  LOST_CARD: "lost_card",
-  PICKUP_CARD: "pickup_card",
-  PREVIOUSLY_DECLINED_DO_NOT_RETRY: "previously_declined_do_not_retry",
-  PROCESSING_ERROR: "processing_error",
-  REENTER_TRANSACTION: "reenter_transaction",
-  REQUESTED_BLOCK_ON_INCORRECT_CVC: "requested_block_on_incorrect_cvc",
-  REVOCATION_OF_ALL_AUTHORIZATIONS: "revocation_of_all_authorizations",
-  RULE: "rule",
-  TRANSACTION_NOT_ALLOWED: "transaction_not_allowed",
-  TRY_AGAIN_LATER: "try_again_later",
-};
-
-export const getBillingPaymentMethodVerificationFailureResponse = (args: {
-  paymentFailureCode: string;
-}): {
-  code: string;
-  title: string;
-  reason: string;
-  resolution: string;
-} => {
-  const { paymentFailureCode } = args;
-
-  switch (paymentFailureCode) {
-    case PaymentFailureCode.INSUFFICIENT_FUNDS:
-      return {
-        code: PaymentFailureCode.INSUFFICIENT_FUNDS,
-        title: "Insufficient funds",
-        reason: `This card can't be accepted: Low card balance`,
-        resolution: "Please try another payment method",
-      };
-    case PaymentFailureCode.INVALID_NUMBER:
-    case PaymentFailureCode.INCORRECT_NUMBER:
-    case PaymentFailureCode.INCORRECT_CVC:
-      return {
-        code: PaymentFailureCode.INCORRECT_NUMBER,
-        title: "Incorrect Number",
-        reason: `This card can't be accepted: Incorrect card number`,
-        resolution:
-          "Check your card number for typos or try a different payment method",
-      };
-    default:
-      return {
-        code: PaymentFailureCode.GENERIC_DECLINE,
-        title: "Your payment method was declined",
-        reason: `This card can't be accepted: declined by bank`,
-        resolution: "Please update your payment method or contact your bank",
-      };
-  }
-};
-
-export const getRecurringPaymentFailureResponse = (args: {
-  paymentFailureCode: string;
-  amount?: number;
-}): {
-  code: string;
-  title: string;
-  reason: string;
-  resolution: string;
-} => {
-  const { paymentFailureCode, amount } = args;
-
-  switch (paymentFailureCode) {
-    case PaymentFailureCode.INSUFFICIENT_FUNDS:
-      return {
-        code: PaymentFailureCode.INSUFFICIENT_FUNDS,
-        title: "Insufficient funds",
-        reason:
-          "We are unable to process your payment due to insufficient funds in your account",
-        resolution: `To continue using thirdweb services without interruption, please add ${
-          amount ? `$${amount}` : "funds"
-        } to your account or update your payment method`,
-      };
-    default:
-      return {
-        code: PaymentFailureCode.GENERIC_DECLINE,
-        title: "We were unable to process your payment",
-        reason: "Your payment method failed to process",
-        resolution:
-          "To continue using thirdweb services without interruption, please update your payment method or contact your bank",
-      };
-  }
-};
diff --git a/apps/dashboard/src/pages/pricing.tsx b/apps/dashboard/src/pages/pricing.tsx
index 62f8f799279..829acf9200c 100644
--- a/apps/dashboard/src/pages/pricing.tsx
+++ b/apps/dashboard/src/pages/pricing.tsx
@@ -7,11 +7,11 @@ import {
   Tooltip,
   useBreakpointValue,
 } from "@chakra-ui/react";
-import { EngineTierCard } from "app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card";
-import { PricingSection } from "components/homepage/sections/PricingSection";
+// import { EngineTierCard } from "app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card";
+// import { PricingSection } from "components/homepage/sections/PricingSection";
 import { LandingFAQ } from "components/landing-pages/faq";
 import { LandingLayout } from "components/landing-pages/layout";
-import { useTrack } from "hooks/analytics/useTrack";
+// import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
 import {
   ArrowRightIcon,
@@ -22,7 +22,7 @@ import {
   MoveUpRightIcon,
 } from "lucide-react";
 import NextLink from "next/link";
-import { useRouter } from "next/router";
+// import { useRouter } from "next/router";
 import { PageId } from "page-id";
 import {
   Card,
@@ -30,7 +30,7 @@ import {
   Link,
   Text,
   TrackedIconButton,
-  TrackedLink,
+  // TrackedLink,
 } from "tw-components";
 import { EcosystemWalletPricingCard } from "../app/team/[team_slug]/(team)/~/ecosystem/create/components/pricing-card";
 import { FAQ_GENERAL, FAQ_PRICING, PRICING_SECTIONS } from "../utils/pricing";
@@ -65,10 +65,11 @@ const Pricing: ThirdwebNextPage = () => {
         flexDir="column"
         gap={{ base: "80px", lg: "120px" }}
       >
-        <PricingSection
+        {/* <PricingSection
           trackingCategory={TRACKING_CATEGORY}
+          // TODO: use API response
           canTrialGrowth={true}
-        />
+        /> */}
 
         <Flex flexDir="column" gap={20}>
           {PRICING_SECTIONS.map((section) => (
@@ -210,7 +211,7 @@ const Pricing: ThirdwebNextPage = () => {
             <Heading as="h3" size="subtitle.lg">
               Engine
             </Heading>
-            <EnginePricing isMobile={isMobile} />
+            {/* <EnginePricing isMobile={isMobile} /> */}
           </Flex>
 
           <EcosystemPricing />
@@ -324,72 +325,72 @@ const Item = ({
   );
 };
 
-const EnginePricing = ({ isMobile }: { isMobile: boolean }) => {
-  const track = useTrack();
-  const router = useRouter();
+// const EnginePricing = ({ isMobile }: { isMobile: boolean }) => {
+//   const track = useTrack();
+//   const router = useRouter();
 
-  return (
-    <Flex flexDir="column" gap={4}>
-      <Text>
-        Host Engine on thirdweb with no setup or maintenance required.{" "}
-        <TrackedLink
-          href="https://portal.thirdweb.com/engine"
-          isExternal
-          color="blue.500"
-          fontSize="small"
-          category={TRACKING_CATEGORY}
-          label="clicked-docs"
-        >
-          Learn more about Engine &rarr;
-        </TrackedLink>
-      </Text>
-      <SimpleGrid columns={isMobile ? 1 : 3} gap={6}>
-        <EngineTierCard
-          tier="STARTER"
-          ctaText="Get Started"
-          onClick={() => {
-            track({
-              category: TRACKING_CATEGORY,
-              action: "click",
-              label: "clicked-cloud-hosted",
-              tier: "STANDARD",
-            });
-            router.push("/team/~/~/engine");
-          }}
-        />
+//   return (
+//     <Flex flexDir="column" gap={4}>
+//       <Text>
+//         Host Engine on thirdweb with no setup or maintenance required.{" "}
+//         <TrackedLink
+//           href="https://portal.thirdweb.com/engine"
+//           isExternal
+//           color="blue.500"
+//           fontSize="small"
+//           category={TRACKING_CATEGORY}
+//           label="clicked-docs"
+//         >
+//           Learn more about Engine &rarr;
+//         </TrackedLink>
+//       </Text>
+//       <SimpleGrid columns={isMobile ? 1 : 3} gap={6}>
+//         <EngineTierCard
+//           tier="STARTER"
+//           ctaText="Get Started"
+//           onClick={() => {
+//             track({
+//               category: TRACKING_CATEGORY,
+//               action: "click",
+//               label: "clicked-cloud-hosted",
+//               tier: "STANDARD",
+//             });
+//             router.push("/team/~/~/engine");
+//           }}
+//         />
 
-        <EngineTierCard
-          tier="PREMIUM"
-          isPrimaryCta
-          ctaText="Get Started"
-          onClick={() => {
-            track({
-              category: TRACKING_CATEGORY,
-              action: "click",
-              label: "clicked-cloud-hosted",
-              tier: "PREMIUM",
-            });
-            router.push("/team/~/~/engine");
-          }}
-        />
+//         <EngineTierCard
+//           tier="PREMIUM"
+//           isPrimaryCta
+//           ctaText="Get Started"
+//           onClick={() => {
+//             track({
+//               category: TRACKING_CATEGORY,
+//               action: "click",
+//               label: "clicked-cloud-hosted",
+//               tier: "PREMIUM",
+//             });
+//             router.push("/team/~/~/engine");
+//           }}
+//         />
 
-        <EngineTierCard
-          tier="ENTERPRISE"
-          previousTier="Premium Engine"
-          onClick={() => {
-            track({
-              category: TRACKING_CATEGORY,
-              action: "click",
-              label: "clicked-cloud-hosted",
-              tier: "ENTERPRISE",
-            });
-            router.push("/contact-us");
-          }}
-        />
-      </SimpleGrid>
-    </Flex>
-  );
-};
+//         <EngineTierCard
+//           tier="ENTERPRISE"
+//           previousTier="Premium Engine"
+//           onClick={() => {
+//             track({
+//               category: TRACKING_CATEGORY,
+//               action: "click",
+//               label: "clicked-cloud-hosted",
+//               tier: "ENTERPRISE",
+//             });
+//             router.push("/contact-us");
+//           }}
+//         />
+//       </SimpleGrid>
+//     </Flex>
+//   );
+// };
 
 const EcosystemPricing = () => {
   return (
diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts
index 4fe910e5640..36a73f1232a 100644
--- a/apps/dashboard/src/stories/stubs.ts
+++ b/apps/dashboard/src/stories/stubs.ts
@@ -1,19 +1,12 @@
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
-import {
-  type Account,
-  type ApiKey,
-  type ApiKeyService,
-  type UsageBillableByService,
-  accountPlan,
-  accountStatus,
-} from "@3rdweb-sdk/react/hooks/useApi";
+import type { TeamSubscription } from "@/api/team-subscription";
+import type { ApiKey, ApiKeyService } from "@3rdweb-sdk/react/hooks/useApi";
 import type {
   EngineAlert,
   EngineAlertRule,
   EngineNotificationChannel,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { ZERO_ADDRESS } from "thirdweb";
 
 function projectStub(id: string, teamId: string) {
   const project: Project = {
@@ -35,10 +28,7 @@ function projectStub(id: string, teamId: string) {
   return project;
 }
 
-export function teamStub(
-  id: string,
-  billingPlan: "free" | "pro" | "growth",
-): Team {
+export function teamStub(id: string, billingPlan: Team["billingPlan"]): Team {
   const team: Team = {
     id: `team-${id}-id`,
     billingPlan: billingPlan,
@@ -48,6 +38,7 @@ export function teamStub(
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     billingEmail: "foo@example.com",
+    growthTrialEligible: true,
   };
 
   return team;
@@ -164,54 +155,110 @@ export function createEngineAlertStub(
   };
 }
 
-export function createDashboardAccountStub(
-  id: string,
-  overrides: Partial<Account> = {},
-): Account {
-  return {
-    id: id,
-    name: `Name ${id}`,
-    email: `email-${id}@example.com`,
-    status: accountStatus.noPayment,
-    plan: accountPlan.free,
-    advancedEnabled: false,
-    currentBillingPeriodStartsAt: new Date().toISOString(),
-    currentBillingPeriodEndsAt: new Date().toISOString(),
-    emailConfirmedAt: new Date().toISOString(),
-    creatorWalletAddress: ZERO_ADDRESS,
-    isStaff: false,
-    recurringPaymentFailures: [],
-    ...overrides,
-  };
-}
+export function teamSubscriptionsStub(
+  plan: "plan:starter" | "plan:growth" | "plan:custom",
+  overrides?: {
+    usage?: {
+      storage?: {
+        quantity: number;
+        amount: number;
+      };
+      inAppWalletAmount?: {
+        quantity: number;
+        amount: number;
+      };
+      aaSponsorshipAmount?: {
+        quantity: number;
+        amount: number;
+      };
+      aaSponsorshipOpGrantAmount?: {
+        quantity: number;
+        amount: number;
+      };
+    };
+    trialEnd?: string;
+  },
+): TeamSubscription[] {
+  const planName =
+    plan === "plan:starter"
+      ? "Starter"
+      : plan === "plan:growth"
+        ? "Growth"
+        : "Pro";
 
-export function createBillableServiceUsageDataStub(
-  overrides: Partial<UsageBillableByService> = {},
-): UsageBillableByService {
-  return {
-    usage: {
-      bundler: [],
-      storage: {
-        sumFileSizeBytes: 0,
-      },
-      embeddedWallets: {
-        countWalletAddresses: 0,
+  const planCost =
+    plan === "plan:starter" ? 0 : plan === "plan:growth" ? 9900 : 59900;
+  const usage = overrides?.usage || {};
+  const usageLinesTotalCost = Object.values(usage).reduce(
+    (total, { amount }) => total + amount,
+    0,
+  );
+  return [
+    // plan
+    {
+      id: "sub-1",
+      type: "PLAN",
+      status: "active",
+      currentPeriodStart: "2024-11-15T20:56:06.000Z",
+      currentPeriodEnd: "2024-12-15T20:56:06.000Z",
+      trialStart: null,
+      trialEnd: overrides?.trialEnd || null,
+      upcomingInvoice: {
+        amount: planCost,
+        currency: "usd",
+        lines: [
+          {
+            amount: planCost,
+            description: `1 × ${planName} Plan (at $0.00 / month)`,
+            thirdwebSku: plan,
+          },
+        ],
       },
     },
-    billableUsd: {
-      bundler: 0,
-      storage: 0,
-      embeddedWallets: 0,
-    },
-    limits: {
-      storage: 0,
-      embeddedWallets: 0,
-    },
-    rateLimits: {
-      storage: 0,
-      rpc: 0,
+    {
+      id: "sub-2",
+      type: "USAGE",
+      status: "active",
+      currentPeriodStart: "2024-11-15T20:56:15.000Z",
+      currentPeriodEnd: "2024-12-15T20:56:06.000Z",
+      trialStart: null,
+      trialEnd: null,
+      upcomingInvoice: {
+        amount: usageLinesTotalCost,
+        currency: "usd",
+        lines: [
+          // Storage
+          {
+            amount: usage.storage?.amount || 0,
+            description: `${usage.storage?.quantity || 0} x Storage Pinning (Tier 1 at $0.00 / month)`,
+            thirdwebSku: "usage:storage",
+          },
+          // In-App Wallets
+          {
+            amount: usage.inAppWalletAmount?.amount || 0,
+            description: `${
+              usage.inAppWalletAmount?.quantity || 0
+            } x In-App Wallets (Tier 1 at $0.00 / month)`,
+            thirdwebSku: "usage:in_app_wallet",
+          },
+          // AA Sponsorship
+          {
+            amount: usage.aaSponsorshipAmount?.amount || 0,
+            description: `${
+              usage.aaSponsorshipAmount?.quantity || 0
+            } x AA Gas Sponsorship (at $0.011 / month)`,
+            thirdwebSku: "usage:aa_sponsorship",
+          },
+          // OP Grant
+          {
+            amount: usage.aaSponsorshipOpGrantAmount?.amount || 0,
+            description: `${
+              usage.aaSponsorshipOpGrantAmount?.quantity || 0
+            } x AA Gas Sponsorship (OP) (at $0.011 / month)`,
+            thirdwebSku: "usage:aa_sponsorship_op_grant",
+          },
+        ],
+      },
     },
-    rateLimitedAt: {},
-    ...overrides,
-  };
+  ];
 }
diff --git a/apps/dashboard/src/tw-components/button.tsx b/apps/dashboard/src/tw-components/button.tsx
index a7e49399411..30e3f261d5c 100644
--- a/apps/dashboard/src/tw-components/button.tsx
+++ b/apps/dashboard/src/tw-components/button.tsx
@@ -121,7 +121,7 @@ export const LinkButton = reactForwardRef<HTMLButtonElement, LinkButtonProps>(
 
 LinkButton.displayName = "LinkButton";
 
-export interface TrackedLinkButtonProps extends LinkButtonProps {
+interface TrackedLinkButtonProps extends LinkButtonProps {
   category: string;
   label?: string;
 }
diff --git a/apps/dashboard/src/utils/number.ts b/apps/dashboard/src/utils/number.ts
index 2f54942ebbf..128ae2da288 100644
--- a/apps/dashboard/src/utils/number.ts
+++ b/apps/dashboard/src/utils/number.ts
@@ -25,10 +25,6 @@ export const toSize = (value: number | bigint, defaultUnit?: string) => {
   return formatted;
 };
 
-export const toNumber = (value: number) => {
-  return new Intl.NumberFormat(undefined).format(value);
-};
-
 export const toPercent = (num1: number, num2: number) => {
   return Math.round(((num1 / num2) * 100 * 10) / 10);
 };
diff --git a/apps/dashboard/src/utils/pricing.tsx b/apps/dashboard/src/utils/pricing.tsx
index 5f962dae908..0126452763e 100644
--- a/apps/dashboard/src/utils/pricing.tsx
+++ b/apps/dashboard/src/utils/pricing.tsx
@@ -1,20 +1,23 @@
-import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
 import Link from "next/link";
+import type { Team } from "../@/api/team";
 
 export const CONTACT_US_URL =
   "https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro";
 
-export const PLANS: {
-  [T in AccountPlan]: {
+type NonFreeTeamPlan = Exclude<Team["billingPlan"], "free">;
+
+export const TEAM_PLANS: Record<
+  NonFreeTeamPlan,
+  {
     title: string;
     price: string | number;
     subTitle: string | null;
     trialPeriodDays: number;
     description: string;
     features: Array<string | string[]>;
-  };
-} = {
-  [accountPlan.free]: {
+  }
+> = {
+  starter: {
     title: "Starter",
     price: 0,
     subTitle: null,
@@ -29,7 +32,7 @@ export const PLANS: {
       "Blockchain infra (RPC, IPFS)",
     ],
   },
-  [accountPlan.growth]: {
+  growth: {
     price: 99,
     title: "Growth",
     subTitle: "Everything in Starter, plus:",
@@ -45,7 +48,7 @@ export const PLANS: {
       "Advanced paymaster rules",
     ],
   },
-  [accountPlan.pro]: {
+  pro: {
     price: "Custom",
     title: "Pro",
     subTitle: "Everything in Growth, plus:",
@@ -60,14 +63,6 @@ export const PLANS: {
       "Enterprise grade SLAs",
     ],
   },
-  [accountPlan.enterprise]: {
-    price: "$$$",
-    title: "Enterprise",
-    subTitle: "Everything in Pro, plus:",
-    trialPeriodDays: 0,
-    description: "Contact our Sales team to get you onboarded.",
-    features: [],
-  },
 };
 
 interface PricingItem {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8430a8841f6..b7629ce0037 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -141,12 +141,6 @@ importers:
       '@shazow/whatsabi':
         specifier: ^0.16.0
         version: 0.16.0(@noble/hashes@1.5.0)(bufferutil@4.0.8)(utf-8-validate@5.0.10)
-      '@stripe/react-stripe-js':
-        specifier: ^2.8.1
-        version: 2.8.1(@stripe/stripe-js@3.5.0)(react-dom@19.0.0-rc-69d4b800-20241021(react@19.0.0-rc-69d4b800-20241021))(react@19.0.0-rc-69d4b800-20241021)
-      '@stripe/stripe-js':
-        specifier: ^3.5.0
-        version: 3.5.0
       '@tanstack/react-query':
         specifier: 5.60.2
         version: 5.60.2(react@19.0.0-rc-69d4b800-20241021)
@@ -5339,17 +5333,6 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@stripe/react-stripe-js@2.8.1':
-    resolution: {integrity: sha512-C410jVKOATinXLalWotab6E6jlWAlbqUDWL9q1km0p5UHrvnihjjYzA8imYXc4xc4Euf9GeKDQc4n35HKZvgwg==}
-    peerDependencies:
-      '@stripe/stripe-js': ^1.44.1 || ^2.0.0 || ^3.0.0 || ^4.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-
-  '@stripe/stripe-js@3.5.0':
-    resolution: {integrity: sha512-pKS3wZnJoL1iTyGBXAvCwduNNeghJHY6QSRSNNvpYnrrQrLZ6Owsazjyynu0e0ObRgks0i7Rv+pe2M7/MBTZpQ==}
-    engines: {node: '>=12.16'}
-
   '@swagger-api/apidom-ast@1.0.0-alpha.5':
     resolution: {integrity: sha512-ZH3xryzmwd8OvUdOJH4ujNAyQMXN6NCrRT0HGR8z9TnA0nFPFoOAswq7317mCn77VJmViu/tpCuvmRS0a9BROg==}
 
@@ -7256,10 +7239,6 @@ packages:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
 
-  cross-spawn@7.0.5:
-    resolution: {integrity: sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==}
-    engines: {node: '>= 8'}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -20018,15 +19997,6 @@ snapshots:
     dependencies:
       storybook: 8.4.4(bufferutil@4.0.8)(prettier@3.3.3)(utf-8-validate@5.0.10)
 
-  '@stripe/react-stripe-js@2.8.1(@stripe/stripe-js@3.5.0)(react-dom@19.0.0-rc-69d4b800-20241021(react@19.0.0-rc-69d4b800-20241021))(react@19.0.0-rc-69d4b800-20241021)':
-    dependencies:
-      '@stripe/stripe-js': 3.5.0
-      prop-types: 15.8.1
-      react: 19.0.0-rc-69d4b800-20241021
-      react-dom: 19.0.0-rc-69d4b800-20241021(react@19.0.0-rc-69d4b800-20241021)
-
-  '@stripe/stripe-js@3.5.0': {}
-
   '@swagger-api/apidom-ast@1.0.0-alpha.5':
     dependencies:
       '@babel/runtime-corejs3': 7.24.7
@@ -22687,12 +22657,6 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
-  cross-spawn@7.0.5:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -23661,7 +23625,7 @@ snapshots:
       '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.5
+      cross-spawn: 7.0.6
       debug: 4.3.7(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0