diff --git a/packages/frontend/src/components/staking/components/BalanceBox.js b/packages/frontend/src/components/staking/components/BalanceBox.js
index d04ee2e340..0cee28299a 100644
--- a/packages/frontend/src/components/staking/components/BalanceBox.js
+++ b/packages/frontend/src/components/staking/components/BalanceBox.js
@@ -7,6 +7,8 @@ import classNames from '../../../utils/classNames';
 import Balance from '../../common/balance/Balance';
 import FormButton from '../../common/FormButton';
 import Tooltip from '../../common/Tooltip';
+import TokenIcon from '../../send/components/TokenIcon';
+import TokenAmount from '../../wallet/TokenAmount';
 
 const Container = styled.div`
     border-bottom: 2px solid #F2F2F2;
@@ -23,6 +25,14 @@ const Container = styled.div`
         color: #24272a;
         font-size: 16px;
         font-weight: 700;
+        
+        .fiat-amount {
+            font-size: 14px;
+            font-weight: 400;
+            margin-top: 6px;
+            color: #72727A;
+            line-height: normal;
+        }
     }
 
     .title {
@@ -64,11 +74,34 @@ const Container = styled.div`
         margin: 0px -14px 0 -14px;
         border-radius: 0;
     }
+
+    .token-balance {
+        display: flex;
+        .icon {
+            width: 32px;
+            height: 32px;
+            min-width: 32px;
+            min-height: 32px;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border-radius: 50%;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+            align-self: center;
+    
+            img, svg {
+                height: 32px;
+                width: 32px;
+            }
+        }
+    }
 `;
 
 export default function BalanceBox({
     title,
-    amount,
+    token,
     info,
     onClick,
     button,
@@ -86,7 +119,26 @@ export default function BalanceBox({
                     <Translate id={title} />
                     <Tooltip translate={info}/>
                 </div>
-                <Balance data-test-id={balanceTestId} amount={amount}/>
+                <div className='token-balance'>
+                    <div className='icon'>
+                        <TokenIcon symbol={token.onChainFTMetadata?.symbol} icon={token.onChainFTMetadata?.icon}/>
+                    </div>
+                    {token.onChainFTMetadata?.symbol === "NEAR" &&
+                    !token.contractName ? (
+                        <Balance
+                            amount={token.balance}
+                            data-test-id={balanceTestId}
+                            symbol={false}
+                        />
+                    ) : (
+                        <TokenAmount
+                            token={token}
+                            className="balance"
+                            withSymbol={true}
+                        />
+                    )}
+                </div>
+                
                 {disclaimer &&
                     <div className='withdrawal-disclaimer'>
                         <Translate id={disclaimer} />
@@ -96,7 +148,7 @@ export default function BalanceBox({
             {button && (onClick || linkTo) &&
                 <FormButton
                     data-test-id={buttonTestId}
-                    disabled={new BN(amount).isZero() || loading}
+                    disabled={new BN(token.balance).isZero() || loading}
                     onClick={onClick}
                     linkTo={linkTo}
                     className={classNames(['small', buttonColor])}
diff --git a/packages/frontend/src/components/staking/components/Staking.js b/packages/frontend/src/components/staking/components/Staking.js
index 317d64a657..2b21255629 100644
--- a/packages/frontend/src/components/staking/components/Staking.js
+++ b/packages/frontend/src/components/staking/components/Staking.js
@@ -2,6 +2,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { Translate } from 'react-localize-redux';
 
+import { useNEARAsTokenWithMetadata } from '../../../hooks/fungibleTokensIncludingNEAR';
 import FormButton from '../../common/FormButton';
 import SkeletonLoading from '../../common/SkeletonLoading';
 import Tooltip from '../../common/Tooltip';
@@ -27,6 +28,7 @@ export default function Staking({
     selectedValidator,
     multipleAccounts
 }) {
+    const nearAsFT = useNEARAsTokenWithMetadata();
 
     return (
         <>
@@ -70,27 +72,17 @@ export default function Staking({
                     <BalanceBox
                         title='staking.balanceBox.staked.title'
                         info='staking.balanceBox.staked.info'
-                        amount={totalStaked}
+                        token={{...nearAsFT, balance: totalStaked}}
                         button={new BN(totalStaked).isZero() ? null : 'staking.balanceBox.staked.button'}
                         linkTo={stakeFromAccount ? `/staking/unstake` : `/staking/${selectedValidator}/unstake`}
                         buttonColor='gray-blue'
                         buttonTestId="stakingPageUnstakingButton"
                         balanceTestId="stakingPageTotalStakedAmount"
                     />
-                    <BalanceBox
-                        title='staking.balanceBox.farm.title'
-                        info='staking.balanceBox.farm.info'
-                        amount={totalStaked}
-                        button={new BN(totalStaked).isZero() ? null : 'staking.balanceBox.farm.button'}
-                        linkTo={stakeFromAccount ? `/staking/unstake` : `/staking/${selectedValidator}/unstake`}
-                        buttonColor='gray-blue'
-                        buttonTestId="stakingPageUnstakingButton"
-                        balanceTestId="stakingPageTotalStakedAmount"
-                    />
                     <BalanceBox
                         title='staking.balanceBox.unclaimed.title'
                         info='staking.balanceBox.unclaimed.info'
-                        amount={totalUnclaimed}
+                        token={{...nearAsFT, balance: totalUnclaimed}}
                     />
                 </>
             }
@@ -99,13 +91,13 @@ export default function Staking({
                     <BalanceBox
                         title='staking.balanceBox.pending.title'
                         info='staking.balanceBox.pending.info'
-                        amount={totalPending}
+                        token={{...nearAsFT, balance: totalPending}}
                         balanceTestId="stakingPagePendingReleaseAmount"
                     />
                     <BalanceBox
                         title='staking.balanceBox.available.title'
                         info='staking.balanceBox.available.info'
-                        amount={totalAvailable}
+                        token={{...nearAsFT, balance: totalAvailable}}
                         button={new BN(totalAvailable).isZero() ? null : 'staking.balanceBox.available.button'}
                         linkTo={stakeFromAccount ? `/staking/withdraw` : `/staking/${selectedValidator}`}
                         buttonColor='gray-blue'
diff --git a/packages/frontend/src/components/staking/components/Validator.js b/packages/frontend/src/components/staking/components/Validator.js
index 460fb705ca..9488dd72cc 100644
--- a/packages/frontend/src/components/staking/components/Validator.js
+++ b/packages/frontend/src/components/staking/components/Validator.js
@@ -1,10 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Translate } from 'react-localize-redux';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { useNEARAsTokenWithMetadata } from '../../../hooks/fungibleTokensIncludingNEAR';
 import { Mixpanel } from '../../../mixpanel';
 import { redirectTo } from '../../../redux/actions/account';
+import { selectAccountId } from '../../../redux/slices/account';
+import { actions as tokensActions, selectAllContractMetadata } from '../../../redux/slices/tokens';
 import { actionsPending } from '../../../utils/alerts';
+import { PROJECT_VALIDATOR_VERSION, ValidatorVersion } from '../../../utils/constants';
 import FormButton from '../../common/FormButton';
 import SafeTranslate from '../../SafeTranslate';
 import AlertBanner from './AlertBanner';
@@ -12,6 +16,8 @@ import BalanceBox from './BalanceBox';
 import StakeConfirmModal from './StakeConfirmModal';
 import StakingFee from './StakingFee';
 
+const { fetchToken } = tokensActions;
+
 export default function Validator({
     match,
     validator,
@@ -21,10 +27,31 @@ export default function Validator({
     currentValidators,
 }) {
     const [confirm, setConfirm] = useState(null);
+    const [farmList, setFarmList] = useState([]);
+    const nearAsFT = useNEARAsTokenWithMetadata();
+    const accountId = useSelector(selectAccountId);
+    const contractMetadata = useSelector(selectAllContractMetadata);
+
     const dispatch = useDispatch();
     const stakeNotAllowed = !!selectedValidator && selectedValidator !== match.params.validator && !!currentValidators.length;
     const showConfirmModal = confirm === 'withdraw';
 
+    useEffect(() => {
+        const getFarms = async () => {
+            const farms = await validator.contract.get_farms({from_index: 0, limit: 300});
+            setFarmList(await Promise.all(farms.map(({ token_id }, i) => {
+                dispatch(fetchToken({contractName: token_id}));
+                return validator.contract
+                    .get_unclaimed_reward({ account_id: accountId, farm_id: i })
+                    .catch(() => "0")
+                    .then((balance) => ({ token_id, balance, farm_id: i }));
+            })));
+        };
+        if(validator && validator.version === ValidatorVersion[PROJECT_VALIDATOR_VERSION]) {
+            getFarms();
+        }
+    },[validator]);
+
     const handleStakeAction = async () => {
         if (showConfirmModal && !loading) {
             await onWithdraw('withdraw', selectedValidator || validator.accountId);
@@ -62,7 +89,7 @@ export default function Validator({
                     <BalanceBox
                         title='staking.balanceBox.staked.title'
                         info='staking.balanceBox.staked.info'
-                        amount={validator.staked || '0'}
+                        token={{...nearAsFT, balance: validator.staked || '0'}}
                         onClick={() => {
                             dispatch(redirectTo(`/staking/${match.params.validator}/unstake`));
                             Mixpanel.track("UNSTAKE Click unstake button");
@@ -74,18 +101,37 @@ export default function Validator({
                     <BalanceBox
                         title='staking.balanceBox.unclaimed.title'
                         info='staking.balanceBox.unclaimed.info'
-                        amount={validator.unclaimed || '0'}
+                        token={{...nearAsFT, balance: validator.unclaimed || '0'}}
                     />
+                    {farmList.map(({ token_id, balance, farm_id }) => (
+                            <BalanceBox
+                                key={token_id}
+                                title="staking.balanceBox.farm.title"
+                                info="staking.balanceBox.farm.info"
+                                token={{
+                                    onChainFTMetadata: contractMetadata[token_id],
+                                    coingeckoMetadata: {},
+                                    balance,
+                                    contractName: token_id,
+                                }}
+                                onClick={() => {
+                                    // TODO claim accrued rewards and redirect home where tokens will be fetched
+                                    return validator.contract.claim({account_id: accountId, token_id, farm_id}).then(() => dispatch(redirectTo('/')));
+                                }}
+                                button="staking.balanceBox.farm.button"
+                                buttonColor='gray-red'
+                            />
+                    ))}
                     <BalanceBox
                         title='staking.balanceBox.pending.title'
                         info='staking.balanceBox.pending.info'
-                        amount={validator.pending || '0'}
+                        token={{...nearAsFT, balance: validator.pending || '0'}}
                         disclaimer='staking.validator.withdrawalDisclaimer'
                     />
                     <BalanceBox
                         title='staking.balanceBox.available.title'
                         info='staking.balanceBox.available.info'
-                        amount={validator.available || '0'}
+                        token={{...nearAsFT, balance: validator.available || '0'}}
                         onClick={() => {
                             setConfirm('withdraw');
                             Mixpanel.track("WITHDRAW Click withdraw button");
diff --git a/packages/frontend/src/hooks/fungibleTokensIncludingNEAR.js b/packages/frontend/src/hooks/fungibleTokensIncludingNEAR.js
index d71f89826a..8f54f58f32 100644
--- a/packages/frontend/src/hooks/fungibleTokensIncludingNEAR.js
+++ b/packages/frontend/src/hooks/fungibleTokensIncludingNEAR.js
@@ -4,7 +4,7 @@ import { selectAccountId, selectBalance } from "../redux/slices/account";
 import { selectNearTokenFiatValueUSD } from "../redux/slices/tokenFiatValues";
 import { selectTokensWithMetadataForAccountId } from "../redux/slices/tokens";
 
-const useNEARAsTokenWithMetadata = () => {
+export const useNEARAsTokenWithMetadata = () => {
     const nearBalance = useSelector(selectBalance);
     const nearTokenFiatValueUSD = useSelector(selectNearTokenFiatValueUSD);
 
diff --git a/packages/frontend/src/redux/slices/tokens/index.js b/packages/frontend/src/redux/slices/tokens/index.js
index fbd463ea00..b80c118cc3 100644
--- a/packages/frontend/src/redux/slices/tokens/index.js
+++ b/packages/frontend/src/redux/slices/tokens/index.js
@@ -25,12 +25,12 @@ const initialOwnedTokenState = {
     error: initialErrorState
 };
 
-async function getCachedContractMetadataOrFetch(contractName, accountId, state) {
+async function getCachedContractMetadataOrFetch(contractName, state) {
     let contractMetadata = selectOneContractMetadata(state, { contractName });
     if (contractMetadata) {
         return contractMetadata;
     }
-    return FungibleTokens.getMetadata({ contractName, accountId });
+    return FungibleTokens.getMetadata({ contractName });
 }
 
 const fetchOwnedTokensForContract = createAsyncThunk(
@@ -63,11 +63,11 @@ const fetchTokens = createAsyncThunk(
         await Promise.all(likelyContracts.map(async contractName => {
             const { actions: { setContractMetadata } } = tokensSlice;
             try {
-                const contractMetadata = await getCachedContractMetadataOrFetch(contractName, accountId, getState());
+                const contractMetadata = await getCachedContractMetadataOrFetch(contractName, getState());
                 if (!selectOneContractMetadata(getState(), { contractName })) {
                     dispatch(setContractMetadata({ contractName, metadata: contractMetadata }));
                 }
-                await dispatch(fetchOwnedTokensForContract({ accountId, contractName, contractMetadata }));
+                await dispatch(fetchOwnedTokensForContract({ accountId, contractName }));
             } catch (e) {
                 // Continue loading other likely contracts on failures
                 console.warn(`Failed to load FT for ${contractName}`, e);
@@ -82,11 +82,13 @@ const fetchToken = createAsyncThunk(
         const { dispatch, getState } = thunkAPI;
         const { actions: { setContractMetadata } } = tokensSlice;
         try {
-            const contractMetadata = await getCachedContractMetadataOrFetch(contractName, accountId, getState());
+            const contractMetadata = await getCachedContractMetadataOrFetch(contractName, getState());
             if (!selectOneContractMetadata(getState(), { contractName })) {
                 dispatch(setContractMetadata({ contractName, metadata: contractMetadata }));
             }
-            await dispatch(fetchOwnedTokensForContract({ accountId, contractName, contractMetadata }));
+            if(accountId) {
+                await dispatch(fetchOwnedTokensForContract({ accountId, contractName }));
+            }
         } catch (e) {
             // Continue loading other likely contracts on failures
             console.warn(`Failed to load FT for ${contractName}`, e);
diff --git a/packages/frontend/src/utils/staking.js b/packages/frontend/src/utils/staking.js
index 33bfd9f172..3c7c0c7af4 100644
--- a/packages/frontend/src/utils/staking.js
+++ b/packages/frontend/src/utils/staking.js
@@ -40,7 +40,9 @@ export const stakingMethods = {
         'get_reward_fee_fraction',
         'get_farms',
         'get_farm',
-        'get_active_farms'
+        'get_active_farms',
+        'get_unclaimed_reward',
+        'claim'
     ],
     changeMethods: [
         'ping',