diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx
index d93330ba10b8..90ba18321f86 100644
--- a/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx
@@ -4,7 +4,7 @@ import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { CollectiblePlaceholder } from '../CollectiblePlaceHolder'
 import { useHoverDirty } from 'react-use'
 import { useDashboardI18N } from '../../../../locales'
-import { WalletIcon } from '@masknet/shared'
+import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { ChangeNetworkTip } from '../FungibleTokenTableRow/ChangeNetworkTip'
 import { useNetworkDescriptor, useWeb3State, Web3Plugin } from '@masknet/plugin-infra'
 
@@ -29,7 +29,9 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
         overflow: 'hidden',
     },
-    imgContainer: {
+    mediaContainer: {
+        position: 'absolute',
+        zIndex: 1,
         width: '100%',
         height: 186,
         backgroundColor: theme.palette.mode === 'dark' ? MaskColorVar.lineLight : '#f6f6f7',
@@ -50,6 +52,7 @@ const useStyles = makeStyles()((theme) => ({
         top: 8,
         height: 20,
         width: 20,
+        zIndex: 20,
     },
     tip: {
         padding: theme.spacing(1),
@@ -58,15 +61,40 @@ const useStyles = makeStyles()((theme) => ({
     tipArrow: {
         color: '#111432',
     },
+    loadingFailImage: {
+        minHeight: '0px !important',
+        maxWidth: 'none',
+        transform: 'translateY(10px)',
+        width: 64,
+        height: 64,
+    },
+    wrapper: {
+        width: '100%',
+        minWidth: 140,
+        height: '100%',
+        minHeight: 186,
+    },
+    linkWrapper: {
+        position: 'relative',
+        width: 140,
+        height: 186,
+    },
+    blocker: {
+        position: 'absolute',
+        zIndex: 2,
+        width: 140,
+        height: 186,
+    },
 }))
 
 export interface CollectibleCardProps {
     chainId: number
     token: Web3Plugin.NonFungibleToken
     onSend(): void
+    renderOrder: number
 }
 
-export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onSend }) => {
+export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onSend, renderOrder }) => {
     const t = useDashboardI18N()
     const { Utils } = useWeb3State()
     const { classes } = useStyles()
@@ -90,6 +118,7 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
                     <Link
                         target="_blank"
                         rel="noopener noreferrer"
+                        className={classes.linkWrapper}
                         href={
                             Utils?.resolveNonFungibleTokenLink?.(
                                 token.contract?.chainId,
@@ -97,10 +126,18 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
                                 token.tokenId,
                             ) ?? '#'
                         }>
-                        <div className={classes.imgContainer}>
-                            <img
-                                src={token.metadata.assetURL || token.metadata.iconURL}
-                                style={{ objectFit: 'contain', width: '100%', height: '100%' }}
+                        <div className={classes.blocker} />
+                        <div className={classes.mediaContainer}>
+                            <NFTCardStyledAssetPlayer
+                                contractAddress={token.contract.address}
+                                chainId={token.contract.chainId}
+                                renderOrder={renderOrder}
+                                url={token.metadata.assetURL || token.metadata.iconURL}
+                                tokenId={token.tokenId}
+                                classes={{
+                                    loadingFailImage: classes.loadingFailImage,
+                                    wrapper: classes.wrapper,
+                                }}
                             />
                         </div>
                     </Link>
diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
index 0441a890108a..3e658d457ce4 100644
--- a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
@@ -151,11 +151,12 @@ export const CollectibleListUI = memo<CollectibleListUIProps>(
                 ) : (
                     <Box>
                         <div className={classes.root}>
-                            {dataSource.map((x) => (
-                                <div className={classes.card} key={x.id}>
+                            {dataSource.map((x, index) => (
+                                <div className={classes.card} key={index}>
                                     <CollectibleCard
                                         chainId={chainId}
                                         token={x}
+                                        renderOrder={index}
                                         // TODO: transfer not support multi chain, should remove is after supported
                                         onSend={() => onSend(x as unknown as any)}
                                     />
@@ -164,6 +165,7 @@ export const CollectibleListUI = memo<CollectibleListUIProps>(
                         </div>
                     </Box>
                 )}
+
                 {showPagination ? (
                     <Box className={classes.footer}>
                         <TablePagination
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx
index 3cffd817306e..d295e34da6cf 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx
@@ -2,7 +2,8 @@ import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { memo, useMemo, useState } from 'react'
 import { Checkbox, ImageListItem, ImageListItemBar, Box } from '@mui/material'
 import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme'
-import { MiniMaskIcon, CheckedBorderIcon, CheckedIcon } from '@masknet/icons'
+import { CheckedBorderIcon, CheckedIcon } from '@masknet/icons'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 
 const useStyles = makeStyles()({
     card: {
@@ -39,19 +40,36 @@ const useStyles = makeStyles()({
         padding: 0,
         lineHeight: '16px',
     },
+    wrapper: {
+        borderTopRightRadius: '12px',
+        borderTopLeftRadius: '12px',
+        width: '140px !important',
+        height: '186px !important',
+    },
+    loadingPlaceholder: {
+        width: '140px !important',
+        height: '186px !important',
+    },
+    loadingFailImage: {
+        minHeight: '0px !important',
+        maxWidth: 'none',
+        transform: 'translateY(10px)',
+        width: 64,
+        height: 64,
+    },
 })
 
 export interface NFTCardProps {
     token: ERC721TokenDetailed
     selectedTokenId: string
     onSelect(tokenId: string): void
+    renderOrder: number
 }
 
-export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect }) => {
+export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect, renderOrder }) => {
     const { classes } = useStyles()
-    const [loadFailed, setLoadFailed] = useState(false)
     const [checked, setChecked] = useState(!!selectedTokenId && selectedTokenId === token.tokenId)
-
+    const [name, setName] = useState(token.tokenId)
     const isDisabled = useMemo(
         () => !!selectedTokenId && selectedTokenId !== token.tokenId,
         [selectedTokenId, token.tokenId],
@@ -68,11 +86,11 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect })
                     background: (theme) => (theme.palette.mode === 'dark' ? MaskColorVar.primaryBackground : '#F9F9FA'),
                 }}
                 classes={{ titleWrap: classes.barTitle }}
-                subtitle={<span>{token.info.name || token.tokenId}</span>}
+                subtitle={<span>{name}</span>}
                 position="below"
             />
         )
-    }, [token.info.name, token.tokenId])
+    }, [name])
 
     return (
         <ImageListItem
@@ -84,19 +102,18 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect })
                 background: (theme) => (theme.palette.mode === 'dark' ? getMaskColor(theme).white : '#F9F9FA'),
             }}
             className={isDisabled ? classes.disabled : ''}>
-            {loadFailed || !token.info.mediaUrl ? (
-                <div className={classes.container}>
-                    <div className={classes.placeholder}>
-                        <MiniMaskIcon viewBox="0 0 48 48" sx={{ fontSize: 48 }} />
-                    </div>
-                </div>
-            ) : (
-                <img
-                    onError={() => setLoadFailed(true)}
-                    src={token.info.mediaUrl}
-                    style={{ width: '100%', height: '100%', borderRadius: '8px 8px 0px 0px', objectFit: 'cover' }}
-                />
-            )}
+            <NFTCardStyledAssetPlayer
+                contractAddress={token.contractDetailed.address}
+                chainId={token.contractDetailed.chainId}
+                tokenId={token.tokenId}
+                setERC721TokenName={setName}
+                renderOrder={renderOrder}
+                classes={{
+                    loadingFailImage: classes.loadingFailImage,
+                    loadingPlaceholder: classes.loadingPlaceholder,
+                    wrapper: classes.wrapper,
+                }}
+            />
             {NFTNameBar}
             <Box className={classes.checkbox}>
                 <Checkbox
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx
index b6f22d309e33..2dc7444bc261 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx
@@ -59,8 +59,14 @@ export const SelectNFTList = memo<SelectNFTListProps>(({ list, onSelect, selecte
                 gap={12}
                 rowHeight={186}
                 sx={{ width: '100%', height: 'auto', maxHeight: '400px', p: 2, pb: 0.5 }}>
-                {list.map((token) => (
-                    <NFTCard key={token.tokenId} token={token} selectedTokenId={selectedTokenId} onSelect={onSelect} />
+                {list.map((token, index) => (
+                    <NFTCard
+                        key={token.tokenId}
+                        token={token}
+                        selectedTokenId={selectedTokenId}
+                        onSelect={onSelect}
+                        renderOrder={index}
+                    />
                 ))}
                 {renderStatus}
             </ImageList>
diff --git a/packages/icons/brands/MaskPlaceholder.tsx b/packages/icons/brands/MaskPlaceholder.tsx
new file mode 100644
index 000000000000..39b7570cf014
--- /dev/null
+++ b/packages/icons/brands/MaskPlaceholder.tsx
@@ -0,0 +1,33 @@
+import { createPaletteAwareIcon } from '../utils'
+
+export const MaskPlaceholder = createPaletteAwareIcon(
+    'MaskPlaceholder',
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#CFD9DE" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.5 13.917v5.833H10.247a7.936 7.936 0 0 0 14.861 1.75H28.5v4.9a2.1 2.1 0 0 1-2.1 2.1H9.6a2.1 2.1 0 0 1-2.1-2.1V13.917h21ZM23.094 21.5a6.177 6.177 0 0 1-5.107 2.697 6.177 6.177 0 0 1-5.108-2.697h10.215Zm-9.586-6.183a3.267 3.267 0 0 0-3.233 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.234-2.8Zm8.984 0a3.267 3.267 0 0 0-3.234 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.233-2.8ZM26.4 7.5c1.16 0 2.1.94 2.1 2.1v2.567h-21V9.6c0-1.16.94-2.1 2.1-2.1h16.8Z"
+            fill="#fff"
+        />
+    </g>,
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#2F3336" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.5 13.917v5.833H10.247a7.936 7.936 0 0 0 14.861 1.75H28.5v4.9a2.1 2.1 0 0 1-2.1 2.1H9.6a2.1 2.1 0 0 1-2.1-2.1V13.917h21ZM23.094 21.5a6.177 6.177 0 0 1-5.107 2.697 6.177 6.177 0 0 1-5.108-2.697h10.215Zm-9.586-6.183a3.267 3.267 0 0 0-3.233 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.234-2.8Zm8.984 0a3.267 3.267 0 0 0-3.234 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.233-2.8ZM26.4 7.5c1.16 0 2.1.94 2.1 2.1v2.567h-21V9.6c0-1.16.94-2.1 2.1-2.1h16.8Z"
+            fill="#15171A"
+        />
+    </g>,
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#38444D" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.5 13.917v5.833H10.247a7.936 7.936 0 0 0 14.861 1.75H28.5v4.9a2.1 2.1 0 0 1-2.1 2.1H9.6a2.1 2.1 0 0 1-2.1-2.1V13.917h21ZM23.094 21.5a6.177 6.177 0 0 1-5.107 2.697 6.177 6.177 0 0 1-5.108-2.697h10.215Zm-9.586-6.183a3.267 3.267 0 0 0-3.233 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.234-2.8Zm8.984 0a3.267 3.267 0 0 0-3.234 2.8h1.79a1.517 1.517 0 0 1 2.887 0h1.79a3.267 3.267 0 0 0-3.233-2.8ZM26.4 7.5c1.16 0 2.1.94 2.1 2.1v2.567h-21V9.6c0-1.16.94-2.1 2.1-2.1h16.8Z"
+            fill="#18232E"
+        />
+    </g>,
+    '0 0 36 36',
+)
diff --git a/packages/icons/brands/index.ts b/packages/icons/brands/index.ts
index 2d8d1107f11c..107479bd226b 100644
--- a/packages/icons/brands/index.ts
+++ b/packages/icons/brands/index.ts
@@ -11,3 +11,4 @@ export * from './MaskBlue'
 export * from './MaskGrey'
 export * from './Discord'
 export * from './MaskBanner'
+export * from './MaskPlaceholder'
diff --git a/packages/mask/src/extension/background-script/EthereumServices/send.ts b/packages/mask/src/extension/background-script/EthereumServices/send.ts
index 06bf047d50b0..797977f16cbc 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/send.ts
+++ b/packages/mask/src/extension/background-script/EthereumServices/send.ts
@@ -288,7 +288,7 @@ export async function INTERNAL_send(
         // the estimation of metamask of `maxFeePerGas` = 1 * block.baseFeePerGas,
         // since the estimation of web3.js = 2 * block.baseFeePerGas which is too high
         // that would almost always causes an undesired warning tip.
-        if (Flags.EIP1559_enabled && isEIP1559Valid) {
+        if (Flags.EIP1559_enabled && isEIP1559Valid && isEIP1559Supported(chainIdFinally)) {
             config.gasPrice = undefined
             config.maxPriorityFeePerGas = formatGweiToWei(1.5).toString(16)
             config.maxFeePerGas = (Number.parseInt(config.maxFeePerGas!, 16) * 0.8).toString(16)
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
index fce271edfd8b..7386acd3af68 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
@@ -1,11 +1,9 @@
-import { useAsyncRetry } from 'react-use'
-import { Card, CircularProgress, Link } from '@mui/material'
+import { Card, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Wallet, ERC721TokenDetailed, resolveCollectibleLink, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
 import { MaskSharpIconOfSize } from '../../../../resources/MaskIcon'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { ActionsBarNFT } from '../ActionsBarNFT'
-import { Video } from '../../../../components/shared/Video'
-import { Image } from '../../../../components/shared/Image'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -13,8 +11,9 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 4,
-        position: 'relative',
-        backgroundColor: theme.palette.background.paper,
+        position: 'absolute',
+        zIndex: 1,
+        backgroundColor: theme.palette.background.default,
         width: 172,
         height: 172,
     },
@@ -31,7 +30,24 @@ const useStyles = makeStyles()((theme) => ({
         height: 64,
         opacity: 0.1,
     },
-    video: {
+    loadingFailImage: {
+        minHeight: '0px !important',
+        maxWidth: 'none',
+        width: 64,
+        height: 64,
+    },
+    wrapper: {
+        width: '172px !important',
+        height: '172px !important',
+    },
+    blocker: {
+        position: 'absolute',
+        zIndex: 2,
+        width: 172,
+        height: 172,
+    },
+    linkWrapper: {
+        position: 'relative',
         width: 172,
         height: 172,
     },
@@ -42,65 +58,40 @@ export interface CollectibleCardProps {
     wallet?: Wallet
     token: ERC721TokenDetailed
     readonly?: boolean
+    renderOrder: number
 }
 
-const videoTypeRe = /\.(mp4|mp3|m4v|ogg)$/i
-
 export function CollectibleCard(props: CollectibleCardProps) {
-    const { wallet, token, provider, readonly } = props
+    const { wallet, token, provider, readonly, renderOrder } = props
     const { classes } = useStyles()
 
-    const mediaUrl = token.info.mediaUrl
-    const { loading, value } = useAsyncRetry(async () => {
-        if (!mediaUrl) return
-
-        const blob = await (await fetch(mediaUrl)).blob()
-        return blob
-    }, [mediaUrl])
-
-    const mimeType = value?.type || ''
-    // some video resources response content-type not video, e.g. application/octet-stream
-    const isVideo = mediaUrl ? videoTypeRe.test(mediaUrl) || mimeType.startsWith('video') : undefined
-    const isHtml = mimeType.startsWith('text')
-
     return (
-        <>
-            {loading ? (
-                <Card className={classes.root}>
-                    <CircularProgress />
-                </Card>
-            ) : (
-                <Link
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={resolveCollectibleLink(token.contractDetailed.chainId, provider, token)}>
-                    <Card className={classes.root}>
-                        {readonly || !wallet ? null : (
-                            <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} token={token} />
-                        )}
-                        {token.info.mediaUrl ? (
-                            isVideo ? (
-                                <Video
-                                    src={value ?? token.info.mediaUrl}
-                                    VideoProps={{ className: classes.video, autoPlay: true, loop: true }}
-                                />
-                            ) : isHtml ? (
-                                <iframe src={token.info.mediaUrl} />
-                            ) : (
-                                <Image
-                                    component="img"
-                                    width={172}
-                                    height={172}
-                                    style={{ objectFit: 'cover' }}
-                                    src={value ?? token.info.mediaUrl}
-                                />
-                            )
-                        ) : (
-                            <MaskSharpIconOfSize classes={{ root: classes.placeholderIcon }} size={22} />
-                        )}
-                    </Card>
-                </Link>
-            )}
-        </>
+        <Link
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.linkWrapper}
+            href={resolveCollectibleLink(token.contractDetailed.chainId, provider, token)}>
+            <div className={classes.blocker} />
+            <Card className={classes.root}>
+                {readonly || !wallet ? null : (
+                    <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} token={token} />
+                )}
+                {token.info.mediaUrl ? (
+                    <NFTCardStyledAssetPlayer
+                        contractAddress={token.contractDetailed.address}
+                        chainId={token.contractDetailed.chainId}
+                        url={token.info.mediaUrl}
+                        renderOrder={renderOrder}
+                        tokenId={token.tokenId}
+                        classes={{
+                            loadingFailImage: classes.loadingFailImage,
+                            wrapper: classes.wrapper,
+                        }}
+                    />
+                ) : (
+                    <MaskSharpIconOfSize classes={{ root: classes.placeholderIcon }} size={22} />
+                )}
+            </Card>
+        </Link>
     )
 }
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 7de6dc3ff9e9..20ac316f221e 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
@@ -50,7 +50,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(1),
     },
     description: {
-        background: theme.palette.mode === 'light' ? '#F7F9FA' : '#17191D',
+        background: theme.palette.mode === 'light' ? '#F7F9FA' : '#2F3336',
         alignSelf: 'stretch',
     },
     name: {
@@ -87,14 +87,21 @@ interface CollectibleItemProps {
     wallet?: Wallet
     token: ERC721TokenDetailed
     readonly?: boolean
+    renderOrder: number
 }
 
 function CollectibleItem(props: CollectibleItemProps) {
-    const { provider, wallet, token, readonly } = props
+    const { provider, wallet, token, readonly, renderOrder } = props
     const { classes } = useStyles()
     return (
         <div className={classes.card}>
-            <CollectibleCard token={token} provider={provider} wallet={wallet} readonly={readonly} />
+            <CollectibleCard
+                token={token}
+                provider={provider}
+                wallet={wallet}
+                readonly={readonly}
+                renderOrder={renderOrder}
+            />
             <div className={classes.description}>
                 <Typography className={classes.name} color="textPrimary" variant="body2">
                     {token.info.name}
@@ -155,6 +162,7 @@ function CollectibleListUI(props: CollectibleListUIProps) {
                     <Box className={classes.root}>
                         {collectibles.map((x, i) => (
                             <CollectibleItem
+                                renderOrder={i}
                                 token={x}
                                 provider={provider}
                                 wallet={wallet}
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index 5821a424dd76..df48bd8d7e25 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -4,7 +4,7 @@ import { CollectibleState } from '../hooks/useCollectibleState'
 import { AssetPlayer } from '@masknet/shared'
 import { useMemo } from 'react'
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()((theme) => ({
     body: {
         display: 'flex',
         justifyContent: 'center',
@@ -16,11 +16,29 @@ const useStyles = makeStyles()({
     },
     errorPlaceholder: {
         padding: '82px 0',
+        backgroundColor: theme.palette.background.default,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 12,
+        width: '100%',
     },
     loadingPlaceholder: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
         padding: '74px 0',
     },
-})
+    loadingIcon: {
+        width: 36,
+        height: 52,
+    },
+    errorIcon: {
+        width: 36,
+        height: 36,
+    },
+}))
 
 export interface ArticleTabProps {}
 
@@ -39,10 +57,7 @@ export function ArticleTab(props: ArticleTabProps) {
                         options={{
                             playsInline: true,
                         }}
-                        classes={{
-                            errorPlaceholder: classes.errorPlaceholder,
-                            loadingPlaceholder: classes.loadingPlaceholder,
-                        }}
+                        classes={classes}
                     />
                 </div>
             </CollectibleTab>
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
index bd5de6410ddd..b7c36088e2d5 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
@@ -56,9 +56,9 @@ export function DrawResultDialog(props: DrawResultDialogProps) {
             <DialogContent>
                 <Box className={classes.main}>
                     <Box className={classes.list} display="flex" flexWrap="wrap">
-                        {difference(boxInfo.tokenIdsPurchased, lastPurchasedTokenIds).map((x) => (
+                        {difference(boxInfo.tokenIdsPurchased, lastPurchasedTokenIds).map((x, i) => (
                             <Box className={classes.token} key={x} flex={1}>
-                                <TokenCard tokenId={x} contractDetailed={contractDetailed} />
+                                <TokenCard tokenId={x} contractDetailed={contractDetailed} renderOrder={i} />
                             </Box>
                         ))}
                     </Box>
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx
index 3c615b8d1e53..c4a83dd3bbf1 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx
@@ -20,16 +20,22 @@ const useStyles = makeStyles()((theme) => ({
 export interface TokenCardProps {
     tokenId: string
     contractDetailed: ERC721ContractDetailed
+    renderOrder: number
 }
 
 export const TokenCard = memo<TokenCardProps>((props: TokenCardProps) => {
-    const { contractDetailed, tokenId } = props
+    const { contractDetailed, tokenId, renderOrder } = props
     const { classes } = useStyles()
     const { tokenDetailed } = useERC721TokenDetailed(contractDetailed, tokenId)
 
     return tokenDetailed ? (
         <>
-            <CollectibleCard readonly provider={NonFungibleAssetProvider.OPENSEA} token={tokenDetailed} />
+            <CollectibleCard
+                readonly
+                provider={NonFungibleAssetProvider.OPENSEA}
+                token={tokenDetailed}
+                renderOrder={renderOrder}
+            />
             <div className={classes.title}>
                 <Typography className={classes.name} color="textSecondary" variant="body2">
                     {tokenDetailed.info.name ?? tokenId}
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts
index 29befa81153e..6bbdbb42914a 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts
@@ -5,7 +5,7 @@ import { useBlockNumber, useMaskBoxConstants } from '@masknet/web3-shared-evm'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 // dynamically set the block range window size
-const FRAGMENT_SIZE = 5000
+const FRAGMENT_SIZE = 3000
 const MAX_PAGE_SIZE = 10
 
 export function useMaskBoxCreationSuccessEvent(creatorAddress: string, tokenAddress: string, boxId: string) {
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftImage.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftImage.tsx
deleted file mode 100644
index 650eb12bf802..000000000000
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftImage.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
-import { CircularProgress } from '@mui/material'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
-
-const useStyles = makeStyles()((theme) => ({
-    imgWrapper: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 160,
-        width: 120,
-        overflow: 'hidden',
-    },
-    loadingNftImg: {
-        marginTop: 20,
-    },
-    selectWrapperImg: {
-        maxWidth: '100%',
-        minHeight: 160,
-    },
-    fallbackNftImg: {
-        width: 64,
-        height: 64,
-        transform: 'translateY(10px)',
-    },
-}))
-
-interface NftImageProps extends withClasses<'loadingFailImage'> {
-    token: ERC721TokenDetailed | undefined
-    fallbackImage: URL
-}
-export function NftImage(props: NftImageProps) {
-    const { token, fallbackImage } = props
-    const classes = useStylesExtends(useStyles(), props)
-
-    return (
-        <div className={classes.imgWrapper}>
-            {!token?.info.hasTokenDetailed ? (
-                <CircularProgress size={20} className={classes.loadingNftImg} />
-            ) : token?.info.mediaUrl ? (
-                <img
-                    className={classes.selectWrapperImg}
-                    src={token?.info.mediaUrl}
-                    onError={(event) => {
-                        const target = event.currentTarget
-                        target.src = fallbackImage.toString()
-                        target.classList.add(classes.loadingFailImage ?? '')
-                    }}
-                />
-            ) : (
-                <img className={classes.fallbackNftImg} src={fallbackImage.toString()} />
-            )}
-        </div>
-    )
-}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
index 0566a6784a10..07e24886f879 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
@@ -1,10 +1,10 @@
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { ERC721ContractDetailed, useERC721TokenDetailed } from '@masknet/web3-shared-evm'
+import type { ERC721ContractDetailed } from '@masknet/web3-shared-evm'
 import { List, ListItem, ListProps, Skeleton, Typography } from '@mui/material'
 import classnames from 'classnames'
-import type { FC, HTMLProps } from 'react'
+import { FC, HTMLProps, useState } from 'react'
 import { useI18N } from '../../../utils'
-import { NftImage } from './NftImage'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -92,13 +92,14 @@ interface NftItemProps extends HTMLProps<HTMLDivElement> {
     contract: ERC721ContractDetailed | undefined
     tokenId: string
     claimed?: boolean
+    renderOrder: number
 }
 
-export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claimed, ...rest }) => {
+export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claimed, renderOrder, ...rest }) => {
     const { t } = useI18N()
-    const result = useERC721TokenDetailed(contract, tokenId)
     const { classes } = useStyles()
-    if (!result.tokenDetailed || !contract) {
+    const [name, setName] = useState('#' + tokenId)
+    if (!contract) {
         return (
             <div className={classnames(className, classes.nft, classes.loading)} {...rest}>
                 <Skeleton height={185} width={120} />
@@ -108,14 +109,17 @@ export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claime
 
     return (
         <div className={classnames(className, classes.nft)} {...rest}>
-            <NftImage
+            <NFTCardStyledAssetPlayer
                 classes={{
                     loadingFailImage: classes.loadingFailImage,
                 }}
-                token={result.tokenDetailed}
-                fallbackImage={new URL('./assets/nft_token_fallback.png', import.meta.url)}
+                tokenId={tokenId}
+                renderOrder={renderOrder}
+                contractAddress={contract.address}
+                chainId={contract.chainId}
+                setERC721TokenName={setName}
             />
-            <Typography className={classes.name}>{result.tokenDetailed.info.name}</Typography>
+            <Typography className={classes.name}>{name}</Typography>
             {claimed && <Typography className={classes.claimedBadge}>{t('plugin_red_packet_claimed')}</Typography>}
         </div>
     )
@@ -133,7 +137,7 @@ export const NftList: FC<NftListProps> = ({ contract, statusList, tokenIds, clas
         <List className={classnames(className, classes.list)} {...rest}>
             {tokenIds.map((tokenId, index) => (
                 <ListItem className={classes.listItem} key={tokenId}>
-                    <NftItem contract={contract} claimed={statusList[index]} tokenId={tokenId} />
+                    <NftItem contract={contract} claimed={statusList[index]} tokenId={tokenId} renderOrder={index} />
                 </ListItem>
             ))}
         </List>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
index 4814e73ab520..945fdc993e9f 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
@@ -21,7 +21,7 @@ import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 import { RedpacketMessagePanel } from './RedpacketMessagePanel'
 import { SelectNftTokenDialog, OrderedERC721Token } from './SelectNftTokenDialog'
 import { RedpacketNftConfirmDialog } from './RedpacketNftConfirmDialog'
-import { NftImage } from './NftImage'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { NFTSelectOption } from '../types'
 import { NFT_RED_PACKET_MAX_SHARES } from '../constants'
 
@@ -38,7 +38,7 @@ const useStyles = makeStyles()((theme) => {
         },
         nftNameWrapper: {
             width: '100%',
-            background: theme.palette.background.default,
+            background: theme.palette.background.paper,
             borderBottomRightRadius: 8,
             borderBottomLeftRadius: 8,
             paddingTop: 2,
@@ -81,10 +81,10 @@ const useStyles = makeStyles()((theme) => {
             position: 'relative',
             display: 'flex',
             flexDirection: 'column',
-            borderRadius: 6,
+            borderRadius: 8,
             padding: 0,
             marginBottom: theme.spacing(2.5),
-            background: theme.palette.background.default,
+            background: theme.palette.background.paper,
             width: 120,
             height: 180,
             overflow: 'hidden',
@@ -99,6 +99,7 @@ const useStyles = makeStyles()((theme) => {
         addWrapper: {
             cursor: 'pointer',
             alignItems: 'center',
+            background: `${theme.palette.background.default} !important`,
             justifyContent: 'center',
         },
         addIcon: {
@@ -183,6 +184,9 @@ const useStyles = makeStyles()((theme) => {
         loadingOwnerList: {
             margin: '24px auto 16px',
         },
+        iframe: {
+            minHeight: 147,
+        },
     }
 })
 interface RedPacketERC721FormProps {
@@ -311,25 +315,9 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                     <div className={classes.tokenSelectorParent}>
                         <List className={classes.tokenSelector}>
                             {existTokenDetailedList.map((value, i) => (
-                                <ListItem key={i} className={classNames(classes.tokenSelectorWrapper)}>
-                                    <NftImage
-                                        token={value}
-                                        classes={{
-                                            loadingFailImage: classes.loadingFailImage,
-                                        }}
-                                        fallbackImage={new URL('./assets/nft_token_fallback.png', import.meta.url)}
-                                    />
-                                    <div className={classes.nftNameWrapper}>
-                                        <Typography className={classes.nftName} color="textSecondary">
-                                            {value.info.name}
-                                        </Typography>
-                                    </div>
-                                    <div className={classes.closeIconWrapperBack} onClick={() => removeToken(value)}>
-                                        <div className={classes.closeIconWrapper}>
-                                            <CloseIcon className={classes.closeIcon} />
-                                        </div>
-                                    </div>
-                                </ListItem>
+                                <div key={i}>
+                                    <NFTCard token={value} removeToken={removeToken} renderOrder={i} />
+                                </div>
                             ))}
                             <ListItem
                                 onClick={() => setOpen(true)}
@@ -388,3 +376,40 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
         </>
     )
 }
+
+interface NFTCardProps {
+    token: OrderedERC721Token
+    removeToken: (token: ERC721TokenDetailed) => void
+    renderOrder: number
+}
+
+function NFTCard(props: NFTCardProps) {
+    const { token, removeToken, renderOrder } = props
+    const { classes } = useStyles()
+    const [name, setName] = useState('#' + token.tokenId)
+    return (
+        <ListItem className={classNames(classes.tokenSelectorWrapper)}>
+            <NFTCardStyledAssetPlayer
+                contractAddress={token.contractDetailed.address}
+                chainId={token.contractDetailed.chainId}
+                tokenId={token.tokenId}
+                renderOrder={renderOrder}
+                setERC721TokenName={setName}
+                classes={{
+                    loadingFailImage: classes.loadingFailImage,
+                    iframe: classes.iframe,
+                }}
+            />
+            <div className={classes.nftNameWrapper}>
+                <Typography className={classes.nftName} color="textSecondary">
+                    {name}
+                </Typography>
+            </div>
+            <div className={classes.closeIconWrapperBack} onClick={() => removeToken(token)}>
+                <div className={classes.closeIconWrapper}>
+                    <CloseIcon className={classes.closeIcon} />
+                </div>
+            </div>
+        </ListItem>
+    )
+}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 94f492e2b3e0..812a70e86088 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -3,16 +3,13 @@ import {
     useAccount,
     resolveAddressLinkOnExplorer,
     useWeb3,
-    useERC721TokenDetailed,
-    EthereumTokenType,
     resolveNetworkName,
     useNetworkType,
-    ERC721ContractDetailed,
     TransactionStateType,
 } from '@masknet/web3-shared-evm'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { Grid, Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../utils'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
@@ -24,7 +21,7 @@ import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
-import { NftImage } from './NftImage'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -223,6 +220,17 @@ const useStyles = makeStyles()((theme) => ({
         maxWidth: 400,
         fontSize: '1.5rem',
     },
+    assetPlayerIframe: {
+        marginBottom: 16,
+        height: '160px !important',
+    },
+    assetPlayerVideoIframe: {
+        minWidth: 'fit-content',
+    },
+    loadingFailImage: {
+        height: 160,
+        width: 120,
+    },
 }))
 export interface RedPacketNftProps {
     payload: RedPacketNftJSONPayload
@@ -257,28 +265,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
         )
     }, [payload])
 
-    const { asyncRetry, tokenDetailed: erc721TokenDetailed } = useERC721TokenDetailed(
-        availability
-            ? ({
-                  type: EthereumTokenType.ERC721,
-                  address: payload.contractAddress,
-                  chainId: payload.chainId,
-                  name: payload.contractName,
-                  symbol: '',
-                  baseURI: '',
-                  iconURL: payload.contractTokenURI,
-              } as ERC721ContractDetailed)
-            : undefined,
-        availability?.claimed_id,
-    )
-
-    const { retry: retryERC721TokenDetailed, error: ERC721TokenDetailedError } = asyncRetry
-    const isFailedToLoading = Boolean(availabilityError || ERC721TokenDetailedError)
-
-    const onErrorRetry = useCallback(() => {
-        retryAvailability()
-        retryERC721TokenDetailed()
-    }, [retryAvailability, retryERC721TokenDetailed])
+    const [sourceType, setSourceType] = useState('')
 
     useEffect(() => {
         if (![TransactionStateType.CONFIRMED, TransactionStateType.FAILED].includes(claimState.type)) {
@@ -297,7 +284,6 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
         resetCallback()
     }, [account])
 
-    const previewNftImg = new URL('./assets/nft-preview.png', import.meta.url).toString()
     const rpNftImg = new URL('./assets/redpacket.nft.png', import.meta.url).toString()
     // #region on share
     const postLink = usePostLink()
@@ -335,7 +321,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
     }, [shareLink])
     // #endregion
 
-    if (isFailedToLoading)
+    if (availabilityError)
         return (
             <div className={classes.root}>
                 <Card className={classNames(classes.card, classes.errorCard)} component="article" elevation={0}>
@@ -344,7 +330,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                         {t('loading_failed')}
                     </Typography>
                     <Button
-                        onClick={onErrorRetry}
+                        onClick={retryAvailability}
                         className={classNames(classes.errorButton, classes.whiteText)}
                         variant="outlined">
                         {t('try_again')}
@@ -379,8 +365,18 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
 
                 {availability.isClaimed ? (
                     <Box className={classes.tokenWrapper}>
-                        <NftImage
-                            token={erc721TokenDetailed}
+                        <NFTCardStyledAssetPlayer
+                            chainId={payload.chainId}
+                            contractAddress={payload.contractAddress}
+                            tokenId={availability.claimed_id}
+                            setSourceType={setSourceType}
+                            classes={{
+                                iframe: classNames(
+                                    classes.assetPlayerIframe,
+                                    sourceType === 'video' ? classes.assetPlayerVideoIframe : '',
+                                ),
+                                loadingFailImage: classes.loadingFailImage,
+                            }}
                             fallbackImage={new URL('./assets/nft-preview.png', import.meta.url)}
                         />
 
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
index e6b141d6d384..34c44811ca0e 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
@@ -12,7 +12,7 @@ import {
     TransactionStateType,
     isNativeTokenAddress,
 } from '@masknet/web3-shared-evm'
-import { useRemoteControlledDialog } from '@masknet/shared'
+import { useRemoteControlledDialog, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import classNames from 'classnames'
 import { InjectedDialog } from '../../../components/shared/InjectedDialog'
 import { Button, Grid, Link, Typography, DialogContent, List, ListItem } from '@mui/material'
@@ -26,7 +26,6 @@ import { useCompositionContext } from '@masknet/plugin-infra'
 import { RedPacketNftMetaKey } from '../constants'
 import { WalletMessages } from '../../Wallet/messages'
 import { RedPacketRPC } from '../messages'
-import { NftImage } from './NftImage'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -92,7 +91,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     nftNameWrapper: {
         width: '100%',
-        background: theme.palette.mode === 'light' ? 'none' : '#2F3336',
+        background: theme.palette.background.paper,
         borderBottomRightRadius: 8,
         borderBottomLeftRadius: 8,
         paddingTop: 2,
@@ -139,6 +138,9 @@ const useStyles = makeStyles()((theme) => ({
         width: 64,
         height: 64,
     },
+    iframe: {
+        minHeight: 147,
+    },
     ellipsis: {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -287,21 +289,9 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                     <Grid item xs={12}>
                         <List className={classes.tokenSelector}>
                             {tokenList.map((value, i) => (
-                                <ListItem key={i} className={classNames(classes.tokenSelectorWrapper)}>
-                                    <NftImage
-                                        token={value}
-                                        classes={{
-                                            loadingFailImage: classes.loadingFailImage,
-                                        }}
-                                        fallbackImage={new URL('./assets/nft_token_fallback.png', import.meta.url)}
-                                    />
-
-                                    <div className={classes.nftNameWrapper}>
-                                        <Typography className={classes.nftName} color="textSecondary">
-                                            {value.info.name}
-                                        </Typography>
-                                    </div>
-                                </ListItem>
+                                <div key={i}>
+                                    <NFTCard token={value} renderOrder={i} />
+                                </div>
                             ))}
                         </List>
                     </Grid>
@@ -357,3 +347,35 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
         </InjectedDialog>
     )
 }
+
+interface NFTCardProps {
+    token: ERC721TokenDetailed
+    renderOrder: number
+}
+
+function NFTCard(props: NFTCardProps) {
+    const { token, renderOrder } = props
+    const { classes } = useStyles()
+    const [name, setName] = useState('#' + token.tokenId)
+    return (
+        <ListItem className={classNames(classes.tokenSelectorWrapper)}>
+            <NFTCardStyledAssetPlayer
+                contractAddress={token.contractDetailed.address}
+                chainId={token.contractDetailed.chainId}
+                tokenId={token.tokenId}
+                renderOrder={renderOrder}
+                setERC721TokenName={setName}
+                classes={{
+                    loadingFailImage: classes.loadingFailImage,
+                    iframe: classes.iframe,
+                }}
+            />
+
+            <div className={classes.nftNameWrapper}>
+                <Typography className={classes.nftName} color="textSecondary">
+                    {name}
+                </Typography>
+            </div>
+        </ListItem>
+    )
+}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
index bd81e39bf9a6..8703f4a7673c 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
@@ -16,7 +16,7 @@ import { SearchIcon } from '@masknet/icons'
 import CheckIcon from '@mui/icons-material/Check'
 import { Trans } from 'react-i18next'
 import { useUpdate } from 'react-use'
-import { NftImage } from './NftImage'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { findLastIndex, uniqBy } from 'lodash-unified'
 import { NFT_RED_PACKET_MAX_SHARES } from '../constants'
 
@@ -104,8 +104,12 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         marginBottom: theme.spacing(2.5),
         background: theme.palette.mode === 'light' ? '#fff' : '#2F3336',
         width: 120,
+        minHeight: 153,
         borderRadius: 8,
     },
+    iframe: {
+        minHeight: 153,
+    },
     nftNameWrapper: {
         width: '100%',
         background: theme.palette.mode === 'light' ? 'none' : '#2F3336',
@@ -142,6 +146,9 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         marginBottom: theme.spacing(1.5),
         padding: theme.spacing(1, 1.5, 1, 1),
         boxSizing: 'border-box',
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
     },
     selectWrapper: {
         background: theme.palette.mode === 'light' ? '#fff' : '#2F3336',
@@ -149,7 +156,7 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         overflow: 'hidden',
         padding: 0,
         flexDirection: 'column',
-        borderRadius: 6,
+        borderRadius: 8,
         height: 180,
         userSelect: 'none',
         width: 120,
@@ -165,7 +172,7 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
     },
     selectWrapperNftNameWrapper: {
         width: '100%',
-        background: theme.palette.background.default,
+        background: theme.palette.background.paper,
         borderBottomRightRadius: 8,
         borderBottomLeftRadius: 8,
         overflow: 'hidden',
@@ -482,7 +489,7 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 {t('search')}
                             </Button>
                         </div>
-                        {loadingToken || !tokenDetailed ? (
+                        {loadingToken || !tokenDetailed || !contract ? (
                             <Box className={classes.noResultBox}>
                                 <Typography>
                                     {loadingToken
@@ -494,16 +501,19 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                             </Box>
                         ) : (
                             <Box className={classNames(classes.wrapper, classes.nftWrapper)}>
-                                <NftImage
-                                    token={tokenDetailed}
+                                <NFTCardStyledAssetPlayer
+                                    contractAddress={contract.address}
+                                    chainId={contract.chainId}
+                                    url={tokenDetailed.info.mediaUrl}
+                                    tokenId={tokenId}
                                     classes={{
                                         loadingFailImage: classes.loadingFailImage,
+                                        iframe: classes.iframe,
                                     }}
-                                    fallbackImage={new URL('./assets/nft_token_fallback.png', import.meta.url)}
                                 />
                                 <div className={classes.selectWrapperNftNameWrapper}>
                                     <Typography className={classes.selectWrapperNftName} color="textSecondary">
-                                        {tokenDetailed?.info.name}
+                                        {tokenDetailed.info.name}
                                     </Typography>
                                 </div>
                             </Box>
@@ -632,43 +642,16 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                             )
 
                                             return (
-                                                <ListItem
-                                                    className={classNames(
-                                                        classes.selectWrapper,
-                                                        tokenIdFilterList.length > 0 &&
-                                                            !tokenIdFilterList.includes(token.tokenId)
-                                                            ? classes.hide
-                                                            : '',
-                                                    )}
-                                                    key={i}>
-                                                    <NftImage
+                                                <div key={i}>
+                                                    <NFTCard
+                                                        findToken={findToken}
+                                                        renderOrder={i}
                                                         token={token}
-                                                        classes={{
-                                                            loadingFailImage: classes.loadingFailImage,
-                                                        }}
-                                                        fallbackImage={
-                                                            new URL('./assets/nft_token_fallback.png', import.meta.url)
-                                                        }
+                                                        tokenIdFilterList={tokenIdFilterList}
+                                                        selectToken={selectToken}
+                                                        isSelectSharesExceed={isSelectSharesExceed}
                                                     />
-                                                    <div className={classes.selectWrapperNftNameWrapper}>
-                                                        <Typography
-                                                            className={classes.selectWrapperNftName}
-                                                            color="textSecondary">
-                                                            {token?.info.name}
-                                                        </Typography>
-                                                    </div>
-
-                                                    <div
-                                                        className={classNames(
-                                                            classes.checkbox,
-                                                            findToken ? classes.checked : '',
-                                                        )}
-                                                        onClick={(event) =>
-                                                            selectToken(token, findToken, event.shiftKey, token.index)
-                                                        }>
-                                                        {findToken ? <CheckIcon className={classes.checkIcon} /> : null}
-                                                    </div>
-                                                </ListItem>
+                                                </div>
                                             )
                                         })}
                                         {loadingOwnerList ? (
@@ -741,3 +724,53 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
         </InjectedDialog>
     )
 }
+
+interface NFTCardProps {
+    findToken: OrderedERC721Token | undefined
+    token: OrderedERC721Token
+    tokenIdFilterList: string[]
+    isSelectSharesExceed: boolean
+    renderOrder: number
+    selectToken: (
+        token: OrderedERC721Token,
+        findToken: OrderedERC721Token | undefined,
+        shiftKey: boolean,
+        index: number,
+    ) => void
+}
+
+function NFTCard(props: NFTCardProps) {
+    const { findToken, token, tokenIdFilterList, isSelectSharesExceed, renderOrder, selectToken } = props
+    const { classes } = useStyles({ isSelectSharesExceed })
+    const [name, setName] = useState('#' + token.tokenId)
+    return (
+        <ListItem
+            className={classNames(
+                classes.selectWrapper,
+                tokenIdFilterList.length > 0 && !tokenIdFilterList.includes(token.tokenId) ? classes.hide : '',
+            )}>
+            <NFTCardStyledAssetPlayer
+                contractAddress={token.contractDetailed.address}
+                tokenId={token.tokenId}
+                renderOrder={renderOrder}
+                chainId={token.contractDetailed.chainId}
+                classes={{
+                    loadingFailImage: classes.loadingFailImage,
+                    iframe: classes.iframe,
+                }}
+                setERC721TokenName={setName}
+            />
+            <div className={classes.selectWrapperNftNameWrapper}>
+                <Typography className={classes.selectWrapperNftName} color="textSecondary">
+                    {name}
+                </Typography>
+            </div>
+
+            <div
+                className={classNames(classes.checkbox, findToken ? classes.checked : '')}
+                onClick={(event) => selectToken(token, findToken, event.shiftKey, token.index)}>
+                {findToken ? <CheckIcon className={classes.checkIcon} /> : null}
+            </div>
+        </ListItem>
+    )
+}
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index ed0ec41f74f7..b8a0f8163d90 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -1,13 +1,23 @@
-import { memo, useRef, useCallback, useState } from 'react'
+import { memo, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { ChainId, getRPCConstants } from '@masknet/web3-shared-evm'
+import { first } from 'lodash-unified'
 import IframeResizer, { IFrameComponent } from 'iframe-resizer-react'
 import { mediaViewerUrl } from '../../../constants'
-import { useTimeoutFn, useUpdateEffect } from 'react-use'
+import { useUpdateEffect } from 'react-use'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { Box, SvgIconProps } from '@mui/material'
-import { AssetLoadingIcon, MaskGreyIcon } from '@masknet/icons'
+import { AssetLoadingIcon, MaskPlaceholder } from '@masknet/icons'
+
+interface ERC721TokenQuery {
+    contractAddress: string
+    tokenId: string
+    chainId: ChainId
+}
 
 interface AssetPlayerProps
-    extends withClasses<'errorPlaceholder' | 'errorIcon' | 'loadingPlaceholder' | 'loadingIcon'> {
+    extends withClasses<
+        'errorPlaceholder' | 'errorIcon' | 'loadingPlaceholder' | 'loadingIcon' | 'loadingFailImage' | 'iframe'
+    > {
     url?: string
     type?: string
     options?: {
@@ -17,32 +27,20 @@ interface AssetPlayerProps
         loop?: boolean
         muted?: boolean
     }
+    loadingIcon?: React.ReactNode
+    erc721Token?: ERC721TokenQuery
+    renderTimeout?: number
     iconProps?: SvgIconProps
+    fallbackImage?: URL
+    setERC721TokenName?: (name: string) => void
+    setSourceType?: (type: string) => void
 }
-const useStyles = makeStyles()((theme) => ({
-    errorPlaceholder: {
-        backgroundColor: theme.palette.background.default,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 12,
-        width: '100%',
-    },
-    errorIcon: {
-        width: 36,
-        height: 36,
-    },
-    loadingPlaceholder: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-    },
-    loadingIcon: {
-        width: 36,
-        height: 52,
+const useStyles = makeStyles()({
+    hidden: {
+        position: 'absolute',
+        visibility: 'hidden',
     },
-}))
+})
 
 enum AssetPlayerState {
     LOADING = 0,
@@ -51,53 +49,107 @@ enum AssetPlayerState {
     ERROR = 3,
 }
 
-const TIMEOUT = 10000
-
 export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options, iconProps, ...props }) => {
     const ref = useRef<IFrameComponent | null>(null)
     const classes = useStylesExtends(useStyles(), props)
-    const [playerState, setPlayerState] = useState(url ? AssetPlayerState.LOADING : AssetPlayerState.ERROR)
+    const [hidden, setHidden] = useState(Boolean(props.renderTimeout))
+    const { RPC: RPC_Entries } = getRPCConstants(props.erc721Token?.chainId)
+    const rpc = first(RPC_Entries)
+    const erc721Token = rpc ? ({ ...props.erc721Token, rpc } as ERC721TokenQuery) : undefined
+    const [playerState, setPlayerState] = useState(
+        url || erc721Token ? AssetPlayerState.LOADING : AssetPlayerState.ERROR,
+    )
 
-    // #region If onResized is not triggered within the specified time, set player state to error
-    const [, cancel, reset] = useTimeoutFn(() => {
-        if (playerState !== AssetPlayerState.NORMAL) {
-            setPlayerState(AssetPlayerState.ERROR)
-        }
-    }, TIMEOUT)
-    // #endregion
+    useEffect(() => {
+        if (!props.renderTimeout || !hidden) return
+
+        const timer = setTimeout(() => {
+            setHidden(false)
+        }, props.renderTimeout)
+
+        return () => clearTimeout(timer)
+    }, [props.renderTimeout, hidden])
 
     // #region setup iframe when url and options be changed
     const setIframe = useCallback(() => {
         // if iframe isn't be init or the load error has been existed
-        if (!ref.current || playerState === AssetPlayerState.ERROR) return
-        if (!url) {
+        if (!ref.current || playerState === AssetPlayerState.ERROR || playerState === AssetPlayerState.NORMAL) return
+        if (!url && !erc721Token) {
             setPlayerState(AssetPlayerState.ERROR)
             return
         }
-        if (playerState === AssetPlayerState.INIT || playerState === AssetPlayerState.NORMAL) {
-            reset()
+        if (playerState === AssetPlayerState.INIT) {
             ref.current.iFrameResizer.sendMessage({
                 url,
+                erc721Token,
                 type,
                 ...options,
             })
             return
         }
-    }, [url, type, JSON.stringify(options), playerState])
-    // #endregion
+    }, [url, JSON.stringify(erc721Token), type, JSON.stringify(options), playerState])
+    // endregion
 
+    type ERC721TokenNameMsg = { message: { type: 'name'; name: string } | { type: 'sourceType'; name: string } }
     // #region resource loaded error
-    const onMessage = useCallback(({ message }: { message: { name: string } }) => {
-        if (message?.name === 'Error') {
-            setPlayerState(AssetPlayerState.ERROR)
-        }
-    }, [])
+    const onMessage = useCallback(
+        ({
+            message,
+        }: {
+            message: { name: string } | ERC721TokenNameMsg | { type: 'webglContextLost' } | { type: 'reload' }
+        }) => {
+            if ((message as { name: string })?.name === 'Error') {
+                setPlayerState(AssetPlayerState.ERROR)
+            }
+            if ((message as { type: 'webglContextLost' })?.type === 'webglContextLost') {
+                setHidden(true)
+                setPlayerState(AssetPlayerState.LOADING)
+                setTimeout(() => setHidden(false), 1000)
+            }
+            if ((message as ERC721TokenNameMsg).message?.type === 'name') {
+                props.setERC721TokenName?.((message as ERC721TokenNameMsg).message.name)
+            }
+            if ((message as ERC721TokenNameMsg).message?.type === 'sourceType') {
+                props.setSourceType?.((message as ERC721TokenNameMsg).message.name)
+            }
+        },
+        [],
+    )
     // #endregion
 
     useUpdateEffect(() => {
         setIframe()
     }, [setIframe])
 
+    const IframeResizerMemo = useMemo(
+        () =>
+            hidden ? null : (
+                <IframeResizer
+                    src={mediaViewerUrl}
+                    onInit={(iframe: IFrameComponent) => {
+                        ref.current = iframe
+                        setPlayerState(AssetPlayerState.INIT)
+                        setIframe()
+                    }}
+                    className={playerState !== AssetPlayerState.NORMAL ? classes.hidden : classes.iframe}
+                    onResized={({ type }) => {
+                        if (type === 'init' || playerState === AssetPlayerState.NORMAL) return
+                        setPlayerState(AssetPlayerState.NORMAL)
+                    }}
+                    style={{
+                        width: playerState !== AssetPlayerState.NORMAL ? 0 : undefined,
+                        height: playerState !== AssetPlayerState.NORMAL ? 0 : undefined,
+                    }}
+                    checkOrigin={false}
+                    onMessage={onMessage}
+                    frameBorder="0"
+                    allow="autoplay"
+                    allowFullScreen
+                />
+            ),
+        [hidden, playerState, classes, mediaViewerUrl],
+    )
+
     return (
         <>
             <Box
@@ -106,30 +158,16 @@ export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options, iconPro
                 }
                 style={{ display: playerState === AssetPlayerState.NORMAL ? 'none' : undefined }}>
                 {playerState === AssetPlayerState.ERROR ? (
-                    <MaskGreyIcon className={classes.errorIcon} viewBox="0 0 36 36" {...iconProps} />
+                    props.fallbackImage ? (
+                        <img className={classes.loadingFailImage} src={props.fallbackImage.toString()} />
+                    ) : (
+                        <MaskPlaceholder className={classes.errorIcon} {...iconProps} />
+                    )
                 ) : (
-                    <AssetLoadingIcon className={classes.loadingIcon} />
+                    props.loadingIcon ?? <AssetLoadingIcon className={classes.loadingIcon} />
                 )}
             </Box>
-            <IframeResizer
-                src={mediaViewerUrl}
-                onInit={(iframe: IFrameComponent) => {
-                    ref.current = iframe
-                    setPlayerState(AssetPlayerState.INIT)
-                    setIframe()
-                }}
-                onResized={({ type }) => {
-                    if (type === 'init') return
-                    cancel()
-                    setPlayerState(AssetPlayerState.NORMAL)
-                }}
-                style={{ width: playerState !== AssetPlayerState.NORMAL ? 0 : undefined }}
-                checkOrigin={false}
-                onMessage={onMessage}
-                frameBorder="0"
-                allow="autoplay"
-                allowFullScreen
-            />
+            {IframeResizerMemo}
         </>
     )
 })
diff --git a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
new file mode 100644
index 000000000000..18651b8d2e66
--- /dev/null
+++ b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
@@ -0,0 +1,77 @@
+import classNames from 'classnames'
+import { CircularProgress, useTheme } from '@mui/material'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { makeStyles, useStylesExtends } from '@masknet/theme'
+import { AssetPlayer } from '../AssetPlayer'
+
+const useStyles = makeStyles()((theme) => ({
+    wrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 160,
+        width: 120,
+        overflow: 'hidden',
+    },
+    loadingNftImg: {
+        marginTop: 20,
+    },
+    loadingPlaceholder: {
+        height: 160,
+        width: 120,
+    },
+    loadingIcon: {
+        width: 36,
+        height: 52,
+    },
+}))
+
+interface NFTLuckyDropStyledAssetPlayerProps
+    extends withClasses<'loadingFailImage' | 'iframe' | 'wrapper' | 'loadingPlaceholder'> {
+    chainId: ChainId
+    contractAddress: string
+    tokenId: string
+    url?: string
+    fallbackImage?: URL
+    renderOrder?: number
+    setERC721TokenName?: (name: string) => void
+    setSourceType?: (type: string) => void
+}
+export function NFTCardStyledAssetPlayer(props: NFTLuckyDropStyledAssetPlayerProps) {
+    const { chainId, contractAddress, tokenId, fallbackImage, url, setERC721TokenName, renderOrder, setSourceType } =
+        props
+    const classes = useStylesExtends(useStyles(), props)
+    const theme = useTheme()
+    const fallbackImageURL =
+        theme.palette.mode === 'dark'
+            ? new URL('./nft_token_fallback_dark.png', import.meta.url)
+            : new URL('./nft_token_fallback.png', import.meta.url)
+    return (
+        <AssetPlayer
+            erc721Token={{
+                chainId,
+                contractAddress,
+                tokenId: tokenId,
+            }}
+            url={url}
+            options={{
+                autoPlay: true,
+                controls: false,
+                playsInline: true,
+            }}
+            setERC721TokenName={setERC721TokenName}
+            setSourceType={setSourceType}
+            // It would fail to render as loading too many(>200) iframe at once.
+            renderTimeout={renderOrder ? 20000 * Math.floor(renderOrder / 100) : undefined}
+            fallbackImage={fallbackImage ?? fallbackImageURL}
+            loadingIcon={<CircularProgress size={20} className={classes.loadingNftImg} />}
+            classes={{
+                iframe: classNames(classes.wrapper, classes.iframe),
+                errorPlaceholder: classes.wrapper,
+                loadingPlaceholder: classes.wrapper,
+                loadingFailImage: classes.loadingFailImage,
+                loadingIcon: classes.loadingIcon,
+            }}
+        />
+    )
+}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/assets/nft_token_fallback.png b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/nft_token_fallback.png
similarity index 100%
rename from packages/mask/src/plugins/RedPacket/SNSAdaptor/assets/nft_token_fallback.png
rename to packages/shared/src/UI/components/NFTCardStyledAssetPlayer/nft_token_fallback.png
diff --git a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/nft_token_fallback_dark.png b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/nft_token_fallback_dark.png
new file mode 100644
index 000000000000..c71580a52ef0
Binary files /dev/null and b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/nft_token_fallback_dark.png differ
diff --git a/packages/shared/src/UI/components/index.ts b/packages/shared/src/UI/components/index.ts
index 5eba5c52a1a8..a01336a79647 100644
--- a/packages/shared/src/UI/components/index.ts
+++ b/packages/shared/src/UI/components/index.ts
@@ -12,3 +12,4 @@ export * from './MiniNetworkSelector'
 export * from './AddressViewer'
 export * from './I18NextProviderHMR'
 export * from './AssetPlayer'
+export * from './NFTCardStyledAssetPlayer'
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
index 0b86d278127a..1428f3fcfced 100644
--- a/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
+++ b/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
@@ -76,12 +76,19 @@ export async function getERC721TokenDetailedFromChain(
     contractDetailed: ERC721ContractDetailed,
     erc721TokenContract: ERC721,
     tokenId: string,
+    owner?: string,
+    queryTokenURI = true,
 ) {
     if (!contractDetailed) return
     try {
-        const tokenURI = await safeNonPayableTransactionCall(erc721TokenContract.methods.tokenURI(tokenId))
-        const owner = await safeNonPayableTransactionCall(erc721TokenContract.methods.ownerOf(tokenId))
-        const tokenInfo = { owner, tokenURI, name: `#${tokenId}`, hasTokenDetailed: false }
+        const tokenInfo = {
+            owner: owner ?? (await safeNonPayableTransactionCall(erc721TokenContract.methods.ownerOf(tokenId))),
+            tokenURI: queryTokenURI
+                ? await safeNonPayableTransactionCall(erc721TokenContract.methods.tokenURI(tokenId))
+                : '',
+            name: `#${tokenId}`,
+            hasTokenDetailed: false,
+        }
         return createERC721Token(contractDetailed, tokenInfo, tokenId)
     } catch (err) {
         return
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenDetailedOwnerList.ts b/packages/web3-shared/evm/hooks/useERC721TokenDetailedOwnerList.ts
index 5139159ada39..554b86378e65 100644
--- a/packages/web3-shared/evm/hooks/useERC721TokenDetailedOwnerList.ts
+++ b/packages/web3-shared/evm/hooks/useERC721TokenDetailedOwnerList.ts
@@ -5,7 +5,7 @@ import { useOpenseaAPIConstants } from '../constants'
 import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
 import { safeNonPayableTransactionCall } from '../utils'
 import type { ERC721ContractDetailed, ERC721TokenDetailed } from '../types'
-import { getERC721TokenDetailedFromChain, getERC721TokenAssetFromChain } from './useERC721TokenDetailed'
+import { getERC721TokenDetailedFromChain } from './useERC721TokenDetailed'
 import { useEffect, useRef, useState } from 'react'
 import { uniqBy } from 'lodash-unified'
 import { useChainId } from './useChainId'
@@ -39,21 +39,6 @@ export function useERC721TokenDetailedOwnerList(contractDetailed: ERC721Contract
         allListRef.current = uniqBy<ERC721TokenDetailed>([...allListRef.current, ...lists], 'tokenId')
 
         setRefreshing(false)
-
-        // lazy load token info after set loading status to false
-        const allRequest = allListRef.current.map(async (nft) => {
-            // there's no tokenURI or info already loaded.
-            if (!nft.info.tokenURI || nft.info.hasTokenDetailed) return nft
-            const info = await getERC721TokenAssetFromChain(nft.info.tokenURI)
-            if (info) nft.info = { ...info, ...nft.info, hasTokenDetailed: true, name: info.name ?? nft.info.name }
-            return nft
-        })
-
-        allListRef.current = (await Promise.allSettled(allRequest)).map((x, i) => {
-            if (x.status === 'fulfilled') return x.value
-            allListRef.current[i].info.hasTokenDetailed = true
-            return allListRef.current[i]
-        })
     }, [GET_ASSETS_URL, contractDetailed, owner, chainId])
 
     const clearTokenDetailedOwnerList = () => (allListRef.current = [])
@@ -84,7 +69,7 @@ async function getERC721TokenDetailedOwnerListFromChain(
 
         if (!tokenId) return
 
-        return getERC721TokenDetailedFromChain(contractDetailed, erc721TokenContract, tokenId)
+        return getERC721TokenDetailedFromChain(contractDetailed, erc721TokenContract, tokenId, owner, false)
     })
 
     return (await Promise.allSettled(allRequest))