diff --git a/src/components/homePage/AccountInfo.tsx b/src/components/homePage/AccountInfo.tsx
index 25befc51..eb73ad9a 100644
--- a/src/components/homePage/AccountInfo.tsx
+++ b/src/components/homePage/AccountInfo.tsx
@@ -3,17 +3,14 @@ import { MutedDiv } from '../utils/MutedText'
 import Section from '../utils/Section'
 import { CopyAddress } from './address-views/utils'
 import { LARGE_AVATAR_SIZE } from '../utils/Size.config'
-import { toShortAddress, convertAddressToChainFormat } from '../utils/index'
+import { toShortAddress } from '../utils/index'
 import { DfMd } from '../utils/DfMd'
 import { useMyExtensionAddresses } from '../providers/MyExtensionAccountsContext'
 import { useResponsiveSize } from '../responsive'
 import BaseAvatar from '../utils/DfAvatar'
 import styles from './address-views/utils/index.module.sass'
-import { LinkWithIcon } from '../table/utils'
-import { resolveStatescanUrl } from '../table/links'
 import { AddressQrModal } from '../qrs/QrModal'
 import clsx from 'clsx'
-import { useChainInfo } from '../../rtk/features/multiChainInfo/multiChainInfoHooks'
 import { allAccountsAvatar } from './address-views/utils/index'
 import { toGenericAccountId } from 'src/rtk/app/util'
 import {
@@ -60,7 +57,6 @@ export const AccountInfo = (props: Props) => {
   const { t } = useTranslation()
 
   const accounts = useMyExtensionAddresses()
-  const chains = useChainInfo()
 
   let { image: accountAvatar, about: accountDescription } = owner || {}
 
@@ -84,11 +80,6 @@ export const AccountInfo = (props: Props) => {
 
   const genericAccountId = toGenericAccountId(address?.toString())
 
-  const ksmAddress = convertAddressToChainFormat(
-    address?.toString(),
-    chains?.kusama?.ss58Format
-  )
-
   const addressView = (
     <div
       className={clsx(
@@ -109,21 +100,11 @@ export const AccountInfo = (props: Props) => {
       <div className='d-flex align-items-center'>
         {address && (
           <AddressQrModal
-            className='grey-light'
+            className='GrayIcon'
             address={address.toString()}
             openFromUrl
           />
         )}
-
-        {ksmAddress && (
-          <LinkWithIcon
-            link={resolveStatescanUrl(ksmAddress)}
-            className={clsx(styles.StatescanLink, 'grey-light')}
-            withCircle={false}
-            title={t('buttons.viewAddressOn', { website: 'Statescan.io' })}
-            icon='/images/statescan.svg'
-          />
-        )}
       </div>
     </div>
   )
diff --git a/src/components/homePage/HomePageLayout.tsx b/src/components/homePage/HomePageLayout.tsx
index da707bae..57d2c87a 100644
--- a/src/components/homePage/HomePageLayout.tsx
+++ b/src/components/homePage/HomePageLayout.tsx
@@ -2,7 +2,7 @@ import NtfLayout from '../ntf/NftsLayout'
 import { Tabs } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
 import styles from './Index.module.sass'
-import BalancesTableNew from '../table/balancesTable'
+import BalancesTable from '../table/balancesTable'
 import { useSendEvent } from '../providers/AnalyticContext'
 import { useRouter } from 'next/router'
 import TxHistoryLayout from '../txHistory'
@@ -44,7 +44,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => {
       {
         key: 'portfolio',
         tab: 'Portfolio',
-        children: <BalancesTableNew addresses={addresses} />,
+        children: <BalancesTable addresses={addresses} />,
       },
       {
         key: 'nfts',
diff --git a/src/components/homePage/address-views/utils/index.tsx b/src/components/homePage/address-views/utils/index.tsx
index 7abe8e22..52fc648b 100644
--- a/src/components/homePage/address-views/utils/index.tsx
+++ b/src/components/homePage/address-views/utils/index.tsx
@@ -30,6 +30,7 @@ type BalanceViewProps = {
   defaultPostfix?: string
   style?: CSSProperties
   className?: string
+  decimalClassName?: string
 }
 
 export const BalanceView = ({
@@ -42,6 +43,7 @@ export const BalanceView = ({
   defaultPostfix = '00',
   className,
   style,
+  decimalClassName
 }: BalanceViewProps) => {
   if (!value) return <>-</>
 
@@ -77,7 +79,7 @@ export const BalanceView = ({
       {postfixValue && (
         <>
           .
-          <span className='DfBalanceDecimals'>
+          <span className={clsx('DfBalanceDecimals', decimalClassName)}>
             {isPrefixInString ? postfixValue.slice(0, -1) : postfixValue}
           </span>
         </>
@@ -112,7 +114,7 @@ export const CopyAddress = ({
 
   return (
     <Copy
-      className={clsx('DfGreyLink', {
+      className={clsx('GrayText', {
         [styles.Copy]: !iconVisibility,
       }, className)}
       text={address.toString()}
@@ -126,7 +128,7 @@ export const CopyAddress = ({
           })}
         >
           {children}
-          <CopyOutlined className='ml-1 grey-light DfGreyLink' />
+          <CopyOutlined className='ml-1 GrayIcon' />
         </div>
       </Tooltip>
     </Copy>
diff --git a/src/components/qrs/QrModal.tsx b/src/components/qrs/QrModal.tsx
index 5bce891f..ba687256 100644
--- a/src/components/qrs/QrModal.tsx
+++ b/src/components/qrs/QrModal.tsx
@@ -94,7 +94,7 @@ export const AddressQrModal = ({ className, modalClassName, ...props }: Omit<QrM
 
   const QrButton = (props: ButtonProps) => (
     <Tooltip title={t('tooltip.showQR')}>
-      <HiOutlineQrCode className={clsx('DfGreyLink', className)} style={{ transform: 'scale(1.15)' }} {...(props as any)} />
+      <HiOutlineQrCode className={clsx('GrayIcon', className)} style={{ transform: 'scale(1.15)' }} {...(props as any)} />
     </Tooltip>
   )
 
diff --git a/src/components/table/Table.module.sass b/src/components/table/Table.module.sass
index 42a67597..72b265b2 100644
--- a/src/components/table/Table.module.sass
+++ b/src/components/table/Table.module.sass
@@ -27,6 +27,20 @@ $zero_margin: 0
   .DfCol
     width: 100%
 
+.RowTitle
+  font-size: $font_normal
+
+.RowTitleBold
+  font-weight: 600
+
+@media ( max-width: $max_mobile_width )
+  .RowTitle
+    font-size: 15px
+
+.RowValue
+  display: flex
+  flex-direction: column
+
 .Card
   min-height: 5rem
   border-radius: $border_radius_normal
@@ -322,6 +336,7 @@ $zero_margin: 0
     border-bottom: 1px solid #f0f0f0
 
   .NonTokenImage
-    width: 24px
+    max-width: 24px
+    width: 100%
     height: 24px
     font-size: $font_small
diff --git a/src/components/table/balancesTable/index.tsx b/src/components/table/balancesTable/index.tsx
index a0004df8..7a180d86 100644
--- a/src/components/table/balancesTable/index.tsx
+++ b/src/components/table/balancesTable/index.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx'
 import styles from '../Table.module.sass'
 import {
   BALANCE_SHOW_ZERO_BALANCES,
-  BALANCE_TABLE_VARIANT,
   BALANCE_TABLE_VIEW,
   BalancePart,
 } from '../utils'
@@ -13,11 +12,8 @@ import {
 } from '../customTable/TableContext'
 import { useTranslation } from 'react-i18next'
 import { useIsMyConnectedAddress } from 'src/components/providers/MyExtensionAccountsContext'
-import { useState } from 'react'
-import { BalanceVariant } from './types'
-import store from 'store'
 import { useGetTableData } from './utils/useGetTableData'
-import ActionPannel from './utils/ActionPannel'
+import ActionPanel from './utils/ActionPanel'
 import TransferModal from 'src/components/transfer/TransferModal'
 import PricesWarning from './PricesWarning'
 
@@ -30,24 +26,26 @@ type BalancesTableInnerProps = BalancesTableProps & {
   storeTableView: string
 }
 
-const BalancesTableNewInner = (props: BalancesTableInnerProps) => {
+const BalancesTableInner = (props: BalancesTableInnerProps) => {
   const { storeShowZeroBalance, storeTableView, addresses } = props
   const isMyAddress = useIsMyConnectedAddress(addresses?.[0])
-  const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
-  const { tableView, showZeroBalances } = useTableContext()
 
-  const [ balancesVariant, setBalancesVariant ] = useState<BalanceVariant>(
-    tableVariantFromStore || 'chains'
-  )
+  const { tableView, showZeroBalances, balancesVariant, setBalancesVariant } =
+    useTableContext()
 
-  const { loading, balancesLoading, data, transferModalState, transferModalDispatch } =
-    useGetTableData(addresses, balancesVariant)
+  const {
+    loading,
+    balancesLoading,
+    data,
+    transferModalState,
+    transferModalDispatch,
+  } = useGetTableData(addresses, balancesVariant)
 
   const { t } = useTranslation()
 
   return (
     <div className={clsx(styles.BalanceBlock, 'mt-0')}>
-      <ActionPannel
+      <ActionPanel
         balancesVariant={balancesVariant}
         setBalancesVariant={setBalancesVariant}
         loading={!!balancesLoading}
@@ -78,7 +76,7 @@ const BalancesTableNewInner = (props: BalancesTableInnerProps) => {
   )
 }
 
-const BalancesTableNew = (props: BalancesTableProps) => {
+const BalancesTable = (props: BalancesTableProps) => {
   const storeProps = {
     storeShowZeroBalance: BALANCE_SHOW_ZERO_BALANCES,
     storeTableView: BALANCE_TABLE_VIEW,
@@ -88,9 +86,9 @@ const BalancesTableNew = (props: BalancesTableProps) => {
     <TableContextWrapper {...storeProps}>
       <PricesWarning />
 
-      <BalancesTableNewInner {...storeProps} {...props} />
+      <BalancesTableInner {...storeProps} {...props} />
     </TableContextWrapper>
   )
 }
 
-export default BalancesTableNew
+export default BalancesTable
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index 0a591912..d32b885c 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -7,7 +7,7 @@ import {
   pluralize,
   toShortMoney,
 } from '@subsocial/utils'
-import { MutedSpan, MutedDiv } from '../../../utils/MutedText'
+import { MutedSpan } from '../../../utils/MutedText'
 import {
   ChainData,
   getBalanceWithDecimals,
@@ -17,7 +17,6 @@ import {
   getBalances,
   AccountPreview,
   getParentBalances,
-  resolveAccountDataImage,
 } from '../../utils'
 import styles from '../../Table.module.sass'
 import { BalancesTableInfo } from '../../types'
@@ -32,36 +31,38 @@ import { convertAddressToChainFormat, SubIcon } from '../../../utils/index'
 import { AccountIdentitiesRecord } from '../../../../rtk/features/identities/identitiesSlice'
 import { AccountInfoByChain } from '../../../identity/types'
 import { getSubsocialIdentityByAccount } from '../../../../rtk/features/identities/identitiesHooks'
-import BaseAvatar from '../../../utils/DfAvatar'
 import { BalanceView } from '../../../homePage/address-views/utils/index'
 import { TFunction } from 'i18next'
-import { Button } from 'antd'
+import { Button, Tooltip } from 'antd'
 import { FiSend } from 'react-icons/fi'
 import { LinksButton } from '../../links/Links'
+import { PnlInDollars, PriceChangedOn } from '../utils'
+import { InfoCircleOutlined } from '@ant-design/icons'
 
 const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
   const { reservedBalance, freeBalance, lockedBalance } = info
 
   return [
-    // {
-    //   key: 'frozen',
-    //   label: t('table.balances.frozen'),
-    //   value: frozenBalance?.toString() || '0',
-    // },
     {
       key: 'locked',
       label: t('table.balances.locked'),
       value: lockedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
     {
       key: 'reserved',
       label: t('table.balances.reserved'),
       value: reservedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
     },
     {
       key: 'free',
       label: t('table.balances.free'),
       value: freeBalance,
+      tooltipText:
+        'Tokens that are not reserved or locked, and can be transferred to another account.',
     },
   ]
 }
@@ -274,10 +275,11 @@ export const parseBalancesTableInfo = ({
                   totalTokensValue = totalTokensValue.plus(totalValue)
 
                   return {
-                    key: symbol,
-                    chain: <></>,
+                    key: `detailed-balances-${symbol}`,
                     balance: <span className='bs-mr-4'>{balance}</span>,
                     price,
+                    balanceValue: balanceValue,
+                    symbol,
                     total,
                     totalValue,
                     className: styles.Children,
@@ -289,7 +291,7 @@ export const parseBalancesTableInfo = ({
             const { decimal } = getDecimalsAndSymbol(chainInfo, nativeSymbol)
 
             const accountDataArray: BalancesTableInfo[] = accountData.map(
-              ({ key, label, value }: any) => {
+              ({ key, label, value, tooltipText }: any) => {
                 const valueWithDecimal = getBalanceWithDecimals({
                   totalBalance: value,
                   decimals: decimal,
@@ -303,28 +305,32 @@ export const parseBalancesTableInfo = ({
                 })
 
                 const chain = (
-                  <div className='d-flex align-items-center'>
-                    <BaseAvatar
-                      size={24}
-                      avatar={resolveAccountDataImage(key)}
-                    />
-                    <div>{label}</div>
+                  <div className='w-fit'>
+                    <Tooltip
+                      title={tooltipText}
+                      className='d-flex align-items-center'
+                    >
+                      <div>{label}</div>
+                      <InfoCircleOutlined className='ml-1 GrayIcon' />
+                    </Tooltip>
                   </div>
                 )
 
                 return {
-                  key,
+                  key: `detailed-balances-${key}`,
                   chain: (
-                    <MutedDiv
+                    <div
+                      style={{ marginLeft: isMulti ? '5rem' : '3rem' }}
                       className={clsx(
                         { [styles.SecondLevelBalances]: isMulti },
-                        'ml-5'
+                        'GrayText'
                       )}
                     >
                       {chain}
-                    </MutedDiv>
+                    </div>
                   ),
                   balance: <span className='bs-mr-4'>{balance}</span>,
+                  balanceValue: valueWithDecimal,
                   price,
                   total,
                   totalValue,
@@ -346,6 +352,25 @@ export const parseBalancesTableInfo = ({
               </div>
             )
 
+            const priceView = (
+              <div className={styles.RowValue}>
+                {price}
+                {!isMulti && <PriceChangedOn symbol={nativeSymbol} />}
+              </div>
+            )
+
+            const totalView = (
+              <div className={styles.RowValue}>
+                <BalanceView value={totalValue} symbol='$' startWithSymbol />
+                {!isMulti && (
+                  <PnlInDollars
+                    balanceValue={balanceValue}
+                    symbol={nativeSymbol}
+                  />
+                )}
+              </div>
+            )
+
             const chain = !isMulti ? (
               <ChainData
                 accountId={account}
@@ -371,18 +396,23 @@ export const parseBalancesTableInfo = ({
               onTransferClick(nativeSymbol, id)
             }
 
+            const chainValue = (
+              <div>
+                {isMulti ? (
+                  <div style={{ marginLeft: '3rem' }}>{chain}</div>
+                ) : (
+                  chain
+                )}
+              </div>
+            )
+
             return {
               key: key,
-              chain: isMulti ? <div className='ml-5'>{chain}</div> : chain,
+              chain: chainValue,
+              symbol: nativeSymbol,
               balance: getBalancePart(true),
-              price: !isMulti ? price : <></>,
-              total: (
-                <BalanceView
-                  value={totalTokensValue}
-                  symbol='$'
-                  startWithSymbol
-                />
-              ),
+              price: !isMulti ? priceView : <></>,
+              total: totalView,
               totalTokensValue,
               icon,
               name,
@@ -392,7 +422,9 @@ export const parseBalancesTableInfo = ({
               balanceWithoutChildren: getBalancePart(false),
               balanceValue,
               balanceView: getBalancePart(true),
-              links: (
+              links: isMulti ? (
+                []
+              ) : (
                 <LinksButton
                   network={supportedNetwork}
                   action={onButtonClick}
@@ -400,15 +432,16 @@ export const parseBalancesTableInfo = ({
                   disableTransferButton={!chainInfo.isTransferable || loading}
                 />
               ),
-              showLinks: (isShow: boolean) => (
-                <LinksButton
-                  action={onButtonClick}
-                  network={supportedNetwork}
-                  showActionButton={isShow}
-                  disableTransferButton={!chainInfo.isTransferable || loading}
-                />
-              ),
-              transferAction: (
+              showLinks: (isShow: boolean) =>
+                !isMulti && (
+                  <LinksButton
+                    action={onButtonClick}
+                    network={supportedNetwork}
+                    showActionButton={isShow}
+                    disableTransferButton={!chainInfo.isTransferable || loading}
+                  />
+                ),
+              transferAction: !isMulti && (
                 <Button
                   disabled={!chainInfo.isTransferable || loading}
                   size='small'
@@ -424,7 +457,7 @@ export const parseBalancesTableInfo = ({
           .filter(isDef)
 
       if (isMulti) {
-        const { balanceValueBN, totalValueBN, balance, total } =
+        const { balanceValueBN, totalValueBN, totalTokensValueBN, balance } =
           getParentBalances(balancesByNetwork, nativeSymbol)
 
         const childrenBalances: any = {}
@@ -469,22 +502,59 @@ export const parseBalancesTableInfo = ({
           />
         )
 
+        const priceView = (
+          <div className={styles.RowValue}>
+            {price}
+            <PriceChangedOn symbol={nativeSymbol} />
+          </div>
+        )
+
+        const totalView = (
+          <div className={styles.RowValue}>
+            <BalanceView value={totalValueBN} symbol='$' startWithSymbol />
+            <PnlInDollars balanceValue={balanceValueBN} symbol={nativeSymbol} />
+          </div>
+        )
+
+        const onButtonClick = (e: React.MouseEvent<HTMLElement>) => {
+          e.stopPropagation()
+          e.currentTarget?.blur()
+          onTransferClick(nativeSymbol, id)
+        }
+
         return [
           {
             key: supportedNetwork,
             chain,
             balance: getBalancePart(true),
             address: numberOfAccounts,
-            price,
-            total,
+            price: priceView,
+            symbol: nativeSymbol,
+            total: totalView,
             icon,
             name,
             chainName: name,
-            totalTokensValue: totalValueBN,
+            totalTokensValue: totalTokensValueBN,
             totalValue: totalValueBN,
             balanceWithoutChildren: getBalancePart(false),
             balanceValue: balanceValueBN,
             balanceView: getBalancePart(true),
+            links: (
+              <LinksButton
+                network={supportedNetwork}
+                action={onButtonClick}
+                showActionButton={false}
+                disableTransferButton={!chainInfo.isTransferable || loading}
+              />
+            ),
+            showLinks: (isShow: boolean) => (
+              <LinksButton
+                action={onButtonClick}
+                network={supportedNetwork}
+                showActionButton={isShow}
+                disableTransferButton={!chainInfo.isTransferable || loading}
+              />
+            ),
             ...childrenBalances,
           },
         ]
@@ -496,8 +566,11 @@ export const parseBalancesTableInfo = ({
 
   const balancesInfo = parsedData.filter(isDef).flat()
 
-  const balancesInfoSorted = balancesInfo.sort((a, b) =>
-    b.totalTokensValue.minus(a.totalTokensValue).toNumber()
+  const balancesInfoSorted = balancesInfo.sort(
+    (a, b) =>
+      b.totalValue.minus(a.totalValue).toNumber() ||
+      b.balanceValue.minus(a.balanceValue).toNumber() ||
+      b.totalTokensValue.minus(a.totalTokensValue).toNumber()
   )
 
   return balancesInfoSorted
diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index 9c838e3a..d2f20313 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -3,7 +3,10 @@ import { BalanceEntityRecord } from '../../../../rtk/features/balances/balancesS
 import { MultiChainInfo } from '../../../../rtk/features/multiChainInfo/types'
 import { AccountIdentitiesRecord } from '../../../../rtk/features/identities/identitiesSlice'
 import { TFunction } from 'i18next'
-import { AccountInfoByChain, BalancesStruct } from 'src/components/identity/types'
+import {
+  AccountInfoByChain,
+  BalancesStruct,
+} from 'src/components/identity/types'
 import BN from 'bignumber.js'
 import {
   AccountPreview,
@@ -14,21 +17,32 @@ import {
   getDecimalsAndSymbol,
   getParentBalances,
   getPrice,
-  resolveAccountDataImage,
 } from '../../utils'
 import { BalanceView } from 'src/components/homePage/address-views/utils'
-import { convertToBalanceWithDecimal, isDef, isEmptyObj, nonEmptyArr, pluralize, } from '@subsocial/utils'
-import BaseAvatar from 'src/components/utils/DfAvatar'
-import { MutedDiv } from 'src/components/utils/MutedText'
+import {
+  convertToBalanceWithDecimal,
+  isDef,
+  isEmptyObj,
+  nonEmptyArr,
+  pluralize,
+} from '@subsocial/utils'
 import clsx from 'clsx'
 import styles from '../../Table.module.sass'
 import { convertAddressToChainFormat, SubIcon } from 'src/components/utils'
 import { LinksButton } from '../../links/Links'
-import { Button } from 'antd'
+import { Button, Tooltip } from 'antd'
 import { FiSend } from 'react-icons/fi'
 import tokensCentricImages from 'public/images/folderStructs/token-centric-images.json'
 import { getSubsocialIdentityByAccount } from 'src/rtk/features/identities/identitiesHooks'
-import { allowedTokensByNetwork, decodeTokenId, encodeTokenId, getBalancePart, } from '../utils'
+import {
+  PnlInDollars,
+  PriceChangedOn,
+  allowedTokensByNetwork,
+  decodeTokenId,
+  encodeTokenId,
+  getBalancePart,
+} from '../utils'
+import { InfoCircleOutlined } from '@ant-design/icons'
 
 export type ParseBalanceTableInfoProps = {
   chainsInfo: MultiChainInfo
@@ -65,9 +79,13 @@ const NonTokenImage = ({ tokenId }: NonTokenImageProps) => {
 
 type NetworksIconsProps = {
   networkIcons: string[]
+  withCounter?: boolean
 }
 
-export const NetworksIcons = ({ networkIcons }: NetworksIconsProps) => {
+export const NetworksIcons = ({
+  networkIcons,
+  withCounter = false,
+}: NetworksIconsProps) => {
   const icons = networkIcons.map((icon, i) => {
     return (
       <AvatarOrSkeleton
@@ -78,7 +96,16 @@ export const NetworksIcons = ({ networkIcons }: NetworksIconsProps) => {
       />
     )
   })
-  return <div className={'d-flex alignt-items-center'}>{icons}</div>
+  return (
+    <div className='d-flex align-items-center'>
+      <div className={'d-flex alignt-items-center'}>{icons}</div>
+      {withCounter && (
+        <span className='GrayText ml-1'>
+          {pluralize({ count: networkIcons.length, singularText: 'chain' })}
+        </span>
+      )}
+    </div>
+  )
 }
 
 export const parseTokenCentricView = ({
@@ -180,11 +207,29 @@ export const parseTokenCentricView = ({
           onTransferClick(tokenId, firstNetwork, { id: assetRedistyId })
         }
 
+        const priceView = (
+          <div className={styles.RowValue}>
+            {price}
+            {!isMulti && <PriceChangedOn symbol={tokenId} />}
+          </div>
+        )
+
+        const totalView = (
+          <div className={styles.RowValue}>
+            <BalanceView value={totalValue} symbol='$' startWithSymbol />
+            {!isMulti && (
+              <PnlInDollars
+                balanceValue={balanceValueWithDecimals}
+                symbol={tokenId}
+              />
+            )}
+          </div>
+        )
         const chain = !isMulti ? (
           <ChainData
             icon={imagePath}
             name={tokenId}
-            desc={<NetworksIcons networkIcons={networkIcons} />}
+            desc={<NetworksIcons networkIcons={networkIcons} withCounter />}
           />
         ) : (
           <AccountPreview
@@ -198,18 +243,23 @@ export const parseTokenCentricView = ({
 
         return {
           key: `${balancesKey}-${j}`,
-          chain: isMulti ? <div className='ml-5'>{chain}</div> : chain,
+          chain: isMulti ? (
+            <div style={{ marginLeft: '3rem' }}>{chain}</div>
+          ) : (
+            chain
+          ),
           balance: getBalancePart(balance, true),
-          price: !isMulti ? price : <></>,
-          total: <BalanceView value={totalValue} symbol='$' startWithSymbol />,
+          price: !isMulti ? priceView : <></>,
+          total: totalView,
           totalTokensValue: totalValue,
           icon: imagePath,
           name: tokenId,
           address: '',
           decimals,
+          symbol: tokenId,
           totalValue: totalValue,
           balanceWithoutChildren: getBalancePart(balance, false),
-          balanceValue: totalBalance,
+          balanceValue: balanceValueWithDecimals,
           balanceView: getBalancePart(balance, true),
           links: [],
           networkIcons,
@@ -230,8 +280,8 @@ export const parseTokenCentricView = ({
       .filter(isDef)
 
     if (isMulti) {
-      const { balanceValueBN, totalValueBN, balance, total } =
-        getParentBalances(balancesByKey, tokenId, true)
+      const { balanceValueBN, totalValueBN, totalTokensValueBN, balance } =
+        getParentBalances(balancesByKey, tokenId)
 
       const childrenBalances: any = {}
 
@@ -257,6 +307,20 @@ export const parseTokenCentricView = ({
           })
         : ''
 
+      const priceView = (
+        <div className={styles.RowValue}>
+          {price}
+          <PriceChangedOn symbol={tokenId} />
+        </div>
+      )
+
+      const totalView = (
+        <div className={styles.RowValue}>
+          <BalanceView value={totalValueBN} symbol='$' startWithSymbol />
+          <PnlInDollars balanceValue={balanceValueBN} symbol={tokenId} />
+        </div>
+      )
+
       const chain = (
         <ChainData
           icon={imagePath}
@@ -273,11 +337,12 @@ export const parseTokenCentricView = ({
           chain,
           balance: getBalancePart(balance, true),
           address: numberOfAccounts,
-          price,
-          total,
+          symbol: tokenId,
+          price: priceView,
+          total: totalView,
           icon: imagePath,
           name: tokenId,
-          totalTokensValue: totalValueBN,
+          totalTokensValue: totalTokensValueBN,
           totalValue: totalValueBN,
           balanceWithoutChildren: getBalancePart(balance, false),
           balanceValue: balanceValueBN,
@@ -292,7 +357,10 @@ export const parseTokenCentricView = ({
 
   const balancesInfo = parsedData.filter(isDef).flat()
 
-  return balancesInfo.sort((a, b) =>
+  return balancesInfo.sort(
+    (a, b) =>
+      b.totalValue.minus(a.totalValue).toNumber() ||
+      b.balanceValue.minus(a.balanceValue).toNumber() ||
       b.totalTokensValue.minus(a.totalTokensValue).toNumber()
   )
 }
@@ -337,7 +405,7 @@ function parseBalancesByToken (
         const { totalBalance: newTotalBalance } = balances
         const { decimal } = getDecimalsAndSymbol(chainInfo, tokenId)
 
-        if(!decimal) return
+        if (!decimal) return
 
         const totalBalanceValue = (totalBalanceSum || new BN('0')).plus(
           newTotalBalance || '0'
@@ -403,7 +471,7 @@ function getChildrenBalances ({
 
     const { decimal } = getDecimalsAndSymbol(chainInfo, tokenId)
 
-    if(!decimal) return
+    if (!decimal) return
 
     const balanceValue = getBalanceWithDecimals({
       totalBalance: totalBalance ?? '0',
@@ -433,13 +501,18 @@ function getChildrenBalances ({
 
     childrenBalances.children = [ ...accountData.reverse() ]
 
-    const chain = <ChainData 
-      icon={icon} 
-      name={name} 
-      avatarSize={'small'} 
-      isBoldName={false} 
-      eventSource='balance_table'
-    />
+    const hideIcon = isMulti
+
+    const chain = (
+      <ChainData
+        icon={icon}
+        name={name}
+        avatarSize={'small'}
+        withIcon={!hideIcon}
+        isBoldName={false}
+        eventSource='balance_table'
+      />
+    )
 
     const onButtonClick = (e: React.MouseEvent<HTMLElement>) => {
       e.stopPropagation()
@@ -460,7 +533,9 @@ function getChildrenBalances ({
 
     return {
       key: `${network}-${tokenId}`,
-      chain: <div className='ml-5'>{chain}</div>,
+      chain: (
+        <div style={{ marginLeft: isMulti ? '5rem' : '3rem' }}>{chain}</div>
+      ),
       balance: getBalancePart(balance, true),
       price: <></>,
       total: <BalanceView value={totalValue} symbol='$' startWithSymbol />,
@@ -514,25 +589,26 @@ function getAccountDataValues ({ t, ...info }: GetAccountDataValuesParams) {
   const { reservedBalance, freeBalance, lockedBalance } = info
 
   return [
-    // {
-    //   key: 'frozen',
-    //   label: t('table.balances.frozen'),
-    //   value: frozenBalance?.toString() || '0',
-    // },
     {
       key: 'locked',
       label: t('table.balances.locked'),
       value: lockedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
     {
       key: 'reserved',
       label: t('table.balances.reserved'),
       value: reservedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
     },
     {
       key: 'free',
       label: t('table.balances.free'),
       value: freeBalance,
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
   ]
 }
@@ -559,42 +635,47 @@ function getAccountDataRows ({
     ...accountDataValuesParams,
   })
 
-  return accountDataValues.map(
-      ({ key, label, value }: any) => {
-        const valueWithDecimal = getBalanceWithDecimals({
-          totalBalance: value,
-          decimals: decimal,
-        })
+  return accountDataValues.map(({ key, label, tooltipText, value }: any) => {
+    const valueWithDecimal = getBalanceWithDecimals({
+      totalBalance: value,
+      decimals: decimal,
+    })
 
-        const { total, totalValue, balance } = getBalances({
-          balanceValue: valueWithDecimal,
-          priceValue,
-          symbol: tokenId,
-          t,
-        })
+    const { total, totalValue, balance } = getBalances({
+      balanceValue: valueWithDecimal,
+      priceValue,
+      symbol: tokenId,
+      t,
+    })
 
-        const chain = (
-            <div className='d-flex align-items-center'>
-              <BaseAvatar size={24} avatar={resolveAccountDataImage(key)}/>
-              <div>{label}</div>
-            </div>
-        )
+    const chain = (
+      <div className='w-fit'>
+        <Tooltip title={tooltipText} className='d-flex align-items-center'>
+          <div>{label}</div>
+          <InfoCircleOutlined className='ml-1 GrayIcon' />
+        </Tooltip>
+      </div>
+    )
 
-        return {
-          key,
-          chain: (
-              <MutedDiv
-                  className={clsx({ [styles.SecondLevelBalances]: isMulti }, 'ml-5')}
-              >
-                {chain}
-              </MutedDiv>
-          ),
-          balance: <span className='bs-mr-4'>{balance}</span>,
-          price,
-          total,
-          totalValue,
-          className: styles.Children,
-        }
-      }
-  )
+    return {
+      key: `detailed-balances-${key}`,
+      chain: (
+        <div
+          style={{ marginLeft: '5rem' }}
+          className={clsx(
+            { [styles.SecondLevelBalances]: isMulti },
+            'GrayText'
+          )}
+        >
+          {chain}
+        </div>
+      ),
+      balance: <span className='bs-mr-4'>{balance}</span>,
+      balanceValue: valueWithDecimal,
+      price,
+      total,
+      totalValue,
+      className: styles.Children,
+    }
+  })
 }
diff --git a/src/components/table/balancesTable/utils/ActionPannel.tsx b/src/components/table/balancesTable/utils/ActionPanel.tsx
similarity index 93%
rename from src/components/table/balancesTable/utils/ActionPannel.tsx
rename to src/components/table/balancesTable/utils/ActionPanel.tsx
index 4b4a55be..210163db 100644
--- a/src/components/table/balancesTable/utils/ActionPannel.tsx
+++ b/src/components/table/balancesTable/utils/ActionPanel.tsx
@@ -43,16 +43,16 @@ type CommonProps = {
   setBalancesVariant: (value: BalanceVariant) => void
 }
 
-type ActionPannelProps = CommonProps & {
+type ActionPanelProps = CommonProps & {
   addresses: string[]
   loading: boolean
 }
 
-const ActionPannel = ({
+const ActionPanel = ({
   addresses,
   loading,
   ...balanceVariantProps
-}: ActionPannelProps) => {
+}: ActionPanelProps) => {
   const { isMobile } = useResponsiveSize()
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
@@ -89,7 +89,7 @@ const ActionPannel = ({
     )
 
     return !isEmptyArray(balances.filter(isDef))
-  }, [ JSON.stringify(balancesFromStore || {}) ])
+  }, [JSON.stringify(balancesFromStore || {})])
 
   const totalBalance = loading ? (
     <Tooltip
@@ -114,12 +114,12 @@ const ActionPannel = ({
   )
 
   return (
-    <div className={clsx('bs-mb-3', { ['bs-px-3']: isMobile })}>
+    <div
+      className={clsx(styles.ActionPanel, 'bs-mb-3', { ['bs-px-3']: isMobile })}
+    >
       <div className='d-flex align-items-center justify-content-between'>
-        <div
-          className={'d-flex aling-items-center font-weight-bold FontNormal'}
-        >
-          <div className='bs-mr-2 bs-min-w-fit'>{t('general.total')}</div>
+        <div className={styles.TotalBalance}>
+          <div className={styles.TotalBalanceLabel}>{t('general.total')}</div>
           {totalBalance}
         </div>
         <div className={styles.TableActionButtons}>
@@ -189,7 +189,7 @@ const MobileButtons = (props: CommonProps) => {
     <Dropdown
       overlay={<DrowdownOverlay {...props} />}
       placement='bottomLeft'
-      trigger={[ 'click' ]}
+      trigger={['click']}
     >
       <Button shape='circle'>
         <SwitchIcon />
@@ -240,4 +240,4 @@ const DrowdownOverlay = ({
   )
 }
 
-export default ActionPannel
+export default ActionPanel
diff --git a/src/components/table/balancesTable/utils/Index.module.sass b/src/components/table/balancesTable/utils/Index.module.sass
index cae7a4ea..c410ef6e 100644
--- a/src/components/table/balancesTable/utils/Index.module.sass
+++ b/src/components/table/balancesTable/utils/Index.module.sass
@@ -20,7 +20,6 @@
 .IconInLabel
   border-radius: 50%
 
-
 .IconCircle
   text-align: center
   display: flex
@@ -51,7 +50,6 @@
   label
     width: 100%
 
-
 .MobileButtonsOverlay
   @extend .CommonOverlay
   min-width: 200px !important
@@ -80,7 +78,39 @@
   &:hover
     background: transparent
 
+.PnLPositive
+  color: #2EBD85
+
+.PnLNegative
+  color: #F6465D
+
+.TotalBalance
+  display: flex
+  font-weight: bold
+
+  .TotalBalanceLabel
+    margin-right: $space_small
+
 @media ( max-width: $max_mobile_width )
   .PricesWarning
     flex-direction: column
-    align-items: center !important
\ No newline at end of file
+    align-items: center !important
+
+  .TotalBalance
+    flex-direction: column
+    align-items: flex-start
+    gap: $space_small
+    line-height: 1
+    font-size: $font_normal
+  
+
+    .TotalBalanceLabel
+      margin-right: 0
+      color: #94A3B8
+      font-size: 14px
+      font-weight: 400
+
+  .ActionPanel
+    border-bottom: 1px solid #F0F0F0 !important
+    margin-bottom: 1px !important
+    padding-bottom: calc($space_small + 1px)
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 00a94046..66508b1e 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image'
 import styles from './Index.module.sass'
 import clsx from 'clsx'
 import {
-  AppstoreOutlined,
   LineChartOutlined,
   MenuOutlined,
 } from '@ant-design/icons'
@@ -16,6 +15,8 @@ import ChainCentricIcon from '@/assets/icons/chain-centric.svg'
 import store from 'store'
 import { AccountInfoItem } from '@/components/identity/types'
 import { BalanceEntityRecord } from '@/rtk/features/balances/balancesSlice'
+import { usePrices } from '@/rtk/features/prices/pricesHooks'
+import { Tooltip } from 'antd'
 
 export const allowedTokensByNetwork: Record<string, string[]> = {
   statemine: [
@@ -94,12 +95,23 @@ type LabelWithIconProps = {
   iconClassName?: string
 }
 
-export const LabelWithIcon = ({ label, iconSrc, iconSize = 16, iconClassName }: LabelWithIconProps) => {
+export const LabelWithIcon = ({
+  label,
+  iconSrc,
+  iconSize = 16,
+  iconClassName,
+}: LabelWithIconProps) => {
   return (
     <div className={'d-flex align-items-center'}>
       <div className={clsx(styles.IconCircle, iconClassName, 'bs-mr-2')}>
         {typeof iconSrc === 'string' ? (
-          <Image src={iconSrc} alt='' className={styles.IconInLabel} height={iconSize} width={iconSize} />
+          <Image
+            src={iconSrc}
+            alt=''
+            className={styles.IconInLabel}
+            height={iconSize}
+            width={iconSize}
+          />
         ) : (
           iconSrc
         )}
@@ -136,15 +148,6 @@ export const balancesViewOpt = [
     ),
     key: 'table',
   },
-  {
-    label: (
-      <LabelWithIcon
-        iconSrc={<AppstoreOutlined width={16} />}
-        label={'Cards'}
-      />
-    ),
-    key: 'cards',
-  },
   {
     label: (
       <LabelWithIcon
@@ -219,3 +222,120 @@ export const createFieldSkeletons = (data?: BalancesTableInfo[]) => {
     return item
   })
 }
+
+export const getPriceDataBySymbol = (symbol: string, pricesData?: any[]) => {
+  return pricesData?.find(
+    (item) => item.symbol.toLowerCase() === symbol.toLowerCase()
+  )
+}
+
+type CalculatePnlProps = {
+  pricesData?: any[]
+  balanceValue: BN
+  symbol: string
+}
+
+export const calculatePnlInTokens = ({
+  pricesData,
+  balanceValue,
+  symbol,
+}: CalculatePnlProps) => {
+  const priceData = getPriceDataBySymbol(symbol, pricesData)
+
+  if (!priceData) return
+
+  const { current_price, price_change_percentage_24h } = priceData
+
+  const priceChange24h = new BN(price_change_percentage_24h)
+
+  const price24hAgo = new BN(current_price).dividedBy(
+    new BN(1).plus(priceChange24h.dividedBy(100))
+  )
+
+  const balance24hAgo = balanceValue.multipliedBy(price24hAgo)
+  const currentBalance = balanceValue.multipliedBy(current_price)
+
+  const pnl = currentBalance.minus(balance24hAgo)
+
+  if (pnl.isZero()) return null
+
+  return { pnlBN: pnl, pnlString: pnl.abs().toFixed(4) }
+}
+
+const getPnlClassName = (value: BN) =>
+  styles[`PnL${value.isPositive() ? 'Positive' : 'Negative'}`]
+
+type PnlDataProps = {
+  symbol: string
+  balanceValue: BN
+  className?: string
+}
+
+export const PnlInDollars = ({
+  symbol,
+  balanceValue,
+  className,
+}: PnlDataProps) => {
+  const prices = usePrices()
+
+  const pnlData = calculatePnlInTokens({
+    pricesData: prices,
+    balanceValue,
+    symbol,
+  })
+
+  if (!pnlData) return null
+
+  const { pnlBN, pnlString } = pnlData
+
+  const sign = pnlBN.isPositive() ? '+' : '-'
+
+  return (
+    <Tooltip
+      title='The change in the value of these tokens in the last 24 hours'
+      className='d-flex align-items-center justify-content-end'
+    >
+      <span
+        className={clsx(getPnlClassName(pnlBN), className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {sign}${pnlString}
+      </span>
+    </Tooltip>
+  )
+}
+
+type PriceChangesProps = {
+  symbol: string
+  className?: string
+}
+
+export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
+  const prices = usePrices()
+
+  const priceData = getPriceDataBySymbol(symbol, prices)
+
+  if (!priceData) return null
+
+  const { price_change_percentage_24h } = priceData
+  const priceChange24h = new BN(price_change_percentage_24h)
+
+  const priceChange24hString = priceChange24h.abs().toFixed(4)
+
+  const sign = priceChange24h.isPositive() ? '+' : '-'
+
+  return (
+    <Tooltip
+      title='How much the price of this token has changed in the last 24 hours'
+      className='d-flex align-items-center justify-content-end'
+    >
+      <span
+        className={clsx(getPnlClassName(priceChange24h), className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {sign}
+        {priceChange24hString}%
+      </span>
+    </Tooltip>
+  )
+}
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
new file mode 100644
index 00000000..eafed003
--- /dev/null
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -0,0 +1,211 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.CardWrapper
+  display: flex
+  flex-direction: column
+
+.Card
+  background: white
+  padding: $space_small $space_normal
+  display: flex
+  align-items: start
+
+.RowTitle
+  font-size: 15px
+  font-weight: 600
+  line-height: 1
+
+.RowDesc
+  font-size: 12px
+  font-weight: 400
+  line-height: 24px
+
+.TokenBalance
+  font-size: 15px
+  font-weight: 500
+  line-height: 1
+
+.BalanceInDollars
+  font-size: 12px
+  font-weight: 400
+  line-height: 1
+  color: $color_gray
+
+.TokenDecimals
+  font-size: 12px !important
+  font-weight: 400 !important
+  color: #222 !important
+
+.BalanceInfo
+  width: 100%
+  display: flex
+  flex-direction: column
+  gap: $space_small
+
+.TopPart
+  display: flex
+  justify-content: space-between
+  align-items: center
+  gap: $space_tiny
+
+.TopPartBlock
+  display: flex
+  flex-direction: column
+  gap: 10px
+
+  span
+    line-height: 1
+
+.BottomPart
+  display: flex
+  flex-direction: column
+  gap: $space_tiny
+  font-size: 12px
+
+  button
+    display: flex
+    align-items: center
+    gap: 2px
+
+    background: #F8FAFC !important
+    color: #94A3B8 !important
+    border: none !important
+    font-size: 12px
+    line-height: 1
+    border-radius: 6px !important
+    padding: 2px 2px 2px 6px !important
+
+    svg
+      font-size: 14px !important
+
+.LinksButton
+  align-self: center
+  max-width: 30px
+  width: 100%
+  display: flex
+  justify-content: flex-end
+
+  button
+    padding: 3px !important
+    align-items: center
+    display: flex
+    min-width: 22px !important
+    height: 22px
+    width: 22px
+
+    \:global .anticon
+      vertical-align: 0 !important
+
+    svg
+      width: 100%
+
+.CollapseWrapper
+  display: grid
+  width: 100%
+  grid-template-rows: 0fr
+  transition: grid-template-rows 0.3s ease-out, padding-top 0.3s ease-out
+
+.OpenCollapse
+  padding-top: $space_small
+  grid-template-rows: 1fr
+
+.ChildrenBalances
+  width: 100%
+  overflow: hidden
+
+.ArrowRight
+  transition: transform 0.3s ease-out
+
+.RotateArrow
+  transform: rotate(-90deg)
+
+.CardDivider
+  padding: 0 $space_normal
+  display: flex
+  width: 100%
+  justify-content: flex-end
+
+  \:global .ant-divider
+    margin: 0
+    min-width: 100%
+    width: 100%
+    transition: width 0.3s ease-out, min-width 0.3s ease-out
+
+    border-color: #F0F0F0
+
+.DividerOpenState
+  \:global .ant-divider
+    margin: 0
+    min-width: 92%
+    width: 92%
+
+// ----- children balances --------
+
+.InnerChildrenWrapper
+  display: flex
+  flex-direction: column
+
+.ChildrenWrapper
+  display: flex
+  flex-direction: column
+  gap: $space_small
+
+.ChildrenRow
+  width: 100%
+  display: flex
+  padding-right: $space_normal
+
+.ChildrenRowContent
+  display: flex
+  justify-content: space-between
+  align-items: flex-start
+  gap: $space_tiny
+  width: 100%
+
+.ChildrenBalancesBlock
+  display: flex
+  flex-direction: column
+  align-items: flex-end
+  gap: 10px
+
+  span
+    line-height: 1
+
+.InnerCardDivider
+  padding: $space_small $space_normal 0 $space_normal
+
+  \:global .ant-divider
+    margin: 0
+
+.ChainName
+  font-size: 15px !important
+  font-weight: 500 !important
+
+  \:global .account-address
+    font-size: 12px !important
+    font-weight: 400 !important
+    line-height: 24px !important
+
+.DetailedBalances
+  font-size: 12px !important
+  font-weight: 400 !important
+  line-height: 24px
+  color: $color_gray
+
+.ChidrenChainName
+
+  div:first-child
+    margin-left: 0px !important
+
+.CollapseButton
+  color: $color_gray_icon
+  font-size: 18px !important
+  display: flex
+  justify-content: flex-end
+
+  .InnerCollapseButton
+    // padding-right: 9px
+
+  svg
+    justify-self: center
+    margin-top: 4px
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
new file mode 100644
index 00000000..2764a8d9
--- /dev/null
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -0,0 +1,346 @@
+import { TableInfo } from '../types'
+import styles from './BalancesCard.module.sass'
+import { isEmptyArray } from '@subsocial/utils'
+import clsx from 'clsx'
+import React, { useState } from 'react'
+import { AvatarOrSkeleton, Address } from '../utils'
+import { BalanceView } from '@/components/homePage/address-views/utils'
+import { Button, Divider } from 'antd'
+import { NetworksIcons } from '../balancesTable/parseData/parseTokenCentricView'
+import { MdKeyboardArrowRight } from 'react-icons/md'
+import { useTableContext } from '../customTable/TableContext'
+import { useIsMulti } from '@/components/providers/MyExtensionAccountsContext'
+import NoData from '@/components/utils/EmptyList'
+import { PnlInDollars, calculatePnlInTokens } from '../balancesTable/utils'
+import { MutedSpan } from '@/components/utils/MutedText'
+import { usePrices } from '@/rtk/features/prices/pricesHooks'
+
+type BalancesSectionCardProps<T extends TableInfo> = {
+  value: T
+  isLastElement?: boolean
+}
+
+const offsetByIndex = [ 0, 13, 63 ]
+
+const collapseIconOffset = [ 0, 12, 10 ]
+
+const BalancesSectionCard = <T extends TableInfo>({
+  value,
+  isLastElement,
+}: BalancesSectionCardProps<T>) => {
+  const [ open, setOpen ] = useState<boolean>(false)
+  const balanceInfoRef = React.useRef<HTMLDivElement>(null)
+  const prices = usePrices()
+  const level = 0
+
+  const isMulti = useIsMulti()
+
+  const {
+    address,
+    icon,
+    name,
+    symbol,
+    balanceValue,
+    totalValue,
+    children,
+    networkIcons,
+    transferAction,
+    showLinks,
+  } = value
+
+  const pnlData = calculatePnlInTokens({
+    pricesData: prices,
+    balanceValue,
+    symbol,
+  })
+
+  const haveChildren = !!children || !isEmptyArray(children)
+
+  const links = showLinks?.(!isMulti)
+
+  const balanceView = (
+    <BalanceView value={balanceValue} decimalClassName={styles.TokenDecimals} />
+  )
+  const balanceInDollars = (
+    <BalanceView value={totalValue} decimalClassName='GrayText' />
+  )
+
+  const chainPart = (
+    <div className='d-flex align-items-start'>
+      <div className={styles.TopPartBlock}>
+        <span className={clsx(styles.RowTitle, 'font-weight-semibold lh-1')}>
+          {name}
+        </span>
+        <span className={styles.RowDesc}>{symbol}</span>
+      </div>
+    </div>
+  )
+
+  const showBottomPart =
+    !!address ||
+    (networkIcons && !isEmptyArray(networkIcons)) ||
+    !balanceValue.isZero()
+
+  return (
+    <div className={styles.CardWrapper}>
+      <div
+        className={styles.Card}
+        onClick={() => haveChildren && setOpen(!open)}
+      >
+        <AvatarOrSkeleton
+          icon={icon}
+          size={'small'}
+          className='bs-mr-2 align-items-start flex-shrink-none'
+        />
+        <div ref={balanceInfoRef} className={styles.BalanceInfo}>
+          <div className={styles.TopPart}>
+            <div>{chainPart}</div>
+            <div className={clsx(styles.TopPartBlock, 'text-right')}>
+              <span className={styles.TokenBalance}>{balanceView}</span>
+              <span className={styles.BalanceInDollars}>
+                ${balanceInDollars}
+              </span>
+            </div>
+          </div>
+          {showBottomPart && (
+            <div className={styles.BottomPart}>
+              {pnlData && (
+                <div className='d-flex align-items-center justify-content-between lh-1'>
+                  <MutedSpan>PnL 24h</MutedSpan>
+                  <PnlInDollars balanceValue={balanceValue} symbol={symbol} />
+                </div>
+              )}
+
+              <div className='d-flex align-items-center justify-content-between'>
+                {address && (
+                  <Address
+                    accountId={address}
+                    withCopy={!isMulti}
+                    withQr={!isMulti}
+                    halfLength={5}
+                  />
+                )}
+                {networkIcons && !isEmptyArray(networkIcons) && (
+                  <NetworksIcons networkIcons={networkIcons} withCounter />
+                )}
+                {haveChildren && (
+                  <Button size='small'>
+                    Details{' '}
+                    <MdKeyboardArrowRight
+                      className={clsx(styles.ArrowRight, {
+                        [styles.RotateArrow]: open && haveChildren,
+                      })}
+                    />
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className={styles.LinksButton}>{links || transferAction}</div>
+      </div>
+      {!isLastElement && (
+        <div
+          className={clsx(styles.CardDivider, {
+            [styles.DividerOpenState]: haveChildren && open,
+          })}
+        >
+          <Divider />
+        </div>
+      )}
+      <div
+        className={clsx(styles.CollapseWrapper, styles.CollapseWrapperPadding, {
+          [styles.OpenCollapse]: open && haveChildren,
+        })}
+      >
+        <ChildrenBalances
+          childrenBalances={children as T[]}
+          leftOffset={(balanceInfoRef.current as any)?.offsetLeft}
+          className={clsx(styles.ChildrenBalances)}
+          level={level + 1}
+        />
+      </div>
+      {open && haveChildren && (
+        <div className={styles.InnerCardDivider}>
+          <Divider />
+        </div>
+      )}
+    </div>
+  )
+}
+
+type InnerCildrenBalancesProps<T extends TableInfo> = {
+  value: T
+  className?: string
+  leftOffset: number
+  isLastElement?: boolean
+  level: number
+}
+
+const InnerChildrenBalances = <T extends TableInfo>({
+  value,
+  leftOffset,
+  isLastElement,
+  level,
+}: InnerCildrenBalancesProps<T>) => {
+  const [ open, setOpen ] = useState<boolean>(false)
+  const { balancesVariant } = useTableContext()
+
+  const {
+    key,
+    chain,
+    balanceValue,
+    totalValue,
+    symbol,
+    showLinks,
+    children: innerChildren,
+  } = value
+  const childrenRowContentRef = React.useRef<HTMLDivElement>(null)
+  const isMulti = useIsMulti()
+
+  const links = showLinks?.(!isMulti)
+
+  const haveChildren = !!innerChildren || !isEmptyArray(innerChildren)
+
+  const tokenBalance = (
+    <BalanceView value={balanceValue} decimalClassName={styles.TokenDecimals} />
+  )
+
+  const balanceInDollats = (
+    <BalanceView value={totalValue} decimalClassName='GrayText' />
+  )
+
+  const childrenOffsetLeft = childrenRowContentRef.current?.offsetLeft || 0
+
+  let childrenOffset = leftOffset + offsetByIndex[level]
+
+  const isDetailedBalances = key.includes('detailed-balances')
+
+  if (isDetailedBalances) {
+    const chainCentricOffset = isMulti ? 62 : 11
+    const tokenCentricOffset = isMulti ? 31 : 63
+
+    childrenOffset =
+      leftOffset +
+      (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
+  }
+
+  return (
+    <div className={styles.InnerChildrenWrapper}>
+      <div className={styles.ChildrenRow} onClick={() => setOpen(!open)}>
+        <div
+          className={styles.CollapseButton}
+          style={{ width: childrenOffset }}
+        >
+          <div
+            className={styles.InnerCollapseButton}
+            style={{ paddingRight: collapseIconOffset[level] }}
+          >
+            {haveChildren && (
+              <MdKeyboardArrowRight
+                className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
+                  [styles.RotateArrow]: open && haveChildren,
+                })}
+              />
+            )}
+          </div>
+        </div>
+        <div
+          key={key}
+          ref={childrenRowContentRef}
+          className={styles.ChildrenRowContent}
+        >
+          <span
+            className={clsx(styles.ChidrenChainName, {
+              [styles.DetailedBalances]: isDetailedBalances,
+              [styles.ChainName]: !isDetailedBalances
+            })}
+          >
+            {chain || symbol}
+          </span>
+          <div className={styles.ChildrenBalancesBlock}>
+            <span className={styles.TokenBalance}>{tokenBalance}</span>
+            <span className={styles.BalanceInDollars}>${balanceInDollats}</span>
+          </div>
+        </div>
+        <div className={styles.LinksButton}>{links}</div>
+      </div>
+      <div
+        className={clsx(styles.CollapseWrapper, {
+          [styles.OpenCollapse]: open && haveChildren,
+        })}
+      >
+        <ChildrenBalances
+          childrenBalances={innerChildren as T[]}
+          leftOffset={childrenOffsetLeft}
+          className={clsx(styles.ChildrenBalances)}
+          level={level + 1}
+        />
+      </div>
+      {haveChildren && !isLastElement && open && (
+        <div className={clsx(styles.CardDivider, 'mt-3')}>
+          <Divider />
+        </div>
+      )}
+    </div>
+  )
+}
+
+type ChildrenBalancesProps<T extends TableInfo> = {
+  childrenBalances: T[]
+  className?: string
+  leftOffset: number
+  level: number
+}
+
+const ChildrenBalances = <T extends TableInfo>({
+  childrenBalances,
+  className,
+  leftOffset,
+  level,
+}: ChildrenBalancesProps<T>) => {
+  return (
+    <div className={clsx(styles.ChildrenWrapper, className)}>
+      {childrenBalances?.map((children, i) => {
+        return (
+          <InnerChildrenBalances
+            key={i}
+            value={children}
+            leftOffset={leftOffset}
+            className={styles.ChildrenBalances}
+            isLastElement={i === childrenBalances.length - 1}
+            level={level}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+type BalanceCardsProps<T extends TableInfo> = {
+  data: T[]
+  noData: React.ReactNode
+}
+
+const BalancesSectionCards = <T extends TableInfo>({
+  data,
+  noData,
+}: BalanceCardsProps<T>) => {
+  if (isEmptyArray(data)) return <NoData description={noData} />
+
+  return (
+    <div>
+      {data.map((value, index) => {
+        return (
+          <BalancesSectionCard
+            key={index}
+            value={value}
+            isLastElement={index === data.length - 1}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default BalancesSectionCards
diff --git a/src/components/table/customCard/index.tsx b/src/components/table/customCard/index.tsx
index dbf86134..2b042c2e 100644
--- a/src/components/table/customCard/index.tsx
+++ b/src/components/table/customCard/index.tsx
@@ -76,7 +76,8 @@ const CustomCard = <T extends TableInfo>({
     showLinks,
   } = value
 
-  const haveChildren = (!!children || !!cardChildren) || !isEmptyArray(children || cardChildren)
+  const haveChildren =
+    !!children || !!cardChildren || !isEmptyArray(children || cardChildren)
 
   const links = showLinks?.(true)
 
@@ -137,12 +138,14 @@ const CustomCard = <T extends TableInfo>({
             <Divider className={clsx(styles.CardDivider, 'MarginTopTiny')} />
           )}
 
-          {(open && haveChildren) &&
+          {open &&
+            haveChildren &&
             (children ? (
               <ChildrenBalances
                 name={name as string}
                 childrenBalances={children as T[]}
                 level={level + 1}
+                balanceKind={balanceKind}
               />
             ) : (
               <CardAdditionalView {...cardChildren} />
@@ -153,23 +156,27 @@ const CustomCard = <T extends TableInfo>({
   )
 }
 
-type ChildrenBalancesProps<T> = {
+export type ChildrenBalancesProps<T> = {
   name: string
   childrenBalances: T[]
   isSecondLevel?: boolean
   level: number
+  balanceKind: BalanceKind
+  className?: string
 }
 
-const ChildrenBalances = <T extends TableInfo>({
+export const ChildrenBalances = <T extends TableInfo>({
   childrenBalances,
   name,
   isSecondLevel = false,
   level,
+  balanceKind,
+  className
 }: ChildrenBalancesProps<T>) => {
   const { isMobile } = useResponsiveSize()
   const isMulti = useIsMulti()
 
-  const balances = childrenBalances.map((child, index) => {
+  const balances = childrenBalances?.map((child, index) => {
     const isLastElement = index === childrenBalances.length - 1
 
     return (
@@ -182,13 +189,16 @@ const ChildrenBalances = <T extends TableInfo>({
           name={name}
           isMulti={isMulti}
           level={level}
+          balanceKind={balanceKind}
           className={clsx(
             { ['bs-mb-2']: isMobile && isLastElement },
-            isMobile && styles.ChildrenBalanceMargin
+            isMobile &&
+              balanceKind !== 'NativeToken' &&
+              styles.ChildrenBalanceMargin
           )}
         />
 
-        {(isLastElement && isSecondLevel && level !== 3) && (
+        {isLastElement && isSecondLevel && level !== 3 && (
           <Divider className={styles.CardDivider} />
         )}
       </>
@@ -197,7 +207,7 @@ const ChildrenBalances = <T extends TableInfo>({
 
   return (
     <>
-      <div key={name} className={styles.ChildrenBalance}>
+      <div key={name} className={clsx(styles.ChildrenBalance, className)}>
         {balances}
       </div>
     </>
@@ -212,6 +222,7 @@ type InnerChildrenBalancesProps<T> = {
   index: number
   level: number
   className?: string
+  balanceKind: BalanceKind
 }
 
 const balanceColumnClasses =
@@ -223,6 +234,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
   isMobile,
   level,
   className,
+  balanceKind,
 }: InnerChildrenBalancesProps<T>) => {
   const [ open, setOpen ] = useState<boolean>(false)
   const haveChildren = child?.children || child.cardChildren
@@ -279,6 +291,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
             childrenBalances={haveChildren as T[]}
             isSecondLevel
             level={level + 1}
+            balanceKind={balanceKind}
           />
         ) : (
           <CardAdditionalView {...child.cardChildren} />
diff --git a/src/components/table/customTable/TableContext.tsx b/src/components/table/customTable/TableContext.tsx
index 180fdb6e..b2027a39 100644
--- a/src/components/table/customTable/TableContext.tsx
+++ b/src/components/table/customTable/TableContext.tsx
@@ -1,13 +1,16 @@
-import { createContext, useContext, useState } from 'react'
-import { useResponsiveSize } from 'src/components/responsive'
+import { createContext, useContext, useEffect, useState } from 'react'
 import { TableView } from '../types'
 import store from 'store'
+import { BalanceVariant } from './types'
+import { BALANCE_TABLE_VARIANT } from '../utils'
 
 export type TableContextState = {
   tableView: TableView
   setTableView: (tableView: TableView) => void
   showZeroBalances: boolean
   setShowZeroBalances: (showZeroBalances: boolean) => void
+  balancesVariant: BalanceVariant
+  setBalancesVariant: (balancesVariant: BalanceVariant) => void
 }
 
 type TableContextProps = {
@@ -21,26 +24,40 @@ export const TableContextWrapper: React.FC<TableContextProps> = ({
   children,
   ...props
 }) => {
-  const { isMobile } = useResponsiveSize()
   const { storeShowZeroBalance, storeTableView } = props
 
   const tableViewFromStorage = store.get(storeTableView)
   const showZeroBalancesFromStorage = store.get(storeShowZeroBalance)
+  const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
 
-  const [ tableView, setTableView ] = useState<TableView>(
-    isMobile ? 'cards' : tableViewFromStorage || 'table'
+  const [tableView, setTableView] = useState<TableView>(
+    !tableViewFromStorage || tableViewFromStorage === 'cards'
+      ? 'table'
+      : tableViewFromStorage
   )
-  const [ showZeroBalances, setShowZeroBalances ] = useState<boolean>(
+  const [showZeroBalances, setShowZeroBalances] = useState<boolean>(
     showZeroBalancesFromStorage !== undefined
       ? showZeroBalancesFromStorage
       : true
   )
 
+  const [balancesVariant, setBalancesVariant] = useState<BalanceVariant>(
+    tableVariantFromStore || 'chains'
+  )
+
+  useEffect(() => {
+    if (!tableViewFromStorage || tableViewFromStorage === 'cards') {
+      store.set(storeTableView, 'table')
+    }
+  }, [tableViewFromStorage])
+
   const value = {
     tableView,
     setTableView,
     showZeroBalances,
     setShowZeroBalances,
+    balancesVariant,
+    setBalancesVariant,
   }
 
   return <TableContext.Provider value={value}>{children}</TableContext.Provider>
diff --git a/src/components/table/links/Links.tsx b/src/components/table/links/Links.tsx
index d82cfe6f..0c057ef2 100644
--- a/src/components/table/links/Links.tsx
+++ b/src/components/table/links/Links.tsx
@@ -2,7 +2,6 @@ import { LinkWithIcon } from '../utils'
 import { linksByNetworks, NetworkLinks } from '.'
 import { Menu, Dropdown, Button, Divider } from 'antd'
 import { useCurrentAccount } from '../../providers/MyExtensionAccountsContext'
-import { MoreOutlined } from '@ant-design/icons'
 import styles from './Links.module.sass'
 import { isDef } from '@subsocial/utils'
 import clsx from 'clsx'
@@ -17,6 +16,7 @@ import {
 } from './utils'
 import { SubIcon } from 'src/components/utils'
 import { AiFillAppstore } from 'react-icons/ai'
+import { LuMoreVertical } from 'react-icons/lu'
 
 type LinkButtonsOverlayProps = {
   network: string
@@ -203,7 +203,7 @@ export const LinksButton = ({
         ghost
         onClick={onMoreButtonClick}
       >
-        <MoreOutlined />
+        <LuMoreVertical className='GrayIcon' />
       </Button>
     </Dropdown>
   )
diff --git a/src/components/table/types.ts b/src/components/table/types.ts
index a5a6fb84..5d582d22 100644
--- a/src/components/table/types.ts
+++ b/src/components/table/types.ts
@@ -40,12 +40,13 @@ export type CommonTableInfo = {
   icon: string | JSX.Element
 
   key: string
-  chain: React.ReactNode
+  chain?: React.ReactNode
 
   balance: React.ReactNode
   balanceValue: BN
 
   price: React.ReactNode
+  symbol: string
 
   total: React.ReactNode
   totalValue: BN
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index 4c834122..845dd7e4 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -54,6 +54,7 @@ import {
 } from '../../rtk/features/identities/identitiesHooks'
 import { BIGNUMBER_ZERO } from '../../config/app/consts'
 import { useSendEvent } from '../providers/AnalyticContext'
+import BalancesSectionCards from './customCard/BalancesSectionCard'
 
 export const BALANCE_TABLE_VIEW = 'BalanceTableView'
 export const BALANCE_TABLE_VARIANT = 'BalanceTableVariant'
@@ -341,6 +342,19 @@ export const BalancePart = <T extends TableInfo>({
   if (isEmptyArray(tableData) && loading)
     return <TableLoading loadingLabel={loadingLabel} />
 
+  if (isMobile) {
+    return balanceKind === 'NativeToken' ? (
+      <BalancesSectionCards data={tableData || []} noData={noData} />
+    ) : (
+      <BalanceCards
+        data={tableData || []}
+        balanceKind={balanceKind}
+        isMobile={isMobile}
+        noData={noData}
+      />
+    )
+  }
+
   switch (tableView) {
     case 'table':
       return (
@@ -364,10 +378,10 @@ export const BalancePart = <T extends TableInfo>({
       )
     default:
       return (
-        <BalanceCards
-          data={tableData || []}
-          balanceKind={balanceKind}
-          isMobile={isMobile}
+        <InnerBalancesTable
+          loading={loading}
+          columns={columns}
+          tableData={tableData}
           noData={noData}
         />
       )
@@ -382,6 +396,7 @@ type ChainProps = {
   icon: string | JSX.Element
   name?: string
   isShortAddress?: boolean
+  withIcon?: boolean
   withCopy?: boolean
   avatarSize?: AvatarSize
   halfLength?: number
@@ -441,6 +456,7 @@ export const ChainData = ({
   withCopy = true,
   halfLength = 6,
   isMonosizedFont = true,
+  withIcon = true,
   withQr = true,
   isBoldName = true,
   desc,
@@ -464,17 +480,19 @@ export const ChainData = ({
   return (
     <div className={clsx({ ['d-flex']: !isMobile }, 'align-items-center')}>
       <div className='d-flex align-items-center'>
-        <AvatarOrSkeleton
-          icon={icon}
-          size={avatarSize}
-          className='bs-mr-2 align-items-start flex-shrink-none'
-        />
+        {withIcon && (
+          <AvatarOrSkeleton
+            icon={icon}
+            size={avatarSize}
+            className='bs-mr-2 align-items-start flex-shrink-none'
+          />
+        )}
         <div>
           {name && (
             <div
               className={clsx(
-                { ['font-weight-bold']: isBoldName },
-                'FontNormal'
+                styles.RowTitle,
+                { [styles.RowTitleBold]: isBoldName },
               )}
             >
               {name}
@@ -728,7 +746,7 @@ export const Address = ({
       )}
       {withQr && (
         <AddressQrModal
-          className='grey-light'
+          className='GrayIcon'
           address={accountId}
           network={name}
         />
@@ -770,7 +788,7 @@ export const AccountPreview = ({
   largeAvatar = false,
   eventSource,
   nameClassName,
-  identityLoadNotRequired
+  identityLoadNotRequired,
 }: AccountPreviewProps) => {
   useFetchIdentities([ account ], identityLoadNotRequired)
   const identities = useIdentities(account)
@@ -812,10 +830,10 @@ export const AccountPreview = ({
           />
         )}
         <div>
-          <div className={clsx({ ['font-weight-bold']: withName })}>
+          <div className={clsx({ [styles.RowTitleBold]: withName })}>
             {withName && accountName}
           </div>
-          {withAddress && <div>{address}</div>}
+          {withAddress && <div className='account-address'>{address}</div>}
         </div>
       </div>
     </div>
@@ -829,6 +847,7 @@ export const getParentBalances = <T extends TableInfo>(
 ) => {
   let balanceValueBN = BIGNUMBER_ZERO
   let totalValueBN = BIGNUMBER_ZERO
+  let totalTokensValueBN = BIGNUMBER_ZERO
   let priceValue
   let decimals = balances[0]?.decimals || 0
 
@@ -836,7 +855,9 @@ export const getParentBalances = <T extends TableInfo>(
     .filter(isDef)
     .forEach(({ balanceValue, totalValue, totalTokensValue, price }) => {
       balanceValueBN = balanceValueBN.plus(balanceValue)
-      totalValueBN = totalValueBN.plus(totalTokensValue || totalValue)
+      totalValueBN = totalValueBN.plus(totalValue)
+      totalTokensValueBN = totalTokensValueBN.plus(totalTokensValue || 0)
+
       priceValue = price
     })
 
@@ -856,6 +877,7 @@ export const getParentBalances = <T extends TableInfo>(
     priceValue,
     balance,
     total,
+    totalTokensValueBN,
   }
 }
 
diff --git a/src/components/utils/MutedText.tsx b/src/components/utils/MutedText.tsx
index 5e44f9fc..bf3c256c 100644
--- a/src/components/utils/MutedText.tsx
+++ b/src/components/utils/MutedText.tsx
@@ -9,7 +9,7 @@ type Props = React.PropsWithChildren<{
 
 function getClassNames (props: Props): string {
   const { smaller = false, className } = props
-  return `MutedText grey text ${smaller ? 'smaller' : ''} ${className}`
+  return `GrayText text ${smaller ? 'smaller' : ''} ${className}`
 }
 
 export const MutedSpan = (props: Props) => {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 93fd3fdd..70c19513 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -344,8 +344,8 @@
   "table": {
     "balances": {
       "frozen": "Frozen",
-      "locked": "Locked balance",
-      "reserved": "Reserved balance",
+      "locked": "Locked",
+      "reserved": "Reserved",
       "free": "Transferable",
       "title": "Balances",
       "loading": "Loading account balances...",
diff --git a/src/styles/bootstrap-utilities-4.3.1.css b/src/styles/bootstrap-utilities-4.3.1.css
index 5bc79842..70baf277 100644
--- a/src/styles/bootstrap-utilities-4.3.1.css
+++ b/src/styles/bootstrap-utilities-4.3.1.css
@@ -237,6 +237,10 @@
   min-width: fit-content !important;
 }
 
+.w-fit {
+  width: fit-content !important;
+}
+
 .h-25 {
   height: 25% !important;
 }
diff --git a/src/styles/subsocial-vars.scss b/src/styles/subsocial-vars.scss
index 8a329ac5..5ba07fe1 100644
--- a/src/styles/subsocial-vars.scss
+++ b/src/styles/subsocial-vars.scss
@@ -35,6 +35,8 @@ $color_warn_border: #f3e8ac;
 $color_volcano: #fa541c;
 $color_gold: #faad14;
 $color_hover_selectable_bg: #fff0f6;
+$color_gray: #64748B;
+$color_gray_icon: #94A3B8;
 $color_green: #4bb543;
 $color_blue: #0099f4;
 $color_white: #fff;
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
index 4150ddaf..030a2960 100644
--- a/src/styles/subsocial.scss
+++ b/src/styles/subsocial.scss
@@ -2477,4 +2477,12 @@ hr {
     margin-bottom: 0 !important;
     // padding-top: $space_normal;
   }
+}
+
+.GrayText {
+  color: $color_gray;
+}
+
+.GrayIcon {
+  color: $color_gray_icon;
 }
\ No newline at end of file