diff --git a/libs/pricing/src/components/pricing-card/pricing-card.component.html b/libs/pricing/src/components/pricing-card/pricing-card.component.html
index d0ac4fc519f..d0c1ad4a2bb 100644
--- a/libs/pricing/src/components/pricing-card/pricing-card.component.html
+++ b/libs/pricing/src/components/pricing-card/pricing-card.component.html
@@ -24,9 +24,9 @@
   @if (price(); as priceValue) {
     <div class="tw-mb-6">
       <div class="tw-flex tw-items-baseline tw-gap-1 tw-flex-wrap">
-        <span class="tw-text-3xl tw-font-bold tw-leading-none tw-m-0"
-          >${{ priceValue.amount }}</span
-        >
+        <span class="tw-text-3xl tw-font-bold tw-leading-none tw-m-0">{{
+          priceValue.amount | currency: "USD" : "symbol"
+        }}</span>
         <span bitTypography="helper" class="tw-text-muted">
           / {{ priceValue.cadence }}
           @if (priceValue.showPerUser) {
diff --git a/libs/pricing/src/components/pricing-card/pricing-card.component.ts b/libs/pricing/src/components/pricing-card/pricing-card.component.ts
index b727fb10673..022653aa9e4 100644
--- a/libs/pricing/src/components/pricing-card/pricing-card.component.ts
+++ b/libs/pricing/src/components/pricing-card/pricing-card.component.ts
@@ -1,3 +1,4 @@
+import { CurrencyPipe } from "@angular/common";
 import { Component, EventEmitter, input, Output } from "@angular/core";
 
 import {
@@ -17,7 +18,7 @@ import {
 @Component({
   selector: "billing-pricing-card",
   templateUrl: "./pricing-card.component.html",
-  imports: [BadgeModule, ButtonModule, IconModule, TypographyModule],
+  imports: [BadgeModule, ButtonModule, IconModule, TypographyModule, CurrencyPipe],
 })
 export class PricingCardComponent {
   tagline = input.required<string>();