diff --git a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
index d2d256e31b52..579f2670092d 100644
--- a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
@@ -42,7 +42,7 @@ export function SwapBox() {
 
     return (
         <TradeContext.Provider value={tradeContext}>
-            <Trader coin={coin} />
+            <Trader coin={coin} chainId={chainId} />
         </TradeContext.Provider>
     )
 }
diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx
index 1a953b0dd8ad..367505fc84df 100644
--- a/packages/mask/src/extension/popups/pages/Swap/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/index.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from '@masknet/theme'
+import { Appearance, applyMaskColorVars, makeStyles } from '@masknet/theme'
 import { TransactionStatusType, useChainId, useWallet, Web3Provider } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import { useCallback } from 'react'
@@ -10,6 +10,8 @@ import { SwapWeb3Context } from '../../../../web3/context'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useI18N } from '../../../../utils'
 import { NetworkPluginID, useReverseAddress } from '@masknet/plugin-infra'
+import { TargetChainIdContext } from '../../../../plugins/Trader/trader/useTargetChainIdContext'
+import { AllProviderTradeContext } from '../../../../plugins/Trader/trader/useAllProviderTradeContext'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -50,6 +52,10 @@ const useStyles = makeStyles()((theme) => {
         },
         main: {
             width: 520,
+            overflowY: 'scroll',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
         },
     }
 })
@@ -69,6 +75,8 @@ export default function SwapPage() {
 
     const { value: domain } = useReverseAddress(wallet?.address, NetworkPluginID.PLUGIN_EVM)
 
+    applyMaskColorVars(document.body, Appearance.light)
+
     return (
         <Web3Provider value={SwapWeb3Context}>
             <div className={classes.page}>
@@ -87,7 +95,11 @@ export default function SwapPage() {
                         <Typography variant="h1" className={classes.title}>
                             {t('plugin_trader_swap')}
                         </Typography>
-                        <SwapBox />
+                        <TargetChainIdContext.Provider>
+                            <AllProviderTradeContext.Provider>
+                                <SwapBox />
+                            </AllProviderTradeContext.Provider>
+                        </TargetChainIdContext.Provider>
                     </main>
                 </div>
             </div>