diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
index 382e1bf0e5f5..d30e2849a02f 100644
--- a/packages/mask/src/components/shared/ApplicationBoard.tsx
+++ b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -18,74 +18,88 @@ import { TraderDialog } from '../../plugins/Trader/SNSAdaptor/trader/TraderDialo
 import { NetworkPluginID, PluginId, usePluginIDContext } from '@masknet/plugin-infra'
 import { FindTrumanDialog } from '../../plugins/FindTruman/SNSAdaptor/FindTrumanDialog'
 
-const useStyles = makeStyles()((theme) => ({
-    abstractTabWrapper: {
-        position: 'sticky',
-        top: 0,
-        width: '100%',
-        zIndex: 2,
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(2),
-        backgroundColor: theme.palette.background.paper,
-    },
-    tab: {
-        height: 36,
-        minHeight: 36,
-        fontWeight: 300,
-    },
-    tabs: {
-        width: 552,
-        height: 36,
-        minHeight: 36,
-        margin: '0 auto',
-        borderRadius: 4,
-        '& .Mui-selected': {
-            color: theme.palette.primary.contrastText,
-            backgroundColor: theme.palette.primary.main,
+const useStyles = makeStyles()((theme) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    return {
+        abstractTabWrapper: {
+            position: 'sticky',
+            top: 0,
+            width: '100%',
+            zIndex: 2,
+            paddingTop: theme.spacing(1),
+            paddingBottom: theme.spacing(2),
+            backgroundColor: theme.palette.background.paper,
         },
-    },
-    tabPanel: {
-        marginTop: theme.spacing(3),
-    },
-    indicator: {
-        display: 'none',
-    },
-    applicationBox: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: theme.palette.background.default,
-        borderRadius: '8px',
-        cursor: 'pointer',
-        height: 100,
-        '&:hover': {
-            transform: 'scale(1.05) translateY(-4px)',
-            boxShadow: theme.palette.mode === 'light' ? '0px 10px 16px rgba(0, 0, 0, 0.1)' : 'none',
+        tab: {
+            height: 36,
+            minHeight: 36,
+            fontWeight: 300,
         },
-    },
-    applicationWrapper: {
-        marginTop: 4,
-        display: 'grid',
-        gridTemplateColumns: '123px 123px 123px 123px',
-        gridTemplateRows: '100px',
-        rowGap: 12,
-        justifyContent: 'space-between',
-        height: 324,
-    },
-    applicationImg: {
-        width: 36,
-        height: 36,
-        marginBottom: 10,
-    },
-    disabled: {
-        pointerEvents: 'none',
-        opacity: 0.5,
-    },
-    title: {
-        fontSize: 15,
-    },
-}))
+        tabs: {
+            width: 552,
+            height: 36,
+            minHeight: 36,
+            margin: '0 auto',
+            borderRadius: 4,
+            '& .Mui-selected': {
+                color: theme.palette.primary.contrastText,
+                backgroundColor: theme.palette.primary.main,
+            },
+        },
+        tabPanel: {
+            marginTop: theme.spacing(3),
+        },
+        indicator: {
+            display: 'none',
+        },
+        applicationBox: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: theme.palette.background.default,
+            borderRadius: '8px',
+            cursor: 'pointer',
+            height: 100,
+            '@media (hover: hover)': {
+                '&:hover': {
+                    transform: 'scale(1.05) translateY(-4px)',
+                    boxShadow: theme.palette.mode === 'light' ? '0px 10px 16px rgba(0, 0, 0, 0.1)' : 'none',
+                },
+            },
+        },
+        applicationWrapper: {
+            marginTop: theme.spacing(0.5),
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gridTemplateRows: '100px',
+            gridGap: theme.spacing(1.5),
+            justifyContent: 'space-between',
+            height: 324,
+            [smallQuery]: {
+                overflow: 'auto',
+                overscrollBehavior: 'contain',
+                gridTemplateColumns: 'repeat(3, 1fr)',
+                gridGap: theme.spacing(1),
+            },
+        },
+        applicationImg: {
+            width: 36,
+            height: 36,
+            marginBottom: theme.spacing(1),
+        },
+        disabled: {
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+        title: {
+            fontSize: 15,
+            [smallQuery]: {
+                fontSize: 13,
+            },
+        },
+    }
+})
 
 const SUPPORTED_CHAIN_ID_LIST = [
     ChainId.Mainnet,
diff --git a/packages/mask/src/components/shared/InjectedDialog.tsx b/packages/mask/src/components/shared/InjectedDialog.tsx
index 2ad99a50b91a..a3a666636c94 100644
--- a/packages/mask/src/components/shared/InjectedDialog.tsx
+++ b/packages/mask/src/components/shared/InjectedDialog.tsx
@@ -32,6 +32,9 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
         padding: theme.spacing(1, 2),
         borderBottom: `1px solid ${theme.palette.divider}`,
     },
+    dialogContent: {
+        overscrollBehavior: 'contain',
+    },
     dialogTitleTypography: {
         marginLeft: 6,
         verticalAlign: 'middle',
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
index 3d91ac0c1418..78d6346f0239 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
@@ -38,181 +38,187 @@ interface StyleProps {
     shortITOwrapper: boolean
 }
 
-const useStyles = makeStyles<StyleProps>()((theme, props) => ({
-    wrapper: {
-        paddingBottom: '0px !important',
-        paddingTop: '0px !important',
-    },
-    actionButton: {
-        margin: '0 auto',
-        minHeight: 'auto',
-        width: '100%',
-        fontSize: 18,
-        fontWeight: 400,
-    },
-    footer: {
-        marginTop: theme.spacing(2),
-        zIndex: 1,
-    },
-    footnote: {
-        fontSize: 10,
-        marginRight: theme.spacing(1),
-    },
-    footLink: {
-        cursor: 'pointer',
-        marginRight: theme.spacing(0.5),
-        '&:last-child': {
-            marginRight: 0,
-        },
-    },
-    tokenCardWrapper: {
-        width: '100%',
-        color: 'white',
-        overflow: 'auto',
-        paddingTop: theme.spacing(1),
-        marginBottom: theme.spacing(0.5),
-    },
-    tokenCard: {
-        width: 535,
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        color: 'white',
-        flexDirection: 'column',
-        padding: 0,
-        marginBottom: theme.spacing(1.5),
-        alignItems: 'baseline',
-        justifyContent: 'space-between',
-    },
-    cardHeader: {
-        display: 'flex',
-        borderTopRightRadius: 10,
-        borderTopLeftRadius: 10,
-        height: 42,
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        '-webkit-font-smoothing': 'antialiased',
-        fontSize: 14,
-    },
-    cardHeaderLocked: {
-        background: theme.palette.mode === 'light' ? '#EBEEF0' : '#2F3336',
-        color: theme.palette.mode === 'light' ? '#7B8192' : '#6F767C',
-    },
-    cardHeaderClaimable: {
-        background: '#77E0B5',
-        color: 'white',
-    },
-    cardContent: {
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%',
-        boxSizing: 'border-box',
-        borderBottomRightRadius: 10,
-        borderBottomLeftRadius: 10,
-        height: 62,
-        fontSize: 18,
-    },
-    cardContentLocked: {
-        background: theme.palette.mode === 'light' ? 'white' : '',
-        border: `1px solid ${theme.palette.mode === 'light' ? '#EBEEF0' : '#2F3336'}`,
-    },
-    cardContentClaimable: {
-        background: 'rgba(119, 224, 181, 0.1)',
-        border: '1px solid rgba(56, 221, 192, 0.4)',
-    },
-    content: {
-        marginBottom: theme.spacing(2),
-    },
-    contentTitle: {
-        fontSize: 18,
-        fontWeight: 300,
-    },
-    tab: {
-        height: 36,
-        minHeight: 36,
-        fontWeight: 300,
-    },
-    tabs: {
-        width: 536,
-        height: 36,
-        minHeight: 36,
-        margin: '0 auto',
-        borderRadius: 4,
-        backgroundColor: theme.palette.background.default,
-        '& .Mui-selected': {
-            color: theme.palette.primary.contrastText,
-            backgroundColor: theme.palette.primary.main,
-        },
-    },
-    indicator: {
-        display: 'none',
-    },
-    tabPanel: {
-        marginTop: theme.spacing(3),
-    },
-    contentWrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: props.shortITOwrapper ? 450 : 650,
-    },
-    actionButtonWrapper: {
-        position: 'sticky',
-        width: '100%',
-        marginTop: 'auto',
-        bottom: 0,
-        zIndex: 2,
-        paddingBottom: theme.spacing(4),
-        paddingTop: theme.spacing(2),
-        backgroundColor: theme.palette.background.paper,
-    },
-    emptyContentWrapper: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 350,
-    },
+const useStyles = makeStyles<StyleProps>()((theme, props) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    const isLight = theme.palette.mode === 'light'
+    return {
+        wrapper: {
+            padding: theme.spacing(0, 4),
+            [smallQuery]: {
+                padding: theme.spacing(0, 1),
+            },
+        },
+        actionButton: {
+            margin: '0 auto',
+            minHeight: 'auto',
+            width: '100%',
+            fontSize: 18,
+            fontWeight: 400,
+        },
+        footer: {
+            marginTop: theme.spacing(2),
+            zIndex: 1,
+        },
+        footnote: {
+            fontSize: 10,
+            marginRight: theme.spacing(1),
+        },
+        footLink: {
+            cursor: 'pointer',
+            marginRight: theme.spacing(0.5),
+            '&:last-child': {
+                marginRight: 0,
+            },
+        },
+        tokenCardWrapper: {
+            width: '100%',
+            color: 'white',
+            overflow: 'auto',
+            paddingTop: theme.spacing(1),
+            marginBottom: theme.spacing(0.5),
+        },
+        tokenCard: {
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            color: 'white',
+            flexDirection: 'column',
+            padding: 0,
+            marginBottom: theme.spacing(1.5),
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+        },
+        cardHeader: {
+            display: 'flex',
+            borderTopRightRadius: 10,
+            borderTopLeftRadius: 10,
+            height: 42,
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            '-webkit-font-smoothing': 'antialiased',
+            fontSize: 14,
+        },
+        cardHeaderLocked: {
+            background: isLight ? '#EBEEF0' : '#2F3336',
+            color: isLight ? '#7B8192' : '#6F767C',
+        },
+        cardHeaderClaimable: {
+            background: '#77E0B5',
+            color: 'white',
+        },
+        cardContent: {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            boxSizing: 'border-box',
+            borderBottomRightRadius: 10,
+            borderBottomLeftRadius: 10,
+            height: 62,
+            fontSize: 18,
+        },
+        cardContentLocked: {
+            background: isLight ? 'white' : '',
+            border: `1px solid ${isLight ? '#EBEEF0' : '#2F3336'}`,
+        },
+        cardContentClaimable: {
+            background: 'rgba(119, 224, 181, 0.1)',
+            border: '1px solid rgba(56, 221, 192, 0.4)',
+        },
+        content: {
+            marginBottom: theme.spacing(2),
+        },
+        contentTitle: {
+            fontSize: 18,
+            fontWeight: 300,
+        },
+        tab: {
+            height: 36,
+            minHeight: 36,
+            fontWeight: 300,
+        },
+        tabs: {
+            height: 36,
+            minHeight: 36,
+            borderRadius: 4,
+            backgroundColor: theme.palette.background.default,
+            '& .Mui-selected': {
+                color: theme.palette.primary.contrastText,
+                backgroundColor: theme.palette.primary.main,
+            },
+        },
+        indicator: {
+            display: 'none',
+        },
+        tabPanel: {
+            marginTop: theme.spacing(3),
+        },
+        contentWrapper: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: props.shortITOwrapper ? 450 : 650,
+        },
+        actionButtonWrapper: {
+            position: 'sticky',
+            width: '100%',
+            marginTop: 'auto',
+            bottom: 0,
+            zIndex: 2,
+            paddingBottom: theme.spacing(4),
+            paddingTop: theme.spacing(2),
+            backgroundColor: theme.palette.background.paper,
+        },
+        emptyContentWrapper: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 350,
+        },
 
-    lockIcon: {
-        width: 22,
-        height: 22,
-        marginRight: 6,
-    },
-    textWrapper: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: theme.spacing(1.5),
-    },
-    unlockTime: {
-        marginRight: theme.spacing(1.5),
-    },
-    tokenBalance: {
-        marginLeft: theme.spacing(1.5),
-        color: theme.palette.mode === 'light' ? '#15181B' : '#D9D9D9',
-    },
-    tokenSymbol: {
-        color: theme.palette.mode === 'light' ? '#7B8192' : '#6F767C',
-    },
-    snackbarSuccess: {
-        backgroundColor: '#77E0B5',
-    },
-    snackbarError: {
-        backgroundColor: '#FF5555',
-    },
-    abstractTabWrapper: {
-        position: 'sticky',
-        top: 0,
-        width: '100%',
-        zIndex: 2,
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(2),
-        backgroundColor: theme.palette.background.paper,
-    },
-    walletStatusBox: {
-        width: 535,
-        margin: '24px auto',
-    },
-    claimAllButton: {},
-}))
+        lockIcon: {
+            width: 22,
+            height: 22,
+            marginRight: 6,
+        },
+        textWrapper: {
+            display: 'flex',
+            alignItems: 'center',
+            marginLeft: theme.spacing(1.5),
+        },
+        unlockTime: {
+            marginRight: theme.spacing(1.5),
+        },
+        tokenBalance: {
+            marginLeft: theme.spacing(1.5),
+            color: theme.palette.mode === 'light' ? '#15181B' : '#D9D9D9',
+        },
+        tokenSymbol: {
+            color: theme.palette.mode === 'light' ? '#7B8192' : '#6F767C',
+        },
+        snackbarSuccess: {
+            backgroundColor: '#77E0B5',
+        },
+        snackbarError: {
+            backgroundColor: '#FF5555',
+        },
+        abstractTabWrapper: {
+            position: 'sticky',
+            top: 0,
+            width: '100%',
+            zIndex: 2,
+            paddingTop: theme.spacing(1),
+            paddingBottom: theme.spacing(2),
+            backgroundColor: theme.palette.background.paper,
+        },
+        walletStatusBox: {
+            margin: theme.spacing(3, 'auto'),
+        },
+        claimAllButton: {
+            [smallQuery]: {
+                fontSize: 14,
+            },
+        },
+    }
+})
 
 interface ClaimAllDialogProps {
     onClose: () => void
@@ -361,7 +367,7 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
                                     noSwitchNetworkTip
                                     switchButtonStyle={{
                                         minHeight: 'auto',
-                                        width: 540,
+                                        width: '100%',
                                         fontSize: 18,
                                         fontWeight: 400,
                                     }}>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
index 0527ecd29ebe..3b2f0a894e43 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
@@ -2,72 +2,90 @@ import { SelectedIcon } from '@masknet/icons'
 import type { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
 import { ImageIcon } from '@masknet/shared'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
-import { Box, ImageList, ImageListItem, List, ListItem, Typography } from '@mui/material'
+import { Box, List, ListItem, Typography } from '@mui/material'
 import { first } from 'lodash-unified'
 import { useI18N } from '../../../../utils'
 import { ProviderIcon } from './ProviderIcon'
 
-const useStyles = makeStyles()((theme) => ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: theme.spacing(2, 4),
-    },
-    section: {
-        flexGrow: 1,
-        marginTop: 21,
-        '&:first-child': {
-            marginTop: 0,
+const useStyles = makeStyles()((theme) => {
+    const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            padding: theme.spacing(2, 4),
         },
-    },
-    title: {
-        fontSize: 19,
-        fontWeight: 'bold',
-    },
-    list: {
-        marginTop: 21,
-        display: 'flex',
-        gap: 32,
-        flexWrap: 'wrap',
-    },
-    networkItem: {
-        width: 'auto',
-        padding: 0,
-    },
-    iconWrapper: {
-        position: 'relative',
-        cursor: 'pointer',
-        width: 48,
-        height: 48,
-        borderRadius: '50%',
-        backgroundColor: 'transparent',
-    },
-    networkIcon: {
-        backgroundColor: theme.palette.background.default,
-    },
-    checkedBadge: {
-        position: 'absolute',
-        right: 0,
-        bottom: 0,
-        width: 14,
-        height: 14,
-        background: '#fff',
-        borderRadius: '50%',
-    },
-    alert: {
-        fontSize: 12,
-        display: 'flex',
-        alignItems: 'center',
-        marginTop: theme.spacing(1),
-    },
-    grid: {
-        width: '100%',
-        margin: theme.spacing(2, 0, 0),
-    },
-    providerIcon: {
-        fontSize: 45,
-    },
-}))
+        section: {
+            flexGrow: 1,
+            marginTop: 21,
+            '&:first-child': {
+                marginTop: 0,
+            },
+        },
+        title: {
+            fontSize: 19,
+            fontWeight: 'bold',
+        },
+        list: {
+            marginTop: 21,
+            display: 'flex',
+            gap: 32,
+            flexWrap: 'wrap',
+        },
+        networkItem: {
+            width: 'auto',
+            padding: 0,
+        },
+        iconWrapper: {
+            position: 'relative',
+            cursor: 'pointer',
+            width: 48,
+            height: 48,
+            borderRadius: '50%',
+            backgroundColor: 'transparent',
+        },
+        networkIcon: {
+            backgroundColor: theme.palette.background.default,
+        },
+        checkedBadge: {
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: 14,
+            height: 14,
+            background: '#fff',
+            borderRadius: '50%',
+        },
+        alert: {
+            fontSize: 12,
+            display: 'flex',
+            alignItems: 'center',
+            marginTop: theme.spacing(1),
+        },
+        wallets: {
+            width: '100%',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gridAutoRows: '130px',
+            gridGap: theme.spacing(1),
+            margin: theme.spacing(2, 0, 0),
+            [smallQuery]: {
+                gridAutoRows: '110px',
+                gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+        },
+        walletItem: {
+            padding: 0,
+            width: '100%',
+            display: 'block',
+        },
+        providerIcon: {
+            height: '100%',
+            fontSize: 45,
+            display: 'flex',
+        },
+    }
+})
 
 export interface PluginProviderRenderProps {
     networks: Web3Plugin.NetworkDescriptor[]
@@ -135,7 +153,7 @@ export function PluginProviderRender({
                     <Typography className={classes.title} variant="h2" component="h2">
                         {t('plugin_wallet_guiding_step_2')}
                     </Typography>
-                    <ImageList className={classes.grid} gap={8} cols={3} rowHeight={130}>
+                    <List className={classes.wallets}>
                         {providers
                             .filter((x) => x.providerAdaptorPluginID === undeterminedPluginID)
                             .map((provider) =>
@@ -147,17 +165,25 @@ export function PluginProviderRender({
                                         }
                                         provider={provider}
                                         onSubmit={onSubmit}>
-                                        <ImageListItem key={provider.ID}>
-                                            <ProviderIcon icon={provider.icon} name={provider.name} />
-                                        </ImageListItem>
+                                        <ListItem className={classes.walletItem} key={provider.ID}>
+                                            <ProviderIcon
+                                                className={classes.providerIcon}
+                                                icon={provider.icon}
+                                                name={provider.name}
+                                            />
+                                        </ListItem>
                                     </ProviderIconClickBait>
                                 ) : (
-                                    <ImageListItem key={provider.ID}>
-                                        <ProviderIcon icon={provider.icon} name={provider.name} />
-                                    </ImageListItem>
+                                    <ListItem className={classes.walletItem} key={provider.ID}>
+                                        <ProviderIcon
+                                            className={classes.providerIcon}
+                                            icon={provider.icon}
+                                            name={provider.name}
+                                        />
+                                    </ListItem>
                                 ),
                             )}
-                    </ImageList>
+                    </List>
                 </section>
             </Box>
         </>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/ProviderIcon.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/ProviderIcon.tsx
index 911655e2ae3d..103f0618e326 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/ProviderIcon.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/ProviderIcon.tsx
@@ -1,5 +1,6 @@
 import { makeStyles } from '@masknet/theme'
-import { Typography, Card, ButtonBase, ButtonBaseProps } from '@mui/material'
+import { Typography, Card, ButtonBase, ButtonBaseProps, CardProps } from '@mui/material'
+import classnames from 'classnames'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -11,7 +12,7 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: theme.spacing(4, 1),
+        padding: theme.spacing(1),
         backgroundColor: theme.palette.background.default,
     },
     icon: {
@@ -31,17 +32,16 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export interface ProviderIconProps {
+export interface ProviderIconProps extends CardProps {
     icon: URL
     name: React.ReactNode
-    onClick?: () => void
     ButtonBaseProps?: Partial<ButtonBaseProps>
 }
 
-export function ProviderIcon({ icon, name, onClick, ButtonBaseProps }: ProviderIconProps) {
+export function ProviderIcon({ icon, name, onClick, className, ButtonBaseProps }: ProviderIconProps) {
     const { classes } = useStyles()
     return (
-        <Card className={classes.root} elevation={0} onClick={onClick}>
+        <Card className={classnames(classes.root, className)} elevation={0} onClick={onClick}>
             <ButtonBase className={`${classes.content} dashboard-style`} {...ButtonBaseProps}>
                 <img src={icon.toString()} className={classes.icon} />
                 <Typography className={classes.name} variant="h3">
diff --git a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
index 5b3c61d8c90e..0676ea28456c 100644
--- a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
@@ -1,4 +1,5 @@
 import { Plugin, useBalance, useBlockNumber } from '@masknet/plugin-infra'
+import { makeStyles } from '@masknet/theme'
 import { Box, List, ListItem, ListItemText, Typography } from '@mui/material'
 
 export interface TabContentProps {
@@ -6,7 +7,14 @@ export interface TabContentProps {
     addressNames?: Plugin.SNSAdaptor.ProfileAddress[]
 }
 
+const useStyles = makeStyles()({
+    container: {
+        overflow: 'auto',
+    },
+})
+
 export function TabContent({ identity, addressNames }: TabContentProps) {
+    const { classes } = useStyles()
     const renderIdentity = () => {
         return (
             <List>
@@ -64,7 +72,7 @@ export function TabContent({ identity, addressNames }: TabContentProps) {
     const { value: blockNumber = 0 } = useBlockNumber()
 
     return (
-        <>
+        <section className={classes.container}>
             <Typography color="textPrimary" variant="h6">
                 Balance {balance} <br />
                 BlockNumber {blockNumber} <br />
@@ -79,6 +87,6 @@ export function TabContent({ identity, addressNames }: TabContentProps) {
                 Address Names
             </Typography>
             {renderAddressNames()}
-        </>
+        </section>
     )
 }