diff --git a/frontend/src/components/payment/SubscriptionPlanCard.vue b/frontend/src/components/payment/SubscriptionPlanCard.vue
index d37645642a..55cf3384c5 100644
--- a/frontend/src/components/payment/SubscriptionPlanCard.vue
+++ b/frontend/src/components/payment/SubscriptionPlanCard.vue
@@ -26,13 +26,13 @@
- $
+ {{ planCurrencySymbol }}
{{ plan.price }}
{{ plan.currency }}
/ {{ validitySuffix }}
- ${{ plan.original_price }} {{ plan.currency }}
+ {{ planCurrencySymbol }}{{ plan.original_price }} {{ plan.currency }}
{{ discountText }}
@@ -106,6 +106,7 @@ import type { SubscriptionPlan } from '@/types/payment'
import type { UserSubscription } from '@/types'
import { useAppStore } from '@/stores/app'
import { hasPeakRate as groupHasPeakRate, formatPeakRateWindow, serverTimezoneLabel } from '@/utils/peak-rate'
+import { currencySymbol } from '@/components/payment/currency'
import {
platformAccentBarClass,
platformBadgeLightClass,
@@ -148,6 +149,7 @@ const rateDisplay = computed(() => {
})
const appStore = useAppStore()
+const planCurrencySymbol = computed(() => currencySymbol(props.plan.currency || 'USD'))
const hasPeakRate = computed(() => groupHasPeakRate(props.plan))
diff --git a/frontend/src/components/payment/__tests__/SubscriptionPlanCard.spec.ts b/frontend/src/components/payment/__tests__/SubscriptionPlanCard.spec.ts
index 230692d7fb..5e17321359 100644
--- a/frontend/src/components/payment/__tests__/SubscriptionPlanCard.spec.ts
+++ b/frontend/src/components/payment/__tests__/SubscriptionPlanCard.spec.ts
@@ -2,6 +2,7 @@ import { mount } from "@vue/test-utils";
import { describe, expect, it } from "vitest";
import { createPinia } from "pinia";
import { createI18n } from "vue-i18n";
+import type { SubscriptionPlan } from "@/types/payment";
import SubscriptionPlanCard from "../SubscriptionPlanCard.vue";
const i18n = createI18n({
@@ -25,7 +26,7 @@ const i18n = createI18n({
},
});
-const mountPlanCard = (groupPlatform: string) =>
+const mountPlanCard = (groupPlatform: string, overrides: Partial