diff --git a/apps/dashboard/src/@/components/blocks/UpsellBannerCard.stories.tsx b/apps/dashboard/src/@/components/blocks/UpsellBannerCard.stories.tsx
new file mode 100644
index 00000000000..3355e4c2e08
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/UpsellBannerCard.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowRightIcon, RocketIcon, StarIcon } from "lucide-react";
+import { BadgeContainer } from "../../../stories/utils";
+import { UpsellBannerCard } from "./UpsellBannerCard";
+
+function Story() {
+  return (
+    <div className="container flex max-w-4xl flex-col gap-8 py-10">
+      <BadgeContainer label="Green with icon (default)">
+        <UpsellBannerCard
+          title="Unlock more with thirdweb"
+          description="Upgrade to increase limits and access advanced features."
+          cta={{
+            text: "View plans",
+            icon: <ArrowRightIcon className="size-4" />,
+            link: "#",
+          }}
+          trackingCategory="storybook"
+          trackingLabel="green"
+          icon={<RocketIcon className="size-5" />}
+          accentColor="green"
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Blue accent">
+        <UpsellBannerCard
+          title="Need more storage?"
+          description="Add additional space to your account."
+          cta={{
+            text: "Upgrade storage",
+            icon: <ArrowRightIcon className="size-4" />,
+            link: "#",
+          }}
+          trackingCategory="storybook"
+          trackingLabel="blue"
+          icon={<StarIcon className="size-5" />}
+          accentColor="blue"
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Purple without leading icon">
+        <UpsellBannerCard
+          title="Join the beta"
+          description="Get early access to experimental features."
+          cta={{
+            text: "Request access",
+            icon: <ArrowRightIcon className="size-4" />,
+            link: "#",
+          }}
+          trackingCategory="storybook"
+          trackingLabel="purple"
+          accentColor="purple"
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+const meta = {
+  title: "blocks/Banners/UpsellBannerCard",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
diff --git a/apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx b/apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx
new file mode 100644
index 00000000000..04f86fbb030
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { cn } from "@/lib/utils";
+import type React from "react";
+
+const ACCENT = {
+  green: {
+    border: "border-green-600 dark:border-green-700",
+    bgFrom: "from-green-50 dark:from-green-900/20",
+    blur: "bg-green-600",
+    title: "text-green-900 dark:text-green-200",
+    desc: "text-green-800 dark:text-green-300",
+    iconBg: "bg-green-600 text-white",
+    btn: "bg-green-600 text-white hover:bg-green-700",
+  },
+  blue: {
+    border: "border-blue-600 dark:border-blue-700",
+    bgFrom: "from-blue-50 dark:from-blue-900/20",
+    blur: "bg-blue-600",
+    title: "text-blue-900 dark:text-blue-200",
+    desc: "text-blue-800 dark:text-blue-300",
+    iconBg: "bg-blue-600 text-white",
+    btn: "bg-blue-600 text-white hover:bg-blue-700",
+  },
+  purple: {
+    border: "border-purple-600 dark:border-purple-700",
+    bgFrom: "from-purple-50 dark:from-purple-900/20",
+    blur: "bg-purple-600",
+    title: "text-purple-900 dark:text-purple-200",
+    desc: "text-purple-800 dark:text-purple-300",
+    iconBg: "bg-purple-600 text-white",
+    btn: "bg-purple-600 text-white hover:bg-purple-700",
+  },
+} as const;
+
+type UpsellBannerCardProps = {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  cta: {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    link: string;
+  };
+  trackingCategory: string;
+  trackingLabel: string;
+  accentColor?: keyof typeof ACCENT;
+  icon?: React.ReactNode;
+};
+
+export function UpsellBannerCard(props: UpsellBannerCardProps) {
+  const color = ACCENT[props.accentColor || "green"];
+
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-lg border bg-gradient-to-r p-5",
+        color.border,
+        color.bgFrom,
+      )}
+    >
+      {/* Decorative blur */}
+      <div
+        className={cn(
+          "-right-10 -top-10 pointer-events-none absolute size-28 rounded-full opacity-20 blur-2xl",
+          color.blur,
+        )}
+      />
+
+      <div className="relative flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-start gap-3">
+          {props.icon ? (
+            <div
+              className={cn(
+                "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+                color.iconBg,
+              )}
+            >
+              {props.icon}
+            </div>
+          ) : null}
+
+          <div>
+            <h3
+              className={cn(
+                "font-semibold text-lg tracking-tight",
+                color.title,
+              )}
+            >
+              {props.title}
+            </h3>
+            <p className={cn("mt-0.5 text-sm", color.desc)}>
+              {props.description}
+            </p>
+          </div>
+        </div>
+
+        <Button
+          asChild
+          size="sm"
+          className={cn(
+            "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
+            color.btn,
+          )}
+        >
+          <TrackedLinkTW
+            href={props.cta.link}
+            category={props.trackingCategory}
+            label={props.trackingLabel}
+          >
+            {props.cta.text}
+            {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
+          </TrackedLinkTW>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx b/apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx
index 11c7c50b852..fc1b6cc3d2c 100644
--- a/apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx
+++ b/apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx
@@ -116,7 +116,7 @@ function TeamRow(props: {
         <div>
           <div className="flex items-center gap-3">
             <p className="font-semibold text-sm">{props.team.name}</p>
-            <TeamPlanBadge plan={plan} />
+            <TeamPlanBadge plan={plan} teamSlug={props.team.slug} />
           </div>
           <p className="text-muted-foreground text-sm capitalize">
             {props.role.toLowerCase()}
diff --git a/apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx b/apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx
index 2bd74d420e9..a18315e9d96 100644
--- a/apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx
+++ b/apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx
@@ -1,6 +1,10 @@
+"use client";
+
 import type { Team } from "@/api/team";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { useTrack } from "../../../hooks/analytics/useTrack";
 
 const teamPlanToBadgeVariant: Record<
   Team["billingPlan"],
@@ -31,11 +35,12 @@ export function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
 }
 
 export function TeamPlanBadge(props: {
+  teamSlug: string;
   plan: Team["billingPlan"];
   className?: string;
   postfix?: string;
 }) {
-  return (
+  const badge = (
     <Badge
       variant={teamPlanToBadgeVariant[props.plan]}
       className={cn("px-1.5 capitalize", props.className)}
@@ -43,4 +48,25 @@ export function TeamPlanBadge(props: {
       {`${getTeamPlanBadgeLabel(props.plan)}${props.postfix || ""}`}
     </Badge>
   );
+
+  const track = useTrack();
+
+  if (props.plan === "free") {
+    return (
+      <Link
+        href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
+        onClick={() => {
+          track({
+            category: "billing",
+            action: "show_plans",
+            label: "team_badge",
+          });
+        }}
+      >
+        {badge}
+      </Link>
+    );
+  }
+
+  return badge;
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
index 148de2c96a1..08bfd10311d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
@@ -2,9 +2,9 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
 import { useTransition } from "react";
 import { useStripeRedirectEvent } from "../../../../(stripe)/stripe-redirect/stripeRedirectChannel";
 
@@ -54,9 +54,17 @@ function BillingAlertBanner(props: {
             "border border-red-600 bg-red-100 text-red-800 hover:bg-red-200 dark:border-red-700 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800",
         )}
       >
-        <Link href={`/team/${props.teamSlug}/~/settings/invoices`}>
+        <TrackedLinkTW
+          href={`/team/${props.teamSlug}/~/settings/invoices`}
+          category="billingBanner"
+          label={
+            props.variant === "warning"
+              ? "pastDue_viewInvoices"
+              : "serviceCutoff_payNow"
+          }
+        >
           {props.ctaLabel}
-        </Link>
+        </TrackedLinkTW>
       </Button>
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx
new file mode 100644
index 00000000000..857bd8e7036
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import type { Team } from "@/api/team";
+import { UpsellBannerCard } from "@/components/blocks/UpsellBannerCard";
+import { ArrowRightIcon, RocketIcon } from "lucide-react";
+
+/**
+ * Banner shown to teams on the free plan encouraging them to upgrade.
+ * It links to the team's billing settings page and automatically opens
+ * the pricing modal via the `showPlans=true` query param.
+ */
+export function FreePlanUpsellBannerUI(props: {
+  teamSlug: string;
+  highlightPlan: Team["billingPlan"];
+}) {
+  return (
+    <UpsellBannerCard
+      title="Unlock more with thirdweb"
+      description="Upgrade to increase limits and access advanced features."
+      cta={{
+        text: "View plans",
+        icon: <ArrowRightIcon className="size-4" />,
+        link: `/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${
+          props.highlightPlan || "growth"
+        }`,
+      }}
+      trackingCategory="billingBanner"
+      trackingLabel="freePlan_viewPlans"
+      icon={<RocketIcon className="size-5" />}
+      accentColor="green"
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
index d69e5ed050e..1d7afe40978 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
@@ -8,6 +8,7 @@ import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../login/loginRedirect";
 import { Changelog } from "./_components/Changelog";
+import { FreePlanUpsellBannerUI } from "./_components/FreePlanUpsellBannerUI";
 import { InviteTeamMembersButton } from "./_components/invite-team-members-button";
 import {
   type ProjectWithAnalytics,
@@ -55,11 +56,18 @@ export default async function Page(props: {
       <div className="container flex grow flex-col gap-4 lg:flex-row">
         {/* left */}
         <div className="flex grow flex-col gap-6 pt-8 lg:pb-20">
-          <DismissibleAlert
-            title="Looking for Engines?"
-            description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
-            localStorageId={`${team.id}-engines-alert`}
-          />
+          {team.billingPlan === "free" ? (
+            <FreePlanUpsellBannerUI
+              teamSlug={team.slug}
+              highlightPlan="growth"
+            />
+          ) : (
+            <DismissibleAlert
+              title="Looking for Engines?"
+              description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
+              localStorageId={`${team.id}-engines-alert`}
+            />
+          )}
 
           <TeamProjectsPage
             projects={projectsWithTotalWallets}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx
index b914c47193a..a62bbb96750 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx
@@ -86,7 +86,7 @@ export default async function RPCUsage(props: {
               <div className="font-bold text-2xl capitalize">
                 {currentRateLimit.toLocaleString()} RPS
               </div>
-              <TeamPlanBadge plan={currentPlan} />
+              <TeamPlanBadge plan={currentPlan} teamSlug={team.slug} />
             </div>
           </CardContent>
         </Card>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx
index ed5f8e79cd5..fba9572f5d5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx
@@ -1,8 +1,8 @@
 import { getTeamBySlug } from "@/api/team";
 import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { PosthogIdentifierServer } from "components/wallets/PosthogIdentifierServer";
 import { ArrowRightIcon } from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { getAuthToken } from "../../api/lib/getAuthToken";
@@ -37,17 +37,25 @@ export default async function RootTeamLayout(props: {
   return (
     <div className="flex min-h-dvh flex-col">
       <div className="flex grow flex-col">
-        {team.billingPlan === "starter_legacy" && (
-          <StarterLegacyDiscontinuedBanner teamSlug={team_slug} />
-        )}
+        {(() => {
+          // Show only one banner at a time following priority:
+          // 1. Service cut off (invalid payment)
+          // 2. Past due invoices
+          // 3. Starter legacy plan discontinued notice
+          if (team.billingStatus === "invalidPayment") {
+            return <ServiceCutOffBanner teamSlug={team_slug} />;
+          }
 
-        {team.billingStatus === "pastDue" && (
-          <PastDueBanner teamSlug={team_slug} />
-        )}
+          if (team.billingStatus === "pastDue") {
+            return <PastDueBanner teamSlug={team_slug} />;
+          }
 
-        {team.billingStatus === "invalidPayment" && (
-          <ServiceCutOffBanner teamSlug={team_slug} />
-        )}
+          if (team.billingPlan === "starter_legacy") {
+            return <StarterLegacyDiscontinuedBanner teamSlug={team_slug} />;
+          }
+
+          return null;
+        })()}
 
         {props.children}
       </div>
@@ -80,12 +88,14 @@ function StarterLegacyDiscontinuedBanner(props: {
           size="sm"
           className="mt-3 gap-2 border border-red-600 bg-red-100 text-red-800 hover:bg-red-200 dark:border-red-700 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800"
         >
-          <Link
+          <TrackedLinkTW
             href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
+            category="billingBanner"
+            label="starterLegacy_selectPlan"
           >
             Select a new plan
             <ArrowRightIcon className="size-4" />
-          </Link>
+          </TrackedLinkTW>
         </Button>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
index e7d5a32db63..c132292ac9e 100644
--- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
@@ -66,7 +66,7 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
             />
             <span> {currentTeam.name} </span>
             <TeamVerifiedIcon domain={currentTeam.verifiedDomain} />
-            <TeamPlanBadge plan={teamPlan} />
+            <TeamPlanBadge plan={teamPlan} teamSlug={currentTeam.slug} />
           </Link>
 
           <TeamAndProjectSelectorPopoverButton
diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx
index d916f06036a..0bd1f7b594f 100644
--- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx
@@ -115,7 +115,10 @@ export function TeamSelectionUI(props: {
                         <TeamVerifiedIcon domain={team.verifiedDomain} />
                       </div>
 
-                      <TeamPlanBadge plan={team.billingPlan} />
+                      <TeamPlanBadge
+                        plan={team.billingPlan}
+                        teamSlug={team.slug}
+                      />
                     </Link>
                   </Button>
                 </li>
diff --git a/apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx b/apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
index 3e2f0aa57dc..a3119dbb2b0 100644
--- a/apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
@@ -101,7 +101,10 @@ export default async function Page(props: {
                     >
                       {team.name}
                     </Link>
-                    <TeamPlanBadge plan={team.billingPlan} />
+                    <TeamPlanBadge
+                      plan={team.billingPlan}
+                      teamSlug={team.slug}
+                    />
                     <ChevronRightIcon className="ml-auto size-4 text-muted-foreground group-hover:text-foreground" />
                   </div>
                 );
diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
index da295878cb1..782fafae1a3 100644
--- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
+++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
@@ -113,6 +113,7 @@ export function ApplyForOpCredits(props: {
             <TeamPlanBadge
               className="absolute top-5 right-6"
               plan={creditsRecord.plan}
+              teamSlug={team.slug}
             />
           </div>
 
diff --git a/apps/dashboard/src/components/onboarding/PlanCard.tsx b/apps/dashboard/src/components/onboarding/PlanCard.tsx
index 144a066355f..0cdaceb4bf5 100644
--- a/apps/dashboard/src/components/onboarding/PlanCard.tsx
+++ b/apps/dashboard/src/components/onboarding/PlanCard.tsx
@@ -15,7 +15,7 @@ export function PlanCard({ creditsRecord, teamSlug }: PlanCardProps) {
         <h2 className="font-semibold text-foreground text-lg tracking-tight">
           {creditsRecord.upTo || "Up To"} {creditsRecord.credits} Gas Credits
         </h2>
-        <TeamPlanBadge plan={creditsRecord.plan} />
+        <TeamPlanBadge plan={creditsRecord.plan} teamSlug={teamSlug} />
       </div>
 
       <div className="flex flex-col gap-2 px-6 py-4">
diff --git a/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx b/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx
index fbecb1f40d6..9a64ca1babc 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx
@@ -63,7 +63,11 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
     >
       <div className="inline-flex items-center gap-2">
         {isUpgradeRequired && (
-          <TeamPlanBadge plan={props.requiredPlan} postfix="+" />
+          <TeamPlanBadge
+            plan={props.requiredPlan}
+            teamSlug={props.teamSlug}
+            postfix="+"
+          />
         )}
         <Switch
           {...props.switchProps}