diff --git a/src/components/PositionDetails/SinglePositionInfo/BoxInfo.tsx b/src/components/PositionDetails/SinglePositionInfo/BoxInfo.tsx
index ae134a8d4..e2c231e6a 100644
--- a/src/components/PositionDetails/SinglePositionInfo/BoxInfo.tsx
+++ b/src/components/PositionDetails/SinglePositionInfo/BoxInfo.tsx
@@ -20,6 +20,7 @@ export const BoxInfo: React.FC<{
   tokenA: BoxInfoToken
   tokenB: BoxInfoToken
   showBalance?: boolean
+  showValue?: boolean
   swapHandler?: () => void
   showLoader?: boolean
   isBalanceLoading: boolean
@@ -29,6 +30,7 @@ export const BoxInfo: React.FC<{
   tokenB,
   tokenA,
   showBalance = false,
+  showValue = false,
   swapHandler,
   showLoader = false,
   isBalanceLoading
@@ -112,22 +114,30 @@ export const BoxInfo: React.FC<{
               {showPrefix(tokenXPrintValue, prefixConfig)}
             </Typography>
           </Grid>
-          {showBalance ? (
+          {showBalance || showValue ? (
             <Grid className={classes.tokenAreaLowerPart}>
-              <Typography className={classes.tokenBalance}>
-                Balance:{' '}
-                {isBalanceLoading ? (
-                  <img src={loadingAnimation} className={classes.loadingBalance} alt='Loading' />
-                ) : (
-                  formatNumber(tokenA.balance)
-                )}{' '}
-                {tokenA.name}
-              </Typography>
+              {showBalance ? (
+                <Typography className={classes.tokenBalance}>
+                  Balance:{' '}
+                  {isBalanceLoading ? (
+                    <img src={loadingAnimation} className={classes.loadingBalance} alt='Loading' />
+                  ) : (
+                    formatNumber(tokenA.balance)
+                  )}{' '}
+                  {tokenA.name}
+                </Typography>
+              ) : (
+                <div />
+              )}
               {typeof tokenA.usdValue !== 'undefined' && tokenA.price ? (
                 <Tooltip
                   enterTouchDelay={0}
                   leaveTouchDelay={Number.MAX_SAFE_INTEGER}
-                  title="Estimated USD Value of the Position's Tokens"
+                  title={
+                    showValue
+                      ? 'Estimated USD Value of unclaimed fee'
+                      : "Estimated USD Value of the Position's Tokens"
+                  }
                   placement='bottom'
                   classes={{
                     tooltip: classes.tooltip
@@ -179,22 +189,30 @@ export const BoxInfo: React.FC<{
               {showPrefix(tokenYPrintValue, prefixConfig)}
             </Typography>
           </Grid>
-          {showBalance ? (
+          {showBalance || showValue ? (
             <Grid className={classes.tokenAreaLowerPart}>
-              <Typography className={classes.tokenBalance}>
-                Balance:{' '}
-                {isBalanceLoading ? (
-                  <img src={loadingAnimation} className={classes.loadingBalance} alt='Loading' />
-                ) : (
-                  formatNumber(tokenB.balance)
-                )}{' '}
-                {tokenB.name}
-              </Typography>
+              {showBalance ? (
+                <Typography className={classes.tokenBalance}>
+                  Balance:{' '}
+                  {isBalanceLoading ? (
+                    <img src={loadingAnimation} className={classes.loadingBalance} alt='Loading' />
+                  ) : (
+                    formatNumber(tokenB.balance)
+                  )}{' '}
+                  {tokenB.name}
+                </Typography>
+              ) : (
+                <div />
+              )}
               {typeof tokenB.usdValue !== 'undefined' && tokenB.price ? (
                 <Tooltip
                   enterTouchDelay={0}
                   leaveTouchDelay={Number.MAX_SAFE_INTEGER}
-                  title="Estimated USD Value of the Position's Tokens"
+                  title={
+                    showValue
+                      ? 'Estimated USD Value of unclaimed fee'
+                      : "Estimated USD Value of the Position's Tokens"
+                  }
                   placement='bottom'
                   classes={{
                     tooltip: classes.tooltip
diff --git a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
index 2fa085b17..39f1059f6 100644
--- a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
+++ b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx
@@ -243,14 +243,19 @@ const SinglePositionInfo: React.FC<IProp> = ({
         <BoxInfo
           title={'Unclaimed fees'}
           tokenA={
-            xToY ? { ...tokenX, value: tokenX.claimValue } : { ...tokenY, value: tokenY.claimValue }
+            xToY
+              ? { ...tokenX, value: tokenX.claimValue, price: tokenXPriceData?.price }
+              : { ...tokenY, value: tokenY.claimValue, price: tokenYPriceData?.price }
           }
           tokenB={
-            xToY ? { ...tokenY, value: tokenY.claimValue } : { ...tokenX, value: tokenX.claimValue }
+            xToY
+              ? { ...tokenY, value: tokenY.claimValue, price: tokenYPriceData?.price }
+              : { ...tokenX, value: tokenX.claimValue, price: tokenXPriceData?.price }
           }
           onClickButton={onClickClaimFee}
           showLoader={showFeesLoader}
           isBalanceLoading={isBalanceLoading}
+          showValue
         />
       </Grid>
     </Grid>