diff --git a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
index 50db2cb6a3..72f743d2cc 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
@@ -25,7 +25,7 @@
               <tr bitRow *ngFor="let i of activePlans">
                 <td bitCell class="tw-pl-0 tw-py-3">
                   {{ getFormattedPlanName(i.planName) }} {{ "orgSeats" | i18n }} ({{
-                    i.cadence.toLowerCase()
+                    getFormattedPlanNameCadence(i.cadence) | i18n
                   }}) {{ "&times;" }}{{ getFormattedSeatCount(i.seatMinimum, i.purchasedSeats) }}
                   &#64;
                   {{
@@ -38,12 +38,11 @@
                   }}
                 </td>
                 <td bitCell class="tw-text-right tw-py-3">
-                  {{ ((100 - subscription.discountPercentage) / 100) * i.cost | currency: "$" }} /{{
-                    "month" | i18n
-                  }}
+                  {{ ((100 - subscription.discountPercentage) / 100) * i.cost | currency: "$" }} /
+                  {{ getBillingCadenceLabel(i) | i18n }}
                   <div *ngIf="subscription.discountPercentage">
                     <bit-hint class="tw-text-sm tw-line-through">
-                      {{ i.cost | currency: "$" }} /{{ "month" | i18n }}
+                      {{ i.cost | currency: "$" }} / {{ getBillingCadenceLabel(i) | i18n }}
                     </bit-hint>
                   </div>
                 </td>
@@ -52,8 +51,9 @@
               <tr bitRow>
                 <td bitCell class="tw-pl-0 tw-py-3"></td>
                 <td bitCell class="tw-text-right">
-                  <span class="tw-font-bold">Total:</span> {{ totalCost | currency: "$" }} /{{
-                    "month" | i18n
+                  <span class="tw-font-bold">Total:</span> {{ totalCost | currency: "$" }} /
+                  {{
+                    getBillingCadenceLabel(activePlans.length > 0 ? activePlans[0] : null) | i18n
                   }}
                 </td>
               </tr>
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
index a6b27b9f3d..02fa29578d 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
@@ -19,14 +19,13 @@ import { ToastService } from "@bitwarden/components";
   templateUrl: "./provider-subscription.component.html",
 })
 export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
-  providerId: string;
-  subscription: ProviderSubscriptionResponse;
+  private providerId: string;
+  protected subscription: ProviderSubscriptionResponse;
 
-  firstLoaded = false;
-  loading: boolean;
+  protected firstLoaded = false;
+  protected loading: boolean;
   private destroy$ = new Subject<void>();
-  totalCost: number;
-  currentDate = new Date();
+  protected totalCost: number;
 
   protected readonly TaxInformation = TaxInformation;
 
@@ -50,11 +49,7 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
-  get isExpired() {
-    return this.subscription.status !== "active";
-  }
-
-  async load() {
+  protected async load() {
     if (this.loading) {
       return;
     }
@@ -65,7 +60,7 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
     this.loading = false;
   }
 
-  updateTaxInformation = async (taxInformation: TaxInformation) => {
+  protected updateTaxInformation = async (taxInformation: TaxInformation) => {
     const request = ExpandedTaxInfoUpdateRequest.From(taxInformation);
     await this.billingApiService.updateProviderTaxInformation(this.providerId, request);
     this.toastService.showToast({
@@ -75,7 +70,7 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
     });
   };
 
-  getFormattedCost(
+  protected getFormattedCost(
     cost: number,
     seatMinimum: number,
     purchasedSeats: number,
@@ -85,17 +80,21 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
     return costPerSeat - (costPerSeat * discountPercentage) / 100;
   }
 
-  getFormattedPlanName(planName: string): string {
+  protected getFormattedPlanName(planName: string): string {
     const spaceIndex = planName.indexOf(" ");
     return planName.substring(0, spaceIndex);
   }
 
-  getFormattedSeatCount(seatMinimum: number, purchasedSeats: number): string {
+  protected getFormattedSeatCount(seatMinimum: number, purchasedSeats: number): string {
     const totalSeats = seatMinimum + purchasedSeats;
     return totalSeats > 1 ? totalSeats.toString() : "";
   }
 
-  sumCost(plans: ProviderPlanResponse[]): number {
+  protected getFormattedPlanNameCadence(cadence: string) {
+    return cadence === "Annual" ? "annually" : "monthly";
+  }
+
+  private sumCost(plans: ProviderPlanResponse[]): number {
     return plans.reduce((acc, plan) => acc + plan.cost, 0);
   }
 
@@ -104,7 +103,7 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-  get activePlans(): ProviderPlanResponse[] {
+  protected get activePlans(): ProviderPlanResponse[] {
     return this.subscription.plans.filter((plan) => {
       if (plan.purchasedSeats === 0) {
         return plan.seatMinimum > 0;
@@ -113,4 +112,19 @@ export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
       }
     });
   }
+
+  protected getBillingCadenceLabel(providerPlanResponse: ProviderPlanResponse): string {
+    if (providerPlanResponse == null || providerPlanResponse == undefined) {
+      return "month";
+    }
+
+    switch (providerPlanResponse.cadence) {
+      case "Monthly":
+        return "month";
+      case "Annual":
+        return "year";
+      default:
+        return "month";
+    }
+  }
 }