diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx
index cce3789f3c96..e1ad2f9cbe2b 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx
@@ -17,6 +17,7 @@ const useStyles = makeStyles()((theme) => {
     return {
         root: {
             width: 'calc(100% - 24px)',
+            gap: 8,
         },
         button: {
             flex: 1,
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/ActionBar.tsx
index aac51bf715a2..b8fa73c863d4 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/ActionBar.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/ActionBar.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles()((theme) => {
     return {
         root: {
             flex: 1,
+            gap: 8,
         },
         button: {
             flex: 1,
@@ -65,7 +66,7 @@ export function ActionBar(props: ActionBarProps) {
             {!assetSource?.isSoldOut &&
             !assetSource?.is24Auction &&
             (!assetSource?.trade?.latestBid || assetSource?.trade?.latestBid < assetSource?.priceInEth) &&
-            assetSource?.trade?.isCanAuction ? (
+            assetSource?.trade?.is_auction ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
index fec469141dce..d0b1f20a51e2 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState, useCallback } from 'react'
-import { InjectedDialog, useOpenShareTxDialog } from '@masknet/shared'
+import { InjectedDialog, NFTCardStyledAssetPlayer, useOpenShareTxDialog } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import { first } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
@@ -155,6 +155,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
     }, [amount, balance.value, isVerified, is24Auction])
 
     if (!asset || !asset.value) return null
+
     return (
         <InjectedDialog
             title={
@@ -168,14 +169,14 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                         <Box className={classes.mediaContent}>
                             {assetSource?.ossUrl.match(/\.(mp4|avi|webm)$/i) ? (
                                 <Link href={assetSource?.ossUrl} target="_blank" rel="noopener noreferrer">
-                                    <img
-                                        className={classes.player}
-                                        src={assetSource?.shareUrl}
-                                        alt={assetSource?.title}
-                                    />
+                                    <NFTCardStyledAssetPlayer url={assetSource.ossUrl || assetSource.shareUrl} />
                                 </Link>
                             ) : (
-                                <img className={classes.player} src={assetSource?.shareUrl} alt={assetSource?.title} />
+                                <img
+                                    className={classes.player}
+                                    src={assetSource?.ossUrl || assetSource?.shareUrl}
+                                    alt={assetSource?.title}
+                                />
                             )}
                         </Box>
                         <h3>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
index db3918f4badb..784e29abb3ad 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
@@ -126,7 +126,8 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
         payload.current.shares = settings.shares
         payload.current.password = privateKey
         payload.current.rpid = CreationSuccess.id
-        payload.current.total = CreationSuccess.total
+        payload.current.total = CreationSuccess.total ?? sessionStorage.getItem('red_packet_total')
+        sessionStorage.removeItem('red_packet_total')
         payload.current.duration = settings.duration
         payload.current.creation_time = Number.parseInt(CreationSuccess.creation_time, 10) * 1000
         payload.current.token = settings.token
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
index b7af97327970..fe2ac86fccea 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
@@ -115,7 +115,6 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
     return useAsyncFn(async () => {
         const { token } = redPacketSettings
         const createParams = await getCreateParams()
-
         if (!token || !redPacketContract || !createParams) return
 
         const { gas, params, paramsObj, gasError } = createParams
@@ -143,7 +142,8 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
             redPacketContract.methods.create_red_packet(...params),
             config,
         )
-
+        // TODO: kill this storage and support contract event deocde
+        sessionStorage.setItem('red_packet_total', paramsObj.total)
         return connection.sendTransaction(tx)
     }, [account, connection, redPacketContract, redPacketSettings, chainId, getCreateParams])
 }