diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index a8c73a0a4d28c8..2d7207fb3529ab 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -281,7 +281,7 @@ export default function Menu() {
                 )}
                 <div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
                     <ContextMenu
-                        classes="w-64 left-0"
+                        customClasses="w-64 left-0"
                         menuEntries={[
                             {
                                 title: userFullName,
diff --git a/components/dashboard/src/admin/License.tsx b/components/dashboard/src/admin/License.tsx
index 398e950e70bcd0..20a3da19908468 100644
--- a/components/dashboard/src/admin/License.tsx
+++ b/components/dashboard/src/admin/License.tsx
@@ -50,7 +50,7 @@ export default function License() {
                 subtitle="License associated with your Gitpod installation"
             >
                 <div className="flex flex-row space-x-4">
-                    <Card>
+                    <Card className="w-72 h-64">
                         <span>
                             {licenseLevel}
                             {paid}
@@ -70,7 +70,7 @@ export default function License() {
                             </div>
                         </span>
                     </Card>
-                    <SolidCard>
+                    <SolidCard className="w-72 h-64">
                         <span>
                             <div className="my-2">{statusMessage}</div>
                             <p className="dark:text-gray-500 font-semibold">Registered Users</p>
diff --git a/components/dashboard/src/admin/TeamDetail.tsx b/components/dashboard/src/admin/TeamDetail.tsx
index e206a64d1cb323..2104bc5faddbbc 100644
--- a/components/dashboard/src/admin/TeamDetail.tsx
+++ b/components/dashboard/src/admin/TeamDetail.tsx
@@ -125,7 +125,7 @@ export default function TeamDetail(props: { team: Team }) {
                             <ItemField className="flex items-center my-auto">
                                 <span className="text-gray-400 capitalize">
                                     <DropDown
-                                        contextMenuWidth="w-32"
+                                        customClasses="w-32"
                                         activeEntry={m.role}
                                         entries={[
                                             {
diff --git a/components/dashboard/src/components/Arrow.tsx b/components/dashboard/src/components/Arrow.tsx
index 4d555386c818dc..ff1132afc53798 100644
--- a/components/dashboard/src/components/Arrow.tsx
+++ b/components/dashboard/src/components/Arrow.tsx
@@ -4,10 +4,14 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-function Arrow(props: { up: boolean }) {
+function Arrow(props: { up: boolean; customBorderClasses?: string }) {
     return (
         <span
-            className="mx-2 border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400"
+            className={
+                "mx-2 " +
+                (props.customBorderClasses ||
+                    "border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400")
+            }
             style={{
                 marginTop: 2,
                 marginBottom: 2,
diff --git a/components/dashboard/src/components/Card.tsx b/components/dashboard/src/components/Card.tsx
index cf44669ec2b188..6f9953dcd1fcd5 100644
--- a/components/dashboard/src/components/Card.tsx
+++ b/components/dashboard/src/components/Card.tsx
@@ -8,7 +8,7 @@ function Card(p: { className?: string; onClick?: () => void; children?: React.Re
     return (
         <div
             className={
-                "flex flex-col rounded-xl w-72 h-64 px-4 bg-gray-800 dark:bg-gray-100 text-gray-200 dark:text-gray-500 " +
+                "flex flex-col rounded-xl px-4 bg-gray-800 dark:bg-gray-100 text-gray-200 dark:text-gray-500 " +
                 (p.className || "")
             }
             onClick={p.onClick}
diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index 9e135ffe1dd78e..7b4db1518ef80e 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -11,7 +11,7 @@ import { Link } from "react-router-dom";
 export interface ContextMenuProps {
     children?: React.ReactChild[] | React.ReactChild;
     menuEntries: ContextMenuEntry[];
-    classes?: string;
+    customClasses?: string;
 }
 
 export interface ContextMenuEntry {
@@ -98,7 +98,7 @@ function ContextMenu(props: ContextMenuProps) {
             {expanded ? (
                 <div
                     className={`mt-2 z-50 bg-white dark:bg-gray-900 absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg truncated ${
-                        props.classes || "w-48 right-0"
+                        props.customClasses || "w-48 right-0"
                     }`}
                     data-analytics='{"button_type":"context_menu"}'
                 >
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
index 5fc668cf099ee3..7cb488d83a9458 100644
--- a/components/dashboard/src/components/DropDown.tsx
+++ b/components/dashboard/src/components/DropDown.tsx
@@ -10,7 +10,8 @@ import ContextMenu from "./ContextMenu";
 
 export interface DropDownProps {
     prefix?: string;
-    contextMenuWidth?: string;
+    customClasses?: string;
+    renderAsLink?: boolean;
     activeEntry?: string;
     entries: DropDownEntry[];
 }
@@ -35,14 +36,20 @@ function DropDown(props: DropDownProps) {
             },
         };
     });
-    const font =
-        "text-gray-400 dark:text-gray-500 text-sm leading-1 group hover:text-gray-600 dark:hover:text-gray-400 transition ease-in-out";
+    const defaultFont = "text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 ";
+    const asLinkFont = "text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-500";
+    const asLinkArrowBorder =
+        "border-blue-500 dark:border-blue-400 group-hover:border-blue-600 dark:group-hover:border-blue-500";
     return (
-        <ContextMenu menuEntries={enhancedEntries} classes={`${props.contextMenuWidth} right-0`}>
-            <span className={`py-2 cursor-pointer ${font}`}>
+        <ContextMenu menuEntries={enhancedEntries} customClasses={`${props.customClasses} right-0`}>
+            <span
+                className={`py-2 cursor-pointer text-sm leading-1 group ${
+                    props.renderAsLink ? asLinkFont : defaultFont
+                } transition ease-in-out`}
+            >
                 {props.prefix}
                 {current}
-                <Arrow up={false} />
+                <Arrow up={false} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
             </span>
         </ContextMenu>
     );
diff --git a/components/dashboard/src/components/PendingChangesDropdown.tsx b/components/dashboard/src/components/PendingChangesDropdown.tsx
index c95e166ef09f4d..249871ec85d452 100644
--- a/components/dashboard/src/components/PendingChangesDropdown.tsx
+++ b/components/dashboard/src/components/PendingChangesDropdown.tsx
@@ -41,7 +41,7 @@ export default function PendingChangesDropdown(props: { workspaceInstance?: Work
         return <div className="text-sm text-gray-400 dark:text-gray-500">No Changes</div>;
     }
     return (
-        <ContextMenu menuEntries={menuEntries} classes="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0">
+        <ContextMenu menuEntries={menuEntries} customClasses="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0">
             <p className="flex justify-center text-gitpod-red">
                 <span>
                     {totalChanges} Change{totalChanges === 1 ? "" : "s"}
diff --git a/components/dashboard/src/components/PillLabel.tsx b/components/dashboard/src/components/PillLabel.tsx
index cbf456927ea807..a12368ab8d1265 100644
--- a/components/dashboard/src/components/PillLabel.tsx
+++ b/components/dashboard/src/components/PillLabel.tsx
@@ -17,7 +17,7 @@
 export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
     const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
     const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
-    const style = `ml-2 px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
+    const style = `px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
         props.className
     }`;
     return <span className={style}>{props.children}</span>;
diff --git a/components/dashboard/src/components/SolidCard.tsx b/components/dashboard/src/components/SolidCard.tsx
index 85b2b0d2548612..98b045b5e427ef 100644
--- a/components/dashboard/src/components/SolidCard.tsx
+++ b/components/dashboard/src/components/SolidCard.tsx
@@ -8,7 +8,7 @@ function SolidCard(p: { className?: string; onClick?: () => void; children?: Rea
     return (
         <div
             className={
-                "flex flex-col rounded-xl w-72 h-64 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-600 " +
+                "flex flex-col rounded-xl px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 " +
                 (p.className || "")
             }
             onClick={p.onClick}
diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
index 1ddeb8a7855ccf..7470529c33322b 100644
--- a/components/dashboard/src/projects/NewProject.tsx
+++ b/components/dashboard/src/projects/NewProject.tsx
@@ -376,7 +376,10 @@ export default function NewProject() {
                 </p>
                 <div className={`mt-2 flex-col ${noReposAvailable && isGitHub() ? "w-96" : ""}`}>
                     <div className="px-8 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
-                        <ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
+                        <ContextMenu
+                            customClasses="w-full left-0 cursor-pointer"
+                            menuEntries={getDropDownEntries(accounts)}
+                        >
                             <div className="w-full">
                                 {!selectedAccount && user && user.name && user.avatarUrl && (
                                     <>
diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
index 1c5ce557946577..441a654e806512 100644
--- a/components/dashboard/src/projects/Prebuilds.tsx
+++ b/components/dashboard/src/projects/Prebuilds.tsx
@@ -180,7 +180,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
                     </div>
                     <div className="flex-1" />
                     <div className="py-3 pl-3">
-                        <DropDown prefix="Prebuild Status: " contextMenuWidth="w-32" entries={statusFilterEntries()} />
+                        <DropDown prefix="Prebuild Status: " customClasses="w-32" entries={statusFilterEntries()} />
                     </div>
                     {!isLoadingPrebuilds && prebuilds.length === 0 && !props.isAdminDashboard && (
                         <button onClick={() => triggerPrebuild(null)} className="ml-2">
diff --git a/components/dashboard/src/projects/ProjectSettings.tsx b/components/dashboard/src/projects/ProjectSettings.tsx
index 72e2559d6a50f3..3a6362ee15056b 100644
--- a/components/dashboard/src/projects/ProjectSettings.tsx
+++ b/components/dashboard/src/projects/ProjectSettings.tsx
@@ -87,7 +87,7 @@ export default function () {
                 title={
                     <span>
                         Enable Incremental Prebuilds{" "}
-                        <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">
+                        <PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
                             Beta
                         </PillLabel>
                     </span>
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
index 8f9b8694588520..83bc1b4c12e219 100644
--- a/components/dashboard/src/settings/Preferences.tsx
+++ b/components/dashboard/src/settings/Preferences.tsx
@@ -118,7 +118,7 @@ export default function Preferences() {
 
                 <h3 className="mt-12">
                     Dotfiles{" "}
-                    <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">
+                    <PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
                         Beta
                     </PillLabel>
                 </h3>
diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx
index 9f012b93720f45..3c8e4c62500d85 100644
--- a/components/dashboard/src/teams/Members.tsx
+++ b/components/dashboard/src/teams/Members.tsx
@@ -145,7 +145,7 @@ export default function () {
                     <div className="py-3 pl-3">
                         <DropDown
                             prefix="Role: "
-                            contextMenuWidth="w-32"
+                            customClasses="w-32"
                             activeEntry={roleFilter === "owner" ? "Owner" : roleFilter === "member" ? "Member" : "All"}
                             entries={[
                                 {
@@ -226,7 +226,7 @@ export default function () {
                                             m.role
                                         ) : (
                                             <DropDown
-                                                contextMenuWidth="w-32"
+                                                customClasses="w-32"
                                                 activeEntry={m.role}
                                                 entries={[
                                                     {
diff --git a/components/dashboard/src/teams/TeamBilling.tsx b/components/dashboard/src/teams/TeamBilling.tsx
index c42221fadc7272..48b7c0dba27042 100644
--- a/components/dashboard/src/teams/TeamBilling.tsx
+++ b/components/dashboard/src/teams/TeamBilling.tsx
@@ -143,13 +143,14 @@ export default function TeamBilling() {
             title="Billing"
             subtitle="Manage team billing and plans."
         >
-            <h3>{!teamPlan ? "No billing plan" : "Plan"}</h3>
+            <h3>{!teamPlan ? "Upgrade Team Plan" : "Team Plan"}</h3>
             <h2 className="text-gray-500">
                 {!teamPlan ? (
                     <div className="flex space-x-1">
-                        <span>Select a new billing plan for this team. Currency:</span>
+                        <span>Upgrade team plan to access unlimited workspace hours, and more. Currency:</span>
                         <DropDown
-                            contextMenuWidth="w-32"
+                            customClasses="w-32"
+                            renderAsLink={true}
                             activeEntry={currency}
                             entries={[
                                 {
@@ -172,12 +173,12 @@ export default function TeamBilling() {
             <div className="mt-4 space-x-4 flex">
                 {isLoading && (
                     <>
-                        <SolidCard>
+                        <SolidCard className="w-72 h-64">
                             <div className="w-full h-full flex flex-col items-center justify-center">
                                 <Spinner className="h-5 w-5 animate-spin" />
                             </div>
                         </SolidCard>
-                        <SolidCard>
+                        <SolidCard className="w-72 h-64">
                             <div className="w-full h-full flex flex-col items-center justify-center">
                                 <Spinner className="h-5 w-5 animate-spin" />
                             </div>
@@ -188,14 +189,22 @@ export default function TeamBilling() {
                     <>
                         {availableTeamPlans.map((tp) => (
                             <>
-                                <SolidCard
-                                    className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
-                                    onClick={() => checkout(tp)}
-                                >
+                                <SolidCard className="w-72 h-72">
                                     <div className="px-2 py-5 flex-grow flex flex-col">
-                                        <div className="font-medium text-base">{tp.name}</div>
-                                        <div className="font-semibold text-gray-500 text-sm">Unlimited hours</div>
-                                        <div className="mt-8 font-semibold text-sm">Includes:</div>
+                                        <div className="font-semibold text-gray-800 dark:text-gray-100 text-lg">
+                                            {tp.name}
+                                        </div>
+                                        <div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
+                                            Unlimited hours
+                                        </div>
+                                        <div className="mt-2">
+                                            <PillLabel type="warn" className="font-semibold normal-case text-sm">
+                                                {members.length} x {Currency.getSymbol(tp.currency)}
+                                                {tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
+                                                {members.length * tp.pricePerMonth} per month
+                                            </PillLabel>
+                                        </div>
+                                        <div className="mt-4 font-semibold text-sm">Includes:</div>
                                         <div className="flex flex-col items-start text-sm">
                                             {(featuresByPlanType[tp.type] || []).map((f) => (
                                                 <span className="inline-flex space-x-1">
@@ -204,12 +213,10 @@ export default function TeamBilling() {
                                                 </span>
                                             ))}
                                         </div>
-                                        <div className="flex-grow flex flex-col items-end justify-end">
-                                            <PillLabel type="warn" className="font-semibold normal-case text-sm">
-                                                {members.length} x {Currency.getSymbol(tp.currency)}
-                                                {tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}
-                                                {members.length * tp.pricePerMonth} per month
-                                            </PillLabel>
+                                        <div className="flex-grow flex flex-col items-stretch justify-end">
+                                            <button className="m-0" onClick={() => checkout(tp)}>
+                                                Upgrade to {tp.name}
+                                            </button>
                                         </div>
                                     </div>
                                 </SolidCard>
@@ -219,10 +226,14 @@ export default function TeamBilling() {
                 )}
                 {!isLoading && teamPlan && (
                     <>
-                        <Card>
+                        <Card className="w-72 h-64">
                             <div className="px-2 py-5 flex-grow flex flex-col">
-                                <div className="font-bold text-base">{teamPlan.name}</div>
-                                <div className="font-semibold text-gray-500 text-sm">Unlimited hours</div>
+                                <div className="font-semibold text-gray-100 dark:text-gray-800 text-lg">
+                                    {teamPlan.name}
+                                </div>
+                                <div className="font-semibold text-gray-400 dark:text-gray-600 text-sm">
+                                    Unlimited hours
+                                </div>
                                 <div className="mt-8 font-semibold text-sm">Includes:</div>
                                 <div className="flex flex-col items-start text-sm">
                                     {(featuresByPlanType[teamPlan.type] || []).map((f) => (
@@ -232,25 +243,31 @@ export default function TeamBilling() {
                                         </span>
                                     ))}
                                 </div>
-                                <div className="flex-grow flex flex-col items-end justify-end"></div>
+                                <div className="flex-grow flex flex-col items-stretch justify-end"></div>
                             </div>
                         </Card>
                         {!teamSubscription ? (
-                            <SolidCard>
+                            <SolidCard className="w-72 h-64">
                                 <div className="w-full h-full flex flex-col items-center justify-center">
                                     <Spinner className="h-5 w-5 animate-spin" />
                                 </div>
                             </SolidCard>
                         ) : (
-                            <SolidCard>
+                            <SolidCard className="w-72 h-64">
                                 <div className="px-2 py-5 flex-grow flex flex-col">
-                                    <div className="font-medium text-base text-gray-400">Members</div>
-                                    <div className="font-semibold text-base text-gray-600">{members.length}</div>
-                                    <div className="mt-8 font-medium text-base text-gray-400">Next invoice on</div>
-                                    <div className="font-semibold text-base text-gray-600">
+                                    <div className="font-medium text-base text-gray-400 dark:text-gray-600">
+                                        Members
+                                    </div>
+                                    <div className="font-semibold text-base text-gray-600 dark:text-gray-400">
+                                        {members.length}
+                                    </div>
+                                    <div className="mt-4 font-medium text-base text-gray-400 dark:text-gray-600">
+                                        Next invoice on
+                                    </div>
+                                    <div className="font-semibold text-base text-gray-600 dark:text-gray-400">
                                         {guessNextInvoiceDate(teamSubscription.startDate).toDateString()}
                                     </div>
-                                    <div className="flex-grow flex flex-col items-end justify-end">
+                                    <div className="flex-grow flex flex-col items-stretch justify-end">
                                         <button
                                             onClick={() => {
                                                 if (team) {
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
index 1f0fd0e8e8135a..310feab4b2f145 100644
--- a/components/dashboard/src/teams/TeamSettings.tsx
+++ b/components/dashboard/src/teams/TeamSettings.tsx
@@ -24,10 +24,10 @@ export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boole
         },
         ...(showPaymentUI
             ? [
-                  //   {
-                  //       title: "Billing",
-                  //       link: [`/t/${team?.slug}/billing`],
-                  //   },
+                  {
+                      title: "Billing",
+                      link: [`/t/${team?.slug}/billing`],
+                  },
               ]
             : []),
     ];
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 636c9f44c2c966..ccd1b7ea45f202 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -85,7 +85,7 @@ export default function () {
                             <div className="py-3 pl-3">
                                 <DropDown
                                     prefix="Limit: "
-                                    contextMenuWidth="w-32"
+                                    customClasses="w-32"
                                     activeEntry={workspaceModel ? workspaceModel?.limit + "" : undefined}
                                     entries={[
                                         {
diff --git a/components/ee/payment-endpoint/src/chargebee/team-subscription-handler.ts b/components/ee/payment-endpoint/src/chargebee/team-subscription-handler.ts
index 0281232caf32ab..7f9ba6a2448035 100644
--- a/components/ee/payment-endpoint/src/chargebee/team-subscription-handler.ts
+++ b/components/ee/payment-endpoint/src/chargebee/team-subscription-handler.ts
@@ -11,9 +11,11 @@ import { TeamSubscription2DB } from "@gitpod/gitpod-db/lib/team-subscription-2-d
 import { log, LogContext } from "@gitpod/gitpod-protocol/lib/util/logging";
 import { Plans } from "@gitpod/gitpod-protocol/lib/plans";
 import { TeamSubscription, TeamSubscription2 } from "@gitpod/gitpod-protocol/lib/team-subscription-protocol";
+import { formatDate } from "@gitpod/gitpod-protocol/lib/util/date-time";
 import { getCancelledAt, getStartDate } from "./chargebee-subscription-helper";
 import { Chargebee as chargebee } from "./chargebee-types";
 import { EventHandler } from "./chargebee-event-handler";
+import { UpgradeHelper } from "./upgrade-helper";
 import { TeamSubscriptionService } from "../accounting/team-subscription-service";
 import { TeamSubscription2Service } from "../accounting/team-subscription2-service";
 import { Config } from "../config";
@@ -25,6 +27,7 @@ export class TeamSubscriptionHandler implements EventHandler<chargebee.Subscript
     @inject(TeamSubscription2DB) protected readonly db2: TeamSubscription2DB;
     @inject(TeamSubscriptionService) protected readonly service: TeamSubscriptionService;
     @inject(TeamSubscription2Service) protected readonly service2: TeamSubscription2Service;
+    @inject(UpgradeHelper) protected readonly upgradeHelper: UpgradeHelper;
 
     canHandle(event: chargebee.Event<any>): boolean {
         if (event.event_type.startsWith("subscription")) {
@@ -133,6 +136,34 @@ export class TeamSubscriptionHandler implements EventHandler<chargebee.Subscript
                     const cancelledAt = getCancelledAt(chargebeeSubscription);
                     sub.endDate = cancelledAt;
                     await this.service2.cancelAllTeamMemberSubscriptions(sub, new Date(cancelledAt));
+                } else if (chargebeeSubscription.plan_quantity > sub.quantity) {
+                    // Upgrade: Charge for it!
+                    const oldQuantity = sub.quantity;
+                    const newQuantity = chargebeeSubscription.plan_quantity;
+                    let pricePerUnitInCents = chargebeeSubscription.plan_unit_price;
+                    if (pricePerUnitInCents === undefined) {
+                        const plan = Plans.getById(sub.planId)!;
+                        pricePerUnitInCents = plan.pricePerMonth * 100;
+                    }
+                    const currentTermRemainingRatio =
+                        this.upgradeHelper.getCurrentTermRemainingRatio(chargebeeSubscription);
+                    const diffInCents = Math.round(
+                        pricePerUnitInCents * (newQuantity - oldQuantity) * currentTermRemainingRatio,
+                    );
+                    const upgradeTimestamp = new Date().toISOString();
+                    const dateString = formatDate(upgradeTimestamp);
+                    const description = `Pro-rated upgrade from ${oldQuantity} to ${newQuantity} team members (${dateString})`;
+                    this.upgradeHelper
+                        .chargeForUpgrade("", sub.paymentReference, diffInCents, description, upgradeTimestamp)
+                        .catch((error) => {
+                            log.error(`Could not charge for upgrade on TeamSubscription2 quantity increase!`, {
+                                error,
+                                ts2Id: sub.id,
+                                chargebeeId: sub.paymentReference,
+                                oldQuantity,
+                                newQuantity,
+                            });
+                        });
                 }
                 sub.quantity = chargebeeSubscription.plan_quantity;
                 await db2.storeEntry(sub);
diff --git a/components/server/ee/src/workspace/gitpod-server-impl.ts b/components/server/ee/src/workspace/gitpod-server-impl.ts
index 78803426991ac5..f548b63701a558 100644
--- a/components/server/ee/src/workspace/gitpod-server-impl.ts
+++ b/components/server/ee/src/workspace/gitpod-server-impl.ts
@@ -1436,37 +1436,9 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
 
     protected async updateTeamSubscriptionQuantity(teamSubscription: TeamSubscription2): Promise<void> {
         const members = await this.teamDB.findMembersByTeam(teamSubscription.teamId);
-        const oldQuantity = teamSubscription.quantity;
         const newQuantity = members.length;
         try {
-            if (oldQuantity < newQuantity) {
-                // Upgrade: Charge for it!
-                const chargebeeSubscription = await this.getChargebeeSubscription(
-                    {},
-                    teamSubscription.paymentReference,
-                );
-                let pricePerUnitInCents = chargebeeSubscription.plan_unit_price;
-                if (pricePerUnitInCents === undefined) {
-                    const plan = Plans.getById(teamSubscription.planId)!;
-                    pricePerUnitInCents = plan.pricePerMonth * 100;
-                }
-                const currentTermRemainingRatio =
-                    this.upgradeHelper.getCurrentTermRemainingRatio(chargebeeSubscription);
-                const diffInCents = Math.round(
-                    pricePerUnitInCents * (newQuantity - oldQuantity) * currentTermRemainingRatio,
-                );
-                const upgradeTimestamp = new Date().toISOString();
-                const description = `Pro-rated upgrade from '${oldQuantity}' to '${newQuantity}' team members (${formatDate(
-                    upgradeTimestamp,
-                )})`;
-                await this.upgradeHelper.chargeForUpgrade(
-                    "",
-                    teamSubscription.paymentReference,
-                    diffInCents,
-                    description,
-                    upgradeTimestamp,
-                );
-            }
+            // We only charge for upgrades in the Chargebee callback, to avoid race conditions.
             await this.doUpdateSubscription("", teamSubscription.paymentReference, {
                 plan_quantity: newQuantity,
                 end_of_term: false,