diff --git a/packages/maskbook/src/components/shared/EntrySecondLevelDialog.tsx b/packages/maskbook/src/components/shared/EntrySecondLevelDialog.tsx
new file mode 100644
index 000000000000..35b46b2665c9
--- /dev/null
+++ b/packages/maskbook/src/components/shared/EntrySecondLevelDialog.tsx
@@ -0,0 +1,53 @@
+import { DialogContent } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { InjectedDialog } from './InjectedDialog'
+import { WalletStatusBox } from './WalletStatusBox'
+import { MaskApplicationBox, MaskAppEntry } from './MaskApplicationBox'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+const useStyles = makeStyles()((theme) => ({
+    content: {
+        padding: theme.spacing(2, 3, 3),
+        minHeight: 491,
+    },
+    footer: {
+        fontSize: 12,
+        textAlign: 'left',
+        padding: theme.spacing(2),
+        borderTop: `1px solid ${theme.palette.divider}`,
+        justifyContent: 'flex-start',
+    },
+    address: {
+        fontSize: 16,
+        marginRight: theme.spacing(1),
+        display: 'inline-block',
+    },
+    subTitle: {
+        fontSize: 18,
+        lineHeight: '24px',
+        fontWeight: 600,
+        marginBottom: 11.5,
+        color: theme.palette.text.primary,
+    },
+}))
+
+interface EntrySecondLevelDialogProps {
+    title: string
+    entries?: MaskAppEntry[]
+    chains?: ChainId[]
+    open: boolean
+    closeDialog: () => void
+}
+
+export function EntrySecondLevelDialog(props: EntrySecondLevelDialogProps) {
+    const { classes } = useStyles()
+
+    return (
+        <InjectedDialog title={props.title} open={props.open} onClose={props.closeDialog} maxWidth="sm">
+            <DialogContent className={classes.content}>
+                <WalletStatusBox />
+                <MaskApplicationBox secondEntries={props.entries} secondEntryChainTabs={props.chains} />
+            </DialogContent>
+        </InjectedDialog>
+    )
+}
diff --git a/packages/maskbook/src/components/shared/MaskApplicationBox.tsx b/packages/maskbook/src/components/shared/MaskApplicationBox.tsx
index 4feba0232b69..031a74cdc840 100644
--- a/packages/maskbook/src/components/shared/MaskApplicationBox.tsx
+++ b/packages/maskbook/src/components/shared/MaskApplicationBox.tsx
@@ -1,5 +1,5 @@
 import { Typography } from '@mui/material'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { getMaskColor } from '@masknet/theme'
 import { MaskMessages } from '../../utils/messages'
@@ -7,9 +7,47 @@ import { useControlledDialog } from '../../utils/hooks/useControlledDialog'
 import { RedPacketPluginID } from '../../plugins/RedPacket/constants'
 import { FileServicePluginID } from '../../plugins/FileService/constants'
 import { ITO_PluginID } from '../../plugins/ITO/constants'
+import { PluginTransakMessages } from '../../plugins/Transak/messages'
+import { PluginTraderMessages } from '../../plugins/Trader/messages'
 import { ClaimAllDialog } from '../../plugins/ITO/SNSAdaptor/ClaimAllDialog'
+import { EntrySecondLevelDialog } from './EntrySecondLevelDialog'
+import { NetworkTab } from './NetworkTab'
+import { ChainId, useChainId, useAccount } from '@masknet/web3-shared-evm'
+import { useRemoteControlledDialog } from '@masknet/shared'
 
 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,
+        backgroundColor: theme.palette.background.default,
+        '& .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',
@@ -20,11 +58,12 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
         height: 100,
         '&:hover': {
-            transform: 'translateX(2.5px) translateY(-2px)',
-            boxShadow: theme.palette.mode === 'light' ? '0px 12px 28px rgba(0, 0, 0, 0.1)' : 'none',
+            transform: 'scale(1.05) translateY(-4px)',
+            boxShadow: theme.palette.mode === 'light' ? '0px 10px 16px rgba(0, 0, 0, 0.1)' : 'none',
         },
     },
     applicationWrapper: {
+        marginTop: 4,
         display: 'grid',
         gridTemplateColumns: '123px 123px 123px 123px',
         gridTemplateRows: '100px',
@@ -39,10 +78,22 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-interface MaskApplicationBoxProps {}
+export interface MaskAppEntry {
+    title: string
+    img: string
+    onClick: any
+    supportedChains?: ChainId[]
+}
+
+interface MaskApplicationBoxProps {
+    secondEntries?: MaskAppEntry[]
+    secondEntryChainTabs?: ChainId[]
+}
 
-export function MaskApplicationBox({}: MaskApplicationBoxProps) {
+export function MaskApplicationBox({ secondEntries, secondEntryChainTabs }: MaskApplicationBoxProps) {
     const { classes } = useStyles()
+    const currentChainId = useChainId()
+    const account = useAccount()
     //#region Encrypted message
     const openEncryptedMessage = useCallback(
         (id?: string) =>
@@ -65,78 +116,152 @@ export function MaskApplicationBox({}: MaskApplicationBoxProps) {
     } = useControlledDialog()
     //#endregion
 
-    return (
-        <>
-            <section className={classes.applicationWrapper}>
-                {[
-                    {
-                        title: 'Lucky Drop',
-                        img: new URL('./assets/lucky_drop.png', import.meta.url).toString(),
-                        onClick: useCallback(() => {
-                            openEncryptedMessage(RedPacketPluginID)
-                        }, []),
-                    },
-                    {
-                        title: 'File service',
-                        img: new URL('./assets/files.png', import.meta.url).toString(),
-                        onClick: useCallback(() => {
-                            openEncryptedMessage(FileServicePluginID)
-                        }, []),
-                    },
-                    {
-                        title: 'ITO',
-                        img: new URL('./assets/token.png', import.meta.url).toString(),
-                        onClick: useCallback(() => {
-                            openEncryptedMessage(ITO_PluginID)
-                        }, []),
-                    },
-                    {
-                        title: 'Claim',
-                        img: new URL('./assets/gift.png', import.meta.url).toString(),
-                        onClick: onClaimAllDialogOpen,
-                    },
-                    {
-                        title: 'Mask Bridge',
-                        img: new URL('./assets/bridge.png', import.meta.url).toString(),
-                    },
+    //#region Swap
+    const { openDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
+    //#endregion
+
+    //#region Fiat on/off ramp
+    const { setDialog: setBuyDialog } = useRemoteControlledDialog(PluginTransakMessages.buyTokenDialogUpdated)
+    //#endregion
+
+    //#region second level entry dialog
+    const {
+        open: isSecondLevelEntryDialogOpen,
+        onOpen: onSecondLevelEntryDialogOpen,
+        onClose: onSecondLevelEntryDialogClose,
+    } = useControlledDialog()
+
+    const [secondLevelEntryDialogTitle, setSecondLevelEntryDialogTitle] = useState('')
+    const [secondLevelEntryChains, setSecondLevelEntryChains] = useState<ChainId[]>([])
+    const [secondLevelEntries, setSecondLevelEntries] = useState<MaskAppEntry[]>([])
+
+    const [chainId, setChainId] = useState(
+        secondEntryChainTabs?.includes(currentChainId) ? currentChainId : ChainId.Mainnet,
+    )
+
+    const openSecondEntryDir = useCallback((title: string, maskAppEntries: MaskAppEntry[], chains: ChainId[]) => {
+        setSecondLevelEntryDialogTitle(title)
+        setSecondLevelEntries(maskAppEntries)
+        setSecondLevelEntryChains(chains)
+        onSecondLevelEntryDialogOpen()
+    }, [])
+    //#endregion
+
+    function createEntry(title: string, img: string, onClick: any, supportedChains?: ChainId[]) {
+        return {
+            title,
+            img,
+            onClick,
+            supportedChains,
+        }
+    }
+
+    const firstLevelEntries: MaskAppEntry[] = [
+        createEntry('Lucky Drop', new URL('./assets/lucky_drop.png', import.meta.url).toString(), () =>
+            openEncryptedMessage(RedPacketPluginID),
+        ),
+        createEntry('File service', new URL('./assets/files.png', import.meta.url).toString(), () =>
+            openEncryptedMessage(FileServicePluginID),
+        ),
+        createEntry('ITO', new URL('./assets/token.png', import.meta.url).toString(), () =>
+            openEncryptedMessage(ITO_PluginID),
+        ),
+        createEntry('Claim', new URL('./assets/gift.png', import.meta.url).toString(), onClaimAllDialogOpen),
+        createEntry('Mask Bridge', new URL('./assets/bridge.png', import.meta.url).toString(), () =>
+            window.open('https://bridge.mask.io/#/', '_blank', 'noopener noreferrer'),
+        ),
+        createEntry('Mask Box', new URL('./assets/mask_box.png', import.meta.url).toString(), undefined),
+        createEntry('Swap', new URL('./assets/swap.png', import.meta.url).toString(), openSwapDialog),
+        createEntry('Fiat on/off ramp', new URL('./assets/fiat_ramp.png', import.meta.url).toString(), () =>
+            setBuyDialog({ open: true, address: account }),
+        ),
+        createEntry('NFTs', new URL('./assets/nft.png', import.meta.url).toString(), () =>
+            openSecondEntryDir(
+                'NFTs',
+                [
                     {
-                        title: 'Mask Box',
+                        title: 'MaskBox',
                         img: new URL('./assets/mask_box.png', import.meta.url).toString(),
+                        onClick: () => {},
                     },
                     {
-                        title: 'Swap',
-                        img: new URL('./assets/swap.png', import.meta.url).toString(),
-                    },
-                    {
-                        title: 'Fiat on/off ramp',
-                        img: new URL('./assets/fiat_ramp.png', import.meta.url).toString(),
+                        title: 'Valuables',
+                        img: new URL('./assets/valuables.png', import.meta.url).toString(),
+                        onClick: () => {},
                     },
+                ],
+                [ChainId.Mainnet, ChainId.BSC],
+            ),
+        ),
+        createEntry('Investment', new URL('./assets/investment.png', import.meta.url).toString(), () =>
+            openSecondEntryDir(
+                'Investment',
+                [
                     {
-                        title: 'NFTs',
-                        img: new URL('./assets/nft.png', import.meta.url).toString(),
+                        title: 'Zerion',
+                        img: new URL('./assets/zerion.png', import.meta.url).toString(),
+                        onClick: () => {},
+                        supportedChains: [ChainId.Mainnet],
                     },
                     {
-                        title: 'Investment',
-                        img: new URL('./assets/investment.png', import.meta.url).toString(),
+                        title: 'dHEDGE',
+                        img: new URL('./assets/dHEDGE.png', import.meta.url).toString(),
+                        onClick: () => {},
                     },
+                ],
+                [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Arbitrum, ChainId.xDai],
+            ),
+        ),
+        createEntry('Saving', new URL('./assets/saving.png', import.meta.url).toString(), undefined),
+        createEntry('Alternative', new URL('./assets/more.png', import.meta.url).toString(), () =>
+            openSecondEntryDir(
+                'Alternative',
+                [
                     {
-                        title: 'Saving',
-                        img: new URL('./assets/saving.png', import.meta.url).toString(),
+                        title: 'PoolTogether',
+                        img: new URL('./assets/pool_together.png', import.meta.url).toString(),
+                        onClick: () => {},
                     },
-                    {
-                        title: 'Alternative',
-                        img: new URL('./assets/more.png', import.meta.url).toString(),
-                    },
-                ].map(({ title, img, onClick }, i) => (
-                    <div className={classes.applicationBox} onClick={onClick} key={i.toString()}>
-                        <img src={img} className={classes.applicationImg} />
-                        <Typography color="textPrimary">{title}</Typography>
-                    </div>
-                ))}
+                ],
+                [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Arbitrum, ChainId.xDai],
+            ),
+        ),
+    ]
+
+    return (
+        <>
+            {secondEntryChainTabs?.length ? (
+                <div className={classes.abstractTabWrapper}>
+                    <NetworkTab
+                        chainId={chainId}
+                        setChainId={setChainId}
+                        classes={classes}
+                        chains={secondEntryChainTabs}
+                    />
+                </div>
+            ) : null}
+            <section className={classes.applicationWrapper}>
+                {(secondEntries ?? firstLevelEntries).map(({ title, img, onClick, supportedChains }, i) =>
+                    !supportedChains || supportedChains?.includes(chainId) ? (
+                        <div className={classes.applicationBox} onClick={onClick} key={i.toString()}>
+                            <img src={img} className={classes.applicationImg} />
+                            <Typography color="textPrimary">{title}</Typography>
+                        </div>
+                    ) : null,
+                )}
             </section>
             {isClaimAllDialogOpen ? (
                 <ClaimAllDialog open={isClaimAllDialogOpen} onClose={onClaimAllDialogClose} />
             ) : null}
+            {isSecondLevelEntryDialogOpen ? (
+                <EntrySecondLevelDialog
+                    title={secondLevelEntryDialogTitle}
+                    open={isSecondLevelEntryDialogOpen}
+                    entries={secondLevelEntries}
+                    chains={secondLevelEntryChains}
+                    closeDialog={onSecondLevelEntryDialogClose}
+                />
+            ) : null}
         </>
     )
 }
diff --git a/packages/maskbook/src/components/shared/NetworkTab.tsx b/packages/maskbook/src/components/shared/NetworkTab.tsx
index cfb696cb37e3..1d7fb22b7f71 100644
--- a/packages/maskbook/src/components/shared/NetworkTab.tsx
+++ b/packages/maskbook/src/components/shared/NetworkTab.tsx
@@ -1,16 +1,38 @@
 import { makeStyles } from '@masknet/theme'
 import { useStylesExtends } from '@masknet/shared'
 import AbstractTab, { AbstractTabProps } from './AbstractTab'
-import { ChainId } from '@masknet/web3-shared-evm'
+import { ChainId, getChainDetailed } from '@masknet/web3-shared-evm'
+
+interface StyleProps {
+    chainLength: number
+}
+const useStyles = makeStyles<StyleProps>()((theme, props) => ({
+    tab: {
+        background: theme.palette.mode === 'light' ? '#F6F8F8' : '#17191D',
+        marginRight: 1,
+        '&:last-child': {
+            marginRight: 0,
+        },
+    },
+    tabs: {
+        '& .MuiTabs-flexContainer': {
+            display: 'grid',
+            gridTemplateColumns: Array(props.chainLength)
+                .fill(100 / props.chainLength + '%')
+                .join(' '),
+            backgroundColor: theme.palette.background.paper,
+        },
+    },
+}))
 
-const useStyles = makeStyles()(() => ({}))
 interface NetworkTabProps extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'indicator' | 'focusTab' | 'tabPaper'> {
+    chains: ChainId[]
     setChainId: (chainId: ChainId) => void
     chainId: ChainId
 }
 export function NetworkTab(props: NetworkTabProps) {
-    const classes = useStylesExtends(useStyles(), props)
-    const { chainId, setChainId } = props
+    const classes = useStylesExtends(useStyles({ chainLength: props.chains.length }), props)
+    const { chainId, setChainId, chains } = props
     const createTabItem = (name: string, chainId: ChainId) => ({
         label: <span>{name}</span>,
         sx: { p: 0 },
@@ -18,14 +40,8 @@ export function NetworkTab(props: NetworkTabProps) {
     })
 
     const tabProps: AbstractTabProps = {
-        tabs: [
-            createTabItem('ETH', ChainId.Mainnet),
-            createTabItem('BSC', ChainId.BSC),
-            createTabItem('Polygon/Matic', ChainId.Matic),
-            createTabItem('Arbitrum', ChainId.Arbitrum),
-            createTabItem('xDai', ChainId.xDai),
-        ],
-        index: [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Arbitrum, ChainId.xDai].indexOf(chainId),
+        tabs: chains.map((chainId) => createTabItem(getChainDetailed(chainId)?.chain ?? 'Unknown', chainId)),
+        index: chains.indexOf(chainId),
         classes,
         hasOnlyOneChild: true,
     }
diff --git a/packages/maskbook/src/components/shared/WalletStatusBox.tsx b/packages/maskbook/src/components/shared/WalletStatusBox.tsx
new file mode 100644
index 000000000000..d1c4ba9a09a4
--- /dev/null
+++ b/packages/maskbook/src/components/shared/WalletStatusBox.tsx
@@ -0,0 +1,191 @@
+import { FormattedAddress, useRemoteControlledDialog, useValueRef, useSnackbarCallback } from '@masknet/shared'
+import { WalletMessages } from '../../plugins/Wallet/messages'
+import classNames from 'classnames'
+import { currentProviderSettings } from '../../plugins/Wallet/settings'
+import { useCopyToClipboard } from 'react-use'
+import { Copy, ExternalLink } from 'react-feather'
+import { useI18N } from '../../utils'
+import Services from '../../extension/service'
+import { ProviderType, resolveAddressLinkOnExplorer, useWallet, useChainId } from '@masknet/web3-shared-evm'
+import { Button, Link, Typography } from '@mui/material'
+import { makeStyles, getMaskColor } from '@masknet/theme'
+import { WalletIcon } from './WalletIcon'
+import { useCallback } from 'react'
+
+const useStyles = makeStyles()((theme) => ({
+    content: {
+        padding: theme.spacing(2, 3, 3),
+    },
+    currentAccount: {
+        padding: theme.spacing(2, 3),
+        marginBottom: theme.spacing(2),
+        display: 'flex',
+        backgroundColor: getMaskColor(theme).twitterBackground,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    accountInfo: {
+        fontSize: 16,
+        flexGrow: 1,
+        marginLeft: theme.spacing(1),
+    },
+    accountName: {
+        fontSize: 16,
+        marginRight: 6,
+    },
+    infoRow: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    actionButton: {
+        fontSize: 12,
+        marginLeft: theme.spacing(1),
+        backgroundColor: theme.palette.mode === 'light' ? '#111418' : 'rgb(29, 155, 240)',
+        ...(theme.palette.mode === 'light'
+            ? {
+                  '&:hover': {
+                      backgroundColor: '#2f3640',
+                  },
+              }
+            : {}),
+        padding: theme.spacing(1, 2),
+    },
+    address: {
+        fontSize: 16,
+        marginRight: theme.spacing(1),
+        display: 'inline-block',
+    },
+    link: {
+        color: theme.palette.text.secondary,
+        fontSize: 14,
+        display: 'flex',
+        alignItems: 'center',
+    },
+    linkIcon: {
+        marginRight: theme.spacing(1),
+        color: '#1C68F3',
+    },
+    networkIcon: {
+        backgroundColor: '#fff !important',
+    },
+    providerIcon: {
+        backgroundColor: '#F7F9FA !important',
+    },
+}))
+
+export function WalletStatusBox() {
+    const { t } = useI18N()
+    const chainId = useChainId()
+    const selectedWallet = useWallet()
+    const { classes } = useStyles()
+    const { setDialog: setRenameDialog } = useRemoteControlledDialog(WalletMessages.events.walletRenameDialogUpdated)
+    const selectedProviderType = useValueRef(currentProviderSettings)
+
+    //#region copy addr to clipboard
+    const [, copyToClipboard] = useCopyToClipboard()
+    const onCopy = useSnackbarCallback(
+        async (ev: React.MouseEvent<HTMLAnchorElement>) => {
+            ev.stopPropagation()
+            copyToClipboard(selectedWallet?.address ?? '')
+        },
+        [],
+        undefined,
+        undefined,
+        undefined,
+        t('copy_success_of_wallet_addr'),
+    )
+    //#endregion
+
+    //#region change provider
+    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
+        WalletMessages.events.selectProviderDialogUpdated,
+    )
+    //#endregion
+
+    //#region walletconnect
+    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
+        WalletMessages.events.walletConnectQRCodeDialogUpdated,
+    )
+    //#endregion
+
+    const onDisconnect = useCallback(async () => {
+        if (selectedProviderType !== ProviderType.WalletConnect) return
+        setWalletConnectDialog({
+            open: true,
+            uri: await Services.Ethereum.createConnectionURI(),
+        })
+    }, [selectedProviderType, setWalletConnectDialog])
+
+    const onChange = useCallback(() => {
+        openSelectProviderDialog()
+    }, [openSelectProviderDialog])
+
+    return selectedWallet ? (
+        <section className={classes.currentAccount}>
+            <WalletIcon
+                size={48}
+                badgeSize={18}
+                classes={{
+                    networkIcon: classes.networkIcon,
+                    providerIcon: classes.providerIcon,
+                }}
+            />
+            <div className={classes.accountInfo}>
+                <div className={classes.infoRow}>
+                    <Typography className={classes.accountName}>{selectedWallet.name}</Typography>
+                    <Link
+                        className={classes.link}
+                        component="button"
+                        onClick={() => {
+                            setRenameDialog({
+                                open: true,
+                                wallet: selectedWallet,
+                            })
+                        }}
+                    />
+                </div>
+                <div className={classes.infoRow}>
+                    <Typography className={classes.address} variant="body2">
+                        <FormattedAddress address={selectedWallet.address} size={9} />
+                    </Typography>
+                    <Link
+                        className={classes.link}
+                        underline="none"
+                        component="button"
+                        title={t('wallet_status_button_copy_address')}
+                        onClick={onCopy}>
+                        <Copy className={classes.linkIcon} size={14} />
+                    </Link>
+                    <Link
+                        className={classes.link}
+                        href={resolveAddressLinkOnExplorer(chainId, selectedWallet.address)}
+                        target="_blank"
+                        title={t('plugin_wallet_view_on_explorer')}
+                        rel="noopener noreferrer">
+                        <ExternalLink className={classes.linkIcon} size={14} />
+                    </Link>
+                </div>
+            </div>
+            <section>
+                {selectedProviderType === ProviderType.WalletConnect ? (
+                    <Button
+                        className={classes.actionButton}
+                        color="primary"
+                        size="small"
+                        variant="outlined"
+                        onClick={onDisconnect}>
+                        {t('wallet_status_button_disconnect')}
+                    </Button>
+                ) : null}
+                <Button
+                    className={classNames(classes.actionButton)}
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    onClick={onChange}>
+                    {t('wallet_status_button_change')}
+                </Button>
+            </section>
+        </section>
+    ) : null
+}
diff --git a/packages/maskbook/src/components/shared/assets/dHEDGE.png b/packages/maskbook/src/components/shared/assets/dHEDGE.png
new file mode 100644
index 000000000000..bdff40cfed1a
Binary files /dev/null and b/packages/maskbook/src/components/shared/assets/dHEDGE.png differ
diff --git a/packages/maskbook/src/components/shared/assets/pool_together.png b/packages/maskbook/src/components/shared/assets/pool_together.png
new file mode 100644
index 000000000000..9344b060e8db
Binary files /dev/null and b/packages/maskbook/src/components/shared/assets/pool_together.png differ
diff --git a/packages/maskbook/src/components/shared/assets/valuables.png b/packages/maskbook/src/components/shared/assets/valuables.png
new file mode 100644
index 000000000000..3b3ff2a3b268
Binary files /dev/null and b/packages/maskbook/src/components/shared/assets/valuables.png differ
diff --git a/packages/maskbook/src/components/shared/assets/zerion.png b/packages/maskbook/src/components/shared/assets/zerion.png
new file mode 100644
index 000000000000..25156e8c48fa
Binary files /dev/null and b/packages/maskbook/src/components/shared/assets/zerion.png differ
diff --git a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
index f32f89b369be..8753bd7606da 100644
--- a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
+++ b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
@@ -16,6 +16,7 @@ import {
 } from '@masknet/web3-shared-evm'
 import classNames from 'classnames'
 import { NetworkTab } from '../../../components/shared/NetworkTab'
+import { WalletStatusBox } from '../../../components/shared/WalletStatusBox'
 import { useI18N } from '../../../utils'
 import { useSpaceStationCampaignInfo } from './hooks/useSpaceStationCampaignInfo'
 import { NftAirdropCard } from './NftAirdropCard'
@@ -200,10 +201,14 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         top: 0,
         width: '100%',
         zIndex: 2,
-        paddingTop: theme.spacing(4),
+        paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(2),
         backgroundColor: theme.palette.background.paper,
     },
+    walletStatusBox: {
+        width: 535,
+        margin: '24px auto',
+    },
 }))
 
 interface ClaimAllDialogProps {
@@ -345,8 +350,16 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
             }}>
             <InjectedDialog open={open} onClose={onClose} title={t('plugin_ito_claim_all_dialog_title')}>
                 <DialogContent className={classes.wrapper}>
+                    <div className={classes.walletStatusBox}>
+                        <WalletStatusBox />
+                    </div>
                     <div className={classes.abstractTabWrapper}>
-                        <NetworkTab chainId={chainId} setChainId={setChainId} classes={classes} />
+                        <NetworkTab
+                            chainId={chainId}
+                            setChainId={setChainId}
+                            classes={classes}
+                            chains={[ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Arbitrum, ChainId.xDai]}
+                        />
                     </div>
                     <div className={classes.contentWrapper} ref={DialogRef}>
                         {(showNftAirdrop || loadingAirdrop) && chainId === ChainId.Matic ? (
diff --git a/packages/maskbook/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx b/packages/maskbook/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx
index f5bc390cb206..55313c33f95e 100644
--- a/packages/maskbook/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx
+++ b/packages/maskbook/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx
@@ -1,53 +1,20 @@
-import { FormattedAddress, useRemoteControlledDialog, useValueRef, useSnackbarCallback } from '@masknet/shared'
-import {
-    ProviderType,
-    resolveAddressLinkOnExplorer,
-    useChainId,
-    useChainIdValid,
-    useWallet,
-} from '@masknet/web3-shared-evm'
-import { Button, DialogActions, DialogContent, Link, Typography } from '@mui/material'
+import { useRemoteControlledDialog } from '@masknet/shared'
+import { useChainIdValid } from '@masknet/web3-shared-evm'
+import { DialogActions, DialogContent, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import ErrorIcon from '@mui/icons-material/Error'
-import classNames from 'classnames'
 import { useCallback } from 'react'
-import { Copy, ExternalLink } from 'react-feather'
-import { useCopyToClipboard } from 'react-use'
 import { InjectedDialog } from '../../../../components/shared/InjectedDialog'
 import { MaskApplicationBox } from '../../../../components/shared/MaskApplicationBox'
-import { WalletIcon } from '../../../../components/shared/WalletIcon'
-import Services from '../../../../extension/service'
+import { WalletStatusBox } from '../../../../components/shared/WalletStatusBox'
 import { useI18N } from '../../../../utils'
 import { WalletMessages } from '../../messages'
-import { currentProviderSettings } from '../../settings'
 import { MaskMessages } from '../../../../utils/messages'
-import { getMaskColor } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
         padding: theme.spacing(2, 3, 3),
     },
-    currentAccount: {
-        padding: theme.spacing(2, 3),
-        marginBottom: theme.spacing(2),
-        display: 'flex',
-        backgroundColor: getMaskColor(theme).twitterBackground,
-        borderRadius: 8,
-        alignItems: 'center',
-    },
-    accountInfo: {
-        fontSize: 16,
-        flexGrow: 1,
-        marginLeft: theme.spacing(1),
-    },
-    accountName: {
-        fontSize: 16,
-        marginRight: 6,
-    },
-    infoRow: {
-        display: 'flex',
-        alignItems: 'center',
-    },
     footer: {
         fontSize: 12,
         textAlign: 'left',
@@ -55,51 +22,11 @@ const useStyles = makeStyles()((theme) => ({
         borderTop: `1px solid ${theme.palette.divider}`,
         justifyContent: 'flex-start',
     },
-    transactionList: {
-        alignItems: 'center',
-    },
-    actions: {},
-    actionButton: {
-        fontSize: 12,
-        marginLeft: theme.spacing(1),
-        backgroundColor: theme.palette.mode === 'light' ? '#111418' : 'rgb(29, 155, 240)',
-        ...(theme.palette.mode === 'light'
-            ? {
-                  '&:hover': {
-                      backgroundColor: '#2f3640',
-                  },
-              }
-            : {}),
-        padding: theme.spacing(1, 2),
-    },
-    changeButton: {
-        borderRadius: 20,
-    },
-    iconWrapper: {
-        position: 'relative',
-        height: 48,
-        width: 48,
-        marginRight: theme.spacing(1.5),
-    },
-    tip: {
-        flex: 1,
-        fontSize: 14,
-    },
     address: {
         fontSize: 16,
         marginRight: theme.spacing(1),
         display: 'inline-block',
     },
-    link: {
-        color: theme.palette.text.secondary,
-        fontSize: 14,
-        display: 'flex',
-        alignItems: 'center',
-    },
-    linkIcon: {
-        marginRight: theme.spacing(1),
-        color: '#1C68F3',
-    },
     subTitle: {
         fontSize: 18,
         lineHeight: '24px',
@@ -107,68 +34,13 @@ const useStyles = makeStyles()((theme) => ({
         marginBottom: 11.5,
         color: theme.palette.text.primary,
     },
-    networkIcon: {
-        backgroundColor: '#fff !important',
-    },
-    providerIcon: {
-        backgroundColor: '#F7F9FA !important',
-    },
-    applicationBox: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: getMaskColor(theme).twitterBackground,
-        borderRadius: '8px',
-        cursor: 'pointer',
-        height: 100,
-        '&:hover': {
-            transform: 'translateX(2.5px) translateY(-2px)',
-            boxShadow: `0px 12px 28px ${
-                theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.02)'
-            }`,
-        },
-    },
-    applicationWrapper: {
-        display: 'grid',
-        gridTemplateColumns: '123px 123px 123px 123px',
-        gridTemplateRows: '100px',
-        rowGap: 12,
-        justifyContent: 'space-between',
-        height: 324,
-    },
-    applicationImg: {
-        width: 36,
-        height: 36,
-        marginBottom: 10,
-    },
 }))
 
-export interface WalletStatusDialogProps {}
-
-export function WalletStatusDialog(props: WalletStatusDialogProps) {
+export function WalletStatusDialog() {
     const { t } = useI18N()
 
     const { classes } = useStyles()
-    const chainId = useChainId()
     const chainIdValid = useChainIdValid()
-    const selectedWallet = useWallet()
-    const selectedProviderType = useValueRef(currentProviderSettings)
-
-    //#region copy addr to clipboard
-    const [, copyToClipboard] = useCopyToClipboard()
-    const onCopy = useSnackbarCallback(
-        async (ev: React.MouseEvent<HTMLAnchorElement>) => {
-            ev.stopPropagation()
-            copyToClipboard(selectedWallet?.address ?? '')
-        },
-        [],
-        undefined,
-        undefined,
-        undefined,
-        t('copy_success_of_wallet_addr'),
-    )
-    //#endregion
 
     //#region remote controlled dialog logic
     const { open, closeDialog: _closeDialog } = useRemoteControlledDialog(
@@ -184,106 +56,11 @@ export function WalletStatusDialog(props: WalletStatusDialogProps) {
     }, [])
     //#endregion
 
-    //#region change provider
-    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
-        WalletMessages.events.selectProviderDialogUpdated,
-    )
-    //#endregion
-
-    //#region walletconnect
-    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
-    )
-    //#endregion
-
-    const { setDialog: setRenameDialog } = useRemoteControlledDialog(WalletMessages.events.walletRenameDialogUpdated)
-
-    const onDisconnect = useCallback(async () => {
-        if (selectedProviderType !== ProviderType.WalletConnect) return
-        closeDialog()
-        setWalletConnectDialog({
-            open: true,
-            uri: await Services.Ethereum.createConnectionURI(),
-        })
-    }, [selectedProviderType, closeDialog, setWalletConnectDialog])
-    const onChange = useCallback(() => {
-        closeDialog()
-        openSelectProviderDialog()
-    }, [closeDialog, openSelectProviderDialog])
-
-    if (!selectedWallet) return null
-
     return (
         <InjectedDialog title="Mask Network" open={open} onClose={closeDialog} maxWidth="sm">
             <DialogContent className={classes.content}>
                 <Typography className={classes.subTitle}>{t('wallets')}</Typography>
-                <section className={classes.currentAccount}>
-                    <WalletIcon
-                        size={48}
-                        badgeSize={18}
-                        classes={{
-                            networkIcon: classes.networkIcon,
-                            providerIcon: classes.providerIcon,
-                        }}
-                    />
-                    <div className={classes.accountInfo}>
-                        <div className={classes.infoRow}>
-                            <Typography className={classes.accountName}>{selectedWallet.name}</Typography>
-                            <Link
-                                className={classes.link}
-                                component="button"
-                                onClick={() => {
-                                    setRenameDialog({
-                                        open: true,
-                                        wallet: selectedWallet,
-                                    })
-                                }}>
-                                {/* <Edit3 size={16} color="currentcolor" /> */}
-                            </Link>
-                        </div>
-                        <div className={classes.infoRow}>
-                            <Typography className={classes.address} variant="body2">
-                                <FormattedAddress address={selectedWallet.address} size={9} />
-                            </Typography>
-                            <Link
-                                className={classes.link}
-                                underline="none"
-                                component="button"
-                                title={t('wallet_status_button_copy_address')}
-                                onClick={onCopy}>
-                                <Copy className={classes.linkIcon} size={14} />
-                            </Link>
-                            <Link
-                                className={classes.link}
-                                href={resolveAddressLinkOnExplorer(chainId, selectedWallet.address)}
-                                target="_blank"
-                                title={t('plugin_wallet_view_on_explorer')}
-                                rel="noopener noreferrer">
-                                <ExternalLink className={classes.linkIcon} size={14} />
-                            </Link>
-                        </div>
-                    </div>
-                    <section className={classes.actions}>
-                        {selectedProviderType === ProviderType.WalletConnect ? (
-                            <Button
-                                className={classes.actionButton}
-                                color="primary"
-                                size="small"
-                                variant="outlined"
-                                onClick={onDisconnect}>
-                                {t('wallet_status_button_disconnect')}
-                            </Button>
-                        ) : null}
-                        <Button
-                            className={classNames(classes.actionButton)}
-                            color="primary"
-                            variant="contained"
-                            size="small"
-                            onClick={onChange}>
-                            {t('wallet_status_button_change')}
-                        </Button>
-                    </section>
-                </section>
+                <WalletStatusBox />
                 <Typography className={classes.subTitle}>{t('applications')}</Typography>
                 <MaskApplicationBox />
             </DialogContent>
diff --git a/packages/web3-shared/evm/assets/chains.json b/packages/web3-shared/evm/assets/chains.json
index 6cf783d64c85..acab2845dbe0 100644
--- a/packages/web3-shared/evm/assets/chains.json
+++ b/packages/web3-shared/evm/assets/chains.json
@@ -174,7 +174,7 @@
         "chainId": 137,
         "fullName": "Polygon",
         "shortName": "matic",
-        "chain": "Matic",
+        "chain": "Polygon",
         "network": "mainnet",
         "networkId": 137,
         "nativeCurrency": {