diff --git a/src/base/credits/comfyCredits.ts b/src/base/credits/comfyCredits.ts
new file mode 100644
index 0000000000..b2407210ce
--- /dev/null
+++ b/src/base/credits/comfyCredits.ts
@@ -0,0 +1,115 @@
+const DEFAULT_NUMBER_FORMAT: Intl.NumberFormatOptions = {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}
+
+const formatNumber = ({
+  value,
+  locale,
+  options
+}: {
+  value: number
+  locale?: string
+  options?: Intl.NumberFormatOptions
+}): string => {
+  const merged: Intl.NumberFormatOptions = {
+    ...DEFAULT_NUMBER_FORMAT,
+    ...options
+  }
+
+  if (
+    typeof merged.maximumFractionDigits === 'number' &&
+    typeof merged.minimumFractionDigits === 'number' &&
+    merged.maximumFractionDigits < merged.minimumFractionDigits
+  ) {
+    merged.minimumFractionDigits = merged.maximumFractionDigits
+  }
+
+  return new Intl.NumberFormat(locale, merged).format(value)
+}
+
+export const COMFY_CREDIT_RATE_CENTS = 210
+export const COMFY_CREDIT_RATE_USD = COMFY_CREDIT_RATE_CENTS / 100
+
+export const usdToCents = (usd: number): number => Math.round(usd * 100)
+
+export const centsToCredits = (cents: number): number =>
+  cents / COMFY_CREDIT_RATE_CENTS
+
+export const creditsToCents = (credits: number): number =>
+  Math.round(credits * COMFY_CREDIT_RATE_CENTS)
+
+export const usdToCredits = (usd: number): number =>
+  centsToCredits(usdToCents(usd))
+
+export const creditsToUsd = (credits: number): number =>
+  creditsToCents(credits) / 100
+
+export type FormatOptions = {
+  value: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}
+
+export const formatCredits = ({
+  value,
+  locale,
+  numberOptions
+}: FormatOptions): string =>
+  formatNumber({ value, locale, options: numberOptions })
+
+export const formatCreditsFromCents = ({
+  cents,
+  locale,
+  numberOptions
+}: {
+  cents: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}): string =>
+  formatCredits({
+    value: centsToCredits(cents),
+    locale,
+    numberOptions
+  })
+
+export const formatCreditsFromUsd = ({
+  usd,
+  locale,
+  numberOptions
+}: {
+  usd: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}): string =>
+  formatCredits({
+    value: usdToCredits(usd),
+    locale,
+    numberOptions
+  })
+
+export const formatUsd = ({
+  value,
+  locale,
+  numberOptions
+}: FormatOptions): string =>
+  formatNumber({
+    value,
+    locale,
+    options: numberOptions
+  })
+
+export const formatUsdFromCents = ({
+  cents,
+  locale,
+  numberOptions
+}: {
+  cents: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}): string =>
+  formatUsd({
+    value: cents / 100,
+    locale,
+    numberOptions
+  })
diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
index aac405b90c..825467dbe5 100644
--- a/src/components/common/UserCredit.vue
+++ b/src/components/common/UserCredit.vue
@@ -9,7 +9,7 @@
   <div v-else class="flex items-center gap-1">
     <Tag
       severity="secondary"
-      icon="pi pi-dollar"
+      icon="pi pi-wallet"
       rounded
       class="p-1 text-amber-400"
     />
@@ -21,9 +21,10 @@
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const { textClass } = defineProps<{
   textClass?: string
@@ -31,9 +32,15 @@ const { textClass } = defineProps<{
 
 const authStore = useFirebaseAuthStore()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
+const { t, locale } = useI18n()
 
 const formattedBalance = computed(() => {
-  if (!authStore.balance) return '0.00'
-  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+  // Backend returns cents despite the *_micros naming convention.
+  const cents = authStore.balance?.amount_micros ?? 0
+  const amount = formatCreditsFromCents({
+    cents,
+    locale: locale.value
+  })
+  return `${amount} ${t('credits.credits')}`
 })
 </script>
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index f134aba5e2..bdca252fec 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -2,24 +2,36 @@
   <div class="flex items-center gap-2">
     <Tag
       severity="secondary"
-      icon="pi pi-dollar"
+      icon="pi pi-wallet"
       rounded
       class="p-1 text-amber-400"
     />
-    <InputNumber
-      v-if="editable"
-      v-model="customAmount"
-      :min="1"
-      :max="1000"
-      :step="1"
-      show-buttons
-      :allow-empty="false"
-      :highlight-on-focus="true"
-      pt:pc-input-text:root="w-24"
-      @blur="(e: InputNumberBlurEvent) => (customAmount = Number(e.value))"
-      @input="(e: InputNumberInputEvent) => (customAmount = Number(e.value))"
-    />
-    <span v-else class="text-xl">{{ amount }}</span>
+    <div v-if="editable" class="flex items-center gap-2">
+      <InputNumber
+        v-model="customAmount"
+        :min="1"
+        :max="1000"
+        :step="1"
+        show-buttons
+        :allow-empty="false"
+        :highlight-on-focus="true"
+        prefix="$"
+        pt:pc-input-text:root="w-28"
+        @blur="
+          (e: InputNumberBlurEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+        @input="
+          (e: InputNumberInputEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+      />
+      <span class="text-xs text-muted">{{ formattedCredits }}</span>
+    </div>
+    <div v-else class="flex flex-col leading-tight">
+      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
+      <span class="text-xs text-muted">{{ formattedUsd }}</span>
+    </div>
   </div>
   <ProgressSpinner v-if="loading" class="h-8 w-8" />
   <Button
@@ -40,8 +52,10 @@ import type {
 } from 'primevue/inputnumber'
 import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromUsd, formatUsd } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useTelemetry } from '@/platform/telemetry'
 
@@ -61,9 +75,31 @@ const {
 const customAmount = ref(amount)
 const didClickBuyNow = ref(false)
 const loading = ref(false)
+const { t, locale } = useI18n()
+
+const clampUsd = (value: number) => {
+  const safe = Number.isNaN(value) ? 0 : value
+  return Math.min(1000, Math.max(1, safe))
+}
+
+const displayUsdAmount = computed(() =>
+  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
+)
+
+const formattedCredits = computed(
+  () =>
+    `${formatCreditsFromUsd({
+      usd: displayUsdAmount.value,
+      locale: locale.value
+    })} ${t('credits.credits')}`
+)
+
+const formattedUsd = computed(
+  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
+)
 
 const handleBuyNow = async () => {
-  const creditAmount = editable ? customAmount.value : amount
+  const creditAmount = displayUsdAmount.value
   telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
 
   loading.value = true
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts b/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
index 0c0cf5a7f7..fa18e9ec8c 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
@@ -1,56 +1,59 @@
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 /**
  * Composable for handling subscription credit calculations and formatting
  */
 export function useSubscriptionCredits() {
   const authStore = useFirebaseAuthStore()
+  const { t, locale } = useI18n()
+
+  const formatBalance = (maybeCents?: number) => {
+    // Backend returns cents despite the *_micros naming convention.
+    const cents = maybeCents ?? 0
+    const amount = formatCreditsFromCents({
+      cents,
+      locale: locale.value
+    })
+    return `${amount} ${t('credits.credits')}`
+  }
 
   const totalCredits = computed(() => {
-    if (!authStore.balance?.amount_micros) return '0.00'
     try {
-      return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+      return formatBalance(authStore.balance?.amount_micros)
     } catch (error) {
       console.error(
         '[useSubscriptionCredits] Error formatting total credits:',
         error
       )
-      return '0.00'
+      return formatBalance(0)
     }
   })
 
   const monthlyBonusCredits = computed(() => {
-    if (!authStore.balance?.cloud_credit_balance_micros) return '0.00'
     try {
-      return formatMetronomeCurrency(
-        authStore.balance.cloud_credit_balance_micros,
-        'usd'
-      )
+      return formatBalance(authStore.balance?.cloud_credit_balance_micros)
     } catch (error) {
       console.error(
         '[useSubscriptionCredits] Error formatting monthly bonus credits:',
         error
       )
-      return '0.00'
+      return formatBalance(0)
     }
   })
 
   const prepaidCredits = computed(() => {
-    if (!authStore.balance?.prepaid_balance_micros) return '0.00'
     try {
-      return formatMetronomeCurrency(
-        authStore.balance.prepaid_balance_micros,
-        'usd'
-      )
+      return formatBalance(authStore.balance?.prepaid_balance_micros)
     } catch (error) {
       console.error(
         '[useSubscriptionCredits] Error formatting prepaid credits:',
         error
       )
-      return '0.00'
+      return formatBalance(0)
     }
   })
 
diff --git a/tests-ui/tests/base/credits/comfyCredits.test.ts b/tests-ui/tests/base/credits/comfyCredits.test.ts
new file mode 100644
index 0000000000..5f69073282
--- /dev/null
+++ b/tests-ui/tests/base/credits/comfyCredits.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  COMFY_CREDIT_RATE_CENTS,
+  COMFY_CREDIT_RATE_USD,
+  centsToCredits,
+  creditsToCents,
+  creditsToUsd,
+  formatCredits,
+  formatCreditsFromCents,
+  formatCreditsFromUsd,
+  formatUsd,
+  formatUsdFromCents,
+  usdToCents,
+  usdToCredits
+} from '@/base/credits/comfyCredits'
+
+describe('comfyCredits helpers', () => {
+  test('exposes the fixed conversion rate', () => {
+    expect(COMFY_CREDIT_RATE_CENTS).toBe(210)
+    expect(COMFY_CREDIT_RATE_USD).toBeCloseTo(2.1)
+  })
+
+  test('converts between USD and cents', () => {
+    expect(usdToCents(1.23)).toBe(123)
+    expect(formatUsdFromCents({ cents: 123, locale: 'en-US' })).toBe('1.23')
+  })
+
+  test('converts cents to credits and back', () => {
+    expect(centsToCredits(210)).toBeCloseTo(1)
+    expect(creditsToCents(5)).toBe(1050)
+  })
+
+  test('converts USD to credits and back', () => {
+    expect(usdToCredits(2.1)).toBeCloseTo(1)
+    expect(creditsToUsd(3.5)).toBeCloseTo(7.35)
+  })
+
+  test('formats credits and USD values using en-US locale', () => {
+    const locale = 'en-US'
+    expect(formatCredits({ value: 1234.567, locale })).toBe('1,234.57')
+    expect(formatCreditsFromCents({ cents: 210, locale })).toBe('1.00')
+    expect(formatCreditsFromUsd({ usd: 4.2, locale })).toBe('2.00')
+    expect(formatUsd({ value: 4.2, locale })).toBe('4.20')
+  })
+})
diff --git a/tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts b/tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts
new file mode 100644
index 0000000000..e09cb381e2
--- /dev/null
+++ b/tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts
@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: () => ({
+    purchaseCredits: vi.fn(),
+    fetchBalance: vi.fn(),
+    accessBillingPortal: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackApiCreditTopupButtonPurchaseClicked: vi.fn()
+  })
+}))
+
+import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { credits: { credits: 'Credits' } } }
+})
+
+const mountOption = (
+  props?: Partial<{ amount: number; preselected: boolean; editable: boolean }>
+) =>
+  mount(CreditTopUpOption, {
+    props: {
+      amount: 10,
+      preselected: false,
+      editable: false,
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      stubs: {
+        Tag: { template: '<span><slot /></span>' },
+        Button: { template: '<button><slot /></button>' },
+        InputNumber: {
+          props: ['modelValue'],
+          emits: ['update:modelValue'],
+          template:
+            '<input type="number" :value="modelValue" @input="$emit(\'update:modelValue\',$event.target.value)" />'
+        },
+        ProgressSpinner: { template: '<div class="spinner" />' }
+      }
+    }
+  })
+
+describe('CreditTopUpOption', () => {
+  it('renders converted credit price for preset amounts', () => {
+    const wrapper = mountOption({ amount: 2.1 })
+    expect(wrapper.text()).toContain('1.00 Credits')
+    expect(wrapper.text()).toContain('$2.10')
+  })
+
+  it('updates credit label when editable amount changes', async () => {
+    const wrapper = mountOption({ editable: true })
+    const vm = wrapper.vm as unknown as { customAmount: number }
+    vm.customAmount = 4.2
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('2.00 Credits')
+  })
+})
diff --git a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
index b7bff37a50..5be9f7d80c 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
@@ -17,9 +17,9 @@ const mockSubscriptionData = {
 }
 
 const mockCreditsData = {
-  totalCredits: '10.00',
-  monthlyBonusCredits: '5.00',
-  prepaidCredits: '5.00',
+  totalCredits: '10.00 Credits',
+  monthlyBonusCredits: '5.00 Credits',
+  prepaidCredits: '5.00 Credits',
   isLoadingBalance: false
 }
 
@@ -154,8 +154,8 @@ describe('SubscriptionPanel', () => {
   describe('credit display functionality', () => {
     it('displays dynamic credit values correctly', () => {
       const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('$10.00') // totalCredits
-      expect(wrapper.text()).toContain('$5.00') // both monthlyBonus and prepaid
+      expect(wrapper.text()).toContain('10.00 Credits')
+      expect(wrapper.text()).toContain('5.00 Credits')
     })
 
     it('shows loading skeleton when fetching balance', () => {
diff --git a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
index 1d64129a40..5cb17af670 100644
--- a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
@@ -1,9 +1,21 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import * as comfyCredits from '@/base/credits/comfyCredits'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<any>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: () => 'Credits',
+      locale: { value: 'en-US' }
+    })
+  }
+})
+
 // Mock Firebase Auth and related modules
 vi.mock('vuefire', () => ({
   useFirebaseAuth: vi.fn(() => ({
@@ -55,14 +67,6 @@ vi.mock('@/stores/apiKeyAuthStore', () => ({
   })
 }))
 
-// Mock formatMetronomeCurrency
-vi.mock('@/utils/formatUtil', () => ({
-  formatMetronomeCurrency: vi.fn((micros: number) => {
-    // Simple mock that converts micros to dollars
-    return (micros / 1000000).toFixed(2)
-  })
-}))
-
 describe('useSubscriptionCredits', () => {
   let authStore: ReturnType<typeof useFirebaseAuthStore>
 
@@ -73,63 +77,62 @@ describe('useSubscriptionCredits', () => {
   })
 
   describe('totalCredits', () => {
-    it('should return "0.00" when balance is null', () => {
+    it('should return "0.00 Credits" when balance is null', () => {
       authStore.balance = null
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
     })
 
-    it('should return "0.00" when amount_micros is missing', () => {
+    it('should return "0.00 Credits" when amount_micros is missing', () => {
       authStore.balance = {} as any
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
     })
 
     it('should format amount_micros correctly', () => {
-      authStore.balance = { amount_micros: 5000000 } as any
+      authStore.balance = { amount_micros: 210 } as any
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('5.00')
+      expect(totalCredits.value).toBe('1.00 Credits')
     })
 
     it('should handle formatting errors gracefully', async () => {
-      const mockFormatMetronomeCurrency = vi.mocked(
-        await import('@/utils/formatUtil')
-      ).formatMetronomeCurrency
-      mockFormatMetronomeCurrency.mockImplementationOnce(() => {
+      const formatSpy = vi.spyOn(comfyCredits, 'formatCreditsFromCents')
+      formatSpy.mockImplementationOnce(() => {
         throw new Error('Formatting error')
       })
 
-      authStore.balance = { amount_micros: 5000000 } as any
+      authStore.balance = { amount_micros: 210 } as any
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
+      formatSpy.mockRestore()
     })
   })
 
   describe('monthlyBonusCredits', () => {
-    it('should return "0.00" when cloud_credit_balance_micros is missing', () => {
+    it('should return "0.00 Credits" when cloud_credit_balance_micros is missing', () => {
       authStore.balance = {} as any
       const { monthlyBonusCredits } = useSubscriptionCredits()
-      expect(monthlyBonusCredits.value).toBe('0.00')
+      expect(monthlyBonusCredits.value).toBe('0.00 Credits')
     })
 
     it('should format cloud_credit_balance_micros correctly', () => {
-      authStore.balance = { cloud_credit_balance_micros: 2500000 } as any
+      authStore.balance = { cloud_credit_balance_micros: 420 } as any
       const { monthlyBonusCredits } = useSubscriptionCredits()
-      expect(monthlyBonusCredits.value).toBe('2.50')
+      expect(monthlyBonusCredits.value).toBe('2.00 Credits')
     })
   })
 
   describe('prepaidCredits', () => {
-    it('should return "0.00" when prepaid_balance_micros is missing', () => {
+    it('should return "0.00 Credits" when prepaid_balance_micros is missing', () => {
       authStore.balance = {} as any
       const { prepaidCredits } = useSubscriptionCredits()
-      expect(prepaidCredits.value).toBe('0.00')
+      expect(prepaidCredits.value).toBe('0.00 Credits')
     })
 
     it('should format prepaid_balance_micros correctly', () => {
-      authStore.balance = { prepaid_balance_micros: 7500000 } as any
+      authStore.balance = { prepaid_balance_micros: 630 } as any
       const { prepaidCredits } = useSubscriptionCredits()
-      expect(prepaidCredits.value).toBe('7.50')
+      expect(prepaidCredits.value).toBe('3.00 Credits')
     })
   })