diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 64c2923825..f3ec3ab4e0 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -440,7 +440,7 @@ const processingDate = computed<{ date: string; amount: number }>(() => {
 })
 
 const grandTotal = computed(() =>
-	userBalance.value ? userBalance.value.available + userBalance.value.pending : 0,
+	userBalance.value ? Number(userBalance.value.available) + Number(userBalance.value.pending) : 0,
 )
 
 const hasTinMismatch = computed(() => {
@@ -508,7 +508,7 @@ const segments = computed<RevenueBarSegment[]>(() => {
 	const upcoming = processing.date ? dates.filter((d) => d.date !== processing.date) : dates
 
 	const totalPending = userBalance.value?.pending ?? 0
-	const total = available + totalPending
+	const total = Number(available) + Number(totalPending)
 
 	if (total <= 0) return [] as RevenueBarSegment[]