diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
index 72128bc5..0af86513 100644
--- a/examples/next/src/app/components/Connected.tsx
+++ b/examples/next/src/app/components/Connected.tsx
@@ -207,7 +207,7 @@ export const Connected = () => {
       <Box paddingX="4" flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
         <Box flexDirection="column" gap="4">
           <Box flexDirection="column" gap="2">
-            <Text color="text50" fontSize="small" fontWeight="medium">
+            <Text variant="small" color="text50" fontWeight="medium">
               Demos
             </Text>
             <CardButton
@@ -307,10 +307,10 @@ export const Connected = () => {
                 options={[
                   ...pendingFeeOptionConfirmation?.options?.map(option => ({
                     label: (
-                      <Box alignItems="flex-start" flexDirection="column" fontSize="xsmall">
+                      <Box alignItems="flex-start" flexDirection="column">
                         <Box flexDirection="row">
-                          <Text>Fee (in {option.token.name}): </Text>{' '}
-                          <Text>{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
+                          <Text variant="xsmall">Fee (in {option.token.name}): </Text>{' '}
+                          <Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
                         </Box>
                         <Box flexDirection="row">
                           <Text>Wallet balance for {option.token.name}: </Text>{' '}
diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index c4a061ca..5bdb3c67 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -292,7 +292,7 @@ export const Connected = () => {
       <Box paddingX="4" flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
         <Box flexDirection="column" gap="4" style={{ maxWidth: breakpoints.md }}>
           <Box flexDirection="column" gap="2">
-            <Text color="text50" fontSize="small" fontWeight="medium">
+            <Text variant="small" color="text50" fontWeight="medium">
               Demos
             </Text>
             {/* <CardButton
@@ -397,10 +397,10 @@ export const Connected = () => {
                 options={[
                   ...pendingFeeOptionConfirmation?.options?.map(option => ({
                     label: (
-                      <Box alignItems="flex-start" flexDirection="column" fontSize="xsmall">
+                      <Box alignItems="flex-start" flexDirection="column">
                         <Box flexDirection="row">
-                          <Text>Fee (in {option.token.name}): </Text>{' '}
-                          <Text>{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
+                          <Text variant="xsmall">Fee (in {option.token.name}): </Text>{' '}
+                          <Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
                         </Box>
                         <Box flexDirection="row">
                           <Text>Wallet balance for {option.token.name}: </Text>{' '}
diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
index c26e6fe1..a5fe2a34 100644
--- a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -36,7 +36,7 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
           <Box gap="1" alignItems="center">
             <TokenImage src={collectionLogoURI} size="xs" />
-            <Text marginLeft="1" fontSize="small" color="text80" fontWeight="bold">
+            <Text marginLeft="1" variant="small" color="text80" fontWeight="bold">
               {collectionName}
             </Text>
             <NetworkImage chainId={chainId} size="xs" />
@@ -49,15 +49,15 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
               width: '180px'
             }}
           >
-            <Text color="text100" fontSize="normal" fontWeight="normal">
+            <Text variant="normal" color="text100">
               {name}
             </Text>
-            <Text color="text50" fontSize="normal" fontWeight="normal">{`#${tokenId}`}</Text>
+            <Text variant="normal" color="text50">{`#${tokenId}`}</Text>
           </Box>
         </Box>
       </Box>
-      <Box height="full" fontSize="small" color="text50" fontWeight="bold">
-        {`x${formatDisplay(balanceFormatted)}`}
+      <Box height="full">
+        <Text variant="small" color="text50" fontWeight="bold">{`x${formatDisplay(balanceFormatted)}`}</Text>
       </Box>
     </Card>
   )
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
index 9d339a63..1fa2973e 100644
--- a/packages/checkout/src/views/CheckoutSelection/index.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -107,7 +107,7 @@ export const CheckoutSelection = () => {
       {orderSummaryItems.length > 0 && (
         <>
           <Box flexDirection="row" gap="2" alignItems="center">
-            <Text fontWeight="normal" fontSize="normal" color="text50">
+            <Text variant="normal" color="text50">
               Order summary
             </Text>
             <Tooltip
@@ -143,7 +143,7 @@ export const CheckoutSelection = () => {
 
       {displayCryptoCheckout && (
         <Box justifyContent="space-between" alignItems="center">
-          <Text fontWeight="normal" fontSize="normal" color="text50">
+          <Text variant="normal" color="text50">
             Total
           </Text>
           {isPending ? (
@@ -151,7 +151,7 @@ export const CheckoutSelection = () => {
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
               <TokenImage src={coinImageUrl} size="xs" />
-              <Text fontWeight="normal" fontSize="normal" color="text100">
+              <Text variant="normal" color="text100">
                 {`${formatDisplay(requestAmount)} ${coinSymbol}`}
               </Text>
             </Box>
@@ -210,7 +210,7 @@ export const CheckoutSelection = () => {
           {isPending ? (
             <Skeleton style={{ width: '102px', height: '14px' }} />
           ) : (
-            <Text fontWeight="bold" fontSize="small" color="text50">
+            <Text variant="small" fontWeight="bold" color="text50">
               Balance: {`${formatDisplay(userBalance)} ${coinSymbol}`}
             </Text>
           )}
diff --git a/packages/checkout/src/views/TransactionError.tsx b/packages/checkout/src/views/TransactionError.tsx
index d800d0e6..96230247 100644
--- a/packages/checkout/src/views/TransactionError.tsx
+++ b/packages/checkout/src/views/TransactionError.tsx
@@ -26,8 +26,8 @@ export const TransactionError = () => {
         style={{ top: '50%', right: '50%', transform: 'translate(50%, -50%)' }}
       >
         <NotificationErrorIcon />
-        <Text fontSize="xlarge">Error</Text>
-        <Text textAlign="center" variant="normal" color="text80">
+        <Text variant="xlarge">Error</Text>
+        <Text variant="normal" textAlign="center" color="text80">
           An error occurred while processing the transaction.
         </Text>
       </Box>
diff --git a/packages/checkout/src/views/TransactionSuccess.tsx b/packages/checkout/src/views/TransactionSuccess.tsx
index 2f1a34d0..219e9b33 100644
--- a/packages/checkout/src/views/TransactionSuccess.tsx
+++ b/packages/checkout/src/views/TransactionSuccess.tsx
@@ -30,8 +30,8 @@ export const TransactionSuccess = () => {
         style={{ top: '50%', right: '50%', transform: 'translate(50%, -50%)' }}
       >
         <NotificationSuccessIcon />
-        <Text fontSize="xlarge">Success!</Text>
-        <Text textAlign="center" variant="normal" color="text80">
+        <Text variant="xlarge">Success!</Text>
+        <Text variant="normal" textAlign="center" color="text80">
           Purchase was successful, item was sent to your wallet.
         </Text>
         {navigation.params.transactionHash && (
diff --git a/packages/kit/src/components/KitProvider/KitProvider.tsx b/packages/kit/src/components/KitProvider/KitProvider.tsx
index f43845ae..51d20fb1 100644
--- a/packages/kit/src/components/KitProvider/KitProvider.tsx
+++ b/packages/kit/src/components/KitProvider/KitProvider.tsx
@@ -214,7 +214,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
 
                               {pendingRequestConfirmation.type === 'signMessage' && (
                                 <Box flexDirection="column" width="full">
-                                  <Text fontSize="normal" color="text50">
+                                  <Text variant="normal" color="text50" fontWeight="medium">
                                     Message
                                   </Text>
                                   <Card marginTop="2" paddingY="6">
diff --git a/packages/kit/src/components/NetworkBadge/NetworkBadge.tsx b/packages/kit/src/components/NetworkBadge/NetworkBadge.tsx
index f6924f37..d79e1819 100644
--- a/packages/kit/src/components/NetworkBadge/NetworkBadge.tsx
+++ b/packages/kit/src/components/NetworkBadge/NetworkBadge.tsx
@@ -1,7 +1,6 @@
 import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import React from 'react'
 
-import { capitalize } from '../../utils/helpers'
 import { getNetwork, getNetworkBackgroundColor, getNetworkColor } from '../../utils/networks'
 
 interface NetworkBadgeProps {
@@ -16,28 +15,28 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
   return (
     <Box
       height="6"
-      paddingY="1"
-      paddingLeft="1.5"
-      paddingRight="2"
+      paddingX="2"
       gap="1"
-      style={{
-        background: chainBGColor
-      }}
       borderRadius="xs"
       flexDirection="row"
       justifyContent="center"
       alignItems="center"
       width="fit"
+      style={{
+        background: chainBGColor
+      }}
     >
       <NetworkImage chainId={chainId} size="xs" />
       <Text
+        variant="xsmall"
         fontWeight="bold"
-        fontSize="xsmall"
         style={{
           color: chainColor
         }}
+        capitalize
+        ellipsis
       >
-        {capitalize(network.title ?? network.name)}
+        {network.title ?? network.name}
       </Text>
     </Box>
   )
diff --git a/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx b/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
index 1e4f4e8d..da014333 100644
--- a/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
+++ b/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
@@ -19,7 +19,7 @@ export const PoweredBySequence = () => {
       cursor="pointer"
       opacity={{ hover: '80' }}
     >
-      <Text fontSize="small" color="text100">
+      <Text variant="small" color="text100">
         Powered by Sequence
       </Text>
       <Box height="5" width="5">
diff --git a/packages/kit/src/components/TxnDetails/TxnDetails.tsx b/packages/kit/src/components/TxnDetails/TxnDetails.tsx
index 214ca05b..cc2747e8 100644
--- a/packages/kit/src/components/TxnDetails/TxnDetails.tsx
+++ b/packages/kit/src/components/TxnDetails/TxnDetails.tsx
@@ -154,7 +154,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
 
       {toAddress !== undefined && (
         <Box>
-          <Text fontSize="normal" color="text50">
+          <Text variant="normal" color="text50">
             To
           </Text>
           <Box
@@ -215,7 +215,7 @@ const AwardItemInfo = ({ awardItemProps }: AwardItemInfoProps) => {
 
       {awardItemProps.to !== undefined && (
         <Box>
-          <Text fontSize="normal" color="text50">
+          <Text variant="normal" color="text50">
             To
           </Text>
           <Box
diff --git a/packages/wallet/src/shared/NetworkBadge.tsx b/packages/wallet/src/shared/NetworkBadge.tsx
index f4ed57ef..78cb1a20 100644
--- a/packages/wallet/src/shared/NetworkBadge.tsx
+++ b/packages/wallet/src/shared/NetworkBadge.tsx
@@ -2,8 +2,6 @@ import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import { getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
 import React from 'react'
 
-import { capitalize } from '../utils'
-
 interface NetworkBadgeProps {
   chainId: number
 }
@@ -16,9 +14,7 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
   return (
     <Box
       height="6"
-      paddingY="1"
-      paddingLeft="1.5"
-      paddingRight="2"
+      paddingX="2"
       gap="1"
       style={{
         background: chainBGColor
@@ -31,13 +27,15 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
     >
       <NetworkImage chainId={chainId} size="xs" />
       <Text
+        variant="xsmall"
         fontWeight="bold"
-        fontSize="xsmall"
+        capitalize
+        ellipsis
         style={{
           color: chainColor
         }}
       >
-        {capitalize(network.title ?? network.name)}
+        {network.title ?? network.name}
       </Text>
     </Box>
   )
diff --git a/packages/wallet/src/shared/SendItemInfo.tsx b/packages/wallet/src/shared/SendItemInfo.tsx
index 3ecbce14..f02f5f67 100644
--- a/packages/wallet/src/shared/SendItemInfo.tsx
+++ b/packages/wallet/src/shared/SendItemInfo.tsx
@@ -57,7 +57,7 @@ export const SendItemInfo = ({
             <CollectibleTileImage imageUrl={imageUrl} />
           </Box>
         ) : (
-          <TokenImage src={imageUrl} size="xl" />
+          <TokenImage src={imageUrl} size="lg" />
         )}
         <Box flexDirection="column" alignItems="flex-start">
           <Box flexDirection="row" alignItems="center" gap="1">
diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
index e312a0a9..b0b923b6 100644
--- a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
+++ b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -103,7 +103,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
       textColor = vars.colors.positive
     }
 
-    return <Text fontWeight="bold" fontSize="normal" style={{ color: textColor }}>{`${sign}${amount} ${symbol}`}</Text>
+    return <Text variant="normal" fontWeight="bold" style={{ color: textColor }}>{`${sign}${amount} ${symbol}`}</Text>
   }
 
   interface GetTransfer {
@@ -119,14 +119,14 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
         <Box flexDirection="row" justifyContent="space-between">
           <Box color="text50" gap="1" flexDirection="row" justifyContent="center" alignItems="center">
             {getTransactionIconByType(transfer.transferType)}
-            <Text fontWeight="medium" fontSize="normal" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text100">
               {getTansactionLabelByType(transfer.transferType)}
             </Text>
             <NetworkImage chainId={transaction.chainId} size="xs" />
           </Box>
           {isFirstItem && (
             <Box>
-              <Text fontWeight="medium" fontSize="normal" color="text50">
+              <Text variant="normal" fontWeight="medium" color="text50">
                 {date}
               </Text>
             </Box>
@@ -159,7 +159,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
               </Box>
               {isPending && <Skeleton style={{ width: '35px', height: '20px' }} />}
               {fiatConversionRate && (
-                <Text fontWeight="medium" fontSize="normal" color="text50">
+                <Text variant="normal" fontWeight="medium" color="text50">
                   {`${fiatCurrency.sign}${(Number(amountValue) * fiatConversionRate * conversionRate).toFixed(2)}`}
                 </Text>
               )}
diff --git a/packages/wallet/src/shared/TransactionHistoryList/index.tsx b/packages/wallet/src/shared/TransactionHistoryList/index.tsx
index a91766f9..da0a11dc 100644
--- a/packages/wallet/src/shared/TransactionHistoryList/index.tsx
+++ b/packages/wallet/src/shared/TransactionHistoryList/index.tsx
@@ -99,7 +99,7 @@ export const TransactionHistoryList = ({ transactions, isPending, isFetchingNext
   const TimeLabel = ({ label }: TimeLabelProps) => {
     return (
       <Box>
-        <Text color="text50" fontWeight="medium" fontSize="normal">
+        <Text variant="normal" color="text50" fontWeight="medium">
           {label}
         </Text>
       </Box>
diff --git a/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx b/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
index 2cd31394..4c0fcac5 100644
--- a/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
+++ b/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
@@ -87,7 +87,7 @@ export const WalletDropdownContent = forwardRef(({ setOpenWalletDropdown }: Wall
       <Box flexDirection="row" justifyContent="space-between" alignItems="flex-start">
         <Box flexDirection="row" justifyContent="center" alignItems="center" gap="3" marginLeft="2" color="text100">
           <GradientAvatar style={{ width: '28px' }} size="md" address={address || ''} />
-          <Text fontSize="large" style={{ fontWeight: '700' }} color="text100">
+          <Text variant="large" fontWeight="bold" color="text100">
             {formatAddress(address || '')}
           </Text>
           <CopyButton buttonVariant="icon" size="md" text={address || ''} color="text100" style={{ marginLeft: '-16px' }} />
diff --git a/packages/wallet/src/views/CoinDetails/Skeleton.tsx b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
index caec2e3d..0075d831 100644
--- a/packages/wallet/src/views/CoinDetails/Skeleton.tsx
+++ b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
@@ -19,7 +19,7 @@ export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
           <NetworkBadge chainId={chainId} />
         </Box>
         <Box>
-          <Text fontWeight="medium" color="text50" fontSize="normal">
+          <Text variant="normal" fontWeight="medium" color="text50">
             Balance
           </Text>
           <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
diff --git a/packages/wallet/src/views/CoinDetails/index.tsx b/packages/wallet/src/views/CoinDetails/index.tsx
index 6a24d007..31567393 100644
--- a/packages/wallet/src/views/CoinDetails/index.tsx
+++ b/packages/wallet/src/views/CoinDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system'
+import { Box, Button, SendIcon, Text, TokenImage } from '@0xsequence/design-system'
 import {
   getNativeTokenInfoByChainId,
   useExchangeRate,
@@ -97,19 +97,19 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box flexDirection="column" gap="10" paddingBottom="5" paddingX="4" paddingTop="0" style={{ marginTop: '-20px' }}>
         <Box marginBottom="10" gap="2" alignItems="center" justifyContent="center" flexDirection="column">
-          <Image width="8" src={logo} alt="logo" />
-          <Text color="text100" fontWeight="bold" fontSize="large">
+          <TokenImage src={logo} size="xl" />
+          <Text variant="large" color="text100" fontWeight="bold">
             {name}
           </Text>
           <NetworkBadge chainId={chainId} />
         </Box>
         <Box>
-          <Text fontWeight="medium" color="text50" fontSize="normal">
+          <Text variant="normal" fontWeight="medium" color="text50">
             Balance
           </Text>
           <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-            <Text fontWeight="bold" color="text100" fontSize="xlarge">{`${balanceDisplayed} ${symbol}`}</Text>
-            <Text fontWeight="medium" color="text50" fontSize="normal">{`${fiatCurrency.sign}${coinBalanceFiat}`}</Text>
+            <Text variant="xlarge" fontWeight="bold" color="text100">{`${balanceDisplayed} ${symbol}`}</Text>
+            <Text variant="normal" fontWeight="medium" color="text50">{`${fiatCurrency.sign}${coinBalanceFiat}`}</Text>
           </Box>
         </Box>
         <Button width="full" variant="primary" leftIcon={SendIcon} color="text100" label="Send" onClick={onClickSend} />
diff --git a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
index fdad6edb..b3d0938e 100644
--- a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
+++ b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
@@ -27,7 +27,7 @@ export const CollectibleDetailsSkeleton = () => {
         <Box>
           {/* balance */}
           <Box>
-            <Text fontWeight="medium" color="text50" fontSize="normal">
+            <Text variant="normal" fontWeight="medium" color="text50">
               Balance
             </Text>
             <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
@@ -46,7 +46,7 @@ export const CollectibleDetailsSkeleton = () => {
           />
         </Box>
         <Box>
-          <Text fontSize="normal" color="text50" fontWeight="medium">
+          <Text variant="normal" color="text50" fontWeight="medium">
             This week
           </Text>
           <TransactionHistorySkeleton />
diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx
index cedaa458..383cdc23 100644
--- a/packages/wallet/src/views/CollectibleDetails/index.tsx
+++ b/packages/wallet/src/views/CollectibleDetails/index.tsx
@@ -115,17 +115,17 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
               }}
             />
             <Box gap="1" flexDirection="row" justifyContent="center" alignItems="center">
-              <Text fontWeight="bold" fontSize="small" color="text100">
+              <Text variant="small" fontWeight="bold" color="text100">
                 {collectionName}
               </Text>
               <NetworkImage chainId={chainId} size="xs" />
             </Box>
           </Box>
           <Box flexDirection="column" justifyContent="center" alignItems="center">
-            <Text color="text100" fontWeight="bold" fontSize="large">
+            <Text variant="large" color="text100" fontWeight="bold">
               {dataCollectibleBalance?.tokenMetadata?.name || 'Unknown Collectible'}
             </Text>
-            <Text color="text50" fontSize="small" fontWeight="medium">
+            <Text variant="small" color="text50" fontWeight="medium">
               {`#${tokenId}`}
             </Text>
           </Box>
@@ -136,15 +136,15 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
         <Box>
           {/* balance */}
           <Box>
-            <Text fontWeight="medium" color="text50" fontSize="normal">
+            <Text variant="normal" fontWeight="medium" color="text50">
               Balance
             </Text>
             <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-              <Text fontWeight="bold" color="text100" fontSize="xlarge">
+              <Text variant="xlarge" fontWeight="bold" color="text100">
                 {formattedBalance}
               </Text>
               {dataCollectiblePrices && dataCollectiblePrices[0].price?.value && (
-                <Text fontWeight="medium" color="text50" fontSize="normal">{`${fiatCurrency.symbol} ${valueFiat}`}</Text>
+                <Text variant="normal" fontWeight="medium" color="text50">{`${fiatCurrency.symbol} ${valueFiat}`}</Text>
               )}
             </Box>
           </Box>
diff --git a/packages/wallet/src/views/CollectionDetails/index.tsx b/packages/wallet/src/views/CollectionDetails/index.tsx
index e1632e77..a4296a07 100644
--- a/packages/wallet/src/views/CollectionDetails/index.tsx
+++ b/packages/wallet/src/views/CollectionDetails/index.tsx
@@ -57,16 +57,16 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
         <TokenImage src={collectionLogoURI} size="lg" />
-        <Text fontWeight="bold" fontSize="large" color="text100">
+        <Text variant="large" fontWeight="bold" color="text100">
           {contractInfo?.name || 'Unknown'}
         </Text>
         <NetworkBadge chainId={chainId} />
-        <Text fontWeight="medium" fontSize="normal" color="text50">{`${
+        <Text variant="normal" fontWeight="medium" color="text50">{`${
           collectionBalanceData?.length || 0
         } Unique Collectibles`}</Text>
       </Box>
       <Box width="full">
-        <Text fontWeight="medium" fontSize="normal" color="text50">
+        <Text variant="normal" fontWeight="medium" color="text50">
           {`Owned (${collectionBalanceData?.length || 0})`}
         </Text>
         <Box
@@ -97,12 +97,12 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
                   <Image style={{ height: '100%' }} src={balance.tokenMetadata?.image} />
                 </Box>
                 <Box>
-                  <Text fontWeight="bold" fontSize="normal" color="text100">
+                  <Text variant="normal" fontWeight="bold" color="text100">
                     {`${balance.tokenMetadata?.name}`}
                   </Text>
                 </Box>
                 <Box>
-                  <Text marginTop="1" fontWeight="medium" fontSize="normal" color="text50">
+                  <Text variant="normal" marginTop="1" fontWeight="medium" color="text50">
                     {formattedBalance} Owned
                   </Text>
                 </Box>
diff --git a/packages/wallet/src/views/Search/components/BalanceItem.tsx b/packages/wallet/src/views/Search/components/BalanceItem.tsx
index 0ced60fd..5ad6eb59 100644
--- a/packages/wallet/src/views/Search/components/BalanceItem.tsx
+++ b/packages/wallet/src/views/Search/components/BalanceItem.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, ChevronRightIcon, TokenImage, NetworkImage } from '@0xsequence/design-system'
+import { Box, Text, ChevronRightIcon, TokenImage } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 import { ethers } from 'ethers'
@@ -66,28 +66,14 @@ export const BalanceItem = ({ balance }: BalanceItemProps) => {
       cursor="pointer"
       opacity={{ hover: '80' }}
     >
-      <Box gap="3" flexDirection="row" alignItems="center" justifyContent="center">
-        <TokenImage src={logoURI} symbol={symbol} size="md" />
-        <Box gap="1" flexDirection="row" alignItems="center" justifyContent="center">
-          <Text
-            color="text100"
-            fontWeight="bold"
-            fontSize="normal"
-            style={{
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              maxWidth: '250px',
-              // @ts-ignore-next-line
-              textWrap: 'nowrap'
-            }}
-          >
-            {tokenName}
-          </Text>
-          <NetworkImage chainId={balance.chainId} size="xs" />
-        </Box>
+      <Box gap="3" flexDirection="row" alignItems="center" justifyContent="center" minWidth="0">
+        <TokenImage src={logoURI} symbol={symbol} size="md" withNetwork={balance.chainId} />
+        <Text variant="normal" color="text100" fontWeight="bold" overflow="hidden" whiteSpace="nowrap" ellipsis>
+          {tokenName}
+        </Text>
       </Box>
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="1">
-        <Text color="text50" fontWeight="bold" fontSize="normal">
+        <Text variant="normal" color="text50" fontWeight="bold" textAlign="right" whiteSpace="nowrap">
           {getQuantity()}
         </Text>
         <ChevronRightIcon color="text50" />
diff --git a/packages/wallet/src/views/Search/components/WalletLink.tsx b/packages/wallet/src/views/Search/components/WalletLink.tsx
index f64eb7fb..e543cd59 100644
--- a/packages/wallet/src/views/Search/components/WalletLink.tsx
+++ b/packages/wallet/src/views/Search/components/WalletLink.tsx
@@ -27,11 +27,11 @@ export const WalletLink = ({ toLocation, label }: WalletLinkProps) => {
       cursor="pointer"
       opacity={{ hover: '80' }}
     >
-      <Text color="text50" fontSize="normal" fontWeight="medium">
+      <Text variant="normal" color="text50" fontWeight="medium">
         {label}
       </Text>
       <Box flexDirection="row" justifyContent="center" alignItems="center">
-        <Text color="text50" fontSize="normal" fontWeight="medium">
+        <Text variant="normal" color="text50" fontWeight="medium">
           View all
         </Text>
         <ChevronRightIcon color="text50" size="sm" />
diff --git a/packages/wallet/src/views/SendCoin.tsx b/packages/wallet/src/views/SendCoin.tsx
index 8aa6ea2e..0847d58e 100644
--- a/packages/wallet/src/views/SendCoin.tsx
+++ b/packages/wallet/src/views/SendCoin.tsx
@@ -227,7 +227,7 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
                 {`~${fiatCurrency.sign}${amountToSendFiat}`}
               </Text>
               <Button size="xs" shape="square" label="Max" onClick={handleMax} data-id="maxCoin" flexShrink="0" />
-              <Text fontSize="xlarge" fontWeight="bold" color="text100">
+              <Text variant="xlarge" fontWeight="bold" color="text100">
                 {symbol}
               </Text>
             </>
@@ -240,7 +240,7 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
         )}
       </Box>
       <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
-        <Text fontSize="normal" color="text50">
+        <Text variant="normal" color="text50">
           To
         </Text>
         {isEthAddress(toAddress) ? (
diff --git a/packages/wallet/src/views/SendCollectible.tsx b/packages/wallet/src/views/SendCollectible.tsx
index 1cacdf50..60c840a4 100644
--- a/packages/wallet/src/views/SendCollectible.tsx
+++ b/packages/wallet/src/views/SendCollectible.tsx
@@ -264,7 +264,7 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
         )}
       </Box>
       <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
-        <Text fontSize="normal" color="text50">
+        <Text variant="normal" color="text50">
           To
         </Text>
         {isEthAddress(toAddress) ? (
diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx
index 72b890f8..6607f81b 100644
--- a/packages/wallet/src/views/TransactionDetails/index.tsx
+++ b/packages/wallet/src/views/TransactionDetails/index.tsx
@@ -136,13 +136,13 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
               >
                 <TokenImage src={logoURI} symbol={symbol} size="sm" />
                 <Box gap="0.5" flexDirection="column" alignItems="flex-start" justifyContent="center">
-                  <Text fontWeight="bold" fontSize="xsmall" color="text100">
+                  <Text variant="xsmall" fontWeight="bold" color="text100">
                     {`${balanceDisplayed} ${symbol}`}
                   </Text>
                   {arePricesLoading ? (
                     <Skeleton style={{ width: '44px', height: '12px' }} />
                   ) : (
-                    <Text fontWeight="bold" fontSize="xsmall" color="text50">
+                    <Text variant="xsmall" fontWeight="bold" color="text50">
                       {fiatPrice ? `${fiatCurrency.sign}${fiatValue}` : ''}
                     </Text>
                   )}
@@ -161,7 +161,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
                 style={{ flexBasis: '100%' }}
               >
                 <GradientAvatar address={recipientAddress} style={{ width: '20px' }} />
-                <Text fontWeight="bold" fontSize="xsmall" color="text100">
+                <Text variant="xsmall" fontWeight="bold" color="text100">
                   {recipientAddressFormatted}
                 </Text>
               </Box>
@@ -175,10 +175,10 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
   return (
     <Box padding="5" paddingTop="3" flexDirection="column" alignItems="center" justifyContent="center" gap="10" marginTop="5">
       <Box marginTop="6" flexDirection="column" justifyContent="center" alignItems="center" gap="1">
-        <Text fontSize="normal" fontWeight="medium">
+        <Text variant="normal" fontWeight="medium" color="text100">
           Transaction details
         </Text>
-        <Text marginBottom="1" fontSize="small" fontWeight="medium" color="text50">
+        <Text variant="small" marginBottom="1" fontWeight="medium" color="text50">
           {date}
         </Text>
         <NetworkBadge chainId={transaction.chainId} />
@@ -194,7 +194,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
         borderRadius="md"
       >
         <Box width="full" gap="1" flexDirection="row" alignItems="center" justifyContent="flex-start">
-          <Text fontSize="normal" fontWeight="medium" color="text50">
+          <Text variant="normal" fontWeight="medium" color="text50">
             Transfer
           </Text>
           <NetworkImage chainId={transaction.chainId} size="xs" />
@@ -216,19 +216,19 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
       <Box>
         <Box width="full" flexDirection="column" gap="2" justifyContent="center" alignItems="flex-start">
           <Divider width="full" margin="0" style={{ marginBottom: '-4px' }} />
-          <Text color="text50" fontSize="normal" fontWeight="medium">
+          <Text variant="normal" color="text50" fontWeight="medium">
             Status
           </Text>
-          <Text fontSize="normal" fontWeight="medium" color="text100">
+          <Text variant="normal" fontWeight="medium" color="text100">
             Complete
           </Text>
         </Box>
         <Box width="full" flexDirection="column" gap="2" justifyContent="center" alignItems="flex-start">
           <Divider width="full" margin="0" style={{ marginBottom: '-4px' }} />
-          <Text color="text50" fontSize="normal" fontWeight="medium">
+          <Text variant="normal" color="text50" fontWeight="medium">
             Transaction Hash
           </Text>
-          <Text color="text100" fontSize="normal" fontWeight="medium" style={{ overflowWrap: 'anywhere' }}>
+          <Text variant="normal" color="text100" fontWeight="medium" style={{ overflowWrap: 'anywhere' }}>
             {transaction.txnHash}
           </Text>
           <CopyButton marginTop="2" buttonVariant="with-label" text={transaction.txnHash} />