diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
index 61d82c5fc..dedef5f78 100644
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -1,531 +1,533 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { WalletContext } from '@utils/context';
 import { Form, notification, message, Spin, Modal, Alert } from 'antd';
 import { CashLoader, CashLoadingIcon } from '@components/Common/CustomIcons';
 import { Row, Col } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import PrimaryButton, {
     SecondaryButton,
 } from '@components/Common/PrimaryButton';
 import {
     SendBchInput,
     FormItemWithQRCodeAddon,
 } from '@components/Common/EnhancedInputs';
 import useBCH from '@hooks/useBCH';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import {
     currency,
     isValidTokenPrefix,
     parseAddress,
     toLegacy,
 } from '@components/Common/Ticker.js';
 import { Event } from '@utils/GoogleAnalytics';
 import { fiatToCrypto, shouldRejectAmountInput } from '@utils/validation';
+import { formatBalance } from '@utils/cashMethods';
 
 export const BalanceHeader = styled.div`
     p {
         color: #777;
         width: 100%;
         font-size: 14px;
         margin-bottom: 0px;
     }
 
     h3 {
         color: #444;
         width: 100%;
         font-size: 26px;
         font-weight: bold;
         margin-bottom: 0px;
     }
 `;
 
 export const BalanceHeaderFiat = styled.div`
     color: #444;
     width: 100%;
     font-size: 18px;
     margin-bottom: 20px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 16px;
     }
 `;
 
 export const ZeroBalanceHeader = styled.div`
     color: #444;
     width: 100%;
     font-size: 14px;
     margin-bottom: 20px;
 `;
 
 const ConvertAmount = styled.div`
     color: #777;
     width: 100%;
     font-size: 14px;
     margin-bottom: 10px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 12px;
     }
 `;
 
 const SendBCH = ({ filledAddress, callbackTxId }) => {
     const {
         wallet,
         fiatPrice,
         balances,
         slpBalancesAndUtxos,
         apiError,
     } = React.useContext(WalletContext);
 
     // Get device window width
     // If this is less than 769, the page will open with QR scanner open
     const { width } = useWindowDimensions();
     // Load with QR code open if device is mobile and NOT iOS + anything but safari
     const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
 
     const [formData, setFormData] = useState({
         dirty: true,
         value: '',
         address: filledAddress || '',
     });
     const [loading, setLoading] = useState(false);
     const [queryStringText, setQueryStringText] = useState(null);
     const [sendBchAddressError, setSendBchAddressError] = useState(false);
     const [sendBchAmountError, setSendBchAmountError] = useState(false);
     const [selectedCurrency, setSelectedCurrency] = useState(currency.ticker);
 
     // Support cashtab button from web pages
     const [txInfoFromUrl, setTxInfoFromUrl] = useState(false);
 
     // Show a confirmation modal on transactions created by populating form from web page button
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     const showModal = () => {
         setIsModalVisible(true);
     };
 
     const handleOk = () => {
         setIsModalVisible(false);
         submit();
     };
 
     const handleCancel = () => {
         setIsModalVisible(false);
     };
 
     const { getBCH, getRestUrl, sendBch, calcFee } = useBCH();
     const BCH = getBCH();
 
     // If the balance has changed, unlock the UI
     // This is redundant, if backend has refreshed in 1.75s timeout below, UI will already be unlocked
     useEffect(() => {
         setLoading(false);
     }, [balances.totalBalance]);
 
     useEffect(() => {
         // Manually parse for txInfo object on page load when Send.js is loaded with a query string
 
         // Do not set txInfo in state if query strings are not present
         if (
             !window.location ||
             !window.location.hash ||
             window.location.hash === '#/send'
         ) {
             return;
         }
 
         const txInfoArr = window.location.hash.split('?')[1].split('&');
 
         // Iterate over this to create object
         const txInfo = {};
         for (let i = 0; i < txInfoArr.length; i += 1) {
             let txInfoKeyValue = txInfoArr[i].split('=');
             let key = txInfoKeyValue[0];
             let value = txInfoKeyValue[1];
             txInfo[key] = value;
         }
         console.log(`txInfo from page params`, txInfo);
         setTxInfoFromUrl(txInfo);
         populateFormsFromUrl(txInfo);
     }, []);
 
     function populateFormsFromUrl(txInfo) {
         if (txInfo && txInfo.address && txInfo.value) {
             setFormData({ address: txInfo.address, value: txInfo.value });
         }
     }
 
     async function submit() {
         setFormData({
             ...formData,
             dirty: false,
         });
 
         if (
             !formData.address ||
             !formData.value ||
             Number(formData.value) <= 0
         ) {
             return;
         }
 
         // Event("Category", "Action", "Label")
         // Track number of BCHA send transactions and whether users
         // are sending BCHA or USD
         Event('Send.js', 'Send', selectedCurrency);
 
         setLoading(true);
         const { address, value } = formData;
 
         // Get the param-free address
         let cleanAddress = address.split('?')[0];
 
         // Ensure address has bitcoincash: prefix and checksum
         cleanAddress = toLegacy(cleanAddress);
 
         let hasValidCashPrefix;
         try {
             hasValidCashPrefix = cleanAddress.startsWith(
                 currency.legacyPrefix + ':',
             );
         } catch (err) {
             hasValidCashPrefix = false;
             console.log(`toLegacy() returned an error:`, cleanAddress);
         }
 
         if (!hasValidCashPrefix) {
             // set loading to false and set address validation to false
             // Now that the no-prefix case is handled, this happens when user tries to send
             // BCHA to an SLPA address
             setLoading(false);
             setSendBchAddressError(
                 `Destination is not a valid ${currency.ticker} address`,
             );
             return;
         }
 
         // Calculate the amount in BCH
         let bchValue = value;
 
         if (selectedCurrency === 'USD') {
             bchValue = fiatToCrypto(value, fiatPrice);
         }
 
         try {
             const link = await sendBch(
                 BCH,
                 wallet,
                 slpBalancesAndUtxos.nonSlpUtxos,
                 filledAddress || cleanAddress,
                 bchValue,
                 currency.defaultFee,
                 callbackTxId,
             );
 
             notification.success({
                 message: 'Success',
                 description: (
                     <a href={link} target="_blank" rel="noopener noreferrer">
                         <Paragraph>
                             Transaction successful. Click or tap here for more
                             details
                         </Paragraph>
                     </a>
                 ),
                 duration: 5,
             });
         } catch (e) {
             // Set loading to false here as well, as balance may not change depending on where error occured in try loop
             setLoading(false);
             let message;
 
             if (!e.error && !e.message) {
                 message = `Transaction failed: no response from ${getRestUrl()}.`;
             } else if (
                 /Could not communicate with full node or other external service/.test(
                     e.error,
                 )
             ) {
                 message = 'Could not communicate with API. Please try again.';
             } else if (
                 e.error &&
                 e.error.includes(
                     'too-long-mempool-chain, too many unconfirmed ancestors [limit: 50] (code 64)',
                 )
             ) {
                 message = `The ${currency.ticker} you are trying to send has too many unconfirmed ancestors to send (limit 50). Sending will be possible after a block confirmation. Try again in about 10 minutes.`;
             } else {
                 message = e.message || e.error || JSON.stringify(e);
             }
 
             notification.error({
                 message: 'Error',
                 description: message,
                 duration: 5,
             });
             console.error(e);
         }
     }
 
     const handleAddressChange = e => {
         const { value, name } = e.target;
         let error = false;
         let addressString = value;
 
         // parse address
         const addressInfo = parseAddress(BCH, addressString);
         /*
         Model
 
         addressInfo = 
         {
             address: '',
             isValid: false,
             queryString: '',
             amount: null,
         };
         */
 
         const { address, isValid, queryString, amount } = addressInfo;
 
         // If query string,
         // Show an alert that only amount and currency.ticker are supported
         setQueryStringText(queryString);
 
         // Is this valid address?
         if (!isValid) {
             error = 'Address is not a valid cash address';
             // If valid address but token format
             if (isValidTokenPrefix(address)) {
                 error = `Token addresses are not supported for ${currency.ticker} sends`;
             }
         }
         setSendBchAddressError(error);
 
         // Set amount if it's in the query string
         if (amount !== null) {
             // Set currency to BCHA
             setSelectedCurrency(currency.ticker);
 
             // Use this object to mimic user input and get validation for the value
             let amountObj = { target: { name: 'value', value: amount } };
             handleBchAmountChange(amountObj);
             setFormData({
                 ...formData,
                 value: amount,
             });
         }
 
         // Set address field to user input
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const handleSelectedCurrencyChange = e => {
         setSelectedCurrency(e);
         // Clear input field to prevent accidentally sending 1 BCH instead of 1 USD
         setFormData(p => ({ ...p, value: '' }));
     };
 
     const handleBchAmountChange = e => {
         const { value, name } = e.target;
         let bchValue = value;
         const error = shouldRejectAmountInput(
             bchValue,
             selectedCurrency,
             fiatPrice,
             balances.totalBalance,
         );
         setSendBchAmountError(error);
 
         setFormData(p => ({ ...p, [name]: value }));
     };
 
     const onMax = async () => {
         // Clear amt error
         setSendBchAmountError(false);
         // Set currency to BCH
         setSelectedCurrency(currency.ticker);
         try {
             const txFeeSats = calcFee(BCH, slpBalancesAndUtxos.nonSlpUtxos);
 
             const txFeeBch = txFeeSats / 10 ** currency.cashDecimals;
             let value =
                 balances.totalBalance - txFeeBch >= 0
                     ? (balances.totalBalance - txFeeBch).toFixed(
                           currency.cashDecimals,
                       )
                     : 0;
 
             setFormData({
                 ...formData,
                 value,
             });
         } catch (err) {
             console.log(`Error in onMax:`);
             console.log(err);
             message.error(
                 'Unable to calculate the max value due to network errors',
             );
         }
     };
     // Display price in USD below input field for send amount, if it can be calculated
     let fiatPriceString = '';
     if (fiatPrice !== null && !isNaN(formData.value)) {
         if (selectedCurrency === currency.ticker) {
             fiatPriceString = `$ ${(fiatPrice * Number(formData.value)).toFixed(
                 2,
             )} USD`;
         } else {
             fiatPriceString = `${
                 formData.value ? fiatToCrypto(formData.value, fiatPrice) : '0'
             } ${currency.ticker}`;
         }
     }
 
     return (
         <>
             <Modal
                 title="Confirm Send"
                 visible={isModalVisible}
                 onOk={handleOk}
                 onCancel={handleCancel}
             >
                 <p>
                     Are you sure you want to send {formData.value}{' '}
                     {currency.ticker} to {formData.address}?
                 </p>
             </Modal>
             {!balances.totalBalance ? (
                 <ZeroBalanceHeader>
                     You currently have 0 {currency.ticker}
                     <br />
                     Deposit some funds to use this feature
                 </ZeroBalanceHeader>
             ) : (
                 <>
                     <BalanceHeader>
                         <p>Available balance</p>
                         <h3>
-                            {balances.totalBalance} {currency.ticker}
+                            {formatBalance(balances.totalBalance)}{' '}
+                            {currency.ticker}
                         </h3>
                     </BalanceHeader>
                     {fiatPrice !== null && (
                         <BalanceHeaderFiat>
                             ${(balances.totalBalance * fiatPrice).toFixed(2)}{' '}
                             USD
                         </BalanceHeaderFiat>
                     )}
                 </>
             )}
 
             <Row type="flex">
                 <Col span={24}>
                     <Spin spinning={loading} indicator={CashLoadingIcon}>
                         <Form style={{ width: 'auto' }}>
                             <FormItemWithQRCodeAddon
                                 loadWithCameraOpen={scannerSupported}
                                 disabled={Boolean(filledAddress)}
                                 validateStatus={
                                     sendBchAddressError ? 'error' : ''
                                 }
                                 help={
                                     sendBchAddressError
                                         ? sendBchAddressError
                                         : ''
                                 }
                                 onScan={result =>
                                     handleAddressChange({
                                         target: {
                                             name: 'address',
                                             value: result,
                                         },
                                     })
                                 }
                                 inputProps={{
                                     disabled: Boolean(filledAddress),
                                     placeholder: `${currency.ticker} Address`,
                                     name: 'address',
                                     onChange: e => handleAddressChange(e),
                                     required: true,
                                     value: filledAddress || formData.address,
                                 }}
                             ></FormItemWithQRCodeAddon>
                             <SendBchInput
                                 validateStatus={
                                     sendBchAmountError ? 'error' : ''
                                 }
                                 help={
                                     sendBchAmountError ? sendBchAmountError : ''
                                 }
                                 onMax={onMax}
                                 inputProps={{
                                     name: 'value',
                                     dollar: selectedCurrency === 'USD' ? 1 : 0,
                                     placeholder: 'Amount',
                                     onChange: e => handleBchAmountChange(e),
                                     required: true,
                                     value: formData.value,
                                 }}
                                 selectProps={{
                                     value: selectedCurrency,
                                     disabled: queryStringText !== null,
                                     onChange: e =>
                                         handleSelectedCurrencyChange(e),
                                 }}
                             ></SendBchInput>
                             <ConvertAmount>= {fiatPriceString}</ConvertAmount>
                             <div style={{ paddingTop: '12px' }}>
                                 {!balances.totalBalance ||
                                 apiError ||
                                 sendBchAmountError ||
                                 sendBchAddressError ? (
                                     <SecondaryButton>Send</SecondaryButton>
                                 ) : (
                                     <>
                                         {txInfoFromUrl ? (
                                             <PrimaryButton
                                                 onClick={() => showModal()}
                                             >
                                                 Send
                                             </PrimaryButton>
                                         ) : (
                                             <PrimaryButton
                                                 onClick={() => submit()}
                                             >
                                                 Send
                                             </PrimaryButton>
                                         )}
                                     </>
                                 )}
                             </div>
                             {queryStringText && (
                                 <Alert
                                     message={`You are sending a transaction to an address including query parameters "${queryStringText}." Only the "amount" parameter, in units of ${currency.ticker} satoshis, is currently supported.`}
                                     type="warning"
                                 />
                             )}
                             {apiError && (
                                 <>
                                     <CashLoader />
                                     <p style={{ color: 'red' }}>
                                         <b>
                                             An error occured on our end.
                                             Reconnecting...
                                         </b>
                                     </p>
                                 </>
                             )}
                         </Form>
                     </Spin>
                 </Col>
             </Row>
         </>
     );
 };
 
 export default SendBCH;
diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
index 76e8074f5..fe98f8bed 100644
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -1,369 +1,371 @@
 import React, { useState, useEffect } from 'react';
 import { WalletContext } from '@utils/context';
 import { Form, notification, message, Spin, Row, Col, Alert } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import PrimaryButton, {
     SecondaryButton,
 } from '@components/Common/PrimaryButton';
 import { CashLoader, CashLoadingIcon } from '@components/Common/CustomIcons';
 import {
     FormItemWithMaxAddon,
     FormItemWithQRCodeAddon,
 } from '@components/Common/EnhancedInputs';
 import useBCH from '@hooks/useBCH';
 import { BalanceHeader } from './Send';
 import { Redirect } from 'react-router-dom';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import { Img } from 'react-image';
 import makeBlockie from 'ethereum-blockies-base64';
 import BigNumber from 'bignumber.js';
 import {
     currency,
     parseAddress,
     isValidTokenPrefix,
 } from '@components/Common/Ticker.js';
 import { Event } from '@utils/GoogleAnalytics';
+import { formatBalance } from '@utils/cashMethods';
 
 const SendToken = ({ tokenId }) => {
     const { wallet, tokens, slpBalancesAndUtxos, apiError } = React.useContext(
         WalletContext,
     );
     const token = tokens.find(token => token.tokenId === tokenId);
     const [queryStringText, setQueryStringText] = useState(null);
     const [sendTokenAddressError, setSendTokenAddressError] = useState(false);
     const [sendTokenAmountError, setSendTokenAmountError] = useState(false);
     // Get device window width
     // If this is less than 769, the page will open with QR scanner open
     const { width } = useWindowDimensions();
     // Load with QR code open if device is mobile and NOT iOS + anything but safari
     const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
 
     const [formData, setFormData] = useState({
         dirty: true,
         value: '',
         address: '',
     });
     const [loading, setLoading] = useState(false);
 
     const { getBCH, getRestUrl, sendToken } = useBCH();
     const BCH = getBCH();
 
     // Keep this function around for re-enabling later
     // eslint-disable-next-line no-unused-vars
     async function submit() {
         setFormData({
             ...formData,
             dirty: false,
         });
 
         if (
             !formData.address ||
             !formData.value ||
             Number(formData.value <= 0) ||
             sendTokenAmountError
         ) {
             return;
         }
 
         // Event("Category", "Action", "Label")
         // Track number of SLPA send transactions and
         // SLPA token IDs
         Event('SendToken.js', 'Send', tokenId);
 
         setLoading(true);
         const { address, value } = formData;
 
         // Clear params from address
         let cleanAddress = address.split('?')[0];
 
         try {
             const link = await sendToken(BCH, wallet, slpBalancesAndUtxos, {
                 tokenId: tokenId,
                 tokenReceiverAddress: cleanAddress,
                 amount: value,
             });
 
             notification.success({
                 message: 'Success',
                 description: (
                     <a href={link} target="_blank" rel="noopener noreferrer">
                         <Paragraph>
                             Transaction successful. Click or tap here for more
                             details
                         </Paragraph>
                     </a>
                 ),
                 duration: 5,
             });
         } catch (e) {
             setLoading(false);
             let message;
 
             if (!e.error && !e.message) {
                 message = `Transaction failed: no response from ${getRestUrl()}.`;
             } else if (
                 /Could not communicate with full node or other external service/.test(
                     e.error,
                 )
             ) {
                 message = 'Could not communicate with API. Please try again.';
             } else {
                 message = e.message || e.error || JSON.stringify(e);
             }
             console.log(e);
             notification.error({
                 message: 'Error',
                 description: message,
                 duration: 3,
             });
             console.error(e);
         }
     }
 
     const handleSlpAmountChange = e => {
         let error = false;
         const { value, name } = e.target;
 
         // test if exceeds balance using BigNumber
         let isGreaterThanBalance = false;
         if (!isNaN(value)) {
             const bigValue = new BigNumber(value);
             // Returns 1 if greater, -1 if less, 0 if the same, null if n/a
             isGreaterThanBalance = bigValue.comparedTo(token.balance);
         }
 
         // Validate value for > 0
         if (isNaN(value)) {
             error = 'Amount must be a number';
         } else if (value <= 0) {
             error = 'Amount must be greater than 0';
         } else if (token && token.balance && isGreaterThanBalance === 1) {
             error = `Amount cannot exceed your ${token.info.tokenTicker} balance of ${token.balance}`;
         } else if (!isNaN(value) && value.toString().includes('.')) {
             if (value.toString().split('.')[1].length > token.info.decimals) {
                 error = `This token only supports ${token.info.decimals} decimal places`;
             }
         }
         setSendTokenAmountError(error);
         setFormData(p => ({ ...p, [name]: value }));
     };
 
     const handleTokenAddressChange = e => {
         const { value, name } = e.target;
         // validate for token address
         // validate for parameters
         // show warning that query strings are not supported
 
         let error = false;
         let addressString = value;
         // parse address
         const addressInfo = parseAddress(BCH, addressString);
         /*
         Model
 
         addressInfo = 
         {
             address: '',
             isValid: false,
             queryString: '',
             amount: null,
         };
         */
 
         const { address, isValid, queryString } = addressInfo;
 
         // If query string,
         // Show an alert that only amount and currency.ticker are supported
         setQueryStringText(queryString);
 
         // Is this valid address?
         if (!isValid) {
             error = 'Address is not valid';
             // If valid address but token format
         } else if (!isValidTokenPrefix(address)) {
             error = `Cashtab only supports sending to ${currency.tokenPrefixes[0]} prefixed addresses`;
         }
         setSendTokenAddressError(error);
 
         setFormData(p => ({
             ...p,
             [name]: value,
         }));
     };
 
     const onMax = async () => {
         // Clear this error before updating field
         setSendTokenAmountError(false);
         try {
             let value = token.balance;
 
             setFormData({
                 ...formData,
                 value,
             });
         } catch (err) {
             console.log(`Error in onMax:`);
             console.log(err);
             message.error(
                 'Unable to calculate the max value due to network errors',
             );
         }
     };
 
     useEffect(() => {
         // If the balance has changed, unlock the UI
         // This is redundant, if backend has refreshed in 1.75s timeout below, UI will already be unlocked
 
         setLoading(false);
     }, [token]);
 
     return (
         <>
             {!token && <Redirect to="/" />}
 
             {token && (
                 <>
                     <BalanceHeader>
                         <p>Available balance</p>
                         <h3>
-                            {token.balance.toString()} {token.info.tokenTicker}
+                            {formatBalance(token.balance)}{' '}
+                            {token.info.tokenTicker}
                         </h3>
                     </BalanceHeader>
 
                     <Row type="flex">
                         <Col span={24}>
                             <Spin
                                 style={{ color: 'red' }}
                                 spinning={loading}
                                 indicator={CashLoadingIcon}
                             >
                                 <Form style={{ width: 'auto' }}>
                                     <FormItemWithQRCodeAddon
                                         loadWithCameraOpen={scannerSupported}
                                         validateStatus={
                                             sendTokenAddressError ? 'error' : ''
                                         }
                                         help={
                                             sendTokenAddressError
                                                 ? sendTokenAddressError
                                                 : ''
                                         }
                                         onScan={result =>
                                             handleTokenAddressChange({
                                                 target: {
                                                     name: 'address',
                                                     value: result,
                                                 },
                                             })
                                         }
                                         inputProps={{
                                             placeholder: `${currency.tokenTicker} Address`,
                                             name: 'address',
                                             onChange: e =>
                                                 handleTokenAddressChange(e),
                                             required: true,
                                             value: formData.address,
                                         }}
                                     />
                                     <FormItemWithMaxAddon
                                         validateStatus={
                                             sendTokenAmountError ? 'error' : ''
                                         }
                                         help={
                                             sendTokenAmountError
                                                 ? sendTokenAmountError
                                                 : ''
                                         }
                                         onMax={onMax}
                                         inputProps={{
                                             name: 'value',
                                             step: 1 / 10 ** token.info.decimals,
                                             placeholder: 'Amount',
                                             prefix:
                                                 currency.tokenIconsUrl !==
                                                 '' ? (
                                                     <Img
                                                         src={`${currency.tokenIconsUrl}/${tokenId}.png`}
                                                         width={16}
                                                         height={16}
                                                         unloader={
                                                             <img
                                                                 alt={`identicon of tokenId ${tokenId} `}
                                                                 heigh="16"
                                                                 width="16"
                                                                 style={{
                                                                     borderRadius:
                                                                         '50%',
                                                                 }}
                                                                 key={`identicon-${tokenId}`}
                                                                 src={makeBlockie(
                                                                     tokenId,
                                                                 )}
                                                             />
                                                         }
                                                     />
                                                 ) : (
                                                     <img
                                                         alt={`identicon of tokenId ${tokenId} `}
                                                         heigh="16"
                                                         width="16"
                                                         style={{
                                                             borderRadius: '50%',
                                                         }}
                                                         key={`identicon-${tokenId}`}
                                                         src={makeBlockie(
                                                             tokenId,
                                                         )}
                                                     />
                                                 ),
                                             suffix: token.info.tokenTicker,
                                             onChange: e =>
                                                 handleSlpAmountChange(e),
                                             required: true,
                                             value: formData.value,
                                         }}
                                     />
                                     <div style={{ paddingTop: '12px' }}>
                                         {apiError ||
                                         sendTokenAmountError ||
                                         sendTokenAddressError ? (
                                             <>
                                                 <SecondaryButton>
                                                     Send {token.info.tokenName}
                                                 </SecondaryButton>
                                                 {apiError && <CashLoader />}
                                             </>
                                         ) : (
                                             <PrimaryButton
                                                 onClick={() => submit()}
                                             >
                                                 Send {token.info.tokenName}
                                             </PrimaryButton>
                                         )}
                                     </div>
                                     {queryStringText && (
                                         <Alert
                                             message={`You are sending a transaction to an address including query parameters "${queryStringText}." Token transactions do not support query parameters and they will be ignored.`}
                                             type="warning"
                                         />
                                     )}
                                     {apiError && (
                                         <p style={{ color: 'red' }}>
                                             <b>
                                                 An error occured on our end.
                                                 Reconnecting...
                                             </b>
                                         </p>
                                     )}
                                 </Form>
                             </Spin>
                         </Col>
                     </Row>
                 </>
             )}
         </>
     );
 };
 
 export default SendToken;
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js
index f1dafb698..23d635547 100644
--- a/web/cashtab/src/components/Wallet/TokenList.js
+++ b/web/cashtab/src/components/Wallet/TokenList.js
@@ -1,23 +1,24 @@
 import React from 'react';
 import TokenListItem from './TokenListItem';
 import { Link } from 'react-router-dom';
 import { currency } from '@components/Common/Ticker.js';
+import { formatBalance } from '@utils/cashMethods';
 
 const TokenList = ({ tokens }) => {
     return (
         <div>
             <h2 style={{ color: '#444' }}>{currency.tokenTicker} Tokens</h2>
             {tokens.map(token => (
                 <Link key={token.tokenId} to={`/send-token/${token.tokenId}`}>
                     <TokenListItem
                         ticker={token.info.tokenTicker}
                         tokenId={token.tokenId}
-                        balance={token.balance.toString()}
+                        balance={formatBalance(token.balance)}
                     />
                 </Link>
             ))}
         </div>
     );
 };
 
 export default TokenList;
diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js
index a39cfd9f0..264d018dd 100644
--- a/web/cashtab/src/components/Wallet/Wallet.js
+++ b/web/cashtab/src/components/Wallet/Wallet.js
@@ -1,284 +1,285 @@
 import React from 'react';
 import styled from 'styled-components';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
 import { WalletContext } from '@utils/context';
 import { OnBoarding } from '@components/OnBoarding/OnBoarding';
 import { QRCode } from '@components/Common/QRCode';
 import { currency } from '@components/Common/Ticker.js';
 import { Link } from 'react-router-dom';
 import TokenList from './TokenList';
 import { CashLoader } from '@components/Common/CustomIcons';
+import { formatBalance } from '@utils/cashMethods';
 
 export const LoadingCtn = styled.div`
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 400px;
     flex-direction: column;
 
     svg {
         width: 50px;
         height: 50px;
         fill: #ff8d00;
     }
 `;
 
 export const BalanceHeader = styled.div`
     color: #444;
     width: 100%;
     font-size: 30px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 23px;
     }
 `;
 
 export const BalanceHeaderFiat = styled.div`
     color: #444;
     width: 100%;
     font-size: 18px;
     margin-bottom: 20px;
     font-weight: bold;
     @media (max-width: 768px) {
         font-size: 16px;
     }
 `;
 
 export const ZeroBalanceHeader = styled.div`
     color: #444;
     width: 100%;
     font-size: 14px;
     margin-bottom: 5px;
 `;
 
 export const SwitchBtnCtn = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     align-content: space-between;
     margin-bottom: 15px;
     .nonactiveBtn {
         color: #444;
         background: linear-gradient(145deg, #eeeeee, #c8c8c8) !important;
         box-shadow: none !important;
     }
     .slpActive {
         background: #5ebd6d !important;
         box-shadow: inset 5px 5px 11px #4e9d5a, inset -5px -5px 11px #6edd80 !important;
     }
 `;
 
 export const SwitchBtn = styled.div`
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
     color: #ffffff;
     font-size: 14px;
     padding: 6px 0;
     width: 100px;
     margin: 0 1px;
     text-decoration: none;
     background: #ff8d00;
     box-shadow: inset 8px 8px 16px #d67600, inset -8px -8px 16px #ffa400;
     user-select: none;
     :first-child {
         border-radius: 100px 0 0 100px;
     }
     :nth-child(2) {
         border-radius: 0 100px 100px 0;
     }
 `;
 
 export const Links = styled(Link)`
     color: #444;
     width: 100%;
     font-size: 16px;
     margin: 10px 0 20px 0;
     border: 1px solid #444;
     padding: 14px 0;
     display: inline-block;
     border-radius: 3px;
     transition: all 200ms ease-in-out;
     svg {
         fill: #444;
     }
     :hover {
         color: #ff8d00;
         border-color: #ff8d00;
         svg {
             fill: #444;
         }
     }
     @media (max-width: 768px) {
         padding: 10px 0;
         font-size: 14px;
     }
 `;
 
 export const ExternalLink = styled.a`
     color: #444;
     width: 100%;
     font-size: 16px;
     margin: 0 0 20px 0;
     border: 1px solid #444;
     padding: 14px 0;
     display: inline-block;
     border-radius: 3px;
     transition: all 200ms ease-in-out;
     svg {
         fill: #444;
         transition: all 200ms ease-in-out;
     }
     :hover {
         color: #ff8d00;
         border-color: #ff8d00;
         svg {
             fill: #ff8d00;
         }
     }
     @media (max-width: 768px) {
         padding: 10px 0;
         font-size: 14px;
     }
 `;
 
 const WalletInfo = () => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, fiatPrice, balances, txHistory, apiError } = ContextValue;
     const [address, setAddress] = React.useState('cashAddress');
 
     const hasHistory =
         (txHistory &&
             txHistory[0] &&
             txHistory[0].transactions &&
             txHistory[0].transactions.length > 0) ||
         (txHistory &&
             txHistory[1] &&
             txHistory[1].transactions &&
             txHistory[1].transactions.length > 0);
 
     const handleChangeAddress = () => {
         setAddress(address === 'cashAddress' ? 'slpAddress' : 'cashAddress');
     };
 
     return (
         <>
             {!balances.totalBalance && !apiError && !hasHistory ? (
                 <>
                     <ZeroBalanceHeader>
                         <span role="img" aria-label="party emoji">
                             🎉
                         </span>
                         Congratulations on your new wallet!{' '}
                         <span role="img" aria-label="party emoji">
                             🎉
                         </span>
                         <br /> Start using the wallet immediately to receive{' '}
                         {currency.ticker} payments, or load it up with{' '}
                         {currency.ticker} to send to others
                     </ZeroBalanceHeader>
                     <BalanceHeader>0 {currency.ticker}</BalanceHeader>
                 </>
             ) : (
                 <>
                     <BalanceHeader>
-                        {balances.totalBalance} {currency.ticker}
+                        {formatBalance(balances.totalBalance)} {currency.ticker}
                     </BalanceHeader>
                     {fiatPrice !== null && !isNaN(balances.totalBalance) && (
                         <BalanceHeaderFiat>
                             ${(balances.totalBalance * fiatPrice).toFixed(2)}{' '}
                             USD
                         </BalanceHeaderFiat>
                     )}
                 </>
             )}
             {apiError && (
                 <>
                     <p style={{ color: 'red' }}>
                         <b>An error occured on our end.</b>
                         <br></br> Re-establishing connection...
                     </p>
                     <CashLoader />
                 </>
             )}
 
             {wallet &&
                 ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && (
                     <>
                         {wallet.Path1899 ? (
                             <QRCode
                                 id="borderedQRCode"
                                 address={
                                     address === 'slpAddress'
                                         ? wallet.Path1899.slpAddress
                                         : wallet.Path1899.cashAddress
                                 }
                             />
                         ) : (
                             <QRCode
                                 id="borderedQRCode"
                                 address={
                                     address === 'slpAddress'
                                         ? wallet.Path245.slpAddress
                                         : wallet.Path145.cashAddress
                                 }
                             />
                         )}
                     </>
                 )}
 
             <SwitchBtnCtn>
                 <SwitchBtn
                     onClick={() => handleChangeAddress()}
                     className={
                         address !== 'cashAddress' ? 'nonactiveBtn' : null
                     }
                 >
                     {currency.ticker}
                 </SwitchBtn>
                 <SwitchBtn
                     onClick={() => handleChangeAddress()}
                     className={
                         address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive'
                     }
                 >
                     {currency.tokenTicker}
                 </SwitchBtn>
             </SwitchBtnCtn>
             {balances.totalBalance ? (
                 <>
                     <ExternalLink
                         href={`${currency.blockExplorerUrl}/address/${wallet.Path1899.cashAddress}`}
                         target="_blank"
                         rel="noopener noreferrer"
                     >
                         <LinkOutlined /> View Transactions
                     </ExternalLink>
                 </>
             ) : null}
         </>
     );
 };
 
 const Wallet = () => {
     const ContextValue = React.useContext(WalletContext);
     const { wallet, tokens, loading } = ContextValue;
 
     return (
         <>
             {loading && (
                 <LoadingCtn>
                     <LoadingOutlined />
                 </LoadingCtn>
             )}
             {!loading && wallet.Path245 && <WalletInfo />}
             {!loading && wallet.Path245 && tokens && tokens.length > 0 && (
                 <TokenList tokens={tokens} />
             )}
             {!loading && !wallet.Path245 ? <OnBoarding /> : null}
         </>
     );
 };
 
 export default Wallet;
diff --git a/web/cashtab/src/utils/__tests__/cashMethods.test.js b/web/cashtab/src/utils/__tests__/cashMethods.test.js
index 2a11f14de..3458f5c1b 100644
--- a/web/cashtab/src/utils/__tests__/cashMethods.test.js
+++ b/web/cashtab/src/utils/__tests__/cashMethods.test.js
@@ -1,20 +1,26 @@
-import { fromSmallestDenomination } from '@utils/cashMethods';
+import { fromSmallestDenomination, formatBalance } from '@utils/cashMethods';
 
 describe('Correctly executes cash utility functions', () => {
     it(`Correctly converts smallest base unit to smallest decimal for cashDecimals = 2`, () => {
         expect(fromSmallestDenomination(1, 2)).toBe(0.01);
     });
     it(`Correctly converts largest base unit to smallest decimal for cashDecimals = 2`, () => {
         expect(fromSmallestDenomination(1000000012345678, 2)).toBe(
             10000000123456.78,
         );
     });
     it(`Correctly converts smallest base unit to smallest decimal for cashDecimals = 8`, () => {
         expect(fromSmallestDenomination(1, 8)).toBe(0.00000001);
     });
     it(`Correctly converts largest base unit to smallest decimal for cashDecimals = 8`, () => {
         expect(fromSmallestDenomination(1000000012345678, 8)).toBe(
             10000000.12345678,
         );
     });
+    it(`Formats a large number to add commas`, () => {
+        expect(formatBalance(1000000012345678)).toBe('1,000,000,012,345,678');
+    });
+    it(`Formats a large number with 2 decimal places to add commas`, () => {
+        expect(formatBalance(10000000123456.78)).toBe('10,000,000,123,456.78');
+    });
 });
diff --git a/web/cashtab/src/utils/cashMethods.js b/web/cashtab/src/utils/cashMethods.js
index 6aa59363d..af19ef6d7 100644
--- a/web/cashtab/src/utils/cashMethods.js
+++ b/web/cashtab/src/utils/cashMethods.js
@@ -1,33 +1,37 @@
 import { currency } from '@components/Common/Ticker';
 import BigNumber from 'bignumber.js';
 
 export const fromSmallestDenomination = (
     amount,
     cashDecimals = currency.cashDecimals,
 ) => {
     const amountBig = new BigNumber(amount);
     const multiplier = new BigNumber(10 ** (-1 * cashDecimals));
     const amountInBaseUnits = amountBig.times(multiplier);
     return amountInBaseUnits.toNumber();
 };
 
 export const toSmallestDenomination = (
     sendAmount,
     cashDecimals = currency.cashDecimals,
 ) => {
     // Replace the BCH.toSatoshi method with an equivalent function that works for arbitrary decimal places
     // Example, for an 8 decimal place currency like Bitcoin
     // Input: a BigNumber of the amount of Bitcoin to be sent
     // Output: a BigNumber of the amount of satoshis to be sent, or false if input is invalid
 
     // Validate
     // Input should be a BigNumber with no more decimal places than cashDecimals
     const isValidSendAmount =
         BigNumber.isBigNumber(sendAmount) && sendAmount.dp() <= cashDecimals;
     if (!isValidSendAmount) {
         return false;
     }
     const conversionFactor = new BigNumber(10 ** cashDecimals);
     const sendAmountSmallestDenomination = sendAmount.times(conversionFactor);
     return sendAmountSmallestDenomination;
 };
+
+export const formatBalance = x => {
+    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
+};