diff --git a/.changelog/1283.trivial.md b/.changelog/1283.trivial.md
new file mode 100644
index 000000000..66046e31f
--- /dev/null
+++ b/.changelog/1283.trivial.md
@@ -0,0 +1 @@
+Improve displaying balances containing different tokens
diff --git a/src/app/components/Balance/RuntimeBalanceDisplay.tsx b/src/app/components/Balance/RuntimeBalanceDisplay.tsx
index 0b3f70599..474d30e65 100644
--- a/src/app/components/Balance/RuntimeBalanceDisplay.tsx
+++ b/src/app/components/Balance/RuntimeBalanceDisplay.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { RuntimeSdkBalance } from '../../../oasis-nexus/api'
 import { useTranslation } from 'react-i18next'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
+import Box from '@mui/material/Box'
 
 export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({
   balances = [],
@@ -11,15 +12,15 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
     return t('common.missing')
   }
   return (
-    <>
+    <Box>
       {balances.map(balance => (
-        <span key={balance.token_symbol}>
+        <div key={balance.token_symbol}>
           {t('common.valueInToken', {
             ...getPreciseNumberFormat(balance.balance),
             ticker: balance.token_symbol,
           })}
-        </span>
+        </div>
       ))}
-    </>
+    </Box>
   )
 }