diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
index 5c718b144fb7..c41277a9a927 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
@@ -14,6 +14,8 @@ import { isCompactPayload } from './helpers'
 import { usePoolPayload } from './hooks/usePoolPayload'
 import type { JSON_PayloadInMask } from '../types'
 import { ITO, ITO_Error, ITO_Loading } from './ITO'
+import { useClassicMaskSNSPluginTheme } from '../../../utils'
+import { ThemeProvider } from '@mui/material'
 
 export interface PostInspectorProps {
     payload: JSON_PayloadInMask
@@ -92,5 +94,12 @@ export function PostInspector(props: PostInspectorProps) {
             />
         )
     }
-    return <EthereumChainBoundary chainId={chain_id}>{renderITO()}</EthereumChainBoundary>
+
+    const theme = useClassicMaskSNSPluginTheme()
+
+    return (
+        <ThemeProvider theme={theme}>
+            <EthereumChainBoundary chainId={chain_id}>{renderITO()}</EthereumChainBoundary>
+        </ThemeProvider>
+    )
 }
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx
index 1ced6ab9b2a9..bafa7b3e8343 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/PostInspector.tsx
@@ -3,6 +3,8 @@ import { getProposalIdentifier } from './helpers'
 import { Snapshot } from './Snapshot'
 import { LoadingFailCard } from './LoadingFailCard'
 import { useRetry } from './hooks/useRetry'
+import { ThemeProvider } from '@mui/material'
+import { useClassicMaskSNSPluginTheme } from '../../../utils'
 
 export interface PostInspectorProps {
     url: string
@@ -11,11 +13,14 @@ export interface PostInspectorProps {
 export function PostInspector(props: PostInspectorProps) {
     const identifier = getProposalIdentifier(props.url)
     const retry = useRetry()
+    const theme = useClassicMaskSNSPluginTheme()
     return (
-        <SnapshotContext.Provider value={identifier}>
-            <LoadingFailCard title="" isFullPluginDown retry={retry}>
-                <Snapshot />
-            </LoadingFailCard>
-        </SnapshotContext.Provider>
+        <ThemeProvider theme={theme}>
+            <SnapshotContext.Provider value={identifier}>
+                <LoadingFailCard title="" isFullPluginDown retry={retry}>
+                    <Snapshot />
+                </LoadingFailCard>
+            </SnapshotContext.Provider>
+        </ThemeProvider>
     )
 }
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
index dbe8030aef39..afef896ffbf0 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
@@ -87,7 +87,6 @@ export function VotingCard() {
                 offChain>
                 <Button
                     className={classes.button}
-                    variant="contained"
                     disabled={choice === 0 || !account || !power}
                     onClick={() => setOpen(true)}>
                     {Boolean(power) && Boolean(account) ? t('plugin_snapshot_vote') : t('plugin_snapshot_no_power')}
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
index 4eaebd387972..82a7f36db15f 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts
@@ -1,7 +1,7 @@
 import { MutationObserverWatcher, ValueRef } from '@dimensiondev/holoflows-kit'
 import { createSubscriptionFromValueRef } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { PaletteMode, Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
+import { PaletteMode, Theme, unstable_createMuiStrictModeTheme, buttonClasses } from '@mui/material'
 import produce, { setAutoFreeze } from 'immer'
 import { useMemo } from 'react'
 import type { SocialNetworkUI } from '../../../social-network'
@@ -9,8 +9,8 @@ import { fromRGB, getBackgroundColor, getForegroundColor, isDark, shade, toRGB }
 import { isMobileTwitter } from '../utils/isMobile'
 import { composeAnchorSelector, composeAnchorTextSelector, headingTextSelector } from '../utils/selector'
 import twitterColorSchema from './twitter-color-schema.json'
-import { parseColor } from '@masknet/theme'
 import { noop } from 'lodash-unified'
+import { parseColor } from '@masknet/theme'
 
 const themeColorRef = new ValueRef('rgb(29, 161, 242)')
 const textColorRef = new ValueRef('rgb(255, 255, 255)')
@@ -71,21 +71,14 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
         setAutoFreeze(false)
 
         const TwitterTheme = produce(baseTheme, (theme) => {
-            theme.palette.background.paper = backgroundColor
             const isDark = theme.palette.mode === 'dark'
-            const isDarker = backgroundColor === 'rgb(0,0,0)'
             theme.palette.primary = {
                 light: toRGB(shade(primaryColorRGB, 10)),
                 main: toRGB(primaryColorRGB),
                 dark: toRGB(shade(primaryColorRGB, -10)),
                 contrastText: toRGB(primaryContrastColorRGB),
             }
-            const themeName = isDark ? (isDarker ? 'darker' : 'dark') : 'light'
-
-            // Just for design
-            if (themeName === 'dark') {
-                theme.palette.background.paper = '#151D26'
-            }
+            const themeName = isDark ? 'dark' : 'light'
 
             const colorSchema = twitterColorSchema[themeName]
             const colors = Object.keys(colorSchema) as Array<keyof typeof colorSchema>
@@ -94,12 +87,29 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                     Object.assign(theme.palette[color], colorSchema[color])
                 }
             })
+
+            theme.palette.public = colorSchema.public
             theme.palette.divider = colorSchema.divider
             theme.palette.secondaryDivider = colorSchema.secondaryDivider
             theme.shape.borderRadius = isMobileTwitter ? 0 : 15
             theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
             theme.components = theme.components || {}
             const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+            theme.components.MuiInputBase = {
+                styleOverrides: {
+                    root: {
+                        background: theme.palette.background.input,
+                    },
+                },
+            }
+            // theme.components.MuiDialogTitle = {
+            //     styleOverrides: {
+            //         root: {
+            //             background: theme.palette.background.modalTitle,
+            //             borderBottom: 'none',
+            //         },
+            //     },
+            // }
             theme.components.MuiButton = {
                 defaultProps: {
                     size: 'medium',
@@ -108,124 +118,469 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
                 },
                 variants: [
                     {
-                        props: { variant: 'sns' },
+                        props: {
+                            size: 'small',
+                        },
+                        style: {
+                            padding: '8px 12px',
+                            borderRadius: 6,
+                            fontSize: 12,
+                            lineHeight: '16px',
+                        },
+                    },
+                    {
+                        props: {
+                            size: 'medium',
+                        },
+                        style: {
+                            padding: '11px 18px',
+                            borderRadius: 8,
+                            fontSize: 14,
+                            lineHeight: '18px',
+                        },
+                    },
+                    {
+                        props: {
+                            size: 'large',
+                        },
+                        style: {
+                            padding: '14px 20px',
+                            borderRadius: 10,
+                            fontSize: 16,
+                            lineHeight: '20px',
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                        },
                         style: {
-                            backgroundColor: theme.palette.primary.main,
-                            color: theme.palette.common.white,
-                            '&:hover': {
-                                backgroundColor: theme.palette.primary.dark,
-                                color: theme.palette.common.white,
+                            background: theme.palette.grey.primary,
+                            color: theme.palette.text.primary,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.background.paper,
+                                boxShadow:
+                                    theme.palette.mode === 'dark'
+                                        ? '0px 8px 25px rgba(255, 255, 255, 0.1)'
+                                        : '0px 8px 25px rgba(0, 0, 0, 0.1)',
                             },
-                            '&.Mui-disabled': {
-                                opacity: 0.5,
-                                backgroundColor: theme.palette.primary.main,
-                                color: theme.palette.common.white,
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
+                                color: theme.palette.text.primary,
                             },
                         },
                     },
                     {
-                        props: { color: 'error' },
+                        props: {
+                            variant: 'contained',
+                        },
                         style: {
-                            backgroundColor: theme.palette.error.main,
-                            color: theme.palette.common.white,
-                            '&:hover': {
-                                backgroundColor: '#f53b47',
+                            backgroundColor: theme.palette.text.primary,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.text.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.text.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: theme.palette.grey.primary,
+                                opacity: 0.6,
+                                color: theme.palette.background.paper,
                             },
                         },
                     },
-                ],
-                styleOverrides: {
-                    root: {
-                        borderRadius: 500,
-                        textTransform: 'initial',
-                        fontWeight: 600,
-                        minHeight: 39,
-                        paddingLeft: 15,
-                        paddingRight: 15,
-                        boxShadow: 'none',
-                        [smallQuery]: {
-                            '&': {
-                                height: 30,
-                                minHeight: 'auto !important',
-                                padding: '0 14px !important',
+                    {
+                        props: {
+                            variant: 'text',
+                        },
+                        style: {
+                            color: theme.palette.text.primary,
+                            ['&:hover']: {
+                                background: theme.palette.grey.primary,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
                             },
                         },
                     },
-                    contained: {
-                        backgroundColor: theme.palette.text.primary,
-                        color: theme.palette.text.buttonText,
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            backgroundColor: theme.palette.text.primary,
-                            color: theme.palette.text.buttonText,
+                    // info button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'info',
                         },
-                        '&:hover': {
-                            backgroundColor: theme.palette.action.buttonHover,
+                        style: {
+                            background: theme.palette.public.primary,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'info',
                         },
-                        [smallQuery]: {
-                            '&': {
-                                height: 30,
-                                minHeight: 'auto !important',
-                                padding: '0 14px !important',
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.primary,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
                             },
                         },
                     },
-                    containedSecondary: {
-                        backgroundColor: theme.palette.background.default,
-                        color: theme.palette.text.strong,
-                        '&:hover': {
-                            color: theme.palette.action.buttonHover,
-                            backgroundColor: theme.palette.action.bgHover,
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'info',
                         },
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            backgroundColor: theme.palette.background.default,
-                            color: theme.palette.text.strong,
+                        style: {
+                            color: theme.palette.public.primary,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                opacity: 0.4,
+                            },
                         },
                     },
-                    outlined: {
-                        color: theme.palette.text.strong,
-                        borderColor: theme.palette.secondaryDivider,
-                        backgroundColor: 'transparent',
-                        '&:hover': {
-                            color: theme.palette.action.buttonHover,
-                            borderColor: theme.palette.secondaryDivider,
-                            backgroundColor: parseColor(theme.palette.text.primary).setAlpha(0.1).toRgbString(),
+
+                    // warning button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'warning',
                         },
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            color: theme.palette.text.strong,
-                            backgroundColor: 'transparent',
+                        style: {
+                            backgroundColor: theme.palette.public.warning,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.warning,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.warning)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.warning).setAlpha(0.5).toRgbString(),
+                                opacity: 0.6,
+                            },
                         },
                     },
-                    sizeLarge: {
-                        minHeight: 40,
-                        paddingLeft: 30,
-                        paddingRight: 30,
-                        [smallQuery]: {
-                            '&': {
-                                height: 28,
-                                minHeight: 28,
-                                paddingLeft: 15,
-                                paddingRight: 15,
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'warning',
+                        },
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.warning).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.warning,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.warning).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.warning)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.warning,
+                                background: parseColor(theme.palette.public.warning).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'warning',
+                        },
+                        style: {
+                            color: theme.palette.public.warning,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.warning).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.warning,
+                                opacity: 0.4,
                             },
                         },
                     },
-                    sizeSmall: {
-                        minHeight: 30,
-                        paddingLeft: 15,
-                        paddingRight: 15,
-                        [smallQuery]: {
-                            '&': {
-                                height: 25,
-                                minHeight: 29,
-                                paddingLeft: 10,
-                                paddingRight: 10,
+
+                    // success button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'success',
+                        },
+                        style: {
+                            background: theme.palette.public.success,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.success,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.success)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.success).setAlpha(0.5).toRgbString(),
+                                opacity: 0.6,
                             },
                         },
                     },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'success',
+                        },
+                        style: {
+                            background: parseColor(theme.palette.public.success).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.warning,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.success).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.success)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.success,
+                                background: parseColor(theme.palette.public.success).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'success',
+                        },
+                        style: {
+                            color: theme.palette.public.success,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.success).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.success,
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+
+                    // error button
+                    {
+                        props: {
+                            variant: 'contained',
+                            color: 'error',
+                        },
+                        style: {
+                            backgroundColor: theme.palette.public.danger,
+                            color: theme.palette.public.white,
+                            ['&:hover']: {
+                                background: theme.palette.public.danger,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.danger)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.danger).setAlpha(0.5).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'flat',
+                            color: 'error',
+                        },
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.danger).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.danger,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.danger).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.danger)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.danger,
+                                background: parseColor(theme.palette.public.danger).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'text',
+                            color: 'error',
+                        },
+                        style: {
+                            color: theme.palette.public.danger,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.danger).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.danger,
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+
+                    // rounded button
+                    {
+                        props: {
+                            variant: 'roundedFlat',
+                        },
+                        style: {
+                            borderRadius: 99,
+                            background: theme.palette.grey.primary,
+                            color: theme.palette.text.primary,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.background.paper,
+                                boxShadow:
+                                    theme.palette.mode === 'dark'
+                                        ? '0px 8px 25px rgba(255, 255, 255, 0.1)'
+                                        : '0px 8px 25px rgba(0, 0, 0, 0.1)',
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
+                                color: theme.palette.text.primary,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedContained',
+                        },
+                        style: {
+                            backgroundColor: theme.palette.text.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                backgroundColor: theme.palette.text.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.text.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: theme.palette.grey.primary,
+                                opacity: 0.6,
+                                color: theme.palette.background.paper,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedText',
+                        },
+                        style: {
+                            color: theme.palette.text.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background: theme.palette.grey.primary,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedContained',
+                            color: 'info',
+                        },
+                        style: {
+                            background: theme.palette.public.primary,
+                            color: theme.palette.public.white,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background: theme.palette.public.primary,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.3)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString(),
+                                opacity: 0.6,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedFlat',
+                            color: 'info',
+                        },
+                        style: {
+                            backgroundColor: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            color: theme.palette.public.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background:
+                                    theme.palette.mode === 'dark'
+                                        ? parseColor(theme.palette.public.primary).setAlpha(0.3).toRgbString()
+                                        : theme.palette.public.white,
+                                boxShadow: `0 9px 20px ${parseColor(theme.palette.public.primary)
+                                    .setAlpha(0.1)
+                                    .toRgbString()}`,
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                    {
+                        props: {
+                            variant: 'roundedText',
+                            color: 'info',
+                        },
+                        style: {
+                            color: theme.palette.public.primary,
+                            borderRadius: 99,
+                            ['&:hover']: {
+                                background: parseColor(theme.palette.public.primary).setAlpha(0.1).toRgbString(),
+                            },
+                            [`&.${buttonClasses.disabled}`]: {
+                                color: theme.palette.public.primary,
+                                opacity: 0.4,
+                            },
+                        },
+                    },
+                ],
+                styleOverrides: {
+                    root: {
+                        textTransform: 'initial',
+                        fontWeight: 700,
+                        color: theme.palette.background.paper,
+                    },
                 },
             }
+
             theme.components.MuiPaper = {
                 defaultProps: {
                     elevation: 0,
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
index 51859be679c4..fbb85626f891 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
+++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json
@@ -4,19 +4,34 @@
             "700": "#536471",
             "300": "#b9cad3",
             "200": "#cfd9de",
-            "50": "#eff3f4"
+            "50": "#eff3f4",
+            "primary": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
+            "secondary": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
+            "third": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "text": {
-            "primary": "#0f1419",
+            "primary": "#07101B",
             "secondary": "#536471",
+            "third": "#ACB4C1",
             "strong": "#111418",
             "buttonText": "#FFFFFF"
         },
         "background": {
-            "default": "#F6F8F8",
-            "input": "#EDF1F2",
+            "default": "#F9F9F9",
+            "input": "#F2F6FA",
             "tipMask": "rgba(0, 0, 0, 0.85)",
-            "messageShadow": "rgba(101, 119, 134, 0.2)"
+            "messageShadow": "rgba(101, 119, 134, 0.2)",
+            "paper": "#ffffff",
+            "modalTitle": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)"
         },
         "error": {
             "main": "#F4212E"
@@ -34,19 +49,34 @@
             "700": "#3b4c5c",
             "300": "#697987",
             "200": "#697987",
-            "50": "#cfd9de"
+            "50": "#cfd9de",
+            "primary": "linear-gradient(0deg, rgba(7, 16, 27, 0.3), rgba(7, 16, 27, 0.3)), #FFFFFF",
+            "secondary": "linear-gradient(0deg, rgba(7, 16, 27, 0.2), rgba(7, 16, 27, 0.2)), #FFFFFF",
+            "third": "linear-gradient(0deg, rgba(7, 16, 27, 0.05), rgba(7, 16, 27, 0.05)), #FFFFFF"
         },
         "text": {
-            "primary": "#0f1419",
-            "secondary": "#536471",
+            "primary": "#07101B",
+            "secondary": "#767F8D",
             "strong": "#111418",
-            "buttonText": "#FFFFFF"
+            "buttonText": "#FFFFFF",
+            "third": "#ACB4C1"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "background": {
-            "default": "#F6F8F8",
-            "input": "#EDF1F2",
+            "default": "#F9F9F9",
+            "input": "#F2F6FA",
             "tipMask": "rgba(0, 0, 0, 0.85)",
-            "messageShadow": "rgba(101, 119, 134, 0.2)"
+            "messageShadow": "rgba(101, 119, 134, 0.2)",
+            "paper": "#ffffff",
+            "modalTitle": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)"
         },
         "error": {
             "main": "#FF5555"
@@ -64,19 +94,34 @@
             "700": "#8899a6",
             "300": "#6b7d8c",
             "200": "#3d5466",
-            "50": "#253341"
+            "50": "#253341",
+            "primary": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
+            "secondary": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
+            "third": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "text": {
-            "primary": "#EFF3F4",
+            "primary": "#F5F5F5",
             "secondary": "#8899A6",
+            "third": "#666C75",
             "strong": "#FFFFFF",
             "buttonText": "#0F1419"
         },
         "background": {
-            "default": "#18232E",
-            "input": "#212D39",
+            "default": "#1C1C1C",
+            "input": "#26292C",
             "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(136, 153, 166, 0.2)"
+            "messageShadow": "rgba(136, 153, 166, 0.2)",
+            "paper": "#101010",
+            "modalTitle": "linear-gradient(180deg, #202020 0%, #181818 100%)"
         },
         "error": {
             "main": "#FF5555"
@@ -94,11 +139,24 @@
             "700": "#b8cbd9",
             "300": "#92a4b3",
             "200": "#697987",
-            "50": "#10171e"
+            "50": "#10171e",
+            "primary": "linear-gradient(0deg, rgba(245, 245, 245, 0.3), rgba(245, 245, 245, 0.3)), #000000",
+            "secondary": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000",
+            "third": "linear-gradient(0deg, rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 0.1)), #000000"
+        },
+        "public": {
+            "primary": "#1C68F3",
+            "success": "#3DC233",
+            "warning": "#FFB100",
+            "danger": "#FF3545",
+            "white": "#ffffff",
+            "dark": "#07101B",
+            "secondaryDark": "#767F8D"
         },
         "text": {
-            "primary": "#EFF3F4",
-            "secondary": "#8899A6",
+            "primary": "#F5F5F5",
+            "secondary": "#C4C7CD",
+            "third": "#666C75",
             "strong": "#FFFFFF",
             "buttonText": "#0F1419"
         },
@@ -108,75 +166,17 @@
         "divider": "#38444D",
         "secondaryDivider": "#38444D",
         "background": {
-            "default": "#18232E",
-            "input": "#212D39",
+            "default": "#1C1C1C",
+            "input": "#26292C",
             "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(136, 153, 166, 0.2)"
+            "messageShadow": "rgba(136, 153, 166, 0.2)",
+            "paper": "#101010",
+            "modalTitle": "linear-gradient(180deg, #202020 0%, #181818 100%)"
         },
         "action": {
             "buttonHover": "#D7DBDC",
             "bgHover": "#1D2933",
             "mask": "rgba(91, 112, 131, 0.4)"
         }
-    },
-    "darker": {
-        "grey": {
-            "700": "#6e767d",
-            "300": "#3d4145",
-            "200": "#2f3336",
-            "50": "#202327"
-        },
-        "text": {
-            "primary": "#D9D9D9",
-            "secondary": "#6E767D",
-            "strong": "#EFF3F4",
-            "buttonText": "#0F1419"
-        },
-        "background": {
-            "default": "#15171A",
-            "input": "#1D2023",
-            "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(255, 255, 255, 0.2)"
-        },
-        "error": {
-            "main": "#FF5555"
-        },
-        "divider": "#2F3336",
-        "secondaryDivider": "#2F3336",
-        "action": {
-            "buttonHover": "#D7dBDC",
-            "bgHover": "#1A1D20",
-            "mask": "rgba(91, 112, 131, 0.4)"
-        }
-    },
-    "darker_high_contrast": {
-        "grey": {
-            "700": "#929ca6",
-            "300": "#6e767d",
-            "200": "#3d4145",
-            "50": "#121517"
-        },
-        "text": {
-            "primary": "#D9D9D9",
-            "secondary": "#6E767D",
-            "strong": "#EFF3F4",
-            "buttonText": "#0F1419"
-        },
-        "error": {
-            "main": "#FF5555"
-        },
-        "divider": "#2F3336",
-        "secondaryDivider": "#2F3336",
-        "background": {
-            "default": "#15171A",
-            "input": "#1D2023",
-            "tipMask": "rgba(255, 255, 255, 0.85)",
-            "messageShadow": "rgba(255, 255, 255, 0.2)"
-        },
-        "action": {
-            "buttonHover": "#D7dBDC",
-            "bgHover": "#1A1D20",
-            "mask": "rgba(91, 112, 131, 0.4)"
-        }
     }
 }
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
index abb94eda2888..a4945eeb674a 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
@@ -65,7 +65,9 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             display: 'flex',
             alignItems: 'center',
             padding: '3px 16px',
-            borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#2f3336' : '#eff3f4'}`,
+            position: 'relative',
+            background: theme.palette.background.modalTitle,
+            borderBottom: 'none',
             '& > h2': {
                 display: 'inline-block',
                 whiteSpace: 'nowrap',
diff --git a/packages/mask/src/utils/theme/theme-global.d.ts b/packages/mask/src/utils/theme/theme-global.d.ts
index 7037f9436dfe..7a2a91f7a578 100644
--- a/packages/mask/src/utils/theme/theme-global.d.ts
+++ b/packages/mask/src/utils/theme/theme-global.d.ts
@@ -1,8 +1,18 @@
 declare module '@mui/material/styles/createPalette.d' {
     export interface Palette {
         secondaryDivider: string
+        public: {
+            primary: string
+            success: string
+            warning: string
+            danger: string
+            white: string
+            dark: string
+            secondaryDark: string
+        }
     }
     export interface TypeText {
+        third: string
         hint: string
         strong: string
         buttonText: string
@@ -16,6 +26,15 @@ declare module '@mui/material/styles/createPalette.d' {
         input: string
         tipMask: string
         messageShadow: string
+        modalTitle: string
+    }
+}
+
+declare module '@mui/material/index.d' {
+    export interface Color {
+        primary: string
+        second: string
+        third: string
     }
 }
 export {}
diff --git a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
index c1c0d2744c52..1c083fb4ec90 100644
--- a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
+++ b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
@@ -9,6 +9,7 @@ import { createSubscriptionFromValueRef } from '@masknet/shared-base'
 import { ValueRef } from '@dimensiondev/holoflows-kit'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { languageSettings } from '../../settings/settings'
+import { cloneDeep, merge } from 'lodash-unified'
 
 const staticRef = createSubscriptionFromValueRef(new ValueRef('light'))
 const defaultUseTheme = (t: Theme) => t
@@ -26,3 +27,18 @@ export function useClassicMaskSNSTheme() {
     const theme = unstable_createMuiStrictModeTheme(baseTheme, localization)
     return usePostTheme(theme)
 }
+
+export function useClassicMaskSNSPluginTheme() {
+    const theme = useClassicMaskSNSTheme()
+    return unstable_createMuiStrictModeTheme(
+        merge(cloneDeep(theme), {
+            components: {
+                MuiButton: {
+                    defaultProps: {
+                        variant: 'roundedContained',
+                    },
+                },
+            },
+        }),
+    )
+}
diff --git a/packages/mask/src/utils/theme/useSwapPageTheme.ts b/packages/mask/src/utils/theme/useSwapPageTheme.ts
index f03e10a0f54a..6b11cb4ada63 100644
--- a/packages/mask/src/utils/theme/useSwapPageTheme.ts
+++ b/packages/mask/src/utils/theme/useSwapPageTheme.ts
@@ -37,22 +37,6 @@ export function useSwapPageTheme() {
                 variant: 'contained',
             },
             variants: [
-                {
-                    props: { variant: 'sns' },
-                    style: {
-                        backgroundColor: theme.palette.primary.main,
-                        color: theme.palette.common.white,
-                        '&:hover': {
-                            backgroundColor: theme.palette.primary.dark,
-                            color: theme.palette.common.white,
-                        },
-                        '&.Mui-disabled': {
-                            opacity: 0.5,
-                            backgroundColor: theme.palette.primary.main,
-                            color: theme.palette.common.white,
-                        },
-                    },
-                },
                 {
                     props: { color: 'error' },
                     style: {
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index c2ac6e140688..a7581e1721b0 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -170,11 +170,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                     <span>{t('plugin_wallet_connect_wallet_tip')}</span>
                 </Typography>
                 {!props.hiddenConnectButton ? (
-                    <ActionButton
-                        variant="contained"
-                        size="small"
-                        sx={{ marginTop: 1.5 }}
-                        onClick={openSelectProviderDialog}>
+                    <ActionButton size="small" sx={{ marginTop: 1.5 }} onClick={openSelectProviderDialog}>
                         {t('plugin_wallet_connect_wallet')}
                     </ActionButton>
                 ) : null}
@@ -208,7 +204,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                 ) : null}
                 {isAllowed ? (
                     <ActionButtonPromise
-                        variant="contained"
                         size="small"
                         className={classes.switchButton}
                         sx={props.switchButtonStyle ?? { marginTop: 1.5 }}
@@ -249,7 +244,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
             ) : null}
             {isAllowed ? (
                 <ActionButtonPromise
-                    variant="contained"
                     size="small"
                     className={classes.switchButton}
                     sx={props.switchButtonStyle ?? { marginTop: 1.5 }}
diff --git a/packages/shared/src/contexts/components/InjectedDialog.tsx b/packages/shared/src/contexts/components/InjectedDialog.tsx
index c0130294d2d0..415dc11c7ae5 100644
--- a/packages/shared/src/contexts/components/InjectedDialog.tsx
+++ b/packages/shared/src/contexts/components/InjectedDialog.tsx
@@ -26,14 +26,14 @@ interface StyleProps {
 const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
     dialogTitle: {
         padding: theme.spacing(1, 2),
-        borderBottom: `1px solid ${theme.palette.divider}`,
         whiteSpace: 'nowrap',
     },
     dialogContent: {
         overscrollBehavior: 'contain',
     },
     dialogTitleTypography: {
-        marginLeft: 6,
+        flex: 1,
+        textAlign: 'center',
         verticalAlign: 'middle',
     },
     dialogCloseButton: {
diff --git a/packages/theme/src/extended.d.ts b/packages/theme/src/extended.d.ts
index 4596bfb6a581..f9e0d5a5518d 100644
--- a/packages/theme/src/extended.d.ts
+++ b/packages/theme/src/extended.d.ts
@@ -2,7 +2,10 @@ declare global {
     module '@mui/material/Button' {
         interface ButtonPropsVariantOverrides {
             rounded: true
-            sns: true
+            flat: true
+            roundedContained: true
+            roundedFlat: true
+            roundedText: true
         }
         interface ButtonPropsColorOverrides {
             warning: true