diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
index ed9ab24251cb..c976c00e4ac0 100644
--- a/packages/mask/shared-ui/locales/en-US.json
+++ b/packages/mask/shared-ui/locales/en-US.json
@@ -509,7 +509,6 @@
     "plugin_ito_claim_all": "Claim All",
     "plugin_ito_claim_all_old_contract": "Old ITO Contract",
     "plugin_ito_claim_all_new_contract": "New ITO Contract",
-    "plugin_ito_claimed": "Claimed",
     "plugin_ito_qualification_start_time": "Qualification Start Time:",
     "plugin_ito_error_qualification_start_time": "Invalid: Qualification start time should be earlier than ITO end time",
     "plugin_ito_end_time": "End Time {{zone}}",
diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json
index 2d7367e9f34c..87488e9583c5 100644
--- a/packages/mask/shared-ui/locales/ja-JP.json
+++ b/packages/mask/shared-ui/locales/ja-JP.json
@@ -254,7 +254,6 @@
     "plugin_ito_claim": "請求",
     "plugin_ito_claiming": "請求中",
     "plugin_ito_claim_all": "全て請求",
-    "plugin_ito_claimed": "請求しました",
     "plugin_ito_qualification_start_time": "参加資格開始時間：",
     "plugin_ito_error_qualification_start_time": "無効：資格開始時間は ITO の終了時間よりも前でなくてはいけません",
     "plugin_ito_end_time": "終了時刻 {{zone}}",
diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json
index aafe61cbddd2..087efae4333a 100644
--- a/packages/mask/shared-ui/locales/ko-KR.json
+++ b/packages/mask/shared-ui/locales/ko-KR.json
@@ -459,7 +459,6 @@
     "plugin_ito_claim_all": "모두 수령",
     "plugin_ito_claim_all_old_contract": "Old ITO Contract",
     "plugin_ito_claim_all_new_contract": "New ITO Contract",
-    "plugin_ito_claimed": "수령됨",
     "plugin_ito_qualification_start_time": "자격 인정 시작 시간",
     "plugin_ito_error_qualification_start_time": "주의: 자격 인정 시작 시간이 ITO 종료 시간보다 빨아야 합니다.",
     "plugin_ito_end_time": "종료 시간 {{zone}}",
diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
index 82ff835d74a5..2581539220e0 100644
--- a/packages/mask/shared-ui/locales/qya-AA.json
+++ b/packages/mask/shared-ui/locales/qya-AA.json
@@ -509,7 +509,6 @@
     "plugin_ito_claim_all": "crwdns5053:0crwdne5053:0",
     "plugin_ito_claim_all_old_contract": "crwdns5055:0crwdne5055:0",
     "plugin_ito_claim_all_new_contract": "crwdns5057:0crwdne5057:0",
-    "plugin_ito_claimed": "crwdns5059:0crwdne5059:0",
     "plugin_ito_qualification_start_time": "crwdns5061:0crwdne5061:0",
     "plugin_ito_error_qualification_start_time": "crwdns5063:0crwdne5063:0",
     "plugin_ito_end_time": "crwdns5065:0{{zone}}crwdne5065:0",
diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
index ce984799a627..778b6f5c22d3 100644
--- a/packages/mask/shared-ui/locales/zh-CN.json
+++ b/packages/mask/shared-ui/locales/zh-CN.json
@@ -501,7 +501,6 @@
     "plugin_ito_claim_all": "认领全部",
     "plugin_ito_claim_all_old_contract": "旧的ITO合约",
     "plugin_ito_claim_all_new_contract": "新的ITO合约",
-    "plugin_ito_claimed": "已认领",
     "plugin_ito_qualification_start_time": "资格认证开始时间：",
     "plugin_ito_error_qualification_start_time": "无效：资格认证开始时间应该早于ITO结束时间",
     "plugin_ito_end_time": "结束时间 {{zone}}",
diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json
index 700a8876dc1a..b593ea40601b 100644
--- a/packages/mask/shared-ui/locales/zh-TW.json
+++ b/packages/mask/shared-ui/locales/zh-TW.json
@@ -397,7 +397,6 @@
     "plugin_ito_claim": "認領",
     "plugin_ito_claiming": "認領中",
     "plugin_ito_claim_all": "認領全部",
-    "plugin_ito_claimed": "已認領",
     "plugin_ito_qualification_start_time": "資格開始時間：",
     "plugin_ito_error_qualification_start_time": "錯誤：資格開始時間應早於 ITO 結束時間",
     "plugin_ito_end_time": "結束時間 {{zone}}",
diff --git a/packages/mask/src/components/CompositionDialog/BadgeRenderer.tsx b/packages/mask/src/components/CompositionDialog/BadgeRenderer.tsx
index e50a17d16e27..c3d7855e8575 100644
--- a/packages/mask/src/components/CompositionDialog/BadgeRenderer.tsx
+++ b/packages/mask/src/components/CompositionDialog/BadgeRenderer.tsx
@@ -1,9 +1,16 @@
 import { useActivatedPluginsSNSAdaptor, Plugin } from '@masknet/plugin-infra'
+import { makeStyles } from '@masknet/theme'
 import type { TypedMessage } from '@masknet/shared-base'
 import { Box, Chip } from '@mui/material'
 import { usePluginI18NField } from '../../plugin-infra/I18NFieldRender'
 import { ShadowRootTooltip, useI18N } from '../../utils'
 
+const useStyles = makeStyles()((theme) => ({
+    chip: {
+        maxWidth: 300,
+    },
+}))
+
 export interface BadgeRendererProps {
     meta: TypedMessage['meta']
     onDeleteMeta(metaID: string): void
@@ -62,11 +69,12 @@ interface MetaBadgeProps {
 }
 
 function MetaBadge({ title, children, onDelete, readonly }: React.PropsWithChildren<MetaBadgeProps>) {
+    const { classes } = useStyles()
     return (
         <Box sx={{ marginRight: 1, marginTop: 1, display: 'inline-block' }}>
             <ShadowRootTooltip title={title}>
                 <span>
-                    <Chip disabled={readonly} onDelete={onDelete} label={children} />
+                    <Chip disabled={readonly} onDelete={onDelete} label={children} className={classes.chip} />
                 </span>
             </ShadowRootTooltip>
         </Box>
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
index 6036d19f99ed..06b1b59ebd78 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -351,14 +351,22 @@ export function ITO(props: ITO_Props) {
         WalletMessages.events.transactionDialogUpdated,
         (ev) => {
             if (ev.open) return
-            resetClaimCallback()
-            if (claimState.type !== TransactionStateType.CONFIRMED) return
-            retryITOCard()
+
+            if (
+                claimState.type !== TransactionStateType.CONFIRMED ||
+                (claimState.type === TransactionStateType.CONFIRMED && claimState.no !== 0)
+            )
+                return
+            window.location.reload()
         },
     )
 
     useEffect(() => {
-        if (claimState.type === TransactionStateType.UNKNOWN) return
+        if (
+            claimState.type === TransactionStateType.UNKNOWN ||
+            (claimState.type === TransactionStateType.CONFIRMED && claimState.no !== 0)
+        )
+            return
         setClaimTransactionDialog({
             open: true,
             state: claimState,
@@ -403,8 +411,7 @@ export function ITO(props: ITO_Props) {
         (ev) => {
             if (ev.open) return
             if (destructState.type !== TransactionStateType.CONFIRMED) return
-            resetDestructCallback()
-            retryITOCard()
+            window.location.reload()
         },
     )
 
@@ -583,7 +590,6 @@ export function ITO(props: ITO_Props) {
                 </Typography>
                 <Box className={classes.progressWrap}>
                     <StyledLinearProgress
-                        barColor="#fff"
                         variant="determinate"
                         value={Number(sold.multipliedBy(100).dividedBy(total))}
                     />
@@ -633,16 +639,10 @@ export function ITO(props: ITO_Props) {
                         className={classes.actionButton}>
                         {t('plugin_ito_region_ban')}
                     </ActionButton>
-                ) : total_remaining.isZero() && !isBuyer && !canWithdraw ? (
-                    <ActionButton
-                        disabled
-                        onClick={() => undefined}
-                        variant="contained"
-                        size="large"
-                        className={classes.actionButton}>
-                        {t('plugin_ito_status_out_of_stock')}
-                    </ActionButton>
-                ) : loadingTradeInfo || loadingAvailability ? (
+                ) : (noRemain || listOfStatus.includes(ITO_Status.expired)) &&
+                  !canWithdraw &&
+                  ((availability?.claimed && hasLockTime) || !hasLockTime) ? null : loadingTradeInfo ||
+                  loadingAvailability ? (
                     <ActionButton
                         disabled
                         onClick={() => undefined}
@@ -659,18 +659,10 @@ export function ITO(props: ITO_Props) {
                         className={classes.actionButton}>
                         {t('plugin_wallet_connect_a_wallet')}
                     </ActionButton>
-                ) : canWithdraw ? (
-                    <ActionButton
-                        onClick={onWithdraw}
-                        variant="contained"
-                        size="large"
-                        className={classes.actionButton}>
-                        {t('plugin_ito_withdraw')}
-                    </ActionButton>
                 ) : isBuyer ? (
                     <Grid container spacing={2}>
                         {hasLockTime ? (
-                            <Grid item xs={6}>
+                            <Grid item xs={noRemain || listOfStatus.includes(ITO_Status.expired) ? 12 : 6}>
                                 {isUnlocked ? (
                                     !availability?.claimed ? (
                                         <ActionButton
@@ -683,16 +675,15 @@ export function ITO(props: ITO_Props) {
                                                 ? t('plugin_ito_claiming')
                                                 : t('plugin_ito_claim')}
                                         </ActionButton>
-                                    ) : (
+                                    ) : canWithdraw ? (
                                         <ActionButton
-                                            onClick={() => undefined}
-                                            disabled
+                                            onClick={onWithdraw}
                                             variant="contained"
                                             size="large"
                                             className={classes.actionButton}>
-                                            {t('plugin_ito_claimed')}
+                                            {t('plugin_ito_withdraw')}
                                         </ActionButton>
-                                    )
+                                    ) : null
                                 ) : (
                                     <ActionButton
                                         onClick={() => undefined}
@@ -704,17 +695,37 @@ export function ITO(props: ITO_Props) {
                                     </ActionButton>
                                 )}
                             </Grid>
+                        ) : canWithdraw ? (
+                            <Grid item xs={12}>
+                                <ActionButton
+                                    onClick={onWithdraw}
+                                    variant="contained"
+                                    size="large"
+                                    className={classes.actionButton}>
+                                    {t('plugin_ito_withdraw')}
+                                </ActionButton>
+                            </Grid>
                         ) : null}
-                        <Grid item xs={hasLockTime ? 6 : 12}>
-                            <ActionButton
-                                onClick={onShareSuccess}
-                                variant="contained"
-                                size="large"
-                                className={classes.actionButton}>
-                                {t('plugin_ito_share')}
-                            </ActionButton>
-                        </Grid>
+                        {noRemain || listOfStatus.includes(ITO_Status.expired) ? null : (
+                            <Grid item xs={hasLockTime ? 6 : 12}>
+                                <ActionButton
+                                    onClick={onShareSuccess}
+                                    variant="contained"
+                                    size="large"
+                                    className={classes.actionButton}>
+                                    {t('plugin_ito_share')}
+                                </ActionButton>
+                            </Grid>
+                        )}
                     </Grid>
+                ) : canWithdraw ? (
+                    <ActionButton
+                        onClick={onWithdraw}
+                        variant="contained"
+                        size="large"
+                        className={classes.actionButton}>
+                        {t('plugin_ito_withdraw')}
+                    </ActionButton>
                 ) : !ifQualified || !(ifQualified as Qual_V2).qualified ? (
                     <ActionButton
                         onClick={retryIfQualified}
@@ -763,9 +774,26 @@ export function ITO(props: ITO_Props) {
                         ) : undefined}
                     </Grid>
                 ) : listOfStatus.includes(ITO_Status.started) ? (
-                    <ActionButton onClick={onClaim} variant="contained" size="large" className={classes.actionButton}>
-                        <Typography>{t('plugin_ito_enter')}</Typography>
-                    </ActionButton>
+                    <Grid container spacing={2}>
+                        <Grid item xs={6}>
+                            <ActionButton
+                                onClick={onClaim}
+                                variant="contained"
+                                size="large"
+                                className={classes.actionButton}>
+                                <Typography>{t('plugin_ito_enter')}</Typography>
+                            </ActionButton>
+                        </Grid>
+                        <Grid item xs={6}>
+                            <ActionButton
+                                onClick={onShareSuccess}
+                                variant="contained"
+                                size="large"
+                                className={classes.actionButton}>
+                                <Typography>{t('plugin_ito_share')}</Typography>
+                            </ActionButton>
+                        </Grid>
+                    </Grid>
                 ) : null}
             </Box>
 
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
index fcaa9478e3b2..50cca04995dc 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
@@ -121,6 +121,11 @@ const useStyles = makeStyles()((theme) => {
             border: `1px solid ${theme.palette.divider}`,
             color: theme.palette.text.secondary,
         },
+        ellipsis: {
+            maxWidth: 350,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
     }
 })
 
@@ -235,7 +240,7 @@ export function PoolInList(props: PoolInListProps) {
                 <Box className={classes.content}>
                     <Box className={classes.header}>
                         <Box className={classes.title}>
-                            <Typography variant="body1" color="textPrimary">
+                            <Typography variant="body1" color="textPrimary" className={classes.ellipsis}>
                                 {title}
                             </Typography>
                             <Typography className={classes.date} variant="body2" color="textSecondary">
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx
index cdb59c724fbb..561d533b596a 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx
@@ -1,23 +1,17 @@
 import { LinearProgress, LinearProgressProps } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-interface StyledLinearProgress extends LinearProgressProps {
-    barColor?: string
-    backgroundColor?: string
-}
 
-const useStyles = makeStyles<StyledLinearProgress>()((_theme, props) => ({
+const useStyles = makeStyles()((_theme) => ({
     root: {
         height: 8,
         borderRadius: 5,
-        backgroundColor: props.backgroundColor ?? 'rgba(255, 255, 255, 0.3)',
     },
     bar: {
         borderRadius: 5,
-        backgroundColor: props.barColor ?? 'rgb(44, 164, 239)',
     },
 }))
 
-export function StyledLinearProgress(props: StyledLinearProgress) {
-    const { classes } = useStyles(props)
+export function StyledLinearProgress(props: LinearProgressProps) {
+    const { classes } = useStyles()
     return <LinearProgress classes={classes} {...props} />
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
index a01451fbd725..0566a6784a10 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
@@ -4,6 +4,7 @@ import { List, ListItem, ListProps, Skeleton, Typography } from '@mui/material'
 import classnames from 'classnames'
 import type { FC, HTMLProps } from 'react'
 import { useI18N } from '../../../utils'
+import { NftImage } from './NftImage'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -77,6 +78,13 @@ const useStyles = makeStyles()((theme) => {
             padding: '2px 2px 6px',
             color: MaskColorVar.textSecondary,
         },
+        loadingFailImage: {
+            minHeight: '0px !important',
+            maxWidth: 'none',
+            transform: 'translateY(-10px)',
+            width: 64,
+            height: 64,
+        },
     }
 })
 
@@ -97,11 +105,17 @@ export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claime
             </div>
         )
     }
-    const info = result.tokenDetailed.info
+
     return (
         <div className={classnames(className, classes.nft)} {...rest}>
-            <img className={classes.media} src={info.mediaUrl} alt={info.name} />
-            <Typography className={classes.name}>{info.name}</Typography>
+            <NftImage
+                classes={{
+                    loadingFailImage: classes.loadingFailImage,
+                }}
+                token={result.tokenDetailed}
+                fallbackImage={new URL('./assets/nft_token_fallback.png', import.meta.url)}
+            />
+            <Typography className={classes.name}>{result.tokenDetailed.info.name}</Typography>
             {claimed && <Typography className={classes.claimedBadge}>{t('plugin_red_packet_claimed')}</Typography>}
         </div>
     )
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
index f29a2232bd0b..56d0efe93b65 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
@@ -131,6 +131,12 @@ const useStyles = makeStyles()((theme) => {
                 color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
             },
         },
+        ellipsis: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            maxWidth: 360,
+        },
     }
 })
 
@@ -179,12 +185,17 @@ export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
                         classes={{ icon: classes.icon }}
                         address={contractDetailed?.address ?? ''}
                         name={contractDetailed?.name ?? '-'}
-                        logoURI={contractDetailed?.iconURL ?? ''}
+                        logoURI={
+                            contractDetailed?.iconURL ??
+                            new URL('../../../resources/maskFilledIcon.png', import.meta.url).toString()
+                        }
                     />
                     <Box className={classes.content}>
                         <section className={classes.section}>
                             <div>
-                                <Typography variant="body1" className={classNames(classes.title, classes.message)}>
+                                <Typography
+                                    variant="body1"
+                                    className={classNames(classes.title, classes.message, classes.ellipsis)}>
                                     {history.message === '' ? t('plugin_red_packet_best_wishes') : history.message}
                                 </Typography>
                                 <Typography variant="body1" className={classNames(classes.info, classes.message)}>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
index f697ca0b61c2..9383d4856d29 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
@@ -55,9 +55,11 @@ export function RedPacket(props: RedPacketProps) {
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
 
     const { value: tokenDetailed } = useFungibleTokenDetailed(
-        payload.token?.type ?? payload.token_type ?? isSameAddress(NATIVE_TOKEN_ADDRESS, payload.token_address)
-            ? EthereumTokenType.Native
-            : EthereumTokenType.ERC20,
+        payload.token?.type ??
+            payload.token_type ??
+            (isSameAddress(NATIVE_TOKEN_ADDRESS, payload.token_address)
+                ? EthereumTokenType.Native
+                : EthereumTokenType.ERC20),
         payload.token?.address ?? payload.token_address ?? '',
     )
     const token = payload.token ?? tokenDetailed
@@ -105,7 +107,7 @@ export function RedPacket(props: RedPacketProps) {
         const state = canClaim ? claimState : refundState
         if (state.type === TransactionStateType.UNKNOWN) return
         if (!availability || !token) return
-        if (state.type === TransactionStateType.HASH) {
+        if (state.type === TransactionStateType.CONFIRMED) {
             setTransactionDialog({
                 open: true,
                 shareLink: shareLink!.toString(),
@@ -119,7 +121,6 @@ export function RedPacket(props: RedPacketProps) {
                       })
                     : '',
             })
-        } else if (state.type === TransactionStateType.CONFIRMED) {
             resetClaimCallback()
             resetRefundCallback()
             revalidateAvailability()
@@ -193,7 +194,7 @@ export function RedPacket(props: RedPacketProps) {
                     ) : null}
                 </div>
                 <div className={classNames(classes.content)}>
-                    <div>
+                    <div className={classes.fullWidthBox}>
                         <Typography className={classes.words} variant="h6">
                             {payload.sender.message}
                         </Typography>
@@ -209,14 +210,16 @@ export function RedPacket(props: RedPacketProps) {
                     </div>
                 </div>
             </Card>
-            <OperationFooter
-                canClaim={canClaim}
-                canRefund={canRefund}
-                claimState={claimState}
-                refundState={refundState}
-                shareLink={shareLink}
-                onClaimOrRefund={onClaimOrRefund}
-            />
+            {listOfStatus.includes(RedPacketStatus.expired) || listOfStatus.includes(RedPacketStatus.empty) ? null : (
+                <OperationFooter
+                    canClaim={canClaim}
+                    canRefund={canRefund}
+                    claimState={claimState}
+                    refundState={refundState}
+                    shareLink={shareLink}
+                    onClaimOrRefund={onClaimOrRefund}
+                />
+            )}
         </EthereumChainBoundary>
     )
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
index 968c65834caf..c1981af2d161 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
@@ -158,6 +158,9 @@ to {
         connectWallet: {
             marginTop: 16,
         },
+        fullWidthBox: {
+            width: '100%',
+        },
         loadingText: {
             textAlign: 'center',
             fontSize: 24,
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
index e9c49799aa5d..0fe82651d204 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
@@ -58,6 +58,10 @@ const useStyles = makeStyles()((theme) => ({
             color: theme.palette.mode === 'light' ? '#7B8192' : '#6F767C',
         },
     },
+    ellipsis: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
 }))
 
 export interface ConfirmRedPacketFormProps {
@@ -80,7 +84,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
     return (
         <Grid container spacing={2} className={classNames(classes.grid, classes.gridWrapper)}>
             <Grid item xs={12}>
-                <Typography variant="h4" color="textPrimary" align="center">
+                <Typography variant="h4" color="textPrimary" align="center" className={classes.ellipsis}>
                     {settings?.message}
                 </Typography>
             </Grid>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
index 0cd8ba2ddfa4..c6dcf9ba10b6 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
@@ -7,6 +7,7 @@ import {
     useNativeTokenDetailed,
     useRedPacketConstants,
     useFungibleTokenBalance,
+    useChainId,
 } from '@masknet/web3-shared-evm'
 import { isGreaterThan, isZero, multipliedBy, rightShift } from '@masknet/web3-shared-base'
 import { omit } from 'lodash-unified'
@@ -89,6 +90,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
     const { onChange, onNext, origin } = props
     // context
     const account = useAccount()
+    const chainId = useChainId()
     const { HAPPY_RED_PACKET_ADDRESS_V4 } = useRedPacketConstants()
 
     //#region select token
@@ -148,6 +150,10 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
     const totalAmount = useMemo(() => multipliedBy(amount, isRandom ? 1 : shares ?? '0'), [amount, shares])
     const isDivisible = !totalAmount.dividedBy(shares).isLessThan(1)
 
+    useEffect(() => {
+        setToken(nativeTokenDetailed)
+    }, [chainId, nativeTokenDetailed])
+
     useEffect(() => {
         setRawAmount('0')
     }, [token])
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
index 654a37834c79..7acdb3a09324 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
@@ -93,13 +93,14 @@ const useStyles = makeStyles()((theme) => {
                 flexWrap: 'wrap',
             },
         },
-        div: {},
+        div: {
+            maxWidth: 350,
+        },
         icon: {
             width: 27,
             height: 27,
         },
         title: {
-            whiteSpace: 'break-spaces',
             fontWeight: 500,
             fontSize: 16,
         },
@@ -112,10 +113,17 @@ const useStyles = makeStyles()((theme) => {
         },
         actionButton: {
             height: 26,
+            background: theme.palette.mode === 'light' ? '#000' : '#fff',
+            color: theme.palette.mode === 'light' ? '#fff' : '#000',
             minHeight: 'auto',
             [smallQuery]: {
                 marginTop: theme.spacing(1),
             },
+            '&:hover': {
+                background: theme.palette.mode === 'light' ? '#000' : '#fff',
+                color: theme.palette.mode === 'light' ? '#fff' : '#000',
+                opacity: 0.8,
+            },
         },
         footer: {
             width: '100%',
@@ -165,6 +173,9 @@ const useStyles = makeStyles()((theme) => {
                 color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
             },
         },
+        fullWidthBox: {
+            width: '100%',
+        },
     }
 })
 
@@ -257,11 +268,13 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                 <Box className={classes.content}>
                     <section className={classes.section}>
                         <div className={classes.div}>
-                            <Typography variant="body1" className={classNames(classes.title, classes.message)}>
-                                {history.sender.message === ''
-                                    ? t('plugin_red_packet_best_wishes')
-                                    : history.sender.message}
-                            </Typography>
+                            <div className={classes.fullWidthBox}>
+                                <Typography variant="body1" className={classNames(classes.title, classes.message)}>
+                                    {history.sender.message === ''
+                                        ? t('plugin_red_packet_best_wishes')
+                                        : history.sender.message}
+                                </Typography>
+                            </div>
                             <Typography variant="body1" className={classNames(classes.info, classes.message)}>
                                 {t('plugin_red_packet_history_duration', {
                                     startTime: dateTimeFormat(new Date(history.creation_time)),
@@ -330,8 +343,6 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                         ) : null}
                     </section>
                     <StyledLinearProgress
-                        barColor="rgb(44, 164, 239)"
-                        backgroundColor="rgba(44, 164, 239, 0.2)"
                         variant="determinate"
                         value={100 * (1 - Number(history.total_remaining) / Number(history.total))}
                     />
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 97121ec708ae..bba4b0699001 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -216,6 +216,13 @@ const useStyles = makeStyles()((theme) => ({
             borderColor: 'white',
         },
     },
+    ellipsis: {
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        maxWidth: 400,
+        fontSize: '1.5rem',
+    },
 }))
 export interface RedPacketNftProps {
     payload: RedPacketNftJSONPayload
@@ -354,7 +361,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
             <Card className={classes.card} component="article" elevation={0}>
                 <CardHeader
                     className={classNames(classes.title, availability.isEnd ? classes.hide : '', classes.whiteText)}
-                    title={payload.message}
+                    title={<Typography className={classes.ellipsis}>{payload.message}</Typography>}
                     subheader={
                         <span
                             className={classNames(classes.link, classes.whiteText)}
@@ -393,7 +400,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                         target="_blank"
                         rel="noopener noreferrer"
                         className={classes.whiteText}>
-                        Mask.io
+                        <Typography variant="body1">Mask.io</Typography>
                     </Link>
                     <Typography variant="body1">From: @{payload.senderName}</Typography>
                 </div>
@@ -418,7 +425,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                         </Typography>
                     </div>
                 </Card>
-            ) : (
+            ) : availability.isClaimedAll || availability.isCompleted ? null : (
                 <Grid container spacing={2} className={classes.buttonWrapper}>
                     <Grid item xs={availability.isClaimed ? 12 : 6}>
                         <Button className={classes.button} fullWidth onClick={onShare} size="large" variant="contained">
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
index a7a6cf63374f..65500b654522 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
@@ -139,6 +139,11 @@ const useStyles = makeStyles()((theme) => ({
         width: 64,
         height: 64,
     },
+    ellipsis: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
 }))
 export interface RedpacketNftConfirmDialogProps {
     open: boolean
@@ -258,7 +263,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                             variant="body1"
                             color="textPrimary"
                             align="right"
-                            className={(classes.text, classes.bold)}>
+                            className={(classes.text, classes.bold, classes.ellipsis)}>
                             {message}
                         </Typography>
                     </Grid>