diff --git a/cspell.json b/cspell.json
index 8605d5cdb1b6..ca11f73265df 100644
--- a/cspell.json
+++ b/cspell.json
@@ -225,7 +225,8 @@
         "majeure",
         "Swither",
         "nftscan",
-        "apikey"
+        "apikey",
+        "fbclid"
     ],
     "ignoreWords": [
         "cryptopunks",
diff --git a/packages/maskbook/src/UIRoot.tsx b/packages/maskbook/src/UIRoot.tsx
index ad6a2783971d..6d267d06c317 100644
--- a/packages/maskbook/src/UIRoot.tsx
+++ b/packages/maskbook/src/UIRoot.tsx
@@ -8,6 +8,8 @@ import { useClassicMaskTheme } from './utils/theme'
 import { Web3Context } from './web3/context'
 import { buildInfoMarkdown } from './extension/background-script/Jobs/PrintBuildFlags'
 import { Suspense } from 'react'
+import { FACEBOOK_ID } from './social-network-adaptor/facebook.com/base'
+import { activatedSocialNetworkUI } from './social-network'
 
 export function MaskUIRootWithinShadow(JSX: JSX.Element) {
     return (
@@ -30,6 +32,7 @@ export function MaskUIRoot(JSX: JSX.Element) {
             <ThemeProvider theme={useClassicMaskTheme()}>
                 <CssBaseline />
                 <CustomSnackbarProvider
+                    isFacebook={activatedSocialNetworkUI.networkIdentifier === FACEBOOK_ID}
                     disableWindowBlurListener={false}
                     anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
                     {JSX}
diff --git a/packages/maskbook/src/components/CompositionDialog/useSubmit.ts b/packages/maskbook/src/components/CompositionDialog/useSubmit.ts
index bac7b8ff28ac..9970a4c2d694 100644
--- a/packages/maskbook/src/components/CompositionDialog/useSubmit.ts
+++ b/packages/maskbook/src/components/CompositionDialog/useSubmit.ts
@@ -11,6 +11,7 @@ import { SteganographyTextPayload } from '../InjectedComponents/SteganographyTex
 import type { SubmitComposition } from './CompositionUI'
 import { unreachable } from '@dimensiondev/kit'
 import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
+import { isFacebook } from '../../social-network-adaptor/facebook.com/base'
 
 export function useSubmit(onClose: () => void) {
     const { t } = useI18N()
@@ -33,9 +34,13 @@ export function useSubmit(onClose: () => void) {
                 whoAmI?.identifier ?? currentProfile,
                 target === 'Everyone',
             )
-            const redPacketPreText = isTwitter(activatedSocialNetworkUI)
-                ? t('additional_post_box__encrypted_post_pre_red_packet_twitter', { encrypted })
-                : t('additional_post_box__encrypted_post_pre_red_packet', { encrypted })
+            const redPacketPreText =
+                isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                    ? t('additional_post_box__encrypted_post_pre_red_packet_twitter_official_account', {
+                          encrypted,
+                          account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
+                      })
+                    : t('additional_post_box__encrypted_post_pre_red_packet', { encrypted })
 
             // TODO: move into the plugin system
             const redPacketMetadata = RedPacketMetadataReader(content.meta)
diff --git a/packages/maskbook/src/components/InjectedComponents/CommentBox.tsx b/packages/maskbook/src/components/InjectedComponents/CommentBox.tsx
index f8f53a3781b1..f4f7cf33e815 100644
--- a/packages/maskbook/src/components/InjectedComponents/CommentBox.tsx
+++ b/packages/maskbook/src/components/InjectedComponents/CommentBox.tsx
@@ -1,12 +1,18 @@
 import { makeStyles } from '@masknet/theme'
 import { InputBase } from '@material-ui/core'
 import { useI18N } from '../../utils'
+import { activatedSocialNetworkUI } from '../../social-network'
+import { MINDS_ID } from '../../social-network-adaptor/minds.com/base'
 
-const useStyles = makeStyles()({
+interface StyleProps {
+    snsId: string
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
     root: {
         fontSize: 13,
         background: '#3a3b3c',
-        width: '100%',
+        width: snsId === MINDS_ID ? '96%' : '100%',
         height: 34,
         borderRadius: 20,
         padding: '2px 1em',
@@ -23,14 +29,14 @@ const useStyles = makeStyles()({
             color: '#d0d2d6',
         },
     },
-})
+}))
 
 export interface CommentBoxProps {
     onSubmit: (newVal: string) => void
     inputProps?: Partial<PropsOf<typeof InputBase>>
 }
 export function CommentBox(props: CommentBoxProps) {
-    const { classes } = useStyles()
+    const { classes } = useStyles({ snsId: activatedSocialNetworkUI.networkIdentifier })
     const { t } = useI18N()
     return (
         <InputBase
diff --git a/packages/maskbook/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/maskbook/src/components/InjectedComponents/ToolboxUnstyled.tsx
index c56d562ccc1a..070735db50ef 100644
--- a/packages/maskbook/src/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/maskbook/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -37,6 +37,7 @@ import { PluginTransakMessages } from '../../plugins/Transak/messages'
 import { PluginTraderMessages } from '../../plugins/Trader/messages'
 import { WalletMessages } from '../../plugins/Wallet/messages'
 import { Flags } from '../../utils/flags'
+import { activatedSocialNetworkUI } from '../../social-network'
 import { ClaimAllDialog } from '../../plugins/ITO/SNSAdaptor/ClaimAllDialog'
 import { hasNativeAPI, nativeAPI, useI18N, useMenu } from '../../utils'
 import { safeUnreachable } from '@dimensiondev/kit'
@@ -118,7 +119,7 @@ export function ToolboxHintUnstyled(props: ToolboxHintProps) {
 
     return (
         <>
-            <GuideStep step={1} total={3} tip={t('user_guide_tip_1')}>
+            <GuideStep step={1} total={3} tip={t('user_guide_tip_1', { sns: activatedSocialNetworkUI.name })}>
                 <Container>
                     <ListItemButton onClick={openMenu}>
                         <ListItemIcon>
diff --git a/packages/maskbook/src/components/shared/InjectedDialog.tsx b/packages/maskbook/src/components/shared/InjectedDialog.tsx
index 982d55a49f39..277666c09af7 100644
--- a/packages/maskbook/src/components/shared/InjectedDialog.tsx
+++ b/packages/maskbook/src/components/shared/InjectedDialog.tsx
@@ -18,6 +18,7 @@ import { DialogDismissIconUI } from '../InjectedComponents/DialogDismissIcon'
 import { ErrorBoundary, useStylesExtends, mergeClasses } from '@masknet/shared'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { MINDS_ID } from '../../social-network-adaptor/minds.com/base'
+import { FACEBOOK_ID } from '../../social-network-adaptor/facebook.com/base'
 
 interface StyleProps {
     snsId: string
@@ -37,7 +38,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
         color: theme.palette.text.primary,
     },
     paper: {
-        ...(snsId === MINDS_ID ? { width: 'auto', backgroundImage: 'none' } : {}),
+        ...(snsId === MINDS_ID || snsId === FACEBOOK_ID ? { width: 'auto', backgroundImage: 'none' } : {}),
     },
 }))
 
diff --git a/packages/maskbook/src/locales/en-US.json b/packages/maskbook/src/locales/en-US.json
index d44ad6bf6c3b..2224365ff0fe 100644
--- a/packages/maskbook/src/locales/en-US.json
+++ b/packages/maskbook/src/locales/en-US.json
@@ -12,8 +12,8 @@
     "add_nft_contract_search_hint": "Search NFT Contract Symbol Name or Address",
     "add_asset": "Add Asset",
     "additional_post_box__encrypted_post_pre": "Decrypt this post with #mask_io ! {{encrypted}}",
-    "additional_post_box__encrypted_post_pre_red_packet_twitter": "Claim this Lucky Drop with #mask_io @realMaskNetwork {{encrypted}}",
-    "additional_post_box__encrypted_post_pre_red_packet": "Claim this Lucky Drop with #mask_io {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "Claim this Red Packet with #mask_io @{{account}} {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_red_packet": "Claim this Red Packet with #mask_io {{encrypted}}",
     "additional_post_box__steganography_post_pre": "This image is encrypted with #mask_io. 📪🔑 Install mask.io to decrypt it. {{random}}",
     "auto_paste_failed_dialog_title": "Paste manually",
     "auto_paste_failed_dialog_content": "Please copy the following text and image (if there is any) and publish it",
@@ -30,6 +30,8 @@
     "backup_wallet": "Backup Wallet",
     "backup_wallet_hint": "Keep the <strong>private key</strong> below <strong>carefully</strong> in a safe place. You will need them to restore this wallet.",
     "cancel": "Cancel",
+    "twitter_account": "realMaskNetwork",
+    "facebook_account": "masknetwork",
     "comment_box__placeholder": "Add an encrypted comment…",
     "confirm": "Confirm",
     "copy_text": "Copy text",
@@ -434,12 +436,13 @@
     "plugin_red_packet_data_broken": "The Lucky Drop can’t be sent due to data damage. Please withdraw the assets after {{duration}}.",
     "plugin_red_packet_refunding": "Refunding",
     "plugin_red_packet_select_existing": "Past",
-    "plugin_red_packet_share_message": "I just claimed a Lucky Drop from @{{sender}} on {{network}} network. Follow @realMaskNetwork (mask.io) to claim Lucky Drops.\n#mask_io #RedPacket\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} is sending an NFT Lucky Drop on {{network}} network. Follow @realMaskNetwork (mask.io) to claim NFT Lucky Drops.\n#mask_io #RedPacket\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT Lucky Drop on {{network}} network. \n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message": "I just claimed an NFT Lucky Drop from @{{sender}} on {{network}} network. Follow @realMaskNetwork (mask.io) to claim NFT Lucky Drops.\n#mask_io #RedPacket\n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "I just claimed an NFT Lucky Drop from @{{sender}} on {{network}} network. \n{{payload}}",
-    "plugin_red_packet_nft_tip": "This is an NFT Lucky Drop.",
+    "plugin_red_packet_share_message_official_account": "I just claimed a red packet from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim red packets.\n#mask_io #RedPacket\n{{payload}}",
+    "plugin_red_packet_share_message_not_twitter": "I just claimed a red packet from @{{sender}} on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} is sending an NFT red packet on {{network}} network. Follow @{{account}} (mask.io) to claim NFT red packets.\n#mask_io #RedPacket\n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT red packet on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message": "I just claimed an NFT red packet from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim NFT red packets.\n#mask_io #RedPacket\n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message_not_twitter": "I just claimed an NFT red packet from @{{sender}} on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_nft_tip": "This is an NFT red packet.",
     "plugin_red_packet_attached_message": "Attached Message",
     "plugin_red_packet_from": "From: @{{name}}",
     "plugin_red_packet_description_claimed": "You got {{amount}} {{symbol}}",
@@ -648,8 +651,10 @@
     "plugin_ito_swapped_status": "{{remain}} / {{total}} {{token}} Swapped",
     "plugin_ito_congratulations": "Congratulations!",
     "plugin_ito_out_of_stock_hit": "Better luck next time",
-    "plugin_ito_claim_success_share": "I just attended @{{user}}'s #ITO with @realMaskNetwork to swap ${{symbol}}. Install mask.io and start your own Initial Twitter Offering! \n {{link}}",
-    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! Follow @realMaskNetwork (mask.io) to find more events! \n {{link}}",
+    "plugin_ito_claim_success_share": "I just attended @{{user}}'s #ITO with @{{account}} to swap ${{symbol}}. Install mask.io and start your own Initial Twitter Offering! \n {{link}}",
+    "plugin_ito_claim_success_share_no_official_account": "I just attended @{{user}}'s #ITO to swap ${{symbol}}. Install mask.io and start your own Initial Twitter Offering! \n {{link}}",
+    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! Follow @{{account}} (mask.io) to find more events! \n {{link}}",
+    "plugin_ito_claim_foreshow_share_no_official_account": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! \n {{link}}",
     "plugin_ito_password": "Password: {{password}}",
     "plugin_ito_status_no_start": "Not started",
     "plugin_ito_status_ongoing": "Ongoing",
@@ -793,7 +798,8 @@
     "plugin_pooltogether_apr": "Earn {{apr}}% APR in {{token}}",
     "plugin_pooltogether_view_pool": "View pool",
     "plugin_pooltogether_prize": "{{period}} Prize",
-    "plugin_pooltogether_share": "I just deposit {{amount}} {{cashTag}}{{symbol}} into the {{pool}}, can I win the lottery this week?\nFollow @PoolTogether_ and @realMaskNetwork (mask.io) to deposit in PoolTogether's pools.\n#pooltogether #mask_io",
+    "plugin_pooltogether_share": "I just deposit {{amount}} {{cashTag}}{{symbol}} into the {{pool}}, can I win the lottery this week?\nFollow @PoolTogether_ and @{{account}} (mask.io) to deposit in PoolTogether's pools.\n#pooltogether #mask_io",
+    "plugin_pooltogether_share_no_official_account": "I just deposit {{amount}} {{cashTag}}{{symbol}} into the {{pool}}, can I win the lottery this week?",
     "plugin_pooltogether_buy": "GET {{symbol}}",
     "plugin_pooltogether_enter_an_amount": "Enter an amount",
     "plugin_pooltogether_insufficient_balance": "Insufficient {{symbol}} balance",
diff --git a/packages/maskbook/src/locales/ja-JP.json b/packages/maskbook/src/locales/ja-JP.json
index 02f2255e613d..df3393a6e8ad 100644
--- a/packages/maskbook/src/locales/ja-JP.json
+++ b/packages/maskbook/src/locales/ja-JP.json
@@ -487,8 +487,8 @@
     "plugin_ito_swapped_status": "{{remain}} / {{total}} {{token}} をスワップしました",
     "plugin_ito_congratulations": "おめでとうございます！",
     "plugin_ito_out_of_stock_hit": "次の幸運を祈っています",
-    "plugin_ito_claim_success_share": ".@realMaskNetwork を使って ${{symbol}} をスワップし、 @{{user}} の #ITO に参加しました。mask.io をインストールして Initial Twitter Offering を始めましょう！ \n {{link}}",
-    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) は新しい #ITO をローンチしました。参加してみましょう！ @realMaskNetwork (mask.io) をフォローしてさらにイベントを見つけましょう。\n {{link}}",
+    "plugin_ito_claim_success_share": ".@{{account}} を使って ${{symbol}} をスワップし、 @{{user}} の #ITO に参加しました。mask.io をインストールして Initial Twitter Offering を始めましょう！ \n {{link}}",
+    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) は新しい #ITO をローンチしました。参加してみましょう！ @{{account}} (mask.io) をフォローしてさらにイベントを見つけましょう。\n {{link}}",
     "plugin_ito_password": "パスワード: {{password}}",
     "plugin_ito_status_no_start": "まだ開催されていません",
     "plugin_ito_status_ongoing": "開催中",
diff --git a/packages/maskbook/src/locales/ko-KR.json b/packages/maskbook/src/locales/ko-KR.json
index 4cede3881b37..126ecf0776e6 100644
--- a/packages/maskbook/src/locales/ko-KR.json
+++ b/packages/maskbook/src/locales/ko-KR.json
@@ -12,7 +12,7 @@
     "add_nft_contract_search_hint": "NFT 컨트렉트 이름이나 주소를 검색하기",
     "add_asset": "자산 추가",
     "additional_post_box__encrypted_post_pre": "#mask_io로 이 게시물을 해독하기. {{encrypted}}",
-    "additional_post_box__encrypted_post_pre_red_packet_twitter": "레드 패킷을 수령하고 #mask_io @realMaskNetwork {{encrypted}} 하세요.",
+    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "레드 패킷을 수령하고 #mask_io @{{account}} {{encrypted}} 하세요.",
     "additional_post_box__encrypted_post_pre_red_packet": "#mask_io {{encrypted}} 덧붙이고 레드 패킷을 수령하세요.",
     "additional_post_box__steganography_post_pre": "암호화된 이미지입니다. 📪🔑 mask.io 설치하고 해독하세요. {{random}}",
     "auto_paste_failed_dialog_title": "수동으로 붙여넣기",
@@ -423,7 +423,7 @@
     "plugin_red_packet_data_broken": "데이터 손상으로 인해 레드 패킷을 보낼 수 없습니다. {{duration}} 후 자산을 인출할 수 있습니다.",
     "plugin_red_packet_refunding": "환급 중",
     "plugin_red_packet_select_existing": "기존 빨간 백 선택",
-    "plugin_red_packet_share_message": "{{network}} 네트워크에서 @{{sender}}의 레트 패킷을 받았어요. @realMaskNetwork (mask.io) 팔로우하고 레드 패킷을 받으세요.\n#mask_io #RedPacket\n{{payload}}",
+    "plugin_red_packet_share_message_official_account": "{{network}} 네트워크에서 @{{sender}}의 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 레드 패킷을 받으세요.\n#mask_io #RedPacket\n{{payload}}",
     "plugin_red_packet_nft_share_foreshow_message": "@{{network}} 네트워크에서 @{{sender}} 레트 패킷을 보내고 있습니다. @realMaskNetwork (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #RedPacket\n{{payload}}",
     "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{network}} 네트워크에서 @{{sender}} NFT 레트 패킷을 보내고 있습니다. \n{{payload}}",
     "plugin_red_packet_nft_share_claimed_message": "{{network}} 네트워크에서 @{{sender}}의 NFT 레트 패킷을 받았어요. @realMaskNetwork (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #RedPacket\n{{payload}}",
@@ -633,8 +633,8 @@
     "plugin_ito_swapped_status": "{{remain}} / {{total}} {{token}} 스왑됨",
     "plugin_ito_congratulations": "축하합니다!",
     "plugin_ito_out_of_stock_hit": "다음에 운이 더 좋으시길 바랍니다",
-    "plugin_ito_claim_success_share": "제가 @realMaskNetwork 로 @{{user}}'s #ITO에 참여하여 ${{symbol}} 스왑을 했습니다. Mask.io를 설치하고 자기만의 ITO를 시작하세요! \n {{link}}",
-    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) 새로운 #ITO를 진행하고 있습니다. 어서 참가하세요! @realMaskNetwork (mask.io) 팔로우하여 더 많은 이벤트를 참여하세요! \n {{link}}",
+    "plugin_ito_claim_success_share": "제가 @{{account}} 로 @{{user}}'s #ITO에 참여하여 ${{symbol}} 스왑을 했습니다. Mask.io를 설치하고 자기만의 ITO를 시작하세요! \n {{link}}",
+    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) 새로운 #ITO를 진행하고 있습니다. 어서 참가하세요! @{{account}} (mask.io) 팔로우하여 더 많은 이벤트를 참여하세요! \n {{link}}",
     "plugin_ito_password": "비밀번호: {{password}}",
     "plugin_ito_status_no_start": "아직 시작하지 않음",
     "plugin_ito_status_ongoing": "진행 중",
diff --git a/packages/maskbook/src/locales/qya-AA.json b/packages/maskbook/src/locales/qya-AA.json
index 9667ea85544a..2d335d4570fa 100644
--- a/packages/maskbook/src/locales/qya-AA.json
+++ b/packages/maskbook/src/locales/qya-AA.json
@@ -12,7 +12,7 @@
     "add_nft_contract_search_hint": "crwdns8123:0crwdne8123:0",
     "add_asset": "crwdns3989:0crwdne3989:0",
     "additional_post_box__encrypted_post_pre": "crwdns3991:0{{encrypted}}crwdne3991:0",
-    "additional_post_box__encrypted_post_pre_red_packet_twitter": "crwdns3993:0{{encrypted}}crwdne3993:0",
+    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "crwdns3993:0{{encrypted}}crwdne3993:0",
     "additional_post_box__encrypted_post_pre_red_packet": "crwdns3995:0{{encrypted}}crwdne3995:0",
     "additional_post_box__steganography_post_pre": "crwdns3997:0{{random}}crwdne3997:0",
     "auto_paste_failed_dialog_title": "crwdns3999:0crwdne3999:0",
@@ -434,7 +434,7 @@
     "plugin_red_packet_data_broken": "crwdns7999:0{{duration}}crwdne7999:0",
     "plugin_red_packet_refunding": "crwdns4733:0crwdne4733:0",
     "plugin_red_packet_select_existing": "crwdns4735:0crwdne4735:0",
-    "plugin_red_packet_share_message": "crwdns4737:0{{sender}}crwdnd4737:0{{network}}crwdnd4737:0{{payload}}crwdne4737:0",
+    "plugin_red_packet_share_message_official_account": "crwdns4737:0{{sender}}crwdnd4737:0{{network}}crwdnd4737:0{{payload}}crwdne4737:0",
     "plugin_red_packet_nft_share_foreshow_message": "crwdns8151:0{{sender}}crwdnd8151:0{{network}}crwdnd8151:0{{payload}}crwdne8151:0",
     "plugin_red_packet_nft_share_foreshow_message_not_twitter": "crwdns9011:0{{sender}}crwdnd9011:0{{network}}crwdnd9011:0{{payload}}crwdne9011:0",
     "plugin_red_packet_nft_share_claimed_message": "crwdns8153:0{{sender}}crwdnd8153:0{{network}}crwdnd8153:0{{payload}}crwdne8153:0",
diff --git a/packages/maskbook/src/locales/zh-TW.json b/packages/maskbook/src/locales/zh-TW.json
index 0b937fd460c4..2540eee4747c 100644
--- a/packages/maskbook/src/locales/zh-TW.json
+++ b/packages/maskbook/src/locales/zh-TW.json
@@ -10,7 +10,7 @@
     "add_token_search_hint": "搜尋 ERC20 代幣",
     "add_asset": "新增資產",
     "additional_post_box__encrypted_post_pre": "使用 #mask_io 解密這篇貼文！ {{encrypted}}",
-    "additional_post_box__encrypted_post_pre_red_packet_twitter": "用 #mask_io @realMaskNetwork 開啟紅包 {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "用 #mask_io @{{account}} 開啟紅包 {{encrypted}}",
     "additional_post_box__encrypted_post_pre_red_packet": "用 #mask_io 開啟紅包 {{encrypted}}",
     "additional_post_box__steganography_post_pre": "這張圖片是使用 #mask_io 加密。 📪🔑 安裝 mask.io 解密。 {{random}}",
     "auto_paste_failed_dialog_title": "手動貼上",
@@ -496,8 +496,8 @@
     "plugin_ito_swapped_status": "{{remain}} / {{total}} {{token}} 已交換",
     "plugin_ito_congratulations": "恭喜！",
     "plugin_ito_out_of_stock_hit": "祝你下次好運",
-    "plugin_ito_claim_success_share": "我剛剛參與了 @{{user}} 在 @realMaskNetwork 發起的 #ITO 以換取 ${{symbol}}。 安裝 mask.io 開始你自己的 Initial Twitter Offering！ \n {{link}}",
-    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) 正在舉辦一個新的 #ITO。 過來參加吧！ 追隨 @realMaskNetwork (mask.io) 以發現更多活動！ \n {{link}}",
+    "plugin_ito_claim_success_share": "我剛剛參與了 @{{user}} 在 @{{account}} 發起的 #ITO 以換取 ${{symbol}}。 安裝 mask.io 開始你自己的 Initial Twitter Offering！ \n {{link}}",
+    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) 正在舉辦一個新的 #ITO。 過來參加吧！ 追隨 @{{account}} (mask.io) 以發現更多活動！ \n {{link}}",
     "plugin_ito_password": "密碼：{{password}}",
     "plugin_ito_status_no_start": "尚未開始",
     "plugin_ito_status_ongoing": "進行中",
diff --git a/packages/maskbook/src/plugins/Airdrop/SNSAdaptor/AirdropClaimCard.tsx b/packages/maskbook/src/plugins/Airdrop/SNSAdaptor/AirdropClaimCard.tsx
index 64a28bd03e9e..74dbb112b094 100644
--- a/packages/maskbook/src/plugins/Airdrop/SNSAdaptor/AirdropClaimCard.tsx
+++ b/packages/maskbook/src/plugins/Airdrop/SNSAdaptor/AirdropClaimCard.tsx
@@ -22,7 +22,9 @@ import { useClaimCallback } from '../hooks/useClaimCallback'
 import { CheckStateType, useCheckCallback } from '../hooks/useCheckCallback'
 import { ClaimDialog } from './ClaimDialog'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { useI18N } from '../../../utils/i18n-next-ui'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -79,7 +81,7 @@ export function AirdropClaimCard(props: AirdropClaimCardProps) {
     const { token, onUpdateAmount, onUpdateBalance } = props
     const [showTooltip, setShowTooltip] = useState(false)
     const classes = useStylesExtends(useStyles(), props)
-
+    const { t } = useI18N()
     const account = useAccount()
     const chainId = useChainId()
     const { value: packet, error: packetError, loading: packetLoading, retry: packetRetry } = useAirdropPacket(account)
@@ -120,7 +122,13 @@ export function AirdropClaimCard(props: AirdropClaimCardProps) {
                         .multipliedBy(checkState.type === CheckStateType.YEP ? checkState.ratio : 1)
                         .dp(0)
                         .toFixed() + '.00'
-                }. Follow @realMaskNetwork (mask.io) to claim airdrop.`,
+                }.${
+                    isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                        ? `Follow @${
+                              isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                          } (mask.io) to claim airdrop.`
+                        : ''
+                }`,
                 postLink,
             ].join('\n'),
         )
diff --git a/packages/maskbook/src/plugins/Collectible/SNSAdaptor/index.tsx b/packages/maskbook/src/plugins/Collectible/SNSAdaptor/index.tsx
index f3d46a47894a..4d921ecbba8b 100644
--- a/packages/maskbook/src/plugins/Collectible/SNSAdaptor/index.tsx
+++ b/packages/maskbook/src/plugins/Collectible/SNSAdaptor/index.tsx
@@ -12,9 +12,9 @@ const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
     init(signal) {},
     PostInspector: function Component() {
-        const link = uniq(
-            usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.postMentionedLinks()),
-        ).find(checkUrl)
+        const links = usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.postMentionedLinks())
+
+        const link = uniq(links).find(checkUrl)
         const asset = getAssetInfoFromURL(link)
 
         return asset ? renderPostInspector(asset) : null
diff --git a/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx b/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
index 0b97e2880997..c738920cb2f0 100644
--- a/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
+++ b/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
@@ -20,6 +20,7 @@ import { InjectedDialog } from '../../../components/shared/InjectedDialog'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { useI18N } from '../../../utils'
 import { useRemoteControlledDialog, useStylesExtends } from '@masknet/shared'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
@@ -126,7 +127,13 @@ export function DonateDialog(props: DonateDialogProps) {
                 ? [
                       `I just donated ${title} with ${formatBalance(amount, token.decimals)} ${cashTag}${
                           token.symbol
-                      }. Follow @realMaskNetwork (mask.io) to donate Gitcoin grants.`,
+                      }. ${
+                          isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                              ? `Follow @${
+                                    isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                                } (mask.io) to donate Gitcoin grants.`
+                              : ''
+                      }`,
                       '#mask_io',
                   ].join('\n')
                 : '',
diff --git a/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/index.tsx b/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/index.tsx
index a425ea473ce9..7960ee31c035 100644
--- a/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/index.tsx
+++ b/packages/maskbook/src/plugins/Gitcoin/SNSAdaptor/index.tsx
@@ -29,10 +29,9 @@ const sns: Plugin.SNSAdaptor.Definition = {
         return <DonateDialog />
     },
     PostInspector() {
-        const link = usePostInfoDetails
-            .postMetadataMentionedLinks()
-            .concat(usePostInfoDetails.postMentionedLinks())
-            .find(isGitcoin)
+        const links = usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.postMentionedLinks())
+
+        const link = links.find(isGitcoin)
         if (!link) return null
         return <Renderer url={link} />
     },
diff --git a/packages/maskbook/src/plugins/GoodGhosting/SNSAdaptor/index.tsx b/packages/maskbook/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
index 82bb5ba5047c..7898cf6ec666 100644
--- a/packages/maskbook/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
+++ b/packages/maskbook/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
@@ -23,10 +23,9 @@ const sns: Plugin.SNSAdaptor.Definition = {
         return <Renderer url={link} />
     },
     PostInspector: function Component() {
-        const link = usePostInfoDetails
-            .postMetadataMentionedLinks()
-            .concat(usePostInfoDetails.postMentionedLinks())
-            .find(isGoodGhosting)
+        const links = usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.postMentionedLinks())
+
+        const link = links.find(isGoodGhosting)
         if (!link) return null
         return <Renderer url={link} />
     },
diff --git a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx
index 430d23c6afb3..91125439a6c1 100644
--- a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx
+++ b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx
@@ -85,8 +85,12 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.secondary,
     },
     button: {
+        color: '#fff',
         padding: theme.spacing(2),
     },
+    buttonText: {
+        color: '#fff',
+    },
     link: {
         padding: 0,
         marginLeft: theme.spacing(0.5),
@@ -299,7 +303,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
                     </ActionButton>
                 </Grid>
                 <Grid item xs={6} className={classes.button}>
-                    <ActionButton fullWidth variant="contained" onClick={onDone}>
+                    <ActionButton className={classes.buttonText} fullWidth variant="contained" onClick={onDone}>
                         {t('plugin_ito_send_text', {
                             total: formatAmountPrecision(poolSettings?.total, poolSettings?.token?.decimals),
                             symbol: poolSettings?.token?.symbol,
diff --git a/packages/maskbook/src/plugins/ITO/SNSAdaptor/CreateForm.tsx b/packages/maskbook/src/plugins/ITO/SNSAdaptor/CreateForm.tsx
index 026283afa50b..77807e7ebbde 100644
--- a/packages/maskbook/src/plugins/ITO/SNSAdaptor/CreateForm.tsx
+++ b/packages/maskbook/src/plugins/ITO/SNSAdaptor/CreateForm.tsx
@@ -50,6 +50,10 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(1),
         flex: 1,
     },
+    inputLabel: {
+        left: 8,
+        top: 8,
+    },
     label: {
         paddingLeft: theme.spacing(2),
     },
@@ -58,6 +62,7 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.secondary,
     },
     button: {
+        color: '#fff',
         marginTop: theme.spacing(1.5),
     },
     date: {
@@ -338,6 +343,9 @@ export function CreateForm(props: CreateFormProps) {
                     onChange={(e) => setMessage(sliceTextByUILength(e.target.value, 90))}
                     InputLabelProps={{
                         shrink: true,
+                        classes: {
+                            root: classes.inputLabel,
+                        },
                     }}
                 />
             </Box>
@@ -349,6 +357,9 @@ export function CreateForm(props: CreateFormProps) {
                     value={totalOfPerWallet}
                     InputLabelProps={{
                         shrink: true,
+                        classes: {
+                            root: classes.inputLabel,
+                        },
                     }}
                     InputProps={{
                         endAdornment: tokenAndAmount?.token?.symbol,
@@ -376,6 +387,9 @@ export function CreateForm(props: CreateFormProps) {
                         label={t('plugin_ito_region_label')}
                         InputLabelProps={{
                             shrink: true,
+                            classes: {
+                                root: classes.inputLabel,
+                            },
                         }}
                         InputProps={{
                             inputComponent: RegionSelect,
@@ -397,6 +411,9 @@ export function CreateForm(props: CreateFormProps) {
                         value={qualificationAddress}
                         InputLabelProps={{
                             shrink: true,
+                            classes: {
+                                root: classes.inputLabel,
+                            },
                         }}
                         InputProps={{
                             endAdornment: qualification?.isQualification ? (
diff --git a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO.tsx
index 1a50b9e96756..95beb15deba7 100644
--- a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -44,6 +44,9 @@ import { StyledLinearProgress } from './StyledLinearProgress'
 import { SwapGuide, SwapStatus } from './SwapGuide'
 import urlcat from 'urlcat'
 import { startCase } from 'lodash-es'
+import { FACEBOOK_ID } from '../../../social-network-adaptor/facebook.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
+import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 
 export interface IconProps {
     size?: number
@@ -52,6 +55,7 @@ export interface IconProps {
 interface StyleProps {
     titleLength?: number
     tokenNumber?: number
+    snsId?: string
 }
 const useStyles = makeStyles<StyleProps>()((theme, props) => ({
     root: {
@@ -75,8 +79,8 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'end',
-        width: '100%',
-        maxWidth: 470,
+        width: props.snsId === FACEBOOK_ID ? '98%' : '100%',
+        maxWidth: props.snsId === FACEBOOK_ID ? 'auto' : 470,
     },
     title: {
         fontSize: props.titleLength! > 31 ? '1.3rem' : '1.6rem',
@@ -119,7 +123,7 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
     footer: {
         position: 'absolute',
         width: '90%',
-        maxWidth: 470,
+        maxWidth: props.snsId === FACEBOOK_ID ? 'auto' : 470,
         bottom: theme.spacing(2),
         display: 'flex',
         justifyContent: 'space-between',
@@ -235,7 +239,11 @@ export function ITO(props: ITO_Props) {
             : message.split(MSG_DELIMITER)[0]
     const title = message.split(MSG_DELIMITER)[1] ?? message
     const regions = message.split(MSG_DELIMITER)[2] ?? defaultRegions
-    const { classes } = useStyles({ titleLength: getTextUILength(title), tokenNumber: exchange_tokens.length })
+    const { classes } = useStyles({
+        titleLength: getTextUILength(title),
+        tokenNumber: exchange_tokens.length,
+        snsId: activatedSocialNetworkUI.networkIdentifier,
+    })
     //#region token detailed
     const {
         value: availability,
@@ -285,11 +293,17 @@ export function ITO(props: ITO_Props) {
 
     const shareSuccessLink = activatedSocialNetworkUI.utils
         .getShareLinkURL?.(
-            t('plugin_ito_claim_success_share', {
-                user: sellerName,
-                link: postLink,
-                symbol: token.symbol,
-            }),
+            t(
+                isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                    ? 'plugin_ito_claim_success_share'
+                    : 'plugin_ito_claim_success_share_no_official_account',
+                {
+                    user: sellerName,
+                    link: postLink,
+                    symbol: token.symbol,
+                    account: isFacebook(activatedSocialNetworkUI) ? t('facebook_account') : t('twitter_account'),
+                },
+            ),
         )
         .toString()
     const canWithdraw = useMemo(
@@ -350,11 +364,17 @@ export function ITO(props: ITO_Props) {
 
     const shareLink = activatedSocialNetworkUI.utils
         .getShareLinkURL?.(
-            t('plugin_ito_claim_foreshow_share', {
-                link: postLink,
-                name: token.name,
-                symbol: token.symbol ?? 'token',
-            }),
+            t(
+                isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                    ? 'plugin_ito_claim_foreshow_share'
+                    : 'plugin_ito_claim_foreshow_share_no_official_account',
+                {
+                    link: postLink,
+                    name: token.name,
+                    symbol: token.symbol ?? 'token',
+                    account: isFacebook(activatedSocialNetworkUI) ? t('facebook_account') : t('twitter_account'),
+                },
+            ),
         )
         .toString()
     const onShare = useCallback(async () => {
diff --git a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
index afaf0eaff579..4515f84b31bb 100644
--- a/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
+++ b/packages/maskbook/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
@@ -6,10 +6,12 @@ import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { useRemoteControlledDialog, useStylesExtends } from '@masknet/shared'
 import { WalletMessages } from '../../Wallet/messages'
 import { useMaskClaimCallback } from './hooks/useMaskClaimCallback'
 import { useMaskITO_Packet } from './hooks/useMaskITO_Packet'
+import { useI18N } from '../../../utils/i18n-next-ui'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -55,7 +57,7 @@ export interface ITO_CardProps extends withClasses<never> {
 
 export function ITO_Card(props: ITO_CardProps) {
     const { token, onUpdateAmount, onUpdateBalance } = props
-
+    const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
     const { value: packet, loading: packetLoading, error: packetError, retry: packetRetry } = useMaskITO_Packet()
 
@@ -72,11 +74,13 @@ export function ITO_Card(props: ITO_CardProps) {
     const shareLink = activatedSocialNetworkUI.utils
         .getShareLinkURL?.(
             [
-                `I just claimed ${cashTag}${token?.symbol} with ${formatBalance(
-                    packet?.claimable,
-                    18,
-                    6,
-                )}. Follow @realMaskNetwork (mask.io) to claim airdrop.`,
+                `I just claimed ${cashTag}${token?.symbol} with ${formatBalance(packet?.claimable, 18, 6)}.${
+                    isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                        ? `Follow @${
+                              isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                          } (mask.io) to claim airdrop.`
+                        : ''
+                }`,
                 '#mask_io',
                 postLink,
             ].join('\n'),
diff --git a/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx b/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx
index 80269de26b16..846d2e07718e 100644
--- a/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx
+++ b/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx
@@ -23,10 +23,9 @@ const sns: Plugin.SNSAdaptor.Definition = {
         return <Renderer url={link} />
     },
     PostInspector: function Component() {
-        const link = usePostInfoDetails
-            .postMetadataMentionedLinks()
-            .concat(usePostInfoDetails.postMentionedLinks())
-            .find(isPoolTogetherUrl)
+        const links = usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.postMentionedLinks())
+
+        const link = links.find(isPoolTogetherUrl)
 
         if (!link) return null
         return <Renderer url={link} />
diff --git a/packages/maskbook/src/plugins/PoolTogether/UI/DepositDialog.tsx b/packages/maskbook/src/plugins/PoolTogether/UI/DepositDialog.tsx
index 40dc87719241..ecbb64813b05 100644
--- a/packages/maskbook/src/plugins/PoolTogether/UI/DepositDialog.tsx
+++ b/packages/maskbook/src/plugins/PoolTogether/UI/DepositDialog.tsx
@@ -30,6 +30,7 @@ import { useDepositCallback } from '../hooks/useDepositCallback'
 import { PluginPoolTogetherMessages } from '../messages'
 import type { Pool } from '../types'
 import { calculateOdds, getPrizePeriod } from '../utils'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -192,12 +193,18 @@ export function DepositDialog() {
     const shareLink = activatedSocialNetworkUI.utils
         .getShareLinkURL?.(
             token
-                ? t('plugin_pooltogether_share', {
-                      amount: rawAmount,
-                      cashTag: cashTag,
-                      symbol: token.symbol,
-                      pool: pool?.name ?? `${pool?.tokens.underlyingToken.symbol} Pool`,
-                  })
+                ? t(
+                      isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                          ? 'plugin_pooltogether_share'
+                          : 'plugin_pooltogether_share_no_official_account',
+                      {
+                          amount: rawAmount,
+                          cashTag: cashTag,
+                          symbol: token.symbol,
+                          pool: pool?.name ?? `${pool?.tokens.underlyingToken.symbol} Pool`,
+                          account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
+                      },
+                  )
                 : '',
         )
         .toString()
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
index 38458a2d9c2f..d5429c66e0bc 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
@@ -15,6 +15,8 @@ import classNames from 'classnames'
 import { useCallback, useEffect, useMemo } from 'react'
 import { usePostLink } from '../../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../../social-network'
+import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../../social-network-adaptor/facebook.com/base'
 import { useI18N } from '../../../../utils'
 import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
 import { WalletMessages } from '../../../Wallet/messages'
@@ -56,11 +58,19 @@ export function RedPacket(props: RedPacketProps) {
     const postLink = usePostLink()
     const shareLink = activatedSocialNetworkUI.utils
         .getShareLinkURL?.(
-            t('plugin_red_packet_share_message', {
-                sender: payload.sender.name,
-                payload: postLink,
-                network: resolveNetworkName(networkType),
-            }).trim(),
+            canClaim
+                ? t(
+                      isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                          ? 'plugin_red_packet_share_message_official_account'
+                          : 'plugin_red_packet_share_message_not_twitter',
+                      {
+                          sender: payload.sender.name,
+                          payload: postLink,
+                          network: resolveNetworkName(networkType),
+                          account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
+                      },
+                  ).trim()
+                : '',
         )
         .toString()
 
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 2d918daa1ee1..3633d2e34057 100644
--- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -39,6 +39,7 @@ import classNames from 'classnames'
 import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -349,23 +350,25 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
         .getShareLinkURL?.(
             availability?.isClaimed
                 ? t(
-                      isTwitter(activatedSocialNetworkUI)
+                      isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
                           ? 'plugin_red_packet_nft_share_claimed_message'
                           : 'plugin_red_packet_nft_share_claimed_message_not_twitter',
                       {
                           sender: payload.senderName,
                           payload: postLink,
                           network: resolveNetworkName(networkType),
+                          account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
                       },
                   ).trim()
                 : t(
-                      isTwitter(activatedSocialNetworkUI)
+                      isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
                           ? 'plugin_red_packet_nft_share_foreshow_message'
                           : 'plugin_red_packet_nft_share_foreshow_message_not_twitter',
                       {
                           sender: payload.senderName,
                           payload: postLink,
                           network: resolveNetworkName(networkType),
+                          account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
                       },
                   ).trim(),
         )
diff --git a/packages/maskbook/src/plugins/Snapshot/SNSAdaptor/index.tsx b/packages/maskbook/src/plugins/Snapshot/SNSAdaptor/index.tsx
index 0a150b3a23c2..8c02413c5fbc 100644
--- a/packages/maskbook/src/plugins/Snapshot/SNSAdaptor/index.tsx
+++ b/packages/maskbook/src/plugins/Snapshot/SNSAdaptor/index.tsx
@@ -57,10 +57,9 @@ const sns: Plugin.SNSAdaptor.Definition = {
         return <Renderer url={link} />
     },
     PostInspector: function Component(): JSX.Element | null {
-        const link = usePostInfoDetails
-            .postMetadataMentionedLinks()
-            .concat(usePostInfoDetails.postMentionedLinks())
-            .find(isSnapshotURL)
+        const links = usePostInfoDetails.postMetadataMentionedLinks().concat(usePostInfoDetails.postMentionedLinks())
+
+        const link = links.find(isSnapshotURL)
         if (!link) return null
         return <Renderer url={link} />
     },
diff --git a/packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
index 31b47b2bf36a..3c334f614077 100644
--- a/packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
+++ b/packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
@@ -30,12 +30,14 @@ import { useTradeCallback } from '../../trader/useTradeCallback'
 import { useTradeStateComputed } from '../../trader/useTradeStateComputed'
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../../social-network-adaptor/facebook.com/base'
 import { UST } from '../../constants'
 import { SelectTokenDialogEvent, WalletMessages } from '../../../Wallet/messages'
 import { isNativeTokenWrapper } from '../../helpers'
 import { TradeContext } from '../../trader/useTradeContext'
 import { PluginTraderRPC } from '../../messages'
 import { delay } from '../../../../utils'
+import { useI18N } from '../../../../utils/i18n-next-ui'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -69,6 +71,7 @@ export function Trader(props: TraderProps) {
     const chainId = useChainId()
     const chainIdValid = useChainIdValid()
     const classes = useStylesExtends(useStyles(), props)
+    const { t } = useI18N()
 
     const context = useContext(TradeContext)
     const provider = context?.TYPE ?? TradeProvider.UNISWAP_V2
@@ -230,7 +233,13 @@ export function Trader(props: TraderProps) {
                           inputToken.symbol
                       } for ${formatBalance(tradeComputed.outputAmount, outputToken.decimals, 6)} ${cashTag}${
                           outputToken.symbol
-                      }. Follow @realMaskNetwork (mask.io) to swap cryptocurrencies on Twitter.`,
+                      }.${
+                          isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                              ? `Follow @${
+                                    isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                                } (mask.io) to swap cryptocurrencies on Twitter.`
+                              : ''
+                      }`,
                       '#mask_io',
                   ].join('\n')
                 : '',
diff --git a/packages/maskbook/src/plugins/dHEDGE/UI/InvestDialog.tsx b/packages/maskbook/src/plugins/dHEDGE/UI/InvestDialog.tsx
index ab62479f84ef..2b7695247159 100644
--- a/packages/maskbook/src/plugins/dHEDGE/UI/InvestDialog.tsx
+++ b/packages/maskbook/src/plugins/dHEDGE/UI/InvestDialog.tsx
@@ -17,6 +17,7 @@ import { InjectedDialog } from '../../../components/shared/InjectedDialog'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { useRemoteControlledDialog } from '@masknet/shared'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
@@ -152,7 +153,13 @@ export function InvestDialog() {
                 ? [
                       `I just invested ${formatBalance(amount, token.decimals)} ${cashTag}${token.symbol} in ${
                           pool?.name
-                      }. Follow @realMaskNetwork (mask.io) to invest dHEDGE pools.`,
+                      }. ${
+                          isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+                              ? `Follow @${
+                                    isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                                } (mask.io) to invest dHEDGE pools.`
+                              : ''
+                      }`,
                       '#mask_io',
                   ].join('\n')
                 : '',
diff --git a/packages/maskbook/src/social-network-adaptor/browser-action/index.ts b/packages/maskbook/src/social-network-adaptor/browser-action/index.ts
index f6e7d7aaa92f..ccd35bfc2258 100644
--- a/packages/maskbook/src/social-network-adaptor/browser-action/index.ts
+++ b/packages/maskbook/src/social-network-adaptor/browser-action/index.ts
@@ -4,6 +4,7 @@ import { IdentifierMap } from '../../database/IdentifierMap'
 
 const base: SocialNetwork.Base = {
     networkIdentifier: 'localhost',
+    name: '',
     declarativePermissions: { origins: [] },
     shouldActivate(location) {
         //TODO: replace this line to Env assert
diff --git a/packages/maskbook/src/social-network-adaptor/facebook.com/base.ts b/packages/maskbook/src/social-network-adaptor/facebook.com/base.ts
index 73ac684c935a..6335b60223a9 100644
--- a/packages/maskbook/src/social-network-adaptor/facebook.com/base.ts
+++ b/packages/maskbook/src/social-network-adaptor/facebook.com/base.ts
@@ -1,14 +1,21 @@
 import type { SocialNetwork, SocialNetworkWorker } from '../../social-network/types'
 
 const origins = ['https://www.facebook.com/*', 'https://m.facebook.com/*', 'https://facebook.com/*']
+
+export const FACEBOOK_ID = 'facebook.com'
 export const facebookBase: SocialNetwork.Base = {
-    networkIdentifier: 'facebook.com',
+    networkIdentifier: FACEBOOK_ID,
+    name: 'facebook',
     declarativePermissions: { origins },
     shouldActivate(location) {
-        return location.hostname.endsWith('facebook.com')
+        return location.hostname.endsWith(FACEBOOK_ID)
     },
 }
 
+export function isFacebook(ui: SocialNetwork.Base) {
+    return ui.networkIdentifier === FACEBOOK_ID
+}
+
 export const facebookWorkerBase: SocialNetworkWorker.WorkerBase & SocialNetwork.Base = {
     ...facebookBase,
     gunNetworkHint: '',
diff --git a/packages/maskbook/src/social-network-adaptor/facebook.com/customization/custom.ts b/packages/maskbook/src/social-network-adaptor/facebook.com/customization/custom.ts
new file mode 100644
index 000000000000..5863ad525b3b
--- /dev/null
+++ b/packages/maskbook/src/social-network-adaptor/facebook.com/customization/custom.ts
@@ -0,0 +1,126 @@
+import { ValueRef } from '@dimensiondev/holoflows-kit'
+import { PaletteMode, ThemeProvider, unstable_createMuiStrictModeTheme } from '@material-ui/core'
+import produce, { setAutoFreeze } from 'immer'
+import { createElement, useMemo } from 'react'
+import { Appearance } from '@masknet/theme'
+import { useValueRef } from '@masknet/shared'
+import type { SocialNetworkUI } from '../../../social-network'
+import { useClassicMaskTheme } from '../../../utils/theme'
+import { fromRGB, isDark, shade, toRGB } from '../../../utils/theme-tools'
+
+const primaryColorRef = new ValueRef(toRGB([29, 161, 242]))
+const primaryColorContrastColorRef = new ValueRef(toRGB([255, 255, 255]))
+const backgroundColorRef = new ValueRef(toRGB([255, 255, 255]))
+
+export const PaletteModeProviderFacebook: SocialNetworkUI.Customization.PaletteModeProvider = {
+    current: new ValueRef<PaletteMode>('light'),
+    start: startWatchThemeColor,
+}
+
+export function startWatchThemeColor(signal: AbortSignal) {
+    function updateThemeColor(isDarkMode: boolean) {
+        const contrastColor = 'rgb(255,255,255)'
+        const backgroundColor = isDarkMode ? 'rgb(0,0,0)' : 'rgb(255,255,255)'
+        PaletteModeProviderFacebook.current.value = isDark(fromRGB(backgroundColor)!) ? 'dark' : 'light'
+        primaryColorContrastColorRef.value = contrastColor
+        backgroundColorRef.value = backgroundColor
+    }
+
+    const htmlElement = document.querySelector('html')
+
+    updateThemeColor(Boolean(htmlElement?.className.includes('dark-mode')))
+
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            updateThemeColor(!mutation.oldValue?.includes('dark-mode'))
+        })
+    })
+
+    observer.observe(document.querySelector('html') as Node, {
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ['class'],
+    })
+
+    signal.addEventListener('abort', () => observer.disconnect())
+}
+
+export function useThemeFacebookVariant() {
+    const primaryColor = useValueRef(primaryColorRef)
+    const primaryContrastColor = useValueRef(primaryColorContrastColorRef)
+    const backgroundColor = useValueRef(backgroundColorRef)
+    const MaskbookTheme = useClassicMaskTheme({
+        appearance: isDark(fromRGB(backgroundColor)!) ? Appearance.dark : Appearance.light,
+    })
+    return useMemo(() => {
+        const primaryColorRGB = fromRGB(primaryColor)!
+        const primaryContrastColorRGB = fromRGB(primaryContrastColor)
+        setAutoFreeze(false)
+
+        const FacebookTheme = produce(MaskbookTheme, (theme) => {
+            theme.palette.background.paper = backgroundColor
+            theme.palette.primary = {
+                light: toRGB(shade(primaryColorRGB, 10)),
+                main: toRGB(primaryColorRGB),
+                dark: toRGB(shade(primaryColorRGB, -10)),
+                contrastText: toRGB(primaryContrastColorRGB),
+            }
+            theme.shape.borderRadius = 15
+            theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
+            theme.components = theme.components || {}
+            theme.components.MuiButton = {
+                defaultProps: {
+                    size: 'medium',
+                    disableElevation: true,
+                },
+                styleOverrides: {
+                    root: {
+                        borderRadius: 500,
+                        textTransform: 'initial',
+                        fontWeight: 'bold',
+                        minHeight: 39,
+                        paddingLeft: 15,
+                        paddingRight: 15,
+                        boxShadow: 'none',
+                        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+                            '&': {
+                                height: '28px !important',
+                                minHeight: 'auto !important',
+                                padding: '0 14px !important',
+                            },
+                        },
+                    },
+                    sizeLarge: {
+                        minHeight: 49,
+                        paddingLeft: 30,
+                        paddingRight: 30,
+                    },
+                    sizeSmall: {
+                        minHeight: 30,
+                        paddingLeft: 15,
+                        paddingRight: 15,
+                    },
+                },
+            }
+            theme.components.MuiPaper = {
+                defaultProps: {
+                    elevation: 0,
+                },
+            }
+            theme.components.MuiTab = {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                    },
+                },
+            }
+        })
+        setAutoFreeze(true)
+        return unstable_createMuiStrictModeTheme(FacebookTheme)
+    }, [MaskbookTheme, backgroundColor, primaryColor, primaryContrastColor])
+}
+
+export function FacebookThemeProvider(props: Required<React.PropsWithChildren<{}>>) {
+    if (!process.env.STORYBOOK) throw new Error('This API is only for Storybook!')
+    return createElement(ThemeProvider, { theme: useThemeFacebookVariant(), ...props })
+}
diff --git a/packages/maskbook/src/social-network-adaptor/facebook.com/customization/useTheme.ts b/packages/maskbook/src/social-network-adaptor/facebook.com/customization/useTheme.ts
deleted file mode 100644
index 5317bc685d57..000000000000
--- a/packages/maskbook/src/social-network-adaptor/facebook.com/customization/useTheme.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useState } from 'react'
-import { useInterval } from 'react-use'
-import { Appearance } from '@masknet/theme'
-import { getMaskTheme } from '../../../utils/theme'
-import { isDarkTheme } from '../../../utils/theme-tools'
-export function useThemeFacebook() {
-    const [theme, setTheme] = useState(getTheme())
-    const updateTheme = () => setTheme(getTheme())
-    // TODO: it's buggy.
-    useInterval(updateTheme, 2000)
-    return theme
-}
-
-function getTheme() {
-    return getMaskTheme({ appearance: isDarkTheme() ? Appearance.dark : Appearance.light })
-}
diff --git a/packages/maskbook/src/social-network-adaptor/facebook.com/injection/Composition.tsx b/packages/maskbook/src/social-network-adaptor/facebook.com/injection/Composition.tsx
index 0f34acdcb78d..c58ec20b2c7b 100644
--- a/packages/maskbook/src/social-network-adaptor/facebook.com/injection/Composition.tsx
+++ b/packages/maskbook/src/social-network-adaptor/facebook.com/injection/Composition.tsx
@@ -13,10 +13,13 @@ if (isMobileFacebook) {
     composeBox = new LiveSelector().querySelector('#structured_composer_form')
 } else {
     composeBox = new LiveSelector()
-        .querySelector('[role="dialog"] form')
+        .querySelector(
+            '[role="dialog"] form > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:last-child > div:first-child',
+        )
         .querySelectorAll('[role="button"][tabindex="0"], [role="button"][tabindex="-1"]')
         .map((x) => x.parentElement)
-        .at(-1)
+        .at(-2)
+        .map((x) => x.parentElement)
         .map((x) => x.parentElement)
 }
 
diff --git a/packages/maskbook/src/social-network-adaptor/facebook.com/ui-provider.ts b/packages/maskbook/src/social-network-adaptor/facebook.com/ui-provider.ts
index 7c45b1b98f2e..c393501cebdd 100644
--- a/packages/maskbook/src/social-network-adaptor/facebook.com/ui-provider.ts
+++ b/packages/maskbook/src/social-network-adaptor/facebook.com/ui-provider.ts
@@ -19,12 +19,83 @@ import { pasteImageToCompositionDefault } from '../../social-network/defaults/au
 import { injectPageInspectorDefault } from '../../social-network/defaults/inject/PageInspector'
 import { createTaskStartSetupGuideDefault } from '../../social-network/defaults/inject/StartSetupGuide'
 import { GrayscaleAlgorithm } from '@dimensiondev/stego-js/esm/grayscale'
+import { PaletteModeProviderFacebook, useThemeFacebookVariant } from './customization/custom'
 import { currentSelectedIdentity } from '../../settings/settings'
 import { unreachable } from '@dimensiondev/kit'
+import { makeStyles } from '@masknet/theme'
 import { ProfileIdentifier } from '@masknet/shared'
 import { globalUIState } from '../../social-network'
 import { injectToolboxHintAtFacebook as injectToolboxAtFacebook } from './injection/Toolbar'
 
+const useInjectedDialogClassesOverwriteFacebook = makeStyles()((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'block !important',
+        },
+    },
+    container: {
+        alignItems: 'center',
+    },
+    paper: {
+        width: '600px !important',
+        maxWidth: 'none',
+        boxShadow: 'none',
+        backgroundImage: 'none',
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            '&': {
+                display: 'block !important',
+                borderRadius: '0 !important',
+            },
+        },
+    },
+    dialogTitle: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '3px 16px',
+        borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#2f3336' : '#ccd6dd'}`,
+        '& > h2': {
+            display: 'inline-block',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            maxWidth: 600,
+            margin: '0 auto',
+            padding: '7px 14px 6px 11px !important',
+        },
+    },
+    dialogContent: {
+        padding: 16,
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: 600,
+            margin: '0 auto',
+            padding: '7px 14px 6px !important',
+        },
+    },
+    dialogActions: {
+        padding: '6px 16px',
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            maxWidth: 600,
+            margin: '0 auto',
+            padding: '7px 14px 6px !important',
+        },
+    },
+    dialogBackdropRoot: {
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(110, 118, 125, 0.4)' : 'rgba(0, 0, 0, 0.4)',
+    },
+}))
+
 const facebookUI: SocialNetworkUI.Definition = {
     ...facebookBase,
     ...facebookShared,
@@ -60,7 +131,15 @@ const facebookUI: SocialNetworkUI.Definition = {
         identityProvider: IdentityProviderFacebook,
         postsProvider: PostProviderFacebook,
     },
-    customization: {},
+    customization: {
+        paletteMode: PaletteModeProviderFacebook,
+        componentOverwrite: {
+            InjectedDialog: {
+                classes: useInjectedDialogClassesOverwriteFacebook,
+            },
+        },
+        useTheme: useThemeFacebookVariant,
+    },
     init(signal) {
         const friends = stateCreator.friends()
         const profiles = stateCreator.profiles()
diff --git a/packages/maskbook/src/social-network-adaptor/facebook.com/utils/resolveFacebookLink.ts b/packages/maskbook/src/social-network-adaptor/facebook.com/utils/resolveFacebookLink.ts
new file mode 100644
index 000000000000..3acccb7bccd6
--- /dev/null
+++ b/packages/maskbook/src/social-network-adaptor/facebook.com/utils/resolveFacebookLink.ts
@@ -0,0 +1,5 @@
+import { FACEBOOK_ID } from '../base'
+
+export function resolveFacebookLink(link: string, id: string) {
+    return id === FACEBOOK_ID ? link.replace(/\?fbclid=[\S\s]*#/, '#') : link
+}
diff --git a/packages/maskbook/src/social-network-adaptor/instagram.com/base.ts b/packages/maskbook/src/social-network-adaptor/instagram.com/base.ts
index 9724a68df1d7..4ed98e9b94a3 100644
--- a/packages/maskbook/src/social-network-adaptor/instagram.com/base.ts
+++ b/packages/maskbook/src/social-network-adaptor/instagram.com/base.ts
@@ -4,6 +4,7 @@ const id = 'instagram.com'
 const origins = ['https://www.instagram.com/*', 'https://m.instagram.com/*', 'https://instagram.com/*']
 export const instagramBase: SocialNetwork.Base = {
     networkIdentifier: id,
+    name: 'instagram',
     declarativePermissions: { origins },
     shouldActivate(location) {
         return location.host.endsWith(id)
diff --git a/packages/maskbook/src/social-network-adaptor/minds.com/base.ts b/packages/maskbook/src/social-network-adaptor/minds.com/base.ts
index fedd64ffdb39..da440da85877 100644
--- a/packages/maskbook/src/social-network-adaptor/minds.com/base.ts
+++ b/packages/maskbook/src/social-network-adaptor/minds.com/base.ts
@@ -5,6 +5,7 @@ export const MINDS_ID = 'minds.com'
 const origins = ['https://www.minds.com/*', 'https://minds.com/*']
 export const mindsBase: SocialNetwork.Base = {
     networkIdentifier: MINDS_ID,
+    name: 'minds',
     declarativePermissions: { origins },
     shouldActivate(location) {
         return location.hostname.endsWith('minds.com')
diff --git a/packages/maskbook/src/social-network-adaptor/minds.com/ui-provider.ts b/packages/maskbook/src/social-network-adaptor/minds.com/ui-provider.ts
index 9f27cfb8db4d..76fa9b8591bf 100644
--- a/packages/maskbook/src/social-network-adaptor/minds.com/ui-provider.ts
+++ b/packages/maskbook/src/social-network-adaptor/minds.com/ui-provider.ts
@@ -25,6 +25,76 @@ import { injectSearchResultBoxAtMinds } from './injection/SearchResult'
 import { injectSetupPromptAtMinds } from './injection/SetupPrompt'
 import { injectToolboxHintAtMinds } from './injection/ToolboxHint'
 import { mindsShared } from './shared'
+import { makeStyles } from '@masknet/theme'
+
+const useInjectedDialogClassesOverwriteMinds = makeStyles()((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'block !important',
+        },
+    },
+    container: {
+        alignItems: 'center',
+    },
+    paper: {
+        width: '600px !important',
+        maxWidth: 'none',
+        boxShadow: 'none',
+        backgroundImage: 'none',
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            '&': {
+                display: 'block !important',
+                borderRadius: '0 !important',
+            },
+        },
+    },
+    dialogTitle: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '3px 16px',
+        borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#2f3336' : '#ccd6dd'}`,
+        '& > h2': {
+            display: 'inline-block',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            maxWidth: 600,
+            margin: '0 auto',
+            padding: '7px 14px 6px 11px !important',
+        },
+    },
+    dialogContent: {
+        padding: 16,
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: 600,
+            margin: '0 auto',
+            padding: '7px 14px 6px !important',
+        },
+    },
+    dialogActions: {
+        padding: '6px 16px',
+        [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            maxWidth: 600,
+            margin: '0 auto',
+            padding: '7px 14px 6px !important',
+        },
+    },
+    dialogBackdropRoot: {
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(110, 118, 125, 0.4)' : 'rgba(0, 0, 0, 0.4)',
+    },
+}))
 
 const mindsUI: SocialNetworkUI.Definition = {
     ...mindsBase,
@@ -51,6 +121,11 @@ const mindsUI: SocialNetworkUI.Definition = {
     },
     customization: {
         paletteMode: PaletteModeProviderMinds,
+        componentOverwrite: {
+            InjectedDialog: {
+                classes: useInjectedDialogClassesOverwriteMinds,
+            },
+        },
         useTheme: useThemeMindsVariant,
     },
     init(signal) {
diff --git a/packages/maskbook/src/social-network-adaptor/options-page/index.ts b/packages/maskbook/src/social-network-adaptor/options-page/index.ts
index ca0f8e4b4081..6878d006c0b4 100644
--- a/packages/maskbook/src/social-network-adaptor/options-page/index.ts
+++ b/packages/maskbook/src/social-network-adaptor/options-page/index.ts
@@ -7,6 +7,7 @@ import { currentImportingBackup } from '../../settings/settings'
 
 const base: SocialNetwork.Base = {
     networkIdentifier: 'localhost',
+    name: '',
     declarativePermissions: { origins: [] },
     shouldActivate() {
         return isEnvironment(Environment.ManifestOptions)
diff --git a/packages/maskbook/src/social-network-adaptor/twitter.com/base.ts b/packages/maskbook/src/social-network-adaptor/twitter.com/base.ts
index 95b5a465caa8..a85a61db85cd 100644
--- a/packages/maskbook/src/social-network-adaptor/twitter.com/base.ts
+++ b/packages/maskbook/src/social-network-adaptor/twitter.com/base.ts
@@ -4,6 +4,7 @@ const id = 'twitter.com'
 const origins = ['https://mobile.twitter.com/*', 'https://twitter.com/*']
 export const twitterBase: SocialNetwork.Base = {
     networkIdentifier: id,
+    name: 'twitter',
     declarativePermissions: { origins },
     shouldActivate(location) {
         return location.hostname.endsWith('twitter.com')
diff --git a/packages/maskbook/src/social-network/types.ts b/packages/maskbook/src/social-network/types.ts
index 4576300b7802..f53ac5214970 100644
--- a/packages/maskbook/src/social-network/types.ts
+++ b/packages/maskbook/src/social-network/types.ts
@@ -53,6 +53,7 @@ export namespace SocialNetwork {
          * !!! THIS SHOULD NOT BE USED TO CONSTRUCT A NEW ProfileIdentifier !!!
          */
         networkIdentifier: string
+        name: string
         /**
          * This field _will_ be overwritten by SocialNetworkUI.permissions
          */
diff --git a/packages/maskbook/src/social-network/ui.ts b/packages/maskbook/src/social-network/ui.ts
index a70f48d2715e..d31cc11d241f 100644
--- a/packages/maskbook/src/social-network/ui.ts
+++ b/packages/maskbook/src/social-network/ui.ts
@@ -32,6 +32,7 @@ export let activatedSocialNetworkUI: SocialNetworkUI.Definition = {
     },
     injection: {},
     networkIdentifier: 'localhost',
+    name: '',
     shouldActivate: () => false,
     utils: { createPostContext: null! },
     notReadyForProduction: true,
diff --git a/packages/maskbook/src/social-network/utils/create-post-context.ts b/packages/maskbook/src/social-network/utils/create-post-context.ts
index 4aaf2103ded0..6beacdbf8489 100644
--- a/packages/maskbook/src/social-network/utils/create-post-context.ts
+++ b/packages/maskbook/src/social-network/utils/create-post-context.ts
@@ -18,6 +18,8 @@ import {
 } from '@masknet/shared'
 import { Err, Result } from 'ts-results'
 import type { Subscription } from 'use-subscription'
+import { activatedSocialNetworkUI } from '../'
+import { resolveFacebookLink } from '../../social-network-adaptor/facebook.com/utils/resolveFacebookLink'
 
 export function createSNSAdaptorSpecializedPostContext(create: PostContextSNSActions) {
     return function createPostContext(opt: PostContextCreation): PostContext {
@@ -37,14 +39,20 @@ export function createSNSAdaptorSpecializedPostContext(create: PostContextSNSAct
         cancel.push(
             postContent.addListener((post) => {
                 links.clear()
-                parseURL(post).forEach((link) => links.add(link))
-                opt.postMentionedLinksProvider?.getCurrentValue().forEach((link) => links.add(link))
+                parseURL(post).forEach((link) =>
+                    links.add(resolveFacebookLink(link, activatedSocialNetworkUI.networkIdentifier)),
+                )
+                opt.postMentionedLinksProvider
+                    ?.getCurrentValue()
+                    .forEach((link) => links.add(resolveFacebookLink(link, activatedSocialNetworkUI.networkIdentifier)))
             }),
         )
         cancel.push(
             opt.postMentionedLinksProvider?.subscribe(() => {
                 // Not clean old links cause post content not changed
-                opt.postMentionedLinksProvider?.getCurrentValue().forEach((link) => links.add(link))
+                opt.postMentionedLinksProvider
+                    ?.getCurrentValue()
+                    .forEach((link) => links.add(resolveFacebookLink(link, activatedSocialNetworkUI.networkIdentifier)))
             }),
         )
         const linksSubscribe: Subscription<string[]> = debug({
diff --git a/packages/maskbook/src/utils/shadow-root/MaskInShadow.tsx b/packages/maskbook/src/utils/shadow-root/MaskInShadow.tsx
index d082fbe05e16..08bb19dab840 100644
--- a/packages/maskbook/src/utils/shadow-root/MaskInShadow.tsx
+++ b/packages/maskbook/src/utils/shadow-root/MaskInShadow.tsx
@@ -4,6 +4,7 @@ import { CustomSnackbarProvider } from '@masknet/theme'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { MaskUIRootWithinShadow } from '../../UIRoot'
 import { getMaskTheme } from '../theme'
+import { FACEBOOK_ID } from '../../social-network-adaptor/facebook.com/base'
 
 export function MaskInShadow(props: React.PropsWithChildren<{}>) {
     const useTheme = useRef(activatedSocialNetworkUI.customization.useTheme).current
@@ -11,6 +12,7 @@ export function MaskInShadow(props: React.PropsWithChildren<{}>) {
     return MaskUIRootWithinShadow(
         <ThemeProvider theme={theme}>
             <CustomSnackbarProvider
+                isFacebook={activatedSocialNetworkUI.networkIdentifier === FACEBOOK_ID}
                 disableWindowBlurListener={false}
                 anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
                 <>{props.children}</>
diff --git a/packages/maskbook/src/web3/UI/DateTimePanel.tsx b/packages/maskbook/src/web3/UI/DateTimePanel.tsx
index c39abdfeac69..5ccf2c5f0318 100644
--- a/packages/maskbook/src/web3/UI/DateTimePanel.tsx
+++ b/packages/maskbook/src/web3/UI/DateTimePanel.tsx
@@ -16,6 +16,10 @@ const useStyles = makeStyles()({
             backgroundImage: `url(${new URL('./calendar.png', import.meta.url)})`,
         },
     },
+    inputLabel: {
+        left: 8,
+        top: 8,
+    },
 })
 
 export function DateTimePanel(props: DateTimePanelProps) {
@@ -31,7 +35,12 @@ export function DateTimePanel(props: DateTimePanelProps) {
                 const date = new Date(e.currentTarget.value)
                 onChange(date)
             }}
-            InputLabelProps={{ shrink: true }}
+            InputLabelProps={{
+                shrink: true,
+                classes: {
+                    root: classes.inputLabel,
+                },
+            }}
             inputProps={{ className: classes.datetime, ...inputProps, min, max }}
             type="datetime-local"
         />
diff --git a/packages/theme/src/Components/Snackbar/index.tsx b/packages/theme/src/Components/Snackbar/index.tsx
index 467645bc8bd3..79260708f010 100644
--- a/packages/theme/src/Components/Snackbar/index.tsx
+++ b/packages/theme/src/Components/Snackbar/index.tsx
@@ -25,7 +25,11 @@ import { MaskColorVar } from '../../constants'
 export { SnackbarProvider, useSnackbar } from 'notistack'
 export type { VariantType, OptionsObject, SnackbarKey, SnackbarMessage } from 'notistack'
 
-const useStyles = makeStyles()((theme, _, createRef) => {
+interface StyleProps {
+    isFacebook?: boolean
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, { isFacebook }, createRef) => {
     const { palette } = theme
     const isDark = palette.mode === 'dark'
     const spinningAnimationKeyFrames = keyframes`
@@ -103,6 +107,7 @@ to {
     return {
         root: {
             zIndex: 9999,
+            transform: isFacebook ? 'translateY(100px)' : 'none',
             color: MaskColorVar.textLight,
             pointerEvents: 'inherit',
         },
@@ -170,6 +175,7 @@ export interface CustomSnackbarContentProps {
     processing?: boolean
     variant?: VariantType
     action?: SnackbarAction
+    isFacebook?: boolean
 }
 const IconMap: Record<VariantType, React.ReactNode> = {
     default: <InfoIcon color="inherit" />,
@@ -180,7 +186,7 @@ const IconMap: Record<VariantType, React.ReactNode> = {
 }
 
 export const CustomSnackbarContent = forwardRef<HTMLDivElement, CustomSnackbarContentProps>((props, ref) => {
-    const { classes } = useStyles()
+    const { classes } = useStyles({ isFacebook: props.isFacebook })
     const snackbar = useSnackbar()
     const loadingIcon = <LoadingIcon color="inherit" className={classes.spinning} />
     const variantIcon = props.processing ? loadingIcon : props.variant ? IconMap[props.variant] : null
@@ -210,9 +216,9 @@ export const CustomSnackbarContent = forwardRef<HTMLDivElement, CustomSnackbarCo
     )
 })
 
-export const CustomSnackbarProvider = memo<SnackbarProviderProps>((props) => {
+export const CustomSnackbarProvider = memo<SnackbarProviderProps & { isFacebook?: boolean }>((props) => {
     const ref = useRef<SnackbarProvider>(null)
-    const { classes } = useStyles()
+    const { classes } = useStyles({ isFacebook: props.isFacebook })
     const onDismiss = (key: string | number) => () => {
         ref.current?.closeSnackbar(key)
     }
@@ -225,7 +231,12 @@ export const CustomSnackbarProvider = memo<SnackbarProviderProps>((props) => {
             anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
             hideIconVariant
             content={(key, title) => (
-                <CustomSnackbarContent id={key} variant={props.variant ?? 'default'} title={title} />
+                <CustomSnackbarContent
+                    id={key}
+                    variant={props.variant ?? 'default'}
+                    title={title}
+                    isFacebook={props.isFacebook}
+                />
             )}
             action={(key) => (
                 <IconButton size="large" onClick={onDismiss(key)} sx={{ color: 'inherit' }}>