diff --git a/.ignore b/.ignore
index efb1bdfb35bc..376b54a68a75 100644
--- a/.ignore
+++ b/.ignore
@@ -1,3 +1,5 @@
 # Ignores for rg or ag
 patches/
 packages/mask/dashboard/assets/images/SetupTutorial.svg
+
+**/locale/*.{po,json}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/NFTCard.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/NFTCard.tsx
index c8c9d9f58d12..1d5ebf08b301 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/NFTCard.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/NFTCard.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { formatTokenId } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
-import { memo } from 'react'
+import { memo, type HTMLProps } from 'react'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -52,16 +52,15 @@ const useStyles = makeStyles()((theme) => {
     }
 })
 
-interface NFTCardProps {
+interface NFTCardProps extends HTMLProps<HTMLDivElement> {
     token: Web3Helper.NonFungibleAssetAll
-    onRemove: (token: Web3Helper.NonFungibleAssetAll) => void
+    onRemove?: (token: Web3Helper.NonFungibleAssetAll) => void
 }
 
-export const NFTCard = memo(function NFTCard(props: NFTCardProps) {
-    const { token, onRemove } = props
-    const { classes } = useStyles()
+export const NFTCard = memo(function NFTCard({ token, onRemove, className, ...rest }: NFTCardProps) {
+    const { classes, cx } = useStyles()
     return (
-        <div className={classes.card}>
+        <div className={cx(classes.card, className)} {...rest}>
             <AssetPreviewer
                 url={token.metadata?.mediaURL || token.metadata?.imageURL}
                 classes={{
@@ -72,7 +71,9 @@ export const NFTCard = memo(function NFTCard(props: NFTCardProps) {
             <Typography className={classes.cardName} color="textSecondary">
                 {formatTokenId(token.tokenId, 2)}
             </Typography>
-            <Icons.Clear size={20} className={classes.removeButton} onClick={() => onRemove(token)} />
+            {onRemove ?
+                <Icons.Clear size={20} className={classes.removeButton} />
+            :   null}
         </div>
     )
 })
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx
index 1f61f7e3b7fa..f04b95eddaa2 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx
@@ -169,7 +169,7 @@ export const RedPacketProvider = memo(function RedPacketProvider({ children }: P
     const [selectedNfts, setSelectedNfts] = useState<Web3Helper.NonFungibleAssetAll[]>([])
     const [myNfts, setMyNfts] = useState<OrderedERC721Token[]>([])
     const [selectOption, setSelectOption] = useState<NFTSelectOption>(NFTSelectOption.Partial)
-    const [collection, setCollection] = useState<NonFungibleCollection<ChainId, SchemaType>>()
+    const [collection, setCollection] = useState<Web3Helper.NonFungibleCollectionAll>()
 
     const contextValue = useMemo(() => {
         return {
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx
index ee703e3f3cde..48f5da2c7ac1 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx
@@ -57,11 +57,11 @@ const useStyles = makeStyles()((theme) => {
         },
 
         assets: {
-            display: 'flex',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(86px, 1fr))',
             gap: 10,
         },
         card: {
-            width: 86,
             position: 'relative',
             borderRadius: 8,
             overflow: 'hidden',
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx
index f3ef2db90dda..389e017f8269 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx
@@ -1,37 +1,25 @@
-import { Trans } from '@lingui/macro'
-import {
-    ApplicationBoardModal,
-    AssetPreviewer,
-    ChainBoundary,
-    PluginWalletStatusBar,
-    WalletConnectedBoundary,
-} from '@masknet/shared'
+import { t, Trans } from '@lingui/macro'
+import { Icons } from '@masknet/icons'
+import { ApplicationBoardModal, ChainBoundary, PluginWalletStatusBar, WalletConnectedBoundary } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { ActionButton, makeStyles } from '@masknet/theme'
-import { useChainContext, useWallet } from '@masknet/web3-hooks-base'
+import { useChainContext } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver, EVMWeb3 } from '@masknet/web3-providers'
-import type { NonFungibleToken } from '@masknet/web3-shared-base'
-import {
-    formatEthereumAddress,
-    formatTokenId,
-    isNativeTokenAddress,
-    type ChainId,
-    type SchemaType,
-} from '@masknet/web3-shared-evm'
-import { Launch as LaunchIcon } from '@mui/icons-material'
-import { Box, Link, ListItem, Typography } from '@mui/material'
-import { memo, useCallback, useContext, useMemo, useState } from 'react'
+import { Box, Link, Typography } from '@mui/material'
+import { useCallback, useContext, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { RedPacketNftMetaKey, RoutePaths } from '../../constants.js'
 import { RedPacketRPC } from '../../messages.js'
+import { NFTCard } from '../components/NFTCard.js'
+import { PreviewRedPacket } from '../components/PreviewRedPacket.js'
+import { CompositionTypeContext } from '../contexts/CompositionTypeContext.js'
+import { useRedPacket } from '../contexts/RedPacketContext.js'
 import { useCreateNftRedpacketCallback } from '../hooks/useCreateNftRedpacketCallback.js'
 import { openComposition } from '../openComposition.js'
-import { useRedPacket } from '../contexts/RedPacketContext.js'
-import { CompositionTypeContext } from '../contexts/CompositionTypeContext.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
-        padding: theme.spacing(2),
+        paddingBottom: 70,
     },
     settings: {
         display: 'flex',
@@ -40,6 +28,14 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(2),
         flexGrow: 1,
     },
+    message: {
+        fontSize: 24,
+        fontWeight: 700,
+        overflow: 'hidden',
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: 2,
+    },
     field: {
         display: 'flex',
     },
@@ -59,128 +55,47 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         marginLeft: theme.spacing(0.5),
     },
-    account: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-    },
-    text: {
-        fontSize: 16,
-    },
-    bold: {
-        fontWeight: 500,
-    },
-    icon: {
-        marginRight: 8,
-        height: 24,
-        width: 24,
-    },
-    tokenSelector: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gap: theme.spacing(1),
-        width: '100%',
-        maxHeight: 420,
-        overflowY: 'auto',
-        background: theme.palette.background.default,
-        borderRadius: 12,
-        padding: theme.spacing(1),
-        boxSizing: 'border-box',
-        '&::-webkit-scrollbar': {
-            display: 'none',
-        },
-    },
-    tokenSelectorWrapper: {
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: 8,
-        padding: 0,
-        background: theme.palette.mode === 'light' ? '#fff' : '#2F3336',
-        height: 150,
+    envelope: {
+        width: 484,
+        height: 336,
+        borderRadius: theme.spacing(2),
         overflow: 'hidden',
     },
-    nftNameWrapper: {
-        position: 'absolute',
-        bottom: 0,
-        width: '100%',
-        background: theme.palette.background.paper,
-        borderBottomRightRadius: 8,
-        borderBottomLeftRadius: 8,
-        paddingTop: 2,
-        paddingBottom: 1,
-    },
-    nftName: {
-        minHeight: 30,
-        marginLeft: 8,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
     button: {
         minHeight: 36,
         height: 36,
     },
     sendButton: {},
-    fallbackImage: {
-        minHeight: '0 !important',
-        maxWidth: 'none',
-        width: 64,
-        height: 64,
-    },
-    ellipsis: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
+    assets: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(86px, 1fr))',
+        gap: 10,
     },
-    assetImgWrapper: {
-        maxHeight: 120,
+    card: {
+        position: 'relative',
+        borderRadius: 8,
         overflow: 'hidden',
+        backgroundColor: theme.palette.maskColor.input,
     },
 }))
 
-interface NFTCardProps {
-    token: NonFungibleToken<ChainId, SchemaType>
-}
-
-const NFTCard = memo(function NFTCard(props: NFTCardProps) {
-    const { token } = props
-    const { classes } = useStyles()
-    return (
-        <ListItem className={classes.tokenSelectorWrapper}>
-            <AssetPreviewer
-                url={token.metadata?.mediaURL || token.metadata?.imageURL}
-                classes={{
-                    fallbackImage: classes.fallbackImage,
-                    root: classes.assetImgWrapper,
-                }}
-            />
-            <div className={classes.nftNameWrapper}>
-                <Typography className={classes.nftName} color="textSecondary">
-                    {formatTokenId(token.tokenId, 2)}
-                </Typography>
-            </div>
-        </ListItem>
-    )
-})
 export function NftRedPacketConfirm() {
     const { classes, cx } = useStyles()
     const navigate = useNavigate()
-    const { nftGasOption: gasOption, creator, message, collection, selectedNfts: tokenList } = useRedPacket()
-    const wallet = useWallet()
-    const { account, chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const { nftGasOption: gasOption, creator, settings, message, collection, selectedNfts } = useRedPacket()
+    const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
 
     const { account: redpacketPubkey, privateKey = '' } = useMemo(() => EVMWeb3.createAccount(), [])!
 
     const duration = 60 * 60 * 24
 
-    const tokenIdList = useMemo(() => tokenList.map((value) => value.tokenId), [tokenList])
+    const tokenIds = useMemo(() => selectedNfts.map((value) => value.tokenId), [selectedNfts])
     const [{ loading: isSending }, createCallback] = useCreateNftRedpacketCallback(
         duration,
         message,
         creator,
         collection?.address ?? '',
-        tokenIdList,
+        tokenIds,
         gasOption,
     )
 
@@ -205,6 +120,9 @@ export function NftRedPacketConfirm() {
     const compositionType = useContext(CompositionTypeContext)
     const onSendPost = useCallback(
         (id: string) => {
+            const post = t`Hi friends, I just created an NFT Lucky Drop on Twitter through Mask Network extension. Feel free to claim and share. Follow @realMaskNetwork  for Web3 updates and insights.
+
+🧧🧧🧧 Try sending Lucky Drop to your friends with Mask.io.`
             openComposition(
                 RedPacketNftMetaKey,
                 {
@@ -221,6 +139,8 @@ export function NftRedPacketConfirm() {
                     chainId: collection?.chainId,
                 },
                 compositionType,
+                undefined,
+                post,
             )
             ApplicationBoardModal.close()
         },
@@ -230,76 +150,54 @@ export function NftRedPacketConfirm() {
     return (
         <div className={classes.container}>
             <div className={classes.settings}>
+                <Typography variant="h4" color="textPrimary" align="center" className={classes.message}>
+                    {settings.message}
+                </Typography>
                 <div className={classes.field}>
-                    <Typography color="textPrimary" variant="body1" className={classes.fieldName}>
-                        <Trans>Wallet account</Trans>
-                    </Typography>
-                    <div className={classes.fieldValue}>
-                        <Typography
-                            color="textPrimary"
-                            variant="body1"
-                            align="right"
-                            className={cx(classes.account, classes.bold, classes.text)}>
-                            {formatEthereumAddress(account, 4)}
-                            {isNativeTokenAddress(wallet?.address) ? null : (
-                                <Link
-                                    color="textPrimary"
-                                    className={classes.link}
-                                    href={EVMExplorerResolver.addressLink(chainId, account)}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    onClick={stop}>
-                                    <LaunchIcon fontSize="small" />
-                                </Link>
-                            )}
-                        </Typography>
-                    </div>
-                </div>
-                <div className={classes.field}>
-                    <Typography variant="body1" color="textPrimary" className={classes.fieldName}>
-                        <Trans>Attached Message</Trans>
+                    <Typography className={classes.fieldName}>
+                        <Trans>Collection</Trans>
                     </Typography>
-                    <Typography
-                        variant="body1"
-                        color="textPrimary"
-                        align="right"
-                        className={cx(classes.text, classes.bold, classes.ellipsis, classes.fieldValue)}>
-                        {message}
+                    <Typography variant="body1" className={classes.fieldValue}>
+                        {collection?.name}
+                        {collection?.address ?
+                            <Link
+                                color="textPrimary"
+                                className={classes.link}
+                                href={EVMExplorerResolver.addressLink(chainId, collection.address)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                onClick={stop}>
+                                <Icons.LinkOut size={20} />
+                            </Link>
+                        :   null}
                     </Typography>
                 </div>
                 <div className={classes.field}>
-                    <Typography variant="body1" color="textPrimary" className={classes.fieldName}>
-                        <Trans>Collections</Trans>
+                    <Typography className={classes.fieldName}>
+                        <Trans>Total NFTs</Trans>
+                    </Typography>
+                    <Typography variant="body1" className={classes.fieldValue}>
+                        {selectedNfts.length}
                     </Typography>
-                    <div className={classes.fieldValue}>
-                        {collection?.iconURL ?
-                            <img className={classes.icon} src={collection.iconURL} />
-                        :   null}
-                        <Typography
-                            variant="body1"
-                            color="textPrimary"
-                            align="right"
-                            className={cx(classes.text, classes.bold)}>
-                            {collection?.name}
-                        </Typography>
-                    </div>
                 </div>
-                <div className={classes.tokenSelector}>
-                    {tokenList.map((value, i) => (
-                        <NFTCard key={i} token={value} />
+                <div className={classes.assets}>
+                    {selectedNfts.map((nft) => (
+                        <NFTCard key={nft.tokenId} token={nft} className={classes.card} />
                     ))}
                 </div>
-
                 <div className={classes.field}>
-                    <Typography color="textPrimary" variant="body1" className={classes.fieldName}>
-                        <Trans>Total Amount</Trans>
+                    <Typography className={classes.fieldName}>
+                        <Trans>Transaction cost</Trans>
                     </Typography>
-                    <Typography
-                        color="textPrimary"
-                        align="right"
-                        className={cx(classes.text, classes.bold, classes.fieldValue)}>
-                        {tokenList.length}
+                    <Typography className={classes.fieldValue}>TODO</Typography>
+                </div>
+                <div className={classes.field}>
+                    <Typography className={classes.fieldName}>
+                        <Trans>Cover</Trans>
                     </Typography>
+                    <div className={classes.fieldValue}>
+                        <PreviewRedPacket className={classes.envelope} />
+                    </div>
                 </div>
             </div>
             <Box style={{ position: 'absolute', bottom: 0, left: 0, width: '100%' }}>