diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
index 9e994e5222e2..18854f54afee 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
@@ -5,7 +5,6 @@ import {
     ChainId,
     ERC721ContractDetailed,
     ERC721TokenDetailed,
-    formatEthereumAddress,
     isSameAddress,
     NonFungibleAssetProvider,
     SocketState,
@@ -22,6 +21,7 @@ import { WalletMessages } from '@masknet/plugin-wallet'
 import { CollectionIcon } from './CollectionIcon'
 import { uniqBy } from 'lodash-unified'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { ReverseAddress } from '@masknet/shared'
 
 export const CollectibleContext = createContext<{
     collectiblesRetry: () => void
@@ -301,7 +301,7 @@ export function CollectionList({
                                 className={classes.button}
                                 variant="outlined"
                                 size="small">
-                                {formatEthereumAddress(addressName.label, 5)}
+                                <ReverseAddress address={addressName.resolvedAddress} addressSize={5} />
                                 <KeyboardArrowDownIcon />
                             </Button>
                         </Box>
@@ -330,7 +330,7 @@ export function CollectionList({
                 </Stack>
                 <Box display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
                     <Button onClick={onSelectAddress} className={classes.button} variant="outlined" size="small">
-                        {formatEthereumAddress(addressName.label, 5)}
+                        <ReverseAddress address={addressName.resolvedAddress} addressSize={5} />
                         <KeyboardArrowDownIcon />
                     </Button>
                 </Box>
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
index b0082df47dfd..8ed966851826 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -17,6 +17,7 @@ import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 import { AddNFT } from './AddNFT'
 import { NFTImage } from './NFTImage'
 import { useAccount, useWeb3State } from '@masknet/plugin-infra'
+import { ReverseAddress } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -142,7 +143,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
                     </Typography>
                     {account ? (
                         <Typography variant="body1" color="textPrimary" className={classes.account}>
-                            {t('nft_wallet_label')}: {Utils?.formatAddress?.(account, 4) || account}
+                            {t('nft_wallet_label')}: <ReverseAddress address={account} addressSize={4} />
                             {!hideWallet ? (
                                 <Button
                                     variant="text"
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
index 3a996b6fd863..649c8cda1665 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
@@ -4,7 +4,7 @@ import { MenuItem } from '@mui/material'
 import type { AddressName } from '@masknet/web3-shared-evm'
 import { CollectionList } from '../../../extension/options-page/DashboardComponents/CollectibleList'
 import { first, uniqBy } from 'lodash-unified'
-import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { ReverseAddress } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -71,7 +71,7 @@ export function NFTPage(props: NFTPageProps) {
                 {uniqBy(addressNames ?? [], (x) => x.resolvedAddress.toLowerCase()).map((x) => {
                     return (
                         <MenuItem key={x.resolvedAddress} value={x.resolvedAddress} onClick={() => onSelect(x)}>
-                            {formatEthereumAddress(x.label, 5)}
+                            <ReverseAddress address={x.resolvedAddress} addressSize={5} />
                         </MenuItem>
                     )
                 })}
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 97434bd7a67c..f2a4402709ae 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@dimensiondev/holoflows-kit": "^0.9.0-20210902104757-7c3d0d0",
     "@masknet/icons": "workspace:*",
+    "@masknet/plugin-infra": "workspace:*",
     "@masknet/shared-base": "workspace:*",
     "@masknet/theme": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
diff --git a/packages/shared/src/UI/components/ReverseAddress/index.tsx b/packages/shared/src/UI/components/ReverseAddress/index.tsx
new file mode 100644
index 000000000000..95fd5ba26e99
--- /dev/null
+++ b/packages/shared/src/UI/components/ReverseAddress/index.tsx
@@ -0,0 +1,18 @@
+import { memo } from 'react'
+import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra'
+
+interface ReverseAddressProps {
+    address: string
+    pluginId?: NetworkPluginID
+    domainSize?: number
+    addressSize?: number
+}
+
+export const ReverseAddress = memo<ReverseAddressProps>(({ address, pluginId, domainSize, addressSize }) => {
+    const { value: domain } = useReverseAddress(address, pluginId)
+    const { Utils } = useWeb3State(pluginId)
+
+    if (!domain || !Utils?.formatDomainName) return <>{Utils?.formatAddress?.(address, addressSize) ?? address}</>
+
+    return <>{Utils.formatDomainName(domain, domainSize)}</>
+})
diff --git a/packages/shared/src/UI/components/index.ts b/packages/shared/src/UI/components/index.ts
index 0b27e040b719..67b00cd5a88d 100644
--- a/packages/shared/src/UI/components/index.ts
+++ b/packages/shared/src/UI/components/index.ts
@@ -12,3 +12,4 @@ export * from './AddressViewer'
 export * from './I18NextProviderHMR'
 export * from './AssetPlayer'
 export * from './NFTCardStyledAssetPlayer'
+export * from './ReverseAddress'
diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json
index 9c37d1905d8c..49d1a5a6cdf3 100644
--- a/packages/shared/tsconfig.json
+++ b/packages/shared/tsconfig.json
@@ -10,6 +10,8 @@
     { "path": "../web3-shared/evm" },
     { "path": "../theme" },
     { "path": "../shared-base" },
-    { "path": "../icons" }
+    { "path": "../shared-base-ui" },
+    { "path": "../icons" },
+    { "path": "../plugin-infra" }
   ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 33edf9626f20..5d109bb2cfa0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -965,6 +965,7 @@ importers:
     specifiers:
       '@dimensiondev/holoflows-kit': ^0.9.0-20210902104757-7c3d0d0
       '@masknet/icons': workspace:*
+      '@masknet/plugin-infra': workspace:*
       '@masknet/shared-base': workspace:*
       '@masknet/theme': workspace:*
       '@masknet/web3-shared-base': workspace:*
@@ -983,6 +984,7 @@ importers:
     dependencies:
       '@dimensiondev/holoflows-kit': 0.9.0-20210902104757-7c3d0d0
       '@masknet/icons': link:../icons
+      '@masknet/plugin-infra': link:../plugin-infra
       '@masknet/shared-base': link:../shared-base
       '@masknet/theme': link:../theme
       '@masknet/web3-shared-base': link:../web3-shared/base