diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx
index 02d6abcfa08e..c101d720a8a0 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTBadge.tsx
@@ -8,25 +8,11 @@ import { useUserOwnerAddress } from '../hooks/useUserOwnerAddress'
 import type { AvatarMetaDB } from '../types'
 import { NFTAvatarRing } from './NFTAvatarRing'
 
-interface StyleProps {
-    width: number
-    size: number
-}
-const useStyles = makeStyles<StyleProps>()((theme, props) => ({
+const useStyles = makeStyles()((theme) => ({
     root: {
-        position: 'absolute',
-        left: -1 * (props.width - 1),
-        top: -1 * (props.width - 1),
-        width: props.size - 4,
-        height: props.size - 4,
-
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
-            left: -27,
-            top: -1 * props.width,
-        },
     },
     image: {
         position: 'absolute',
@@ -55,7 +41,7 @@ function formatText(symbol: string, length: number) {
 
 export function NFTBadge(props: NFTBadgeProps) {
     const { avatar, size = 140, width = 15 } = props
-    const classes = useStylesExtends(useStyles({ size: size + width * 2, width }), props)
+    const classes = useStylesExtends(useStyles(), props)
 
     const { value = { amount: '0', symbol: 'ETH', name: '', owner: '' }, loading } = useNFT(
         avatar.address,
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx
index 86d1253d124b..c1fc9cbc297f 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx
@@ -35,15 +35,15 @@ function _(main: () => LiveSelector<HTMLElement, false>, signal: AbortSignal) {
                     <div
                         style={{
                             position: 'absolute',
-                            left: -2,
-                            top: -2,
-                            zIndex: -1,
+                            left: 0,
+                            top: 0,
+                            zIndex: 2,
                         }}>
                         <NFTBadgeTimeline
                             userId={twitterId}
                             avatarId={info.avatarId}
-                            width={info.width}
-                            height={info.height}
+                            width={info.width - 4}
+                            height={info.height - 4}
                         />
                     </div>,
                 )
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
index e304dfd3b3b3..404bd4a2f186 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
@@ -13,20 +13,36 @@ import { PluginNFTAvatarRPC } from '../../../../plugins/Avatar/messages'
 import { NFTBadge } from '../../../../plugins/Avatar/SNSAdaptor/NFTBadge'
 import { NFTAvatar } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatar'
 
+const offset = 10
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
     startWatch(watcher, signal)
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(<NFTAvatarInTwitter />)
 }
 
-const useStyles = makeStyles()(() => ({
+interface StyleProps {
+    width: number
+    size: number
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, props) => ({
     root: {
         position: 'absolute',
         bottom: '-10px !important',
-        left: 0,
         textAlign: 'center',
         color: 'white',
         minWidth: 134,
+        zIndex: 2,
+
+        left: -1 * props.width + offset / 2,
+        top: -1 * props.width + offset / 2,
+        width: props.size,
+        height: props.size,
+
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            left: -27,
+            top: -1 * props.width,
+        },
     },
     update: {
         position: 'absolute',
@@ -47,17 +63,18 @@ const useStyles = makeStyles()(() => ({
 }))
 
 function NFTAvatarInTwitter() {
-    const { classes } = useStyles()
     const identity = useCurrentVisitingIdentity()
     const wallet = useWallet()
     const { value: _avatar } = useNFTAvatar(identity.identifier.userId)
     const [avatar, setAvatar] = useState<AvatarMetaDB | undefined>()
     const ele = searchTwitterAvatarLinkSelector().evaluate()
     let size = 170
+    const width = 15
     if (ele) {
         const style = window.getComputedStyle(ele)
-        size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - 3
+        size = Number(style.width.replace('px', '') ?? 0) - Number(style.borderWidth.replace('px', '') ?? 0) - offset
     }
+    const { classes } = useStyles({ size: size + width * 2, width })
 
     const [NFTEvent, setNFTEvent] = useState<NFTAvatarEvent>()
     const onUpdate = (data: NFTAvatarEvent) => {
@@ -121,6 +138,9 @@ function NFTAvatarInTwitter() {
 
     if (!avatar) return null
 
+    const avatarParent = searchTwitterAvatarSelector().closest(2).evaluate() as HTMLElement
+    if (avatarParent) avatarParent.style.clipPath = 'unset'
+
     return (
         <>
             {getAvatarId(identity.avatar ?? '') === avatar.avatarId && avatar.avatarId ? (
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx
index f1861c4a62a5..6e9919aad1a9 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/TweetNFTAvatar.tsx
@@ -19,8 +19,8 @@ function _(main: () => LiveSelector<HTMLElement, false>, signal: AbortSignal) {
                 proxy.realCurrent = info.element.firstChild as HTMLElement
                 const root = createReactRootShadowed(proxy.afterShadow, { signal })
                 root.render(
-                    <div style={{ position: 'absolute', top: -2, left: -2, zIndex: -1 }}>
-                        <NFTBadgeTweet width={info.width} height={info.height} avatarId={info.avatarId} />
+                    <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 2 }}>
+                        <NFTBadgeTweet width={info.width - 4} height={info.height - 4} avatarId={info.avatarId} />
                     </div>,
                 )
                 remover = root.destory
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts
index 5102c2d64783..6af624cb0944 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/utils/avatar.ts
@@ -8,6 +8,8 @@ export function getInjectNodeInfo(ele: HTMLElement) {
     if (!nftDom) return
 
     nftDom.style.overflow = 'unset'
+    const avatarParent = nftDom.parentElement
+    if (avatarParent) avatarParent.style.clipPath = 'unset'
 
     const width = Number(window.getComputedStyle(nftDom).width.replace('px', '') ?? 0)
     const height = Number(window.getComputedStyle(nftDom).height.replace('px', '') ?? 0)