diff --git a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts
index adbda79caf2..71941779508 100644
--- a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts
+++ b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts
@@ -34,8 +34,8 @@ import {
   AdjustPaymentDialogResultType,
 } from "../../shared/adjust-payment-dialog/adjust-payment-dialog.component";
 import {
+  TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE,
   TrialPaymentMethodDialogComponent,
-  TrialPaymentMethodDialogResultType,
 } from "../../shared/trial-subscription-dialog/trial-payment-method-dialog.component";
 import { FreeTrial } from "../../types/free-trial";
 
@@ -202,7 +202,7 @@ export class OrganizationPaymentMethodComponent implements OnDestroy {
       },
     });
     const result = await lastValueFrom(dialogRef.closed);
-    if (result === TrialPaymentMethodDialogResultType.Submitted) {
+    if (result === TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE.SUBMITTED) {
       this.location.replaceState(this.location.path(), "", {});
       if (this.launchPaymentModalAutomatically && !this.organization.enabled) {
         await this.syncService.fullSync(true);
diff --git a/apps/web/src/app/billing/shared/trial-subscription-dialog/plan-selection.service.ts b/apps/web/src/app/billing/shared/trial-subscription-dialog/plan-selection.service.ts
new file mode 100644
index 00000000000..745a52e7199
--- /dev/null
+++ b/apps/web/src/app/billing/shared/trial-subscription-dialog/plan-selection.service.ts
@@ -0,0 +1,113 @@
+import { Injectable } from "@angular/core";
+
+import { PlanInterval, ProductTierType } from "@bitwarden/common/billing/enums";
+import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+
+@Injectable()
+export class PlanSelectionService {
+  getPlanCardContainerClasses(
+    plan: PlanResponse,
+    index: number,
+    isCardDisabled: (index: number) => boolean,
+  ): string[] {
+    const isSelected = plan.isAnnual;
+    const isDisabled = isCardDisabled(index);
+
+    if (isDisabled) {
+      return [
+        "tw-cursor-not-allowed",
+        "tw-bg-secondary-100",
+        "tw-font-normal",
+        "tw-bg-blur",
+        "tw-text-muted",
+        "tw-block",
+        "tw-rounded",
+      ];
+    }
+
+    return isSelected
+      ? [
+          "tw-cursor-pointer",
+          "tw-block",
+          "tw-rounded",
+          "tw-border",
+          "tw-border-solid",
+          "tw-border-primary-600",
+          "hover:tw-border-primary-700",
+          "focus:tw-border-2",
+          "focus:tw-border-primary-700",
+          "focus:tw-rounded-lg",
+        ]
+      : [
+          "tw-cursor-pointer",
+          "tw-block",
+          "tw-rounded",
+          "tw-border",
+          "tw-border-solid",
+          "tw-border-secondary-300",
+          "hover:tw-border-text-main",
+          "focus:tw-border-2",
+          "focus:tw-border-primary-700",
+        ];
+  }
+
+  selectPlan(
+    plan: PlanResponse,
+    selectedInterval: number,
+    currentPlan: PlanResponse,
+    onPlanSelected: (selectedPlan: PlanResponse) => void,
+  ): void {
+    if (
+      selectedInterval === PlanInterval.Monthly &&
+      plan.productTier === ProductTierType.Families
+    ) {
+      return;
+    }
+
+    onPlanSelected(plan);
+  }
+
+  getSelectablePlans(
+    passwordManagerPlans: PlanResponse[],
+    selectedPlan: PlanResponse,
+    planIsEnabled: (plan: PlanResponse) => boolean,
+  ): PlanResponse[] {
+    const result =
+      passwordManagerPlans?.filter(
+        (plan) => plan.productTier === selectedPlan.productTier && planIsEnabled(plan),
+      ) || [];
+
+    result.sort((planA, planB) => planA.displaySortOrder - planB.displaySortOrder).reverse();
+    return result;
+  }
+
+  handleKeydown(
+    event: KeyboardEvent,
+    index: number,
+    isCardDisabled: (index: number) => boolean,
+  ): void {
+    const cardElements = Array.from(document.querySelectorAll(".product-card")) as HTMLElement[];
+    let newIndex = index;
+    const direction = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1;
+
+    if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
+      do {
+        newIndex = (newIndex + direction + cardElements.length) % cardElements.length;
+      } while (isCardDisabled(newIndex) && newIndex !== index);
+
+      event.preventDefault();
+
+      setTimeout(() => {
+        const card = cardElements[newIndex];
+        if (
+          !(
+            card.classList.contains("tw-bg-secondary-100") &&
+            card.classList.contains("tw-text-muted")
+          )
+        ) {
+          card?.focus();
+        }
+      }, 0);
+    }
+  }
+}
diff --git a/apps/web/src/app/billing/shared/trial-subscription-dialog/pricing-calculation.service.ts b/apps/web/src/app/billing/shared/trial-subscription-dialog/pricing-calculation.service.ts
new file mode 100644
index 00000000000..b60773d3f2e
--- /dev/null
+++ b/apps/web/src/app/billing/shared/trial-subscription-dialog/pricing-calculation.service.ts
@@ -0,0 +1,153 @@
+import { Injectable } from "@angular/core";
+
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
+import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+
+@Injectable()
+export class PricingCalculationService {
+  calculatePasswordManagerSubtotal(
+    selectedPlan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+    discount: number,
+  ): number {
+    if (!selectedPlan || !selectedPlan.PasswordManager) {
+      return 0;
+    }
+
+    let subTotal = selectedPlan.PasswordManager.basePrice;
+    if (selectedPlan.PasswordManager.hasAdditionalSeatsOption) {
+      subTotal += this.calculatePasswordManagerSeatTotal(selectedPlan, subscription, false);
+    }
+    if (selectedPlan.PasswordManager.hasPremiumAccessOption) {
+      subTotal += selectedPlan.PasswordManager.premiumAccessOptionPrice;
+    }
+    return subTotal - discount;
+  }
+
+  calculateSecretsManagerSubtotal(
+    selectedPlan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+    secretsManagerTotal: number,
+  ): number {
+    const plan = selectedPlan;
+    if (!plan || !plan.SecretsManager) {
+      return secretsManagerTotal || 0;
+    }
+
+    if (secretsManagerTotal) {
+      return secretsManagerTotal;
+    }
+
+    return (
+      plan.SecretsManager.basePrice +
+      this.calculateSecretsManagerSeatTotal(plan, subscription?.smSeats) +
+      this.calculateAdditionalServiceAccountTotal(plan, 0)
+    ); // This will be calculated separately
+  }
+
+  getPasswordManagerSeats(
+    selectedPlan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+  ): number {
+    if (!selectedPlan) {
+      return 0;
+    }
+
+    if (selectedPlan.productTier === ProductTierType.Families) {
+      return selectedPlan.PasswordManager.baseSeats;
+    }
+    return subscription?.seats;
+  }
+
+  calculateTotal(
+    organization: Organization,
+    selectedPlan: PlanResponse,
+    passwordManagerSubtotal: number,
+    estimatedTax: number,
+    subscription: OrganizationSubscriptionResponse,
+  ): number {
+    if (!organization || !selectedPlan) {
+      return 0;
+    }
+
+    if (organization.useSecretsManager) {
+      return (
+        this.calculateAdditionalStorageTotal(selectedPlan, subscription) +
+        this.calculateSecretsManagerSubtotal(selectedPlan, subscription, 0) +
+        estimatedTax
+      );
+    }
+    return (
+      passwordManagerSubtotal +
+      this.calculateAdditionalStorageTotal(selectedPlan, subscription) +
+      estimatedTax
+    );
+  }
+
+  calculateAdditionalServiceAccount(
+    currentPlan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+  ): number {
+    if (!currentPlan || !currentPlan.SecretsManager) {
+      return 0;
+    }
+
+    const baseServiceAccount = currentPlan.SecretsManager?.baseServiceAccount || 0;
+    const usedServiceAccounts = subscription?.smServiceAccounts || 0;
+
+    const additionalServiceAccounts = baseServiceAccount - usedServiceAccounts;
+
+    return additionalServiceAccounts <= 0 ? Math.abs(additionalServiceAccounts) : 0;
+  }
+
+  calculatePasswordManagerSeatTotal(
+    plan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+    isSecretsManagerTrial: boolean,
+  ): number {
+    if (!plan.PasswordManager.hasAdditionalSeatsOption || isSecretsManagerTrial) {
+      return 0;
+    }
+
+    return plan.PasswordManager.seatPrice * Math.abs(subscription?.seats || 0);
+  }
+
+  calculateSecretsManagerSeatTotal(plan: PlanResponse, seats: number): number {
+    if (!plan.SecretsManager.hasAdditionalSeatsOption) {
+      return 0;
+    }
+
+    return plan.SecretsManager.seatPrice * Math.abs(seats || 0);
+  }
+
+  calculateAdditionalStorageTotal(
+    plan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+  ): number {
+    if (!plan.PasswordManager.hasAdditionalStorageOption) {
+      return 0;
+    }
+
+    return (
+      plan.PasswordManager.additionalStoragePricePerGb *
+      Math.abs(subscription?.maxStorageGb ? subscription.maxStorageGb - 1 : 0)
+    );
+  }
+
+  calculateAdditionalServiceAccountTotal(
+    plan: PlanResponse,
+    additionalServiceAccount: number,
+  ): number {
+    if (!plan.SecretsManager.hasAdditionalServiceAccountOption || additionalServiceAccount === 0) {
+      return 0;
+    }
+
+    return plan.SecretsManager.additionalPricePerServiceAccount * additionalServiceAccount;
+  }
+
+  calculateTotalAppliedDiscount(total: number, discountPercentageFromSub: number): number {
+    return total * (discountPercentageFromSub / 100);
+  }
+}
diff --git a/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.html b/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.html
index cd27a443570..f1d917ff353 100644
--- a/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.html
+++ b/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.html
@@ -3,66 +3,69 @@
     <span bitDialogTitle class="tw-font-semibold">
       {{ "subscribetoEnterprise" | i18n: currentPlanName }}
     </span>
+
     <div bitDialogContent>
       <p>{{ "subscribetoEnterpriseSubtitle" | i18n: currentPlanName }}</p>
 
       <!-- Plan Features List -->
-      <ul class="bwi-ul tw-text-xs" *ngIf="isEnterprise()">
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "includeEnterprisePolicies" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "passwordLessSso" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "accountRecovery" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "customRoles" | i18n }}
-        </li>
-        <li *ngIf="hasSecretsManager()">
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "unlimitedSecretsAndProjects" | i18n }}
-        </li>
-      </ul>
+      <ng-container [ngSwitch]="currentPlan?.productTier">
+        <ul class="bwi-ul tw-text-xs" *ngSwitchCase="productTypes.Enterprise">
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "includeEnterprisePolicies" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "passwordLessSso" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "accountRecovery" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "customRoles" | i18n }}
+          </li>
+          <li *ngIf="hasSecretsManager()">
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "unlimitedSecretsAndProjects" | i18n }}
+          </li>
+        </ul>
 
-      <ul class="bwi-ul tw-text-xs" *ngIf="isTeams()">
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "secureDataSharing" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "eventLogMonitoring" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "directoryIntegration" | i18n }}
-        </li>
-        <li *ngIf="hasSecretsManager()">
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "unlimitedSecretsAndProjects" | i18n }}
-        </li>
-      </ul>
+        <ul class="bwi-ul tw-text-xs" *ngSwitchCase="productTypes.Teams">
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "secureDataSharing" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "eventLogMonitoring" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "directoryIntegration" | i18n }}
+          </li>
+          <li *ngIf="hasSecretsManager()">
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "unlimitedSecretsAndProjects" | i18n }}
+          </li>
+        </ul>
 
-      <ul class="bwi-ul tw-text-xs" *ngIf="isFamily()">
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "premiumAccounts" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "unlimitedSharing" | i18n }}
-        </li>
-        <li>
-          <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
-          {{ "createUnlimitedCollections" | i18n }}
-        </li>
-      </ul>
+        <ul class="bwi-ul tw-text-xs" *ngSwitchCase="productTypes.Families">
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "premiumAccounts" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "unlimitedSharing" | i18n }}
+          </li>
+          <li>
+            <i class="bwi bwi-check tw-text-muted bwi-li" aria-hidden="true"></i>
+            {{ "createUnlimitedCollections" | i18n }}
+          </li>
+        </ul>
+      </ng-container>
 
       <!-- Plan Selection -->
       <div *ngIf="!isFamily()">
@@ -219,607 +222,88 @@
             ></button>
           </p>
         </div>
-        <!-- SM + PM and PM only cost summary -->
-        <div *ngIf="totalOpened && !isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
-          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
-            <p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
-              {{ "passwordManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-1 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.basePrice"
-            >
-              <span>
-                {{ passwordManagerSeats }}
-                {{ "members" | i18n }} &times;
-                {{
-                  (selectedPlan.isAnnual
-                    ? selectedPlan.PasswordManager.basePrice / 12
-                    : selectedPlan.PasswordManager.basePrice
-                  ) | currency: "$"
-                }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>
-                <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
-                  <span class="tw-line-through">{{
-                    selectedPlan.PasswordManager.basePrice | currency: "$"
-                  }}</span>
-                  {{ "freeWithSponsorship" | i18n }}
-                </ng-container>
-                <ng-template #notAcceptingSponsorship>
-                  {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
-                </ng-template>
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
-            >
-              <span>
-                <span *ngIf="selectedPlan.PasswordManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ passwordManagerSeats || 0 }}&nbsp;
-                <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
 
-              <span>
-                {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.hasAdditionalStorageOption && storageGb > 0"
-            >
-              <span>
-                {{ storageGb }}
-                {{ "additionalStorageGbMessage" | i18n }}
-                &times;
-                {{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>{{ additionalStorageTotal(selectedPlan) | currency: "$" }}</span>
-            </p>
-            <!--Discount PM Annual-->
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
-            >
-              <ng-container
-                *ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
+        <!-- Cost Breakdown -->
+        <ng-container *ngIf="totalOpened">
+          <!-- Password Manager + Secrets Manager Cost Summary -->
+          <div *ngIf="!isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
+            <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
+              <ng-container *ngTemplateOutlet="passwordManagerAnnualSummary"></ng-container>
+              <ng-container *ngTemplateOutlet="secretsManagerAnnualSummary"></ng-container>
+            </bit-hint>
+            <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
+              <ng-container *ngTemplateOutlet="passwordManagerMonthlySummary"></ng-container>
+              <ng-container *ngTemplateOutlet="secretsManagerMonthlySummary"></ng-container>
+            </bit-hint>
+          </div>
+
+          <!-- Secrets Manager + Free PM Cost Summary -->
+          <div *ngIf="isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
+            <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
+              <ng-container *ngTemplateOutlet="secretsManagerAnnualSummary"></ng-container>
+              <ng-container *ngTemplateOutlet="passwordManagerAnnualSummary"></ng-container>
+            </bit-hint>
+            <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
+              <ng-container *ngTemplateOutlet="secretsManagerMonthlySummary"></ng-container>
+              <ng-container *ngTemplateOutlet="passwordManagerMonthlySummary"></ng-container>
+            </bit-hint>
+          </div>
+
+          <!-- PM Only Discount -->
+          <div
+            *ngIf="discountPercentage && !organization.useSecretsManager"
+            class="tw-flex tw-flex-wrap tw-gap-4"
+          >
+            <bit-hint class="tw-w-1/2">
+              <p
+                class="tw-mb-0 tw-flex tw-justify-between"
+                bitTypography="body2"
+                *ngIf="discountPercentageFromSub > 0"
               >
-                <span class="tw-text-xs">
-                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
-                </span>
-                <span class="tw-line-through tw-text-xs">{{
-                  calculateTotalAppliedDiscount(
-                    passwordManagerSeatTotal(selectedPlan) + additionalStorageTotal(selectedPlan)
-                  ) | currency: "$"
-                }}</span>
-              </ng-container>
-            </p>
-            <!-- secrets manager summary for annual -->
-            <p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
-              {{ "secretsManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-1 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan?.SecretsManager?.basePrice && organization.useSecretsManager"
-            >
-              <span>
-                {{ sub?.smSeats }}
-                {{ "members" | i18n }} &times;
-                {{
-                  (selectedPlan.isAnnual
-                    ? selectedPlan.SecretsManager.basePrice / 12
-                    : selectedPlan.SecretsManager.basePrice
-                  ) | currency: "$"
-                }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan?.SecretsManager?.hasAdditionalSeatsOption &&
-                organization.useSecretsManager
-              "
-            >
-              <span>
-                <span *ngIf="selectedPlan.SecretsManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ sub?.smSeats || 0 }}&nbsp;
-                <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-
-              <span>
-                {{ secretsManagerSeatTotal(selectedPlan, sub.smSeats) | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan?.SecretsManager?.hasAdditionalServiceAccountOption &&
-                additionalServiceAccount > 0
-              "
-            >
-              <span>
-                {{ additionalServiceAccount }}
-                {{ "serviceAccounts" | i18n | lowercase }}
-                &times;
-                {{ selectedPlan?.SecretsManager?.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
-            </p>
-            <!--Discount SM annual-->
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
-            >
-              <ng-container
-                *ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
-              >
-                <span class="tw-text-xs">
-                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
-                </span>
-                <span class="tw-line-through tw-text-xs">{{
-                  calculateTotalAppliedDiscount(
-                    additionalServiceAccountTotal(selectedPlan) +
-                      secretsManagerSeatTotal(selectedPlan, sub.smSeats)
-                  ) | currency: "$"
-                }}</span>
-              </ng-container>
-            </p>
-          </bit-hint>
-          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
-            <p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
-              {{ "passwordManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.basePrice"
-            >
-              <span>
-                {{ "basePrice" | i18n }}:
-                {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
-                {{ "monthAbbr" | i18n }}
-              </span>
-              <span>
-                {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
-            >
-              <span>
-                <span *ngIf="selectedPlan.PasswordManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ passwordManagerSeats }}&nbsp;
-                <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>
-                {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.hasAdditionalStorageOption && storageGb > 0"
-            >
-              <span>
-                {{ storageGb }}
-                {{ "additionalStorageGbMessage" | i18n }}
-                &times;
-                {{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>{{
-                storageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb | currency: "$"
-              }}</span>
-            </p>
-            <!--Discount PM Monthly-->
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
-            >
-              <ng-container *ngIf="selectedInterval == planIntervals.Monthly">
-                <span
-                  class="tw-text-xs"
-                  [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
-                >
-                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
-                </span>
-                <span
-                  [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
-                  class="tw-line-through tw-text-xs"
-                  >{{ calculateTotalAppliedDiscount(total) | currency: "$" }}</span
-                >
-              </ng-container>
-            </p>
-            <!-- secrets manager summary for monthly -->
-            <p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
-              {{ "secretsManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
-            >
-              <span>
-                {{ "basePrice" | i18n }}:
-                {{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
-                {{ "monthAbbr" | i18n }}
-              </span>
-              <span>
-                {{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan.SecretsManager.hasAdditionalSeatsOption &&
-                organization.useSecretsManager
-              "
-            >
-              <span>
-                <span *ngIf="selectedPlan.SecretsManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ sub?.smSeats }}&nbsp;
-                <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>
-                {{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
-                additionalServiceAccount > 0
-              "
-            >
-              <span>
-                {{ additionalServiceAccount }}
-                {{ "serviceAccounts" | i18n | lowercase }}
-                &times;
-                {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
-            </p>
-            <!--Discount SM Monthly-->
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
-            >
-              <ng-container *ngIf="selectedInterval == planIntervals.Monthly">
-                <span
-                  class="tw-text-xs"
-                  [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
-                >
-                  {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
-                </span>
-                <span
-                  [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
-                  class="tw-line-through tw-text-xs"
-                  >{{
-                    additionalServiceAccountTotal(selectedPlan) +
-                      secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$"
-                  }}</span
-                >
-              </ng-container>
-            </p>
-          </bit-hint>
-        </div>
-        <!-- SM + Free PM cost summary -->
-        <div *ngIf="totalOpened && isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
-          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
-            <!-- secrets manager summary for annual -->
-            <p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
-              {{ "secretsManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-1 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
-            >
-              <span>
-                {{ sub?.smSeats }}
-                {{ "members" | i18n }} &times;
-                {{
-                  (selectedPlan.isAnnual
-                    ? selectedPlan.SecretsManager.basePrice / 12
-                    : selectedPlan.SecretsManager.basePrice
-                  ) | currency: "$"
-                }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan.SecretsManager.hasAdditionalSeatsOption &&
-                organization.useSecretsManager
-              "
-            >
-              <span>
-                <span *ngIf="selectedPlan.SecretsManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ sub?.smSeats || 0 }}&nbsp;
-                <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-
-              <span>
-                {{ secretsManagerSeatTotal(selectedPlan, sub.smSeats) | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
-                additionalServiceAccount > 0
-              "
-            >
-              <span>
-                {{ additionalServiceAccount }}
-                {{ "serviceAccounts" | i18n }}
-                &times;
-                {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
-            </p>
-            <!-- password manager summary for annual -->
-            <p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
-              {{ "passwordManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.basePrice"
-            >
-              <span>
-                {{ sub?.seats }}
-                {{ "members" | i18n }} &times;
-                {{
-                  (selectedPlan.isAnnual
-                    ? selectedPlan.PasswordManager.basePrice / 12
-                    : selectedPlan.PasswordManager.basePrice
-                  ) | currency: "$"
-                }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>
-                <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
-                  <span class="tw-line-through">{{
-                    selectedPlan.PasswordManager.basePrice | currency: "$"
-                  }}</span>
-                  {{ "freeWithSponsorship" | i18n }}
-                </ng-container>
-                <ng-template #notAcceptingSponsorship>
-                  {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
-                </ng-template>
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
-            >
-              <span>
-                <span *ngIf="selectedPlan.PasswordManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ sub?.seats || 0 }}&nbsp;
-                <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-
-              <span *ngIf="isSecretsManagerTrial()">
-                {{ "freeForOneYear" | i18n }}
-              </span>
-
-              <span *ngIf="!isSecretsManagerTrial()">
-                {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
-              </span>
-            </p>
-          </bit-hint>
-          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
-            <!-- secrets manager summary for monthly -->
-            <p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
-              {{ "secretsManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
-            >
-              <span>
-                {{ "basePrice" | i18n }}:
-                {{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
-                {{ "monthAbbr" | i18n }}
-              </span>
-              <span>
-                {{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan.SecretsManager.hasAdditionalSeatsOption &&
-                organization.useSecretsManager
-              "
-            >
-              <span>
-                <span *ngIf="selectedPlan.SecretsManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ sub?.smSeats }}&nbsp;
-                <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>
-                {{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="
-                selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
-                additionalServiceAccount > 0
-              "
-            >
-              <span>
-                {{ additionalServiceAccount }}
-                {{ "serviceAccounts" | i18n }}
-                &times;
-                {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
-            </p>
-            <!-- password manager summary for monthly -->
-            <p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
-              {{ "passwordManager" | i18n }}
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.basePrice"
-            >
-              <span>
-                {{ "basePrice" | i18n }}:
-                {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
-                {{ "monthAbbr" | i18n }}
-              </span>
-              <span>
-                {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
-              </span>
-            </p>
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
-            >
-              <span>
-                <span *ngIf="selectedPlan.PasswordManager.baseSeats"
-                  >{{ "additionalUsers" | i18n }}:</span
-                >
-                {{ sub?.seats }}&nbsp;
-                <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
-                &times;
-                {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
-                /{{ selectedPlanInterval | i18n }}
-              </span>
-              <span *ngIf="isSecretsManagerTrial()">
-                {{ "freeForOneYear" | i18n }}
-              </span>
-
-              <span *ngIf="!isSecretsManagerTrial()">
-                {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
-              </span>
-            </p>
-          </bit-hint>
-        </div>
-        <!-- discountPercentage to PM Only -->
-        <div
-          *ngIf="totalOpened && discountPercentage && !organization.useSecretsManager"
-          class="tw-flex tw-flex-wrap tw-gap-4"
-        >
-          <bit-hint class="tw-w-1/2">
-            <p
-              class="tw-mb-0 tw-flex tw-justify-between"
-              bitTypography="body2"
-              *ngIf="discountPercentageFromSub > 0"
-            >
-              <ng-container>
                 <span class="tw-text-xs">
                   {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
                 </span>
                 <span class="tw-line-through tw-text-xs">{{
                   calculateTotalAppliedDiscount(total) | currency: "$"
                 }}</span>
-              </ng-container>
-            </p>
-          </bit-hint>
-        </div>
-        <!-- Cost Breakdown -->
-        <div *ngIf="totalOpened" class="tw-flex tw-flex-wrap tw-gap-4">
-          <bit-hint class="tw-w-1/2">
-            <p
-              class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
-            >
-              <span class="tw-font-semibold">
-                {{ "estimatedTax" | i18n }}
-              </span>
-              <span>
-                {{ estimatedTax | currency: "USD" : "$" }}
-              </span>
-            </p>
-          </bit-hint>
-        </div>
+              </p>
+            </bit-hint>
+          </div>
 
-        <div *ngIf="totalOpened" class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
-          <bit-hint class="tw-w-1/2">
-            <p
-              class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
-            >
-              <span class="tw-font-semibold">
-                {{ "total" | i18n }}
-              </span>
-              <span>
-                {{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }}
-                <span class="tw-text-xs tw-font-semibold">
-                  / {{ selectedPlanInterval | i18n }}</span
-                >
-              </span>
-            </p>
-          </bit-hint>
-        </div>
+          <!-- Tax and Final Total -->
+          <div class="tw-flex tw-flex-wrap tw-gap-4">
+            <bit-hint class="tw-w-1/2">
+              <p
+                class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
+              >
+                <span class="tw-font-semibold">
+                  {{ "estimatedTax" | i18n }}
+                </span>
+                <span>
+                  {{ estimatedTax | currency: "USD" : "$" }}
+                </span>
+              </p>
+            </bit-hint>
+          </div>
+
+          <div class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
+            <bit-hint class="tw-w-1/2">
+              <p
+                class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
+              >
+                <span class="tw-font-semibold">
+                  {{ "total" | i18n }}
+                </span>
+                <span>
+                  {{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }}
+                  <span class="tw-text-xs tw-font-semibold">
+                    / {{ selectedPlanInterval | i18n }}</span
+                  >
+                </span>
+              </p>
+            </bit-hint>
+          </div>
+        </ng-container>
       </ng-container>
     </div>
 
@@ -828,9 +312,316 @@
       <button bitButton bitFormButton buttonType="primary" type="submit">
         {{ "subscribe" | i18n }}
       </button>
-      <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
+      <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.CLOSED">
         {{ "later" | i18n }}
       </button>
     </ng-container>
   </bit-dialog>
 </form>
+
+<!-- Templates for cost breakdown sections -->
+<ng-template #passwordManagerAnnualSummary>
+  <p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
+    {{ "passwordManager" | i18n }}
+  </p>
+  <p
+    class="tw-mb-1 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.PasswordManager.basePrice"
+  >
+    <span>
+      {{ passwordManagerSeats }}
+      {{ "members" | i18n }} &times;
+      {{
+        (selectedPlan.isAnnual
+          ? selectedPlan.PasswordManager.basePrice / 12
+          : selectedPlan.PasswordManager.basePrice
+        ) | currency: "$"
+      }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>
+      <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
+        <span class="tw-line-through">{{
+          selectedPlan.PasswordManager.basePrice | currency: "$"
+        }}</span>
+        {{ "freeWithSponsorship" | i18n }}
+      </ng-container>
+      <ng-template #notAcceptingSponsorship>
+        {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
+      </ng-template>
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
+  >
+    <span>
+      <span *ngIf="selectedPlan.PasswordManager.baseSeats">{{ "additionalUsers" | i18n }}:</span>
+      {{ passwordManagerSeats || 0 }}&nbsp;
+      <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
+      &times;
+      {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>
+      {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.PasswordManager.hasAdditionalStorageOption && storageGb > 0"
+  >
+    <span>
+      {{ storageGb }}
+      {{ "additionalStorageGbMessage" | i18n }}
+      &times;
+      {{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>{{ additionalStorageTotal(selectedPlan) | currency: "$" }}</span>
+  </p>
+  <!--Discount PM Annual-->
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
+  >
+    <ng-container
+      *ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
+    >
+      <span class="tw-text-xs">
+        {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
+      </span>
+      <span class="tw-line-through tw-text-xs">{{
+        calculateTotalAppliedDiscount(
+          passwordManagerSeatTotal(selectedPlan) + additionalStorageTotal(selectedPlan)
+        ) | currency: "$"
+      }}</span>
+    </ng-container>
+  </p>
+</ng-template>
+
+<ng-template #passwordManagerMonthlySummary>
+  <p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
+    {{ "passwordManager" | i18n }}
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.PasswordManager.basePrice"
+  >
+    <span>
+      {{ "basePrice" | i18n }}:
+      {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
+      {{ "monthAbbr" | i18n }}
+    </span>
+    <span>
+      {{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
+  >
+    <span>
+      <span *ngIf="selectedPlan.PasswordManager.baseSeats">{{ "additionalUsers" | i18n }}:</span>
+      {{ passwordManagerSeats }}&nbsp;
+      <span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
+      &times;
+      {{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>
+      {{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.PasswordManager.hasAdditionalStorageOption && storageGb > 0"
+  >
+    <span>
+      {{ storageGb }}
+      {{ "additionalStorageGbMessage" | i18n }}
+      &times;
+      {{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>{{
+      storageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb | currency: "$"
+    }}</span>
+  </p>
+  <!--Discount PM Monthly-->
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
+  >
+    <ng-container *ngIf="selectedInterval == planIntervals.Monthly">
+      <span class="tw-text-xs" [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'">
+        {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
+      </span>
+      <span
+        [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
+        class="tw-line-through tw-text-xs"
+        >{{ calculateTotalAppliedDiscount(total) | currency: "$" }}</span
+      >
+    </ng-container>
+  </p>
+</ng-template>
+
+<ng-template #secretsManagerAnnualSummary>
+  <!-- secrets manager summary for annual -->
+  <p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
+    {{ "secretsManager" | i18n }}
+  </p>
+  <p
+    class="tw-mb-1 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan?.SecretsManager?.basePrice && organization.useSecretsManager"
+  >
+    <span>
+      {{ sub?.smSeats }}
+      {{ "members" | i18n }} &times;
+      {{
+        (selectedPlan.isAnnual
+          ? selectedPlan.SecretsManager.basePrice / 12
+          : selectedPlan.SecretsManager.basePrice
+        ) | currency: "$"
+      }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan?.SecretsManager?.hasAdditionalSeatsOption && organization.useSecretsManager"
+  >
+    <span>
+      <span *ngIf="selectedPlan.SecretsManager.baseSeats">{{ "additionalUsers" | i18n }}:</span>
+      {{ sub?.smSeats || 0 }}&nbsp;
+      <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
+      &times;
+      {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>
+      {{ secretsManagerSeatTotal(selectedPlan, sub.smSeats) | currency: "$" }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="
+      selectedPlan?.SecretsManager?.hasAdditionalServiceAccountOption &&
+      additionalServiceAccount > 0
+    "
+  >
+    <span>
+      {{ additionalServiceAccount }}
+      {{ "serviceAccounts" | i18n | lowercase }}
+      &times;
+      {{ selectedPlan?.SecretsManager?.additionalPricePerServiceAccount | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
+  </p>
+  <!--Discount SM annual-->
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
+  >
+    <ng-container
+      *ngIf="selectedInterval == planIntervals.Annually && discountPercentageFromSub > 0"
+    >
+      <span class="tw-text-xs">
+        {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
+      </span>
+      <span class="tw-line-through tw-text-xs">{{
+        calculateTotalAppliedDiscount(
+          additionalServiceAccountTotal(selectedPlan) +
+            secretsManagerSeatTotal(selectedPlan, sub.smSeats)
+        ) | currency: "$"
+      }}</span>
+    </ng-container>
+  </p>
+</ng-template>
+
+<ng-template #secretsManagerMonthlySummary>
+  <!-- secrets manager summary for monthly -->
+  <p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
+    {{ "secretsManager" | i18n }}
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
+  >
+    <span>
+      {{ "basePrice" | i18n }}:
+      {{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
+      {{ "monthAbbr" | i18n }}
+    </span>
+    <span>
+      {{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="selectedPlan.SecretsManager.hasAdditionalSeatsOption && organization.useSecretsManager"
+  >
+    <span>
+      <span *ngIf="selectedPlan.SecretsManager.baseSeats">{{ "additionalUsers" | i18n }}:</span>
+      {{ sub?.smSeats }}&nbsp;
+      <span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
+      &times;
+      {{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>
+      {{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
+    </span>
+  </p>
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="
+      selectedPlan.SecretsManager.hasAdditionalServiceAccountOption && additionalServiceAccount > 0
+    "
+  >
+    <span>
+      {{ additionalServiceAccount }}
+      {{ "serviceAccounts" | i18n | lowercase }}
+      &times;
+      {{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
+      /{{ selectedPlanInterval | i18n }}
+    </span>
+    <span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
+  </p>
+  <!--Discount SM Monthly-->
+  <p
+    class="tw-mb-0 tw-flex tw-justify-between"
+    bitTypography="body2"
+    *ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
+  >
+    <ng-container *ngIf="selectedInterval == planIntervals.Monthly">
+      <span class="tw-text-xs" [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'">
+        {{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
+      </span>
+      <span
+        [style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
+        class="tw-line-through tw-text-xs"
+        >{{
+          additionalServiceAccountTotal(selectedPlan) +
+            secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$"
+        }}</span
+      >
+    </ng-container>
+  </p>
+</ng-template>
diff --git a/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.ts b/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.ts
index 129db7f0bf9..91163b46111 100644
--- a/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method-dialog.component.ts
@@ -35,10 +35,6 @@ import {
   ProductTierType,
 } from "@bitwarden/common/billing/enums";
 import { TaxInformation } from "@bitwarden/common/billing/models/domain";
-import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
-import { PaymentRequest } from "@bitwarden/common/billing/models/request/payment.request";
-import { PreviewOrganizationInvoiceRequest } from "@bitwarden/common/billing/models/request/preview-organization-invoice.request";
-import { UpdatePaymentMethodRequest } from "@bitwarden/common/billing/models/request/update-payment-method.request";
 import { BillingResponse } from "@bitwarden/common/billing/models/response/billing.response";
 import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
 import { PaymentSourceResponse } from "@bitwarden/common/billing/models/response/payment-source.response";
@@ -56,45 +52,54 @@ import {
 import { BillingSharedModule } from "../billing-shared.module";
 import { PaymentComponent } from "../payment/payment.component";
 
-type TrialPaymentMethodParams = {
+import { PlanSelectionService } from "./plan-selection.service";
+import { PricingCalculationService } from "./pricing-calculation.service";
+import { TrialPaymentMethodService } from "./trial-payment-method.service";
+
+// Types
+interface TrialPaymentMethodParams {
   organizationId: string;
   subscription: OrganizationSubscriptionResponse;
   productTierType: ProductTierType;
   initialPaymentMethod?: PaymentMethodType;
-};
-
-// FIXME: update to use a const object instead of a typescript enum
-// eslint-disable-next-line @bitwarden/platform/no-enums
-export enum TrialPaymentMethodDialogResultType {
-  Closed = "closed",
-  Submitted = "submitted",
 }
 
-// FIXME: update to use a const object instead of a typescript enum
-// eslint-disable-next-line @bitwarden/platform/no-enums
-export enum PlanCardState {
-  Selected = "selected",
-  NotSelected = "not_selected",
-  Disabled = "disabled",
-}
+export const TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE = {
+  CLOSED: "closed",
+  SUBMITTED: "submitted",
+} as const;
 
-type PlanCard = {
-  name: string;
-  selected: boolean;
-};
+export type TrialPaymentMethodDialogResultType =
+  (typeof TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE)[keyof typeof TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE];
+
+export const PLAN_CARD_STATE = {
+  SELECTED: "selected",
+  NOT_SELECTED: "not_selected",
+  DISABLED: "disabled",
+} as const;
+
+export type PlanCardState = (typeof PLAN_CARD_STATE)[keyof typeof PLAN_CARD_STATE];
 
 interface OnSuccessArgs {
   organizationId: string;
 }
 
+interface PlanCard {
+  name: string;
+  selected: boolean;
+}
+
+// Component
 @Component({
   templateUrl: "./trial-payment-method-dialog.component.html",
   imports: [BillingSharedModule],
+  providers: [TrialPaymentMethodService, PlanSelectionService, PricingCalculationService],
 })
 export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
   @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
   @ViewChild(ManageTaxInformationComponent) taxComponent: ManageTaxInformationComponent;
 
+  // Inputs
   @Input() acceptingSponsorship = false;
   @Input() organizationId: string;
   @Input() showFree = false;
@@ -104,44 +109,48 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
   get productTier(): ProductTierType {
     return this._productTier;
   }
-
   set productTier(product: ProductTierType) {
     this._productTier = product;
     this.formGroup?.controls?.productTier?.setValue(product);
   }
 
-  protected estimatedTax: number = 0;
-  private _productTier = ProductTierType.Free;
-
   @Input()
   get plan(): PlanType {
     return this._plan;
   }
-
   set plan(plan: PlanType) {
     this._plan = plan;
     this.formGroup?.controls?.plan?.setValue(plan);
   }
 
-  private _plan = PlanType.Free;
   @Input() providerId?: string;
+
+  // Outputs
   @Output() onSuccess = new EventEmitter<OnSuccessArgs>();
   @Output() onCanceled = new EventEmitter<void>();
   @Output() onTrialBillingSuccess = new EventEmitter();
 
-  protected discountPercentage: number = 20;
-  protected discountPercentageFromSub: number;
+  // Public properties for template
+  protected readonly ResultType = TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE;
+  protected readonly productTypes = ProductTierType;
+  protected readonly planIntervals = PlanInterval;
+
   protected loading = true;
   protected planCards: PlanCard[];
-  protected ResultType = TrialPaymentMethodDialogResultType;
   protected initialPaymentMethod: PaymentMethodType;
+  protected estimatedTax = 0;
+  protected discountPercentage = 20;
+  protected discountPercentageFromSub: number;
+  protected totalOpened = false;
+  protected focusedIndex: number | null = null;
+  protected taxInformation: TaxInformation;
 
-  selfHosted = false;
-  productTypes = ProductTierType;
-  formPromise: Promise<string>;
-  singleOrgPolicyAppliesToActiveUser = false;
-  discount = 0;
+  // Private properties
+  private _productTier = ProductTierType.Free;
+  private _plan = PlanType.Free;
+  private destroy$ = new Subject<void>();
 
+  // Form
   formGroup = this.formBuilder.group({
     name: [""],
     billingEmail: ["", [Validators.email]],
@@ -153,30 +162,27 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
     productTier: [this.productTier],
   });
 
+  // Data properties
+  selfHosted = false;
+  singleOrgPolicyAppliesToActiveUser = false;
+  discount = 0;
   planType: string;
   selectedPlan: PlanResponse;
   selectedInterval: number = 1;
-  planIntervals = PlanInterval;
   passwordManagerPlans: PlanResponse[];
   secretsManagerPlans: PlanResponse[];
   organization: Organization;
   sub: OrganizationSubscriptionResponse;
   billing: BillingResponse;
   currentPlanName: string;
-  showPayment: boolean = false;
-  totalOpened: boolean = false;
+  showPayment = false;
   currentPlan: PlanResponse;
   isCardStateDisabled = false;
-  focusedIndex: number | null = null;
   accountCredit: number;
   paymentSource?: PaymentSourceResponse;
   plans: ListResponse<PlanResponse>;
   secretsManagerTotal: number;
 
-  private destroy$ = new Subject<void>();
-
-  protected taxInformation: TaxInformation;
-
   constructor(
     @Inject(DIALOG_DATA) private dialogParams: TrialPaymentMethodParams,
     private dialogRef: DialogRef<TrialPaymentMethodDialogResultType>,
@@ -191,11 +197,263 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
     private billingApiService: BillingApiServiceAbstraction,
     private taxService: TaxServiceAbstraction,
     private accountService: AccountService,
+    private trialPaymentMethodService: TrialPaymentMethodService,
+    private planSelectionService: PlanSelectionService,
+    private pricingCalculationService: PricingCalculationService,
   ) {
     this.initialPaymentMethod = this.dialogParams.initialPaymentMethod ?? PaymentMethodType.Card;
   }
 
   async ngOnInit(): Promise<void> {
+    await this.initializeComponent();
+    this.setupSubscriptions();
+    this.initializePlanCards();
+    this.loading = false;
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // Public methods for template
+  resolveHeaderName(): string {
+    return this.i18nService.t(
+      "upgradeFreeOrganization",
+      this.resolvePlanName(this.dialogParams.productTierType),
+    );
+  }
+
+  isEnterprise(): boolean {
+    return this.currentPlan?.productTier === ProductTierType.Enterprise;
+  }
+
+  isTeams(): boolean {
+    return this.currentPlan?.productTier === ProductTierType.Teams;
+  }
+
+  isFamily(): boolean {
+    return this.currentPlan?.productTier === ProductTierType.Families;
+  }
+
+  hasSecretsManager(): boolean {
+    return this.organization?.canAccessSecretsManager ?? false;
+  }
+
+  isPaymentSourceEmpty(): boolean {
+    return this.paymentSource === null || this.paymentSource === undefined;
+  }
+
+  isSecretsManagerTrial(): boolean {
+    return this.trialPaymentMethodService.isSecretsManagerTrial(this.sub);
+  }
+
+  protected getPlanCardContainerClasses(plan: PlanResponse, index: number): string[] {
+    return this.planSelectionService.getPlanCardContainerClasses(
+      plan,
+      index,
+      this.isCardDisabled.bind(this),
+    );
+  }
+
+  protected selectPlan(plan: PlanResponse): void {
+    this.planSelectionService.selectPlan(
+      plan,
+      this.selectedInterval,
+      this.currentPlan,
+      (selectedPlan) => {
+        this.selectedPlan = selectedPlan;
+        this.formGroup.patchValue({ productTier: selectedPlan.productTier });
+        this.refreshSalesTax();
+      },
+    );
+  }
+
+  get selectedPlanInterval(): string {
+    return this.currentPlan?.isAnnual ? "year" : "month";
+  }
+
+  get selectablePlans(): PlanResponse[] {
+    return this.planSelectionService.getSelectablePlans(
+      this.passwordManagerPlans,
+      this.selectedPlan,
+      this.planIsEnabled.bind(this),
+    );
+  }
+
+  get storageGb(): number {
+    return this.sub?.maxStorageGb ? this.sub.maxStorageGb - 1 : 0;
+  }
+
+  get passwordManagerSubtotal(): number {
+    return this.pricingCalculationService.calculatePasswordManagerSubtotal(
+      this.selectedPlan,
+      this.sub,
+      this.discount,
+    );
+  }
+
+  secretsManagerSubtotal(): number {
+    return this.pricingCalculationService.calculateSecretsManagerSubtotal(
+      this.selectedPlan,
+      this.sub,
+      this.secretsManagerTotal,
+    );
+  }
+
+  get passwordManagerSeats(): number {
+    return this.pricingCalculationService.getPasswordManagerSeats(this.selectedPlan, this.sub);
+  }
+
+  get total(): number {
+    return this.pricingCalculationService.calculateTotal(
+      this.organization,
+      this.selectedPlan,
+      this.passwordManagerSubtotal,
+      this.estimatedTax,
+      this.sub,
+    );
+  }
+
+  get additionalServiceAccount(): number {
+    return this.pricingCalculationService.calculateAdditionalServiceAccount(
+      this.currentPlan,
+      this.sub,
+    );
+  }
+
+  get showTaxIdField(): boolean {
+    return this.trialPaymentMethodService.shouldShowTaxIdField(
+      this.organizationId,
+      this.productTier,
+      this.providerId,
+    );
+  }
+
+  // Pricing calculation methods
+  passwordManagerSeatTotal(plan: PlanResponse): number {
+    return this.pricingCalculationService.calculatePasswordManagerSeatTotal(
+      plan,
+      this.sub,
+      this.isSecretsManagerTrial(),
+    );
+  }
+
+  secretsManagerSeatTotal(plan: PlanResponse, seats: number): number {
+    return this.pricingCalculationService.calculateSecretsManagerSeatTotal(plan, seats);
+  }
+
+  additionalStorageTotal(plan: PlanResponse): number {
+    return this.pricingCalculationService.calculateAdditionalStorageTotal(plan, this.sub);
+  }
+
+  additionalStoragePriceMonthly(selectedPlan: PlanResponse): number {
+    return selectedPlan.PasswordManager.additionalStoragePricePerGb;
+  }
+
+  additionalServiceAccountTotal(plan: PlanResponse): number {
+    return this.pricingCalculationService.calculateAdditionalServiceAccountTotal(
+      plan,
+      this.additionalServiceAccount,
+    );
+  }
+
+  calculateTotalAppliedDiscount(total: number): number {
+    return this.pricingCalculationService.calculateTotalAppliedDiscount(
+      total,
+      this.discountPercentageFromSub,
+    );
+  }
+
+  // Event handlers
+  changedProduct(): void {
+    const selectedPlan = this.selectablePlans[0];
+    this.setPlanType(selectedPlan.type);
+    this.handlePremiumAddonAccess(selectedPlan.PasswordManager.hasPremiumAccessOption);
+    this.handleAdditionalSeats(selectedPlan.PasswordManager.hasAdditionalSeatsOption);
+  }
+
+  changedCountry(): void {
+    this.paymentComponent.showBankAccount = this.taxInformation.country === "US";
+
+    if (
+      !this.paymentComponent.showBankAccount &&
+      this.paymentComponent.selected === PaymentMethodType.BankAccount
+    ) {
+      this.paymentComponent.select(PaymentMethodType.Card);
+    }
+  }
+
+  protected taxInformationChanged(event: TaxInformation): void {
+    this.taxInformation = event;
+    this.changedCountry();
+    this.refreshSalesTax();
+  }
+
+  toggleTotalOpened(): void {
+    this.totalOpened = !this.totalOpened;
+  }
+
+  onKeydown(event: KeyboardEvent, index: number): void {
+    this.planSelectionService.handleKeydown(event, index, this.isCardDisabled.bind(this));
+  }
+
+  onFocus(index: number): void {
+    this.focusedIndex = index;
+    this.selectPlan(this.selectablePlans[index]);
+  }
+
+  isCardDisabled(index: number): boolean {
+    const card = this.selectablePlans[index];
+    return card === (this.currentPlan || this.isCardStateDisabled);
+  }
+
+  // Form submission
+  submit = async (): Promise<void> => {
+    if (!this.taxComponent.validate()) {
+      this.taxComponent.markAllAsTouched();
+      return;
+    }
+
+    try {
+      await this.trialPaymentMethodService.submitPayment(
+        this.organizationId,
+        this.paymentComponent,
+        this.taxInformation,
+        this.billingApiService,
+        this.apiService,
+      );
+
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("updatedPaymentMethod"),
+      });
+
+      this.onSuccess.emit({ organizationId: this.organizationId });
+      this.dialogRef.close(TRIAL_PAYMENT_METHOD_DIALOG_RESULT_TYPE.SUBMITTED);
+    } catch (error) {
+      const msg = typeof error === "object" ? error.message : error;
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t(msg) || msg,
+      });
+    }
+  };
+
+  // Static method
+  static open = (
+    dialogService: DialogService,
+    dialogConfig: DialogConfig<TrialPaymentMethodParams>,
+  ) =>
+    dialogService.open<TrialPaymentMethodDialogResultType>(
+      TrialPaymentMethodDialogComponent,
+      dialogConfig,
+    );
+
+  // Private methods
+  private async initializeComponent(): Promise<void> {
     if (this.dialogParams.organizationId) {
       this.currentPlanName = this.resolvePlanName(this.dialogParams.productTierType);
       this.sub =
@@ -204,6 +462,7 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
       this.organizationId = this.dialogParams.organizationId;
       this.currentPlan = this.sub?.plan;
       this.selectedPlan = this.sub?.plan;
+
       const userId = await firstValueFrom(
         this.accountService.activeAccount$.pipe(map((a) => a?.id)),
       );
@@ -227,6 +486,21 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
       }
     }
 
+    if (!this.selfHosted) {
+      this.changedProduct();
+    }
+
+    this.discountPercentageFromSub = this.isSecretsManagerTrial()
+      ? 0
+      : (this.sub?.customerDiscount?.percentOff ?? 0);
+
+    this.setInitialPlanIntervalSelection();
+
+    const taxInfo = await this.organizationApiService.getTaxInfo(this.organizationId);
+    this.taxInformation = TaxInformation.from(taxInfo);
+  }
+
+  private setupSubscriptions(): void {
     this.accountService.activeAccount$
       .pipe(
         getUserId,
@@ -238,11 +512,9 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
       .subscribe((policyAppliesToActiveUser) => {
         this.singleOrgPolicyAppliesToActiveUser = policyAppliesToActiveUser;
       });
+  }
 
-    if (!this.selfHosted) {
-      this.changedProduct();
-    }
-
+  private initializePlanCards(): void {
     this.planCards = [
       {
         name: this.i18nService.t("planNameTeams"),
@@ -253,280 +525,22 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
         selected: false,
       },
     ];
-    this.discountPercentageFromSub = this.isSecretsManagerTrial()
-      ? 0
-      : (this.sub?.customerDiscount?.percentOff ?? 0);
-
-    this.setInitialPlanIntervalSelection();
-    this.loading = false;
-
-    const taxInfo = await this.organizationApiService.getTaxInfo(this.organizationId);
-    this.taxInformation = TaxInformation.from(taxInfo);
   }
 
-  resolveHeaderName(): string {
-    return this.i18nService.t(
-      "upgradeFreeOrganization",
-      this.resolvePlanName(this.dialogParams.productTierType),
-    );
-  }
-
-  setInitialPlanIntervalSelection() {
+  private setInitialPlanIntervalSelection(): void {
     this.focusedIndex = this.selectablePlans.length - 1;
     this.selectPlan(this.selectablePlans.find((product) => product.isAnnual));
   }
 
-  isEnterprise() {
-    return this.currentPlan.productTier == ProductTierType.Enterprise;
-  }
-
-  isTeams() {
-    return this.currentPlan.productTier == ProductTierType.Teams;
-  }
-
-  isFamily() {
-    return this.currentPlan.productTier == ProductTierType.Families;
-  }
-
-  hasSecretsManager() {
-    if (this.organization) {
-      return this.organization.canAccessSecretsManager;
-    }
-  }
-
-  isPaymentSourceEmpty() {
-    return this.paymentSource === null || this.paymentSource === undefined;
-  }
-
-  isSecretsManagerTrial(): boolean {
-    return (
-      this.sub?.subscription?.items?.some((item) =>
-        this.sub?.customerDiscount?.appliesTo?.includes(item.productId),
-      ) ?? false
-    );
-  }
-
-  protected getPlanCardContainerClasses(plan: PlanResponse, index: number): string[] {
-    const isSelected = plan.isAnnual;
-    const isDisabled = this.isCardDisabled(index);
-
-    if (isDisabled) {
-      return [
-        "tw-cursor-not-allowed",
-        "tw-bg-secondary-100",
-        "tw-font-normal",
-        "tw-bg-blur",
-        "tw-text-muted",
-        "tw-block",
-        "tw-rounded",
-      ];
-    }
-
-    return isSelected
-      ? [
-          "tw-cursor-pointer",
-          "tw-block",
-          "tw-rounded",
-          "tw-border",
-          "tw-border-solid",
-          "tw-border-primary-600",
-          "hover:tw-border-primary-700",
-          "focus:tw-border-2",
-          "focus:tw-border-primary-700",
-          "focus:tw-rounded-lg",
-        ]
-      : [
-          "tw-cursor-pointer",
-          "tw-block",
-          "tw-rounded",
-          "tw-border",
-          "tw-border-solid",
-          "tw-border-secondary-300",
-          "hover:tw-border-text-main",
-          "focus:tw-border-2",
-          "focus:tw-border-primary-700",
-        ];
-  }
-
-  protected selectPlan(plan: PlanResponse) {
-    if (
-      this.selectedInterval === PlanInterval.Monthly &&
-      plan.productTier == ProductTierType.Families
-    ) {
-      return;
-    }
-
-    this.selectedPlan = plan;
-    this.formGroup.patchValue({ productTier: plan.productTier });
-
-    try {
-      this.refreshSalesTax();
-    } catch {
-      this.estimatedTax = 0;
-    }
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  get selectedPlanInterval() {
-    return this.currentPlan.isAnnual ? "year" : "month";
-  }
-
-  get selectablePlans() {
-    const result =
-      this.passwordManagerPlans?.filter(
-        (plan) => plan.productTier === this.selectedPlan.productTier && this.planIsEnabled(plan),
-      ) || [];
-
-    result.sort((planA, planB) => planA.displaySortOrder - planB.displaySortOrder).reverse();
-    return result;
-  }
-
-  get storageGb() {
-    return this.sub?.maxStorageGb ? this.sub?.maxStorageGb - 1 : 0;
-  }
-
-  passwordManagerSeatTotal(plan: PlanResponse): number {
-    if (!plan.PasswordManager.hasAdditionalSeatsOption || this.isSecretsManagerTrial()) {
-      return 0;
-    }
-
-    const result = plan.PasswordManager.seatPrice * Math.abs(this.sub?.seats || 0);
-    return result;
-  }
-
-  secretsManagerSeatTotal(plan: PlanResponse, seats: number): number {
-    if (!plan.SecretsManager.hasAdditionalSeatsOption) {
-      return 0;
-    }
-
-    return plan.SecretsManager.seatPrice * Math.abs(seats || 0);
-  }
-
-  additionalStorageTotal(plan: PlanResponse): number {
-    if (!plan.PasswordManager.hasAdditionalStorageOption) {
-      return 0;
-    }
-
-    return (
-      plan.PasswordManager.additionalStoragePricePerGb *
-      // TODO: Eslint upgrade. Please resolve this  since the null check does nothing
-      // eslint-disable-next-line no-constant-binary-expression
-      Math.abs(this.sub?.maxStorageGb ? this.sub?.maxStorageGb - 1 : 0 || 0)
-    );
-  }
-
-  additionalStoragePriceMonthly(selectedPlan: PlanResponse) {
-    return selectedPlan.PasswordManager.additionalStoragePricePerGb;
-  }
-
-  additionalServiceAccountTotal(plan: PlanResponse): number {
-    if (
-      !plan.SecretsManager.hasAdditionalServiceAccountOption ||
-      this.additionalServiceAccount == 0
-    ) {
-      return 0;
-    }
-
-    return plan.SecretsManager.additionalPricePerServiceAccount * this.additionalServiceAccount;
-  }
-
-  get passwordManagerSubtotal() {
-    if (!this.selectedPlan || !this.selectedPlan.PasswordManager) {
-      return 0;
-    }
-
-    let subTotal = this.selectedPlan.PasswordManager.basePrice;
-    if (this.selectedPlan.PasswordManager.hasAdditionalSeatsOption) {
-      subTotal += this.passwordManagerSeatTotal(this.selectedPlan);
-    }
-    if (this.selectedPlan.PasswordManager.hasPremiumAccessOption) {
-      subTotal += this.selectedPlan.PasswordManager.premiumAccessOptionPrice;
-    }
-    return subTotal - this.discount;
-  }
-
-  secretsManagerSubtotal() {
-    const plan = this.selectedPlan;
-    if (!plan || !plan.SecretsManager) {
-      return this.secretsManagerTotal || 0;
-    }
-
-    if (this.secretsManagerTotal) {
-      return this.secretsManagerTotal;
-    }
-
-    this.secretsManagerTotal =
-      plan.SecretsManager.basePrice +
-      this.secretsManagerSeatTotal(plan, this.sub?.smSeats) +
-      this.additionalServiceAccountTotal(plan);
-    return this.secretsManagerTotal;
-  }
-
-  get passwordManagerSeats() {
-    if (!this.selectedPlan) {
-      return 0;
-    }
-
-    if (this.selectedPlan.productTier === ProductTierType.Families) {
-      return this.selectedPlan.PasswordManager.baseSeats;
-    }
-    return this.sub?.seats;
-  }
-
-  get total() {
-    if (!this.organization || !this.selectedPlan) {
-      return 0;
-    }
-
-    if (this.organization.useSecretsManager) {
-      return (
-        this.passwordManagerSubtotal +
-        this.additionalStorageTotal(this.selectedPlan) +
-        this.secretsManagerSubtotal() +
-        this.estimatedTax
-      );
-    }
-    return (
-      this.passwordManagerSubtotal +
-      this.additionalStorageTotal(this.selectedPlan) +
-      this.estimatedTax
-    );
-  }
-
-  get additionalServiceAccount() {
-    if (!this.currentPlan || !this.currentPlan.SecretsManager) {
-      return 0;
-    }
-
-    const baseServiceAccount = this.currentPlan.SecretsManager?.baseServiceAccount || 0;
-    const usedServiceAccounts = this.sub?.smServiceAccounts || 0;
-
-    const additionalServiceAccounts = baseServiceAccount - usedServiceAccounts;
-
-    return additionalServiceAccounts <= 0 ? Math.abs(additionalServiceAccounts) : 0;
-  }
-
-  changedProduct() {
-    const selectedPlan = this.selectablePlans[0];
-
-    this.setPlanType(selectedPlan.type);
-    this.handlePremiumAddonAccess(selectedPlan.PasswordManager.hasPremiumAccessOption);
-    this.handleAdditionalSeats(selectedPlan.PasswordManager.hasAdditionalSeatsOption);
-  }
-
-  setPlanType(planType: PlanType) {
+  private setPlanType(planType: PlanType): void {
     this.formGroup.controls.plan.setValue(planType);
   }
 
-  handlePremiumAddonAccess(hasPremiumAccessOption: boolean) {
+  private handlePremiumAddonAccess(hasPremiumAccessOption: boolean): void {
     this.formGroup.controls.premiumAccessAddon.setValue(!hasPremiumAccessOption);
   }
 
-  handleAdditionalSeats(selectedPlanHasAdditionalSeatsOption: boolean) {
+  private handleAdditionalSeats(selectedPlanHasAdditionalSeatsOption: boolean): void {
     if (!selectedPlanHasAdditionalSeatsOption) {
       this.formGroup.controls.additionalSeats.setValue(0);
       return;
@@ -545,95 +559,39 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
     this.formGroup.controls.additionalSeats.setValue(1);
   }
 
-  changedCountry() {
-    this.paymentComponent.showBankAccount = this.taxInformation.country === "US";
-
-    if (
-      !this.paymentComponent.showBankAccount &&
-      this.paymentComponent.selected === PaymentMethodType.BankAccount
-    ) {
-      this.paymentComponent.select(PaymentMethodType.Card);
-    }
-  }
-
-  protected taxInformationChanged(event: TaxInformation): void {
-    this.taxInformation = event;
-    this.changedCountry();
-    this.refreshSalesTax();
-  }
-
-  submit = async (): Promise<void> => {
-    if (!this.taxComponent.validate()) {
-      this.taxComponent.markAllAsTouched();
-      return;
-    }
-
-    try {
-      if (this.organizationId) {
-        await this.updateOrganizationPaymentMethod();
-      } else {
-        await this.updatePremiumUserPaymentMethod();
-      }
-
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t("updatedPaymentMethod"),
-      });
-
-      // Emit success event before closing dialog
-      this.onSuccess.emit({ organizationId: this.organizationId });
-      this.dialogRef.close(TrialPaymentMethodDialogResultType.Submitted);
-    } catch (error) {
-      const msg = typeof error == "object" ? error.message : error;
-      this.toastService.showToast({
-        variant: "error",
-        title: null,
-        message: this.i18nService.t(msg) || msg,
-      });
-    }
-  };
-  private updateOrganizationPaymentMethod = async () => {
-    const paymentSource = await this.paymentComponent.tokenize();
-
-    const request = new UpdatePaymentMethodRequest();
-    request.paymentSource = paymentSource;
-    request.taxInformation = ExpandedTaxInfoUpdateRequest.From(this.taxInformation);
-
-    await this.billingApiService.updateOrganizationPaymentMethod(this.organizationId, request);
-  };
-
-  private updatePremiumUserPaymentMethod = async () => {
-    const { type, token } = await this.paymentComponent.tokenize();
-
-    const request = new PaymentRequest();
-    request.paymentMethodType = type;
-    request.paymentToken = token;
-    request.country = this.taxInformation.country;
-    request.postalCode = this.taxInformation.postalCode;
-    request.taxId = this.taxInformation.taxId;
-    request.state = this.taxInformation.state;
-    request.line1 = this.taxInformation.line1;
-    request.line2 = this.taxInformation.line2;
-    request.city = this.taxInformation.city;
-    request.state = this.taxInformation.state;
-    await this.apiService.postAccountPayment(request);
-  };
-
-  private planIsEnabled(plan: PlanResponse) {
+  private planIsEnabled(plan: PlanResponse): boolean {
     return !plan.disabled && !plan.legacyYear;
   }
 
-  toggleTotalOpened() {
-    this.totalOpened = !this.totalOpened;
+  private refreshSalesTax(): void {
+    if (
+      this.taxInformation === undefined ||
+      !this.taxInformation.country ||
+      !this.taxInformation.postalCode
+    ) {
+      return;
+    }
+
+    this.trialPaymentMethodService
+      .refreshSalesTax(
+        this.organizationId,
+        this.selectedPlan,
+        this.sub,
+        this.organization,
+        this.taxInformation,
+        this.taxService,
+        this.i18nService,
+        this.toastService,
+      )
+      .then((taxAmount) => {
+        this.estimatedTax = taxAmount;
+      })
+      .catch(() => {
+        this.estimatedTax = 0;
+      });
   }
 
-  calculateTotalAppliedDiscount(total: number) {
-    const discountedTotal = total * (this.discountPercentageFromSub / 100);
-    return discountedTotal;
-  }
-
-  resolvePlanName(productTier: ProductTierType) {
+  private resolvePlanName(productTier: ProductTierType): string {
     switch (productTier) {
       case ProductTierType.Enterprise:
         return this.i18nService.t("planNameEnterprise");
@@ -647,110 +605,4 @@ export class TrialPaymentMethodDialogComponent implements OnInit, OnDestroy {
         return this.i18nService.t("planNameTeamsStarter");
     }
   }
-
-  onKeydown(event: KeyboardEvent, index: number) {
-    const cardElements = Array.from(document.querySelectorAll(".product-card")) as HTMLElement[];
-    let newIndex = index;
-    const direction = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1;
-
-    if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
-      do {
-        newIndex = (newIndex + direction + cardElements.length) % cardElements.length;
-      } while (this.isCardDisabled(newIndex) && newIndex !== index);
-
-      event.preventDefault();
-
-      setTimeout(() => {
-        const card = cardElements[newIndex];
-        if (
-          !(
-            card.classList.contains("tw-bg-secondary-100") &&
-            card.classList.contains("tw-text-muted")
-          )
-        ) {
-          card?.focus();
-        }
-      }, 0);
-    }
-  }
-
-  onFocus(index: number) {
-    this.focusedIndex = index;
-    this.selectPlan(this.selectablePlans[index]);
-  }
-
-  isCardDisabled(index: number): boolean {
-    const card = this.selectablePlans[index];
-    return card === (this.currentPlan || this.isCardStateDisabled);
-  }
-
-  private refreshSalesTax(): void {
-    if (
-      this.taxInformation === undefined ||
-      !this.taxInformation.country ||
-      !this.taxInformation.postalCode
-    ) {
-      return;
-    }
-
-    const request: PreviewOrganizationInvoiceRequest = {
-      organizationId: this.organizationId,
-      passwordManager: {
-        additionalStorage: 0,
-        plan: this.selectedPlan?.type,
-        seats: this.sub.seats,
-      },
-      taxInformation: {
-        postalCode: this.taxInformation.postalCode,
-        country: this.taxInformation.country,
-        taxId: this.taxInformation.taxId,
-      },
-    };
-
-    if (this.organization.useSecretsManager) {
-      request.secretsManager = {
-        seats: this.sub.smSeats,
-        additionalMachineAccounts:
-          this.sub.smServiceAccounts - this.sub.plan.SecretsManager.baseServiceAccount,
-      };
-    }
-
-    this.taxService
-      .previewOrganizationInvoice(request)
-      .then((invoice) => {
-        this.estimatedTax = invoice.taxAmount;
-      })
-      .catch((error) => {
-        const translatedMessage = this.i18nService.t(error.message);
-        this.toastService.showToast({
-          title: "",
-          variant: "error",
-          message:
-            !translatedMessage || translatedMessage === "" ? error.message : translatedMessage,
-        });
-      });
-  }
-
-  protected get showTaxIdField(): boolean {
-    if (this.organizationId) {
-      switch (this.productTier) {
-        case ProductTierType.Free:
-        case ProductTierType.Families:
-          return false;
-        default:
-          return true;
-      }
-    } else {
-      return !!this.providerId;
-    }
-  }
-
-  static open = (
-    dialogService: DialogService,
-    dialogConfig: DialogConfig<TrialPaymentMethodParams>,
-  ) =>
-    dialogService.open<TrialPaymentMethodDialogResultType>(
-      TrialPaymentMethodDialogComponent,
-      dialogConfig,
-    );
 }
diff --git a/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method.service.ts b/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method.service.ts
new file mode 100644
index 00000000000..9c4da4c83af
--- /dev/null
+++ b/apps/web/src/app/billing/shared/trial-subscription-dialog/trial-payment-method.service.ts
@@ -0,0 +1,149 @@
+import { Injectable } from "@angular/core";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
+import { TaxServiceAbstraction } from "@bitwarden/common/billing/abstractions/tax.service.abstraction";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
+import { TaxInformation } from "@bitwarden/common/billing/models/domain";
+import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
+import { PaymentRequest } from "@bitwarden/common/billing/models/request/payment.request";
+import { PreviewOrganizationInvoiceRequest } from "@bitwarden/common/billing/models/request/preview-organization-invoice.request";
+import { UpdatePaymentMethodRequest } from "@bitwarden/common/billing/models/request/update-payment-method.request";
+import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ToastService } from "@bitwarden/components";
+
+import { PaymentComponent } from "../payment/payment.component";
+
+@Injectable()
+export class TrialPaymentMethodService {
+  isSecretsManagerTrial(subscription: OrganizationSubscriptionResponse): boolean {
+    return (
+      subscription?.subscription?.items?.some((item) =>
+        subscription?.customerDiscount?.appliesTo?.includes(item.productId),
+      ) ?? false
+    );
+  }
+
+  shouldShowTaxIdField(
+    organizationId: string,
+    productTier: ProductTierType,
+    providerId?: string,
+  ): boolean {
+    if (organizationId) {
+      switch (productTier) {
+        case ProductTierType.Free:
+        case ProductTierType.Families:
+          return false;
+        default:
+          return true;
+      }
+    } else {
+      return !!providerId;
+    }
+  }
+
+  async submitPayment(
+    organizationId: string,
+    paymentComponent: PaymentComponent,
+    taxInformation: TaxInformation,
+    billingApiService: BillingApiServiceAbstraction,
+    apiService: ApiService,
+  ): Promise<void> {
+    if (organizationId) {
+      await this.updateOrganizationPaymentMethod(
+        organizationId,
+        paymentComponent,
+        taxInformation,
+        billingApiService,
+      );
+    } else {
+      await this.updatePremiumUserPaymentMethod(paymentComponent, taxInformation, apiService);
+    }
+  }
+
+  async refreshSalesTax(
+    organizationId: string,
+    selectedPlan: PlanResponse,
+    subscription: OrganizationSubscriptionResponse,
+    organization: Organization,
+    taxInformation: TaxInformation,
+    taxService: TaxServiceAbstraction,
+    i18nService: I18nService,
+    toastService: ToastService,
+  ): Promise<number> {
+    const request: PreviewOrganizationInvoiceRequest = {
+      organizationId: organizationId,
+      passwordManager: {
+        additionalStorage: 0,
+        plan: selectedPlan?.type,
+        seats: subscription.seats,
+      },
+      taxInformation: {
+        postalCode: taxInformation.postalCode,
+        country: taxInformation.country,
+        taxId: taxInformation.taxId,
+      },
+    };
+
+    if (organization.useSecretsManager) {
+      request.secretsManager = {
+        seats: subscription.smSeats,
+        additionalMachineAccounts:
+          subscription.smServiceAccounts - subscription.plan.SecretsManager.baseServiceAccount,
+      };
+    }
+
+    try {
+      const invoice = await taxService.previewOrganizationInvoice(request);
+      return invoice.taxAmount;
+    } catch (error) {
+      const translatedMessage = i18nService.t(error.message);
+      toastService.showToast({
+        title: "",
+        variant: "error",
+        message: !translatedMessage || translatedMessage === "" ? error.message : translatedMessage,
+      });
+      throw error;
+    }
+  }
+
+  private async updateOrganizationPaymentMethod(
+    organizationId: string,
+    paymentComponent: PaymentComponent,
+    taxInformation: TaxInformation,
+    billingApiService: BillingApiServiceAbstraction,
+  ): Promise<void> {
+    const paymentSource = await paymentComponent.tokenize();
+
+    const request = new UpdatePaymentMethodRequest();
+    request.paymentSource = paymentSource;
+    request.taxInformation = ExpandedTaxInfoUpdateRequest.From(taxInformation);
+
+    await billingApiService.updateOrganizationPaymentMethod(organizationId, request);
+  }
+
+  private async updatePremiumUserPaymentMethod(
+    paymentComponent: PaymentComponent,
+    taxInformation: TaxInformation,
+    apiService: ApiService,
+  ): Promise<void> {
+    const { type, token } = await paymentComponent.tokenize();
+
+    const request = new PaymentRequest();
+    request.paymentMethodType = type;
+    request.paymentToken = token;
+    request.country = taxInformation.country;
+    request.postalCode = taxInformation.postalCode;
+    request.taxId = taxInformation.taxId;
+    request.state = taxInformation.state;
+    request.line1 = taxInformation.line1;
+    request.line2 = taxInformation.line2;
+    request.city = taxInformation.city;
+    request.state = taxInformation.state;
+
+    await apiService.postAccountPayment(request);
+  }
+}