diff --git a/packages/maskbook/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx b/packages/maskbook/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx
index 33e8b1c3c6ae..a6545a398b15 100644
--- a/packages/maskbook/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx
+++ b/packages/maskbook/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles<StyledLinearProgress>()((_theme, props) => ({
     },
     bar: {
         borderRadius: 5,
-        backgroundColor: props.barColor ?? '#fff',
+        backgroundColor: props.barColor ?? 'rgb(44, 164, 239)',
     },
 }))
 
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftList.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
index f4140a6dc13d..795f1fc8f484 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
@@ -4,55 +4,79 @@ import { List, ListItem, ListProps, Skeleton, Typography } from '@mui/material'
 import classnames from 'classnames'
 import type { FC, HTMLProps } from 'react'
 
-const useStyles = makeStyles()({
-    list: {
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr 1fr',
-        gridGap: 8,
-    },
-    nft: {
-        position: 'relative',
-        display: 'flex',
-        width: 120,
-        height: 185,
-        flexDirection: 'column',
-        margin: '0 auto',
-        borderRadius: 8,
-        overflow: 'hidden',
-        boxShadow: '0px 8px 20px rgba(0, 0, 0, 0.04)',
-    },
-    loading: {
-        boxShadow: 'none',
-    },
-    claimedBadge: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 36,
-        margin: 'auto',
-        height: 70,
-        width: 70,
-        borderRadius: '100%',
-        backgroundColor: 'rgba(255, 95, 95, 0.4)',
-        color: '#fff',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: 12,
-        pointerEvents: 'none',
-    },
-    media: {
-        height: 160,
-        width: 120,
-    },
-    name: {
-        fontSize: 12,
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        padding: '2px 2px 6px',
-        color: MaskColorVar.textSecondary,
-    },
+const useStyles = makeStyles()((theme) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    return {
+        list: {
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr',
+            gridGap: theme.spacing(1),
+            [smallQuery]: {
+                gridTemplateColumns: '1fr 1fr',
+                gridGap: 0,
+                padding: 0,
+            },
+        },
+        listItem: {
+            padding: theme.spacing(1),
+        },
+        nft: {
+            position: 'relative',
+            display: 'flex',
+            width: 120,
+            height: 185,
+            flexDirection: 'column',
+            margin: '0 auto',
+            borderRadius: 8,
+            overflow: 'hidden',
+            boxShadow: '0px 8px 20px rgba(0, 0, 0, 0.04)',
+            [smallQuery]: {
+                width: 90,
+                height: 140,
+            },
+        },
+        loading: {
+            boxShadow: 'none',
+        },
+        claimedBadge: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 36,
+            margin: 'auto',
+            height: 70,
+            width: 70,
+            borderRadius: '100%',
+            backgroundColor: 'rgba(255, 95, 95, 0.4)',
+            color: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 12,
+            pointerEvents: 'none',
+            [smallQuery]: {
+                height: 60,
+                width: 60,
+            },
+        },
+        media: {
+            width: 120,
+            height: 160,
+            objectFit: 'cover',
+            [smallQuery]: {
+                width: 90,
+                height: 120,
+            },
+        },
+        name: {
+            fontSize: 12,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            padding: '2px 2px 6px',
+            color: MaskColorVar.textSecondary,
+        },
+    }
 })
 
 interface NftItemProps extends HTMLProps<HTMLDivElement> {
@@ -74,7 +98,7 @@ export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claime
     const info = result.value.info
     return (
         <div className={classnames(className, classes.nft)} {...rest}>
-            <img className={classes.media} src={info.image} width="120" height="160" alt={info.name} />
+            <img className={classes.media} src={info.image} alt={info.name} />
             <Typography className={classes.name}>{info.name}</Typography>
             {claimed && <Typography className={classes.claimedBadge}>Claimed</Typography>}
         </div>
@@ -92,7 +116,7 @@ export const NftList: FC<NftListProps> = ({ contract, statusList, tokenIds, clas
     return (
         <List className={classnames(className, classes.list)} {...rest}>
             {tokenIds.map((tokenId, index) => (
-                <ListItem key={tokenId}>
+                <ListItem className={classes.listItem} key={tokenId}>
                     <NftItem contract={contract} claimed={statusList[index]} tokenId={tokenId} />
                 </ListItem>
             ))}
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
index 6b85b8bfec9a..bab4b02407de 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
@@ -14,103 +14,124 @@ import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket
 import { useNftAvailabilityComputed } from './hooks/useNftAvailabilityComputed'
 import { NftList } from './NftList'
 
-const useStyles = makeStyles()((theme) => ({
-    root: {
-        borderRadius: 10,
-        border: `solid 1px ${theme.palette.divider}`,
-        marginBottom: theme.spacing(1.5),
-        position: 'static !important' as any,
-        height: 'auto !important',
-        padding: theme.spacing(2),
-        backgroundColor: MaskColorVar.lightBackground,
-    },
-    primary: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    secondary: {
-        fontSize: 12,
-    },
-    message: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    strong: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    span: {
-        maxWidth: 350,
-        display: 'inline-flex',
-    },
-    time: {
-        fontSize: 12,
-        color: theme.palette.text.secondary,
-    },
-    box: {
-        display: 'flex',
-        width: '100%',
-    },
-    content: {
-        transform: 'translateY(-4px)',
-        width: '100%',
-        padding: theme.spacing(0, '1rem'),
-    },
-    section: {
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: theme.spacing(2),
-    },
-    icon: {
-        width: 27,
-        height: 27,
-    },
-    title: {
-        whiteSpace: 'break-spaces',
-        fontWeight: 500,
-        fontSize: 16,
-    },
-    info: {
-        fontSize: 14,
-        color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
-    },
-    nftList: {
-        width: 390,
-    },
-    actionButton: {
-        height: 26,
-        minHeight: 'auto',
-        position: 'relative',
-    },
-    footer: {
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        marginTop: theme.spacing(2),
-    },
-    footerInfo: {
-        fontSize: 15,
-        color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
-        '& strong': {
-            color: theme.palette.text.primary,
+const useStyles = makeStyles()((theme) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    return {
+        root: {
+            borderRadius: 10,
+            border: `solid 1px ${theme.palette.divider}`,
+            marginBottom: theme.spacing(1.5),
+            position: 'static !important' as any,
+            height: 'auto !important',
+            padding: theme.spacing(2),
+            backgroundColor: MaskColorVar.lightBackground,
+            [smallQuery]: {
+                padding: theme.spacing(2, 1.5),
+            },
         },
-    },
-    disabledButton: {
-        color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
-        boxShadow: 'none',
-        backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
-        cursor: 'default',
-        '&:hover': {
-            backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+        primary: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        },
+        secondary: {
+            fontSize: 12,
+        },
+        message: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            [smallQuery]: {
+                whiteSpace: 'normal',
+            },
+        },
+        strong: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+        span: {
+            maxWidth: 350,
+            display: 'inline-flex',
+        },
+        time: {
+            fontSize: 12,
+            color: theme.palette.text.secondary,
+        },
+        box: {
+            display: 'flex',
+            width: '100%',
+        },
+        content: {
+            transform: 'translateY(-4px)',
+            width: '100%',
+            paddingLeft: theme.spacing(1),
+        },
+        section: {
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: theme.spacing(2),
+            [smallQuery]: {
+                marginBottom: 0,
+            },
+        },
+        icon: {
+            width: 27,
+            height: 27,
+        },
+        title: {
+            whiteSpace: 'break-spaces',
+            fontWeight: 500,
+            fontSize: 16,
+        },
+        info: {
+            fontSize: 14,
+            color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
+            [smallQuery]: {
+                fontSize: 13,
+            },
+        },
+        nftList: {
+            width: 390,
+            [smallQuery]: {
+                width: '100%',
+            },
+        },
+        actionButton: {
+            height: 26,
+            minHeight: 'auto',
+            position: 'relative',
+        },
+        footer: {
+            width: '100%',
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            marginTop: theme.spacing(2),
+            [smallQuery]: {
+                marginTop: theme.spacing(1),
+            },
+        },
+        footerInfo: {
+            fontSize: 15,
+            color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
+            '& strong': {
+                color: theme.palette.text.primary,
+            },
+        },
+        disabledButton: {
             color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
+            boxShadow: 'none',
+            backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+            cursor: 'default',
+            '&:hover': {
+                backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+                color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
+            },
         },
-    },
-}))
+    }
+})
 
 export interface NftRedPacketHistoryItemProps {
     history: NftRedPacketHistory
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
index 61a0117d4641..bab8ad871e57 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
@@ -9,6 +9,7 @@ import { useNftRedPacketHistory } from './hooks/useNftRedPacketHistory'
 import { NftRedPacketHistoryItem } from './NftRedPacketHistoryItem'
 
 const useStyles = makeStyles()((theme, _, createRef) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
     const atBottom = {
         ref: createRef(),
     } as const
@@ -22,6 +23,10 @@ const useStyles = makeStyles()((theme, _, createRef) => {
             flexDirection: 'column',
             margin: '0 auto',
             overflow: 'auto',
+            [smallQuery]: {
+                width: '100%',
+                padding: 0,
+            },
         },
         placeholder: {
             textAlign: 'center',
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
index 9183a063ff41..a557e734a134 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
@@ -19,7 +19,6 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
         fontWeight: 300,
     },
     tabs: {
-        width: 544,
         height: 36,
         minHeight: 36,
         margin: `0 ${snsId === MINDS_ID ? '12px' : 'auto'}`,
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
index cf981a6b005e..099471fe2bb5 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
@@ -25,12 +25,12 @@ const useStyles = makeStyles()((theme) => {
     return {
         root: {
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'stretch',
             flexDirection: 'column',
         },
         line: {
             display: 'flex',
-            margin: theme.spacing(1, 1, 2, 1),
+            margin: theme.spacing(1, 0, 2, 0),
         },
         nftNameWrapper: {
             width: '100%',
@@ -91,7 +91,6 @@ const useStyles = makeStyles()((theme) => {
             overflow: 'hidden',
         },
         tokenSelectorParent: {
-            width: 544,
             background: theme.palette.mode === 'light' ? '#F7F9FA' : '#17191D',
             borderRadius: 12,
             paddingBottom: 5,
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx
index fdbd525f3452..f21e83ff4184 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx
@@ -6,20 +6,25 @@ import { RedPacketInHistoryList } from './RedPacketInHistoryList'
 import { useRedPacketHistory } from './hooks/useRedPacketHistory'
 import { useEffect } from 'react'
 
-const useStyles = makeStyles()({
-    root: {
-        display: 'flex',
-        width: 568,
-        padding: '0 12px',
-        boxSizing: 'border-box',
-        height: '100%',
-        flexDirection: 'column',
-        margin: '0 auto',
-        overflow: 'auto',
-    },
-    placeholder: {
-        textAlign: 'center',
-    },
+const useStyles = makeStyles()((theme) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    return {
+        root: {
+            display: 'flex',
+            padding: '0 12px',
+            boxSizing: 'border-box',
+            height: '100%',
+            flexDirection: 'column',
+            margin: '0 auto',
+            overflow: 'auto',
+            [smallQuery]: {
+                padding: 0,
+            },
+        },
+        placeholder: {
+            textAlign: 'center',
+        },
+    }
 })
 
 interface RedPacketHistoryListProps {
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
index e37792d7ebea..6bf1098cd33d 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback, useEffect, MouseEvent } from 'react'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
-import { Box, ListItem, Typography, Popper } from '@mui/material'
+import { Box, ListItem, Typography, Popper, useMediaQuery, Theme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Trans } from 'react-i18next'
 import { RedPacketHistory, RedPacketJSONPayload, RedPacketStatus } from '../types'
@@ -18,123 +18,145 @@ import { WalletMessages } from '../../Wallet/messages'
 import intervalToDuration from 'date-fns/intervalToDuration'
 import nextDay from 'date-fns/nextDay'
 
-const useStyles = makeStyles()((theme) => ({
-    primary: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    secondary: {
-        fontSize: 12,
-    },
-    message: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    strong: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    span: {
-        maxWidth: 350,
-        display: 'inline-flex',
-    },
-    time: {
-        fontSize: 12,
-        color: theme.palette.text.secondary,
-    },
-    root: {
-        borderRadius: 10,
-        border: `solid 1px ${theme.palette.divider}`,
-        marginBottom: theme.spacing(1.5),
-        position: 'static !important' as any,
-        height: 'auto !important',
-        padding: theme.spacing(2),
-    },
-    box: {
-        display: 'flex',
-        width: '100%',
-    },
-    content: {
-        transform: 'translateY(-4px)',
-        width: '100%',
-        padding: theme.spacing(0, '1rem'),
-    },
-    section: {
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: theme.spacing(2),
-    },
-    div: {},
-    icon: {
-        width: 27,
-        height: 27,
-    },
-    title: {
-        whiteSpace: 'break-spaces',
-        fontWeight: 500,
-        fontSize: 16,
-    },
-    info: {
-        fontSize: 14,
-        color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
-    },
-    actionButton: {
-        height: 26,
-        minHeight: 'auto',
-    },
-    footer: {
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        marginTop: theme.spacing(2),
-    },
-    footerInfo: {
-        fontSize: 15,
-        color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
-        '& strong': {
-            color: theme.palette.text.primary,
+const useStyles = makeStyles()((theme) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    return {
+        primary: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
         },
-    },
-    popper: {
-        overflow: 'visible',
-        backgroundColor: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 1)' : '#fff',
-        transform: 'translate(183px, -32px)',
-        borderRadius: 8,
-        width: 328,
-        padding: 10,
-    },
-    arrow: {
-        position: 'absolute',
-        bottom: 0,
-        right: 80,
-        width: 0,
-        height: 0,
-        borderLeft: '6px solid transparent',
-        borderRight: '6px solid transparent',
-        borderTop: `6px solid ${theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 1)' : '#fff'}`,
-        transform: 'translateY(6px)',
-    },
-    popperText: {
-        cursor: 'default',
-        color: theme.palette.mode === 'light' ? '#fff' : 'rgba(15, 20, 25, 1)',
-        fontSize: 12,
-    },
-    disabledButton: {
-        color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
-        boxShadow: 'none',
-        backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
-        cursor: 'default',
-        '&:hover': {
-            backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+        secondary: {
+            fontSize: 12,
+        },
+        message: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            [smallQuery]: {
+                whiteSpace: 'normal',
+            },
+        },
+        strong: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+        span: {
+            maxWidth: 350,
+            display: 'inline-flex',
+        },
+        time: {
+            fontSize: 12,
+            color: theme.palette.text.secondary,
+        },
+        root: {
+            borderRadius: 10,
+            border: `solid 1px ${theme.palette.divider}`,
+            marginBottom: theme.spacing(1.5),
+            position: 'static !important' as any,
+            height: 'auto !important',
+            padding: theme.spacing(2),
+            [smallQuery]: {
+                padding: theme.spacing(2, 1.5),
+            },
+        },
+        box: {
+            display: 'flex',
+            width: '100%',
+        },
+        content: {
+            transform: 'translateY(-4px)',
+            width: '100%',
+            paddingLeft: theme.spacing(2),
+            [smallQuery]: {
+                paddingLeft: theme.spacing(1.5),
+                width: 'auto',
+            },
+        },
+        section: {
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: theme.spacing(2),
+            [smallQuery]: {
+                flexWrap: 'wrap',
+            },
+        },
+        div: {},
+        icon: {
+            width: 27,
+            height: 27,
+        },
+        title: {
+            whiteSpace: 'break-spaces',
+            fontWeight: 500,
+            fontSize: 16,
+        },
+        info: {
+            fontSize: 14,
+            color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
+            [smallQuery]: {
+                fontSize: 13,
+            },
+        },
+        actionButton: {
+            height: 26,
+            minHeight: 'auto',
+            [smallQuery]: {
+                marginTop: theme.spacing(1),
+            },
+        },
+        footer: {
+            width: '100%',
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            marginTop: theme.spacing(2),
+        },
+        footerInfo: {
+            fontSize: 15,
+            color: theme.palette.mode === 'light' ? '#5B7083' : '#c3cbd2',
+            '& strong': {
+                color: theme.palette.text.primary,
+            },
+        },
+        popper: {
+            overflow: 'visible',
+            backgroundColor: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 1)' : '#fff',
+            transform: 'translate(183px, -32px)',
+            borderRadius: 8,
+            width: 328,
+            padding: 10,
+        },
+        arrow: {
+            position: 'absolute',
+            bottom: 0,
+            right: 80,
+            width: 0,
+            height: 0,
+            borderLeft: '6px solid transparent',
+            borderRight: '6px solid transparent',
+            borderTop: `6px solid ${theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 1)' : '#fff'}`,
+            transform: 'translateY(6px)',
+        },
+        popperText: {
+            cursor: 'default',
+            color: theme.palette.mode === 'light' ? '#fff' : 'rgba(15, 20, 25, 1)',
+            fontSize: 12,
+        },
+        disabledButton: {
             color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
+            boxShadow: 'none',
+            backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+            cursor: 'default',
+            '&:hover': {
+                backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+                color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.26)' : 'rgba(255, 255, 255, 0.3)',
+            },
         },
-    },
-}))
+    }
+})
 
 export interface RedPacketInHistoryListProps {
     history: RedPacketHistory
@@ -145,6 +167,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
     const { history, onSelect } = props
     const { t } = useI18N()
     const { classes } = useStyles()
+    const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'))
     const {
         value: availability,
         computed: { canRefund, canSend, listOfStatus, isPasswordValid },
@@ -242,6 +265,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                         refundState.type === TransactionStateType.HASH ? (
                             <>
                                 <ActionButton
+                                    fullWidth={isSmall}
                                     onClick={canSend && !isPasswordValid ? () => undefined : onSendOrRefund}
                                     onMouseEnter={(event: MouseEvent<HTMLButtonElement>) => {
                                         canSend && !isPasswordValid ? setAnchorEl(event.currentTarget) : undefined
@@ -283,7 +307,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                         ) : null}
                     </section>
                     <StyledLinearProgress
-                        barColor="rgba(44, 164, 239)"
+                        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/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
index 870409ab0845..4b1d5ad881ad 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
@@ -23,7 +23,6 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 300,
     },
     tabs: {
-        width: 544,
         height: 36,
         minHeight: 36,
         margin: '0 auto',
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx
index 2e945e3592eb..7270b5f44c14 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx
@@ -7,13 +7,13 @@ const useStyles = makeStyles()((theme) => {
     return {
         root: {
             height: 52,
-            width: 524,
             border: `1px solid ${theme.palette.mode === 'light' ? '#EBEEF0' : '#2F3336'}`,
             borderRadius: 12,
             padding: theme.spacing(0.8, 1.2, 1),
             display: 'flex',
             justifyContent: 'space-between',
             flexDirection: 'column',
+            width: '100%',
         },
         title: {},
         wrapper: {
diff --git a/packages/maskbook/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/maskbook/src/social-network-adaptor/twitter.com/ui-provider.ts
index a02c4e3f2056..191c60368629 100644
--- a/packages/maskbook/src/social-network-adaptor/twitter.com/ui-provider.ts
+++ b/packages/maskbook/src/social-network-adaptor/twitter.com/ui-provider.ts
@@ -54,6 +54,7 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             backgroundImage: 'none',
             [smallQuery]: {
                 display: 'block !important',
+                margin: 12,
             },
         },
         dialogTitle: {
diff --git a/packages/maskbook/src/web3/UI/ERC721ContractSelectPanel.tsx b/packages/maskbook/src/web3/UI/ERC721ContractSelectPanel.tsx
index 505c1ef0d6e4..4db61b57be9a 100644
--- a/packages/maskbook/src/web3/UI/ERC721ContractSelectPanel.tsx
+++ b/packages/maskbook/src/web3/UI/ERC721ContractSelectPanel.tsx
@@ -19,7 +19,6 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
     return {
         root: {
             height: 52,
-            width: 524,
             border: `1px solid ${theme.palette.mode === 'light' ? '#EBEEF0' : '#2F3336'}`,
             borderRadius: 12,
             padding: theme.spacing(0.8, 1.2, 1),