diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
index 204d5dcfb855..15f556b7f6ce 100644
--- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -102,7 +102,7 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
             }
         })
         return [...socialAddressList, ...addresses]
-    }, [socialAddressList, wallets, isOwn])
+    }, [socialAddressList, wallets?.map((x) => x.identity).join(), isOwn])
 
     const activatedPlugins = useActivatedPluginsSNSAdaptor('any')
     const availablePlugins = useAvailablePlugins(activatedPlugins)
@@ -163,9 +163,10 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
         )
     }, [
         componentTabId,
+        personaPublicKey,
         displayPlugins.map((x) => x.ID).join(),
         personaList.join(),
-        socialAddressList.map((x) => x.address).join(),
+        addressList.map((x) => x.address).join(),
     ])
 
     useLocationChange(() => {
@@ -188,6 +189,8 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
         })
     }, [identity.identifier?.userId])
 
+    // console.log({ identity, socialAddressList, addressList, wallets })
+
     if (hidden) return null
 
     if (!identity.identifier?.userId || loadingSocialAddressList || loadingPersonaList)
diff --git a/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
index b777653083d6..51dee6e2d4f0 100644
--- a/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
@@ -1,10 +1,5 @@
 import type { ExchangeProxy } from '@masknet/web3-contracts/types/ExchangeProxy'
-import {
-    SchemaType,
-    GasOptionConfig,
-    useTraderConstants,
-    encodeContractTransaction
-} from '@masknet/web3-shared-evm'
+import { SchemaType, GasOptionConfig, useTraderConstants, encodeContractTransaction } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
 import { SLIPPAGE_DEFAULT } from '../../constants'
 import { SwapResponse, TradeComputed, TradeStrategy } from '../../types'
@@ -55,7 +50,6 @@ export function useTradeCallback(
         const outputTokenAddress =
             trade.outputToken.schema === SchemaType.Native ? BALANCER_ETH_ADDRESS : trade.outputToken.address
 
-
         // trade with the native token
         let transactionValue = '0'
         if (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.schema === SchemaType.Native)
@@ -66,32 +60,33 @@ export function useTradeCallback(
         // send transaction and wait for hash
         const config = {
             from: account,
-            gas: await connection
-                .estimateTransaction?.({
+            gas:
+                (await connection.estimateTransaction?.({
                     from: account,
                     value: transactionValue,
-                }) ?? ZERO.toString(),
+                })) ?? ZERO.toString(),
             value: transactionValue,
             ...gasConfig,
         }
 
-
-        const tx = await encodeContractTransaction(exchangeProxyContract,  trade.strategy === TradeStrategy.ExactIn
-            ? exchangeProxyContract.methods.multihopBatchSwapExactIn(
-                swap_,
-                inputTokenAddress,
-                outputTokenAddress,
-                trade.inputAmount.toFixed(),
-                tradeAmount.toFixed(),
-            )
-            : exchangeProxyContract.methods.multihopBatchSwapExactOut(
-                swap_,
-                inputTokenAddress,
-                outputTokenAddress,
-                tradeAmount.toFixed(),
-            ), config)
-
-
+        const tx = await encodeContractTransaction(
+            exchangeProxyContract,
+            trade.strategy === TradeStrategy.ExactIn
+                ? exchangeProxyContract.methods.multihopBatchSwapExactIn(
+                      swap_,
+                      inputTokenAddress,
+                      outputTokenAddress,
+                      trade.inputAmount.toFixed(),
+                      tradeAmount.toFixed(),
+                  )
+                : exchangeProxyContract.methods.multihopBatchSwapExactOut(
+                      swap_,
+                      inputTokenAddress,
+                      outputTokenAddress,
+                      tradeAmount.toFixed(),
+                  ),
+            config,
+        )
 
         // send transaction and wait for hash
         const hash = await connection.sendTransaction(tx)
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx
index f20033875d53..403cd516e158 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx
@@ -34,13 +34,13 @@ export const DefineMapping: DefineMapping = {
     [SecurityMessageLevel.High]: {
         i18nKey: 'high_risk',
         titleColor: '#FF5F5F',
-        bgColor: 'rgba(255, 95, 95, 0.1)',
+        bgColor: 'rgba(255, 53, 69, 0.1)',
         icon: (size: number) => <SecurityRiskIcon sx={{ fontSize: size ?? 24 }} />,
     },
     [SecurityMessageLevel.Medium]: {
         i18nKey: 'medium_risk',
-        titleColor: '#FFB915',
-        bgColor: 'rgba(255, 177, 0, 0.2)',
+        titleColor: '#FFB100',
+        bgColor: 'rgba(255, 177, 0, 0.1)',
         // TODO: Merge duplicate icon in a another PR.
         icon: (size: number) => <SecurityWarningIcon sx={{ fontSize: size ?? 24, color: '#FFB915' }} />,
     },
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx
index 971b3342e68b..a9efe262cbb2 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx
@@ -22,11 +22,14 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     header: {
-        fontSize: 14,
+        fontSize: 16,
+        fontWeight: 700,
         lineHeight: '22px',
     },
     description: {
-        fontSize: 12,
+        fontSize: 16,
+        fontWeight: 400,
+        color: theme.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx
index 060233f8aa36..9b8f59753155 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx
@@ -23,7 +23,7 @@ interface TokenCardProps {
 
 const useStyles = makeStyles()((theme) => ({
     header: {
-        fontWeight: 500,
+        fontWeight: 700,
         fontSize: 18,
     },
     root: {
@@ -43,13 +43,14 @@ const useStyles = makeStyles()((theme) => ({
         height: '48px',
     },
     tokenName: {
-        fontSize: '16px',
+        fontSize: '18px',
         fontWeight: 700,
+        color: theme.palette.maskColor.main,
     },
     tokenPrice: {
-        fontSize: '16px',
+        fontSize: '18px',
         fontWeight: 700,
-        color: theme.palette.text.secondary,
+        color: theme.palette.maskColor.main,
     },
     itemTitle: {
         color: theme.palette.maskColor.second,
@@ -160,7 +161,7 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                         />
                     </Stack>
                     <Stack direction="row" alignItems="center" spacing={1}>
-                        <Typography component="span" lineHeight="14px" fontSize={14}>
+                        <Typography component="span" lineHeight="14px" fontSize={14} fontWeight={400}>
                             {t.more_details()}
                         </Typography>
                         <Link
@@ -204,28 +205,18 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                         )}
                     </Stack>
                 </Stack>
-                <Collapse
-                    in={isCollapse}
-                    timeout={{
-                        enter: 1200,
-                        exit: 10,
-                    }}
-                    collapsedSize={LIST_HEIGHT.min}
-                    className={classes.detectionCollection}
-                    sx={{ maxHeight: LIST_HEIGHT.max, overflowY: 'auto' }}>
-                    <Stack spacing={1}>
-                        {makeMessageList.map((x, i) => (
-                            <RiskCard tokenSecurity={tokenSecurity} info={x} key={i} />
-                        ))}
-                        {(!makeMessageList.length || securityMessageLevel === SecurityMessageLevel.Safe) && (
-                            <RiskCardUI
-                                icon={DefineMapping[SecurityMessageLevel.Safe].icon(14)}
-                                title={t.risk_safe_description()}
-                                titleColor={DefineMapping[SecurityMessageLevel.Safe].titleColor}
-                            />
-                        )}
-                    </Stack>
-                </Collapse>
+                <Stack className={classes.detectionCollection} sx={{ maxHeight: LIST_HEIGHT.max, overflowY: 'auto' }}>
+                    {makeMessageList.map((x, i) => (
+                        <RiskCard tokenSecurity={tokenSecurity} info={x} key={i} />
+                    ))}
+                    {(!makeMessageList.length || securityMessageLevel === SecurityMessageLevel.Safe) && (
+                        <RiskCardUI
+                            icon={DefineMapping[SecurityMessageLevel.Safe].icon(14)}
+                            title={t.risk_safe_description()}
+                            titleColor={DefineMapping[SecurityMessageLevel.Safe].titleColor}
+                        />
+                    )}
+                </Stack>
             </Stack>
         </Stack>
     )
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx
index f68bdcc78cf6..eb29fee2a06a 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx
@@ -33,7 +33,6 @@ const sns: Plugin.SNSAdaptor.Definition = {
                 },
                 name,
                 icon,
-                iconFilterColor: '',
                 appBoardSortingDefaultPriority: 14,
                 category: 'dapp',
                 marketListSortingPriority: 16,
diff --git a/packages/plugins/GoPlusSecurity/src/base.ts b/packages/plugins/GoPlusSecurity/src/base.ts
index c19fe3023fe1..2c83e4ed8e50 100644
--- a/packages/plugins/GoPlusSecurity/src/base.ts
+++ b/packages/plugins/GoPlusSecurity/src/base.ts
@@ -4,7 +4,6 @@ import { languages } from './locales/languages'
 
 export const base: Plugin.Shared.Definition = {
     ID: PLUGIN_ID,
-    icon: '',
     name: { fallback: PLUGIN_NAME },
     description: { fallback: PLUGIN_DESCRIPTION },
     publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' },
diff --git a/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx b/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx
index 556bb8f52be3..972e3ef5751b 100644
--- a/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx
+++ b/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx
@@ -1,14 +1,14 @@
-import { useStylesExtends, makeStyles } from '@masknet/theme'
-import { Box, Link, Typography } from '@mui/material'
-import { Copy } from 'react-feather'
+import { useStylesExtends, makeStyles, ShadowRootTooltip } from '@masknet/theme'
+import { Box, Typography } from '@mui/material'
 import { useAsyncRetry, useCopyToClipboard } from 'react-use'
 import { useI18N } from '../../locales'
 import { PlatformAvatar } from './PlatformAvatar'
-import { useSnackbarCallback } from '@masknet/shared'
 import { formatPublicKey } from '../utils'
 import type { PersonaInformation } from '@masknet/shared-base'
 import type { IdentityResolved } from '@masknet/plugin-infra'
 import { context } from '../context'
+import { CopyIcon } from '@masknet/icons'
+import { useCallback, useState } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
     bottomFixed: {
@@ -27,6 +27,7 @@ const useStyles = makeStyles()((theme) => ({
     linkIcon: {
         marginRight: theme.spacing(1),
         color: theme.palette.maskColor.second,
+        cursor: 'pointer',
     },
     personaKey: {
         fontSize: '12px',
@@ -45,22 +46,27 @@ export function PersonaAction(props: PersonaActionProps) {
     const { currentPersona, currentVisitingProfile } = props
     const t = useI18N()
 
+    const [open, setOpen] = useState(false)
+
     const { value: avatar } = useAsyncRetry(async () => {
         const avatar = await context.getPersonaAvatar(currentPersona?.identifier)
         if (!avatar) return undefined
         return avatar
     })
     const [, copyToClipboard] = useCopyToClipboard()
-    const onCopy = useSnackbarCallback(
-        async (ev: React.MouseEvent<HTMLAnchorElement>) => {
-            ev.stopPropagation()
+
+    const onCopy = useCallback(
+        (e: React.MouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
             copyToClipboard(currentPersona?.identifier?.rawPublicKey ?? '')
+            setOpen(true)
+            // Close tooltip after five seconds of copying
+            setTimeout(() => {
+                setOpen(false)
+            }, 5000)
         },
-        [],
-        undefined,
-        undefined,
-        undefined,
-        t.copied(),
+        [currentPersona?.identifier?.rawPublicKey, copyToClipboard],
     )
 
     return (
@@ -74,14 +80,15 @@ export function PersonaAction(props: PersonaActionProps) {
                     <Typography className={classes.personaKey}>
                         {currentPersona?.identifier ? formatPublicKey(currentPersona?.identifier?.rawPublicKey) : '--'}
                     </Typography>
-                    <Link
-                        className={classes.link}
-                        underline="none"
-                        component="button"
-                        title={t.persona_public_key_copy()}
-                        onClick={onCopy}>
-                        <Copy className={classes.linkIcon} size={14} />
-                    </Link>
+                    <ShadowRootTooltip
+                        title={t.copied()}
+                        open={open}
+                        placement="top"
+                        onMouseLeave={() => setOpen(false)}
+                        disableFocusListener
+                        disableTouchListener>
+                        <CopyIcon onClick={onCopy} className={classes.linkIcon} />
+                    </ShadowRootTooltip>
                 </Box>
             </div>
         </div>
diff --git a/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx b/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx
index 7c3e61369a15..62071b3981d1 100644
--- a/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx
+++ b/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx
@@ -22,11 +22,14 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     header: {
-        fontSize: 14,
+        fontSize: 16,
+        fontWeight: 700,
         lineHeight: '22px',
     },
     description: {
-        fontSize: 12,
+        fontSize: 16,
+        fontWeight: 400,
+        color: theme.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx b/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx
index 250ea2402b6e..7935137dde87 100644
--- a/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx
+++ b/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx
@@ -1,6 +1,5 @@
 import { Collapse, Link, Stack, Typography } from '@mui/material'
 import { useSharedI18N } from '../../../../locales'
-import { ExternalLink } from 'react-feather'
 import { makeStyles } from '@masknet/theme'
 import { memo, useMemo, useState } from 'react'
 import { DefineMapping, SecurityMessageLevel, TokenSecurity } from './Common'
@@ -14,6 +13,7 @@ import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import urlcat from 'urlcat'
 import type { TokenAPI } from '@masknet/web3-providers'
 import { formatCurrency, FungibleToken } from '@masknet/web3-shared-base'
+import { LinkOutIcon } from '@masknet/icons'
 
 interface TokenCardProps {
     tokenSecurity: TokenSecurity
@@ -24,7 +24,7 @@ interface TokenCardProps {
 
 const useStyles = makeStyles()((theme) => ({
     header: {
-        fontWeight: 500,
+        fontWeight: 700,
         fontSize: 18,
     },
     root: {
@@ -44,13 +44,24 @@ const useStyles = makeStyles()((theme) => ({
         height: '48px',
     },
     tokenName: {
-        fontSize: '16px',
+        fontSize: '18px',
         fontWeight: 700,
+        color: theme.palette.maskColor.main,
     },
     tokenPrice: {
-        fontSize: '16px',
+        fontSize: '18px',
         fontWeight: 700,
-        color: theme.palette.text.secondary,
+        color: theme.palette.maskColor.main,
+    },
+    arrowIcon: {
+        fontSize: 15,
+        cursor: 'pointer',
+        fill: theme.palette.maskColor.second,
+    },
+    linkIcon: {
+        fill: theme.palette.maskColor.main,
+        width: 18,
+        height: 18,
     },
 }))
 
@@ -150,13 +161,8 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
             <Stack spacing={1}>
                 <Stack direction="row" justifyContent="space-between">
                     <Stack display="inline-flex" direction="row" alignItems="center" spacing={0.6}>
-                        <Typography variant="h6" className={classes.header}>
-                            {t.token_info()}
-                        </Typography>
-                        <KeyboardArrowDownIcon
-                            onClick={() => setCollapse(!isCollapse)}
-                            sx={{ fontSize: 15, cursor: 'pointer' }}
-                        />
+                        <Typography className={classes.header}>{t.token_info()}</Typography>
+                        <KeyboardArrowDownIcon onClick={() => setCollapse(!isCollapse)} className={classes.arrowIcon} />
                     </Stack>
                     <Stack direction="row" alignItems="center" spacing={1}>
                         <Typography component="span" lineHeight="14px" fontSize={14}>
@@ -167,7 +173,7 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                             href={resolveGoLabLink(tokenSecurity.chainId, tokenSecurity.contract)}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <ExternalLink color={theme.palette.text.strong} size={14} />
+                            <LinkOutIcon className={classes.linkIcon} />
                         </Link>
                     </Stack>
                 </Stack>
diff --git a/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx b/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx
index a8ead2961df9..4e2cd24f5598 100644
--- a/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx
+++ b/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx
@@ -7,6 +7,7 @@ import { ExternalLink } from 'react-feather'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import { explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { formatCurrency, formatSupply } from '@masknet/web3-shared-base'
+import { LinkOutIcon } from '@masknet/icons'
 
 const useStyles = makeStyles()((theme) => ({
     card: {
@@ -18,18 +19,23 @@ const useStyles = makeStyles()((theme) => ({
                 : '0px 0px 20px rgba(255, 255, 255, 0.12)',
     },
     subtitle: {
-        color: theme.palette.text.secondary,
+        color: theme.palette.maskColor.second,
         fontWeight: 400,
         fontSize: 16,
     },
     cardValue: {
-        color: theme.palette.text.primary,
+        color: theme.palette.maskColor.main,
         fontSize: 16,
         fontWeight: 700,
     },
     tooltip: {
         fontSize: 12,
     },
+    linkIcon: {
+        fill: theme.palette.maskColor.main,
+        width: 16,
+        height: 16,
+    },
 }))
 
 const DEFAULT_PLACEHOLDER = '--'
@@ -88,7 +94,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, tokenMarketCap }: T
                             href={explorerResolver.fungibleTokenLink(tokenSecurity.chainId, tokenSecurity.contract)}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <ExternalLink color={theme.palette.text.strong} size={14} />
+                            <LinkOutIcon className={classes.linkIcon} />
                         </Link>
                     </Stack>
                 </Stack>
@@ -109,7 +115,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, tokenMarketCap }: T
                                 )}
                                 target="_blank"
                                 rel="noopener noreferrer">
-                                <ExternalLink color={theme.palette.text.strong} size={14} />
+                                <LinkOutIcon className={classes.linkIcon} />
                             </Link>
                         )}
                     </Stack>