diff --git a/.release/.changeset/big-spoons-clean.md b/.release/.changeset/big-spoons-clean.md
new file mode 100644
index 00000000..ad2eb2a0
--- /dev/null
+++ b/.release/.changeset/big-spoons-clean.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Some ui updates & Header chain switch update
diff --git a/apps/canonical-bridge-ui/core/locales/en.ts b/apps/canonical-bridge-ui/core/locales/en.ts
index 125000c6..2071c5a3 100644
--- a/apps/canonical-bridge-ui/core/locales/en.ts
+++ b/apps/canonical-bridge-ui/core/locales/en.ts
@@ -87,6 +87,7 @@ export const en = {
   'select-modal.destination.incompatible.tooltip':
     'The token you’ve selected is incompatible with this network. Please select another token.',
 
+  'wallet.network.switch-network': 'Please switch the network',
   'wallet.network.wrong-network': 'Wrong network',
   'wallet.error.switch-network':
     'An error occurred when attempting to switch the network. Please select another network or try again.',
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts
index 4199d278..29f52dd5 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
 
 import { useAppDispatch } from '@/modules/store/StoreProvider';
 import { setSendValue } from '@/modules/transfer/action';
@@ -9,6 +10,7 @@ export function useDefaultSelectedInfo() {
   const { isReady, defaultSelectedInfo } = useAggregator();
   const { selectDefault } = useSelection();
   const dispatch = useAppDispatch();
+  const { chainId } = useAccount();
 
   useEffect(() => {
     if (isReady) {
@@ -16,5 +18,5 @@ export function useDefaultSelectedInfo() {
       dispatch(setSendValue(defaultSelectedInfo.amount));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isReady]);
+  }, [isReady, chainId]);
 }
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts
index 36e622c3..94a34106 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts
@@ -11,7 +11,9 @@ import { getTokenBalances } from '@/modules/aggregator/shared/getTokenBalances';
 import { sortTokens } from '@/modules/aggregator/shared/sortTokens';
 
 export function useSelection() {
-  const { getFromChains, getToChains, getTokens, getToToken, adapters } = useAggregator();
+  const { chainId } = useAccount();
+  const { getFromChains, getToChains, getTokens, getToToken, adapters, defaultSelectedInfo } =
+    useAggregator();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const toChain = useAppSelector((state) => state.transfer.toChain);
@@ -72,6 +74,38 @@ export function useSelection() {
     });
   };
 
+  const selectFromChain = async (tmpFromChain: IBridgeChain) => {
+    // After selecting fromChain, if toChain becomes incompatible, reselect the first compatible network in toChain list.
+    const toChains = getToChains({
+      fromChainId: tmpFromChain.id,
+    });
+
+    const tmpToChain =
+      toChains.find((c) => isChainOrTokenCompatible(c) && c.id === toChain?.id) ??
+      toChains.find((c) => isChainOrTokenCompatible(c) && c.chainType !== 'link');
+
+    const tmpTokens = await getSortedTokens({
+      fromChainId: tmpFromChain.id,
+      tokens: getTokens({
+        fromChainId: tmpFromChain.id,
+        toChainId: tmpToChain?.id,
+      }),
+    });
+
+    const newToken =
+      tmpTokens.find(
+        (t) =>
+          isChainOrTokenCompatible(t) &&
+          t.displaySymbol.toUpperCase() === selectedToken?.displaySymbol.toUpperCase(),
+      ) ?? tmpTokens.find((t) => isChainOrTokenCompatible(t));
+
+    updateSelectedInfo({
+      tmpToken: newToken,
+      tmpFromChain,
+      tmpToChain,
+    });
+  };
+
   return {
     async selectDefault({
       fromChainId,
@@ -87,6 +121,15 @@ export function useSelection() {
         bridgeTypes.map((item) => [item, { symbol: tokenSymbol }]),
       ) as any as IBridgeToken;
 
+      if (chainId && chainId !== defaultSelectedInfo.fromChainId) {
+        const fromChains = getFromChains({});
+        const chain = fromChains.find((chain) => chain.id === chainId);
+        if (chain) {
+          selectFromChain(chain);
+          return;
+        }
+      }
+
       const fromChains = getFromChains({
         toChainId,
         token,
@@ -116,38 +159,7 @@ export function useSelection() {
         token: newToken,
       });
     },
-
-    async selectFromChain(tmpFromChain: IBridgeChain) {
-      // After selecting fromChain, if toChain becomes incompatible, reselect the first compatible network in toChain list.
-      const toChains = getToChains({
-        fromChainId: tmpFromChain.id,
-      });
-      const tmpToChain =
-        toChains.find((c) => isChainOrTokenCompatible(c) && c.id === toChain?.id) ??
-        toChains.find((c) => isChainOrTokenCompatible(c) && c.chainType !== 'link');
-
-      const tmpTokens = await getSortedTokens({
-        fromChainId: tmpFromChain.id,
-        tokens: getTokens({
-          fromChainId: tmpFromChain.id,
-          toChainId: tmpToChain?.id,
-        }),
-      });
-
-      const newToken =
-        tmpTokens.find(
-          (t) =>
-            isChainOrTokenCompatible(t) &&
-            t.displaySymbol.toUpperCase() === selectedToken?.displaySymbol.toUpperCase(),
-        ) ?? tmpTokens.find((t) => isChainOrTokenCompatible(t));
-
-      updateSelectedInfo({
-        tmpToken: newToken,
-        tmpFromChain,
-        tmpToChain,
-      });
-    },
-
+    selectFromChain,
     async selectToChain(tmpToChain: IBridgeChain) {
       const fromChainId = fromChain!.id;
 
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
index 4bde5ffe..afd5819e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
@@ -1,10 +1,10 @@
-import { Button, useColorMode, useIntl, useTheme } from '@bnb-chain/space';
+import { Button, useColorMode, useIntl, useTheme, ButtonProps } from '@bnb-chain/space';
 
 import { useAppSelector } from '@/modules/store/StoreProvider';
 import { useEvmSwitchChain } from '@/modules/wallet/hooks/useEvmSwitchChain';
 import { reportEvent } from '@/core/utils/gtm';
 
-export const SwitchNetworkButton = () => {
+export const SwitchNetworkButton = (props: ButtonProps) => {
   const { formatMessage } = useIntl();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
@@ -35,6 +35,7 @@ export const SwitchNetworkButton = () => {
           });
         }
       }}
+      {...props}
     >
       {formatMessage({ id: 'transfer.button.switch-network' })}
     </Button>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
index c80b11ec..3f143046 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
@@ -1,12 +1,4 @@
-import {
-  Flex,
-  Typography,
-  useBreakpointValue,
-  useColorMode,
-  useDisclosure,
-  useIntl,
-  useTheme,
-} from '@bnb-chain/space';
+import { Flex, Typography, useColorMode, useDisclosure, useIntl, useTheme } from '@bnb-chain/space';
 
 import { SelectButton } from '@/modules/transfer/components/SelectButton';
 import { useAppSelector } from '@/modules/store/StoreProvider';
@@ -16,7 +8,6 @@ import { SourceNetworkModal } from '@/modules/aggregator/components/SelectModal/
 export function FromSection() {
   const { colorMode } = useColorMode();
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
   const { formatMessage } = useIntl();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
@@ -24,18 +15,20 @@ export function FromSection() {
 
   return (
     <Flex flexDir="column" gap={'12px'} w={'100%'} flex={1} h={'64px'}>
-      {isBase ? (
-        <Flex alignItems="center" justifyContent={'space-between'}>
-          <Typography
-            variant="body"
-            lineHeight={'16px'}
-            size={'sm'}
-            color={theme.colors[colorMode].text.placeholder}
-          >
-            {formatMessage({ id: 'from.section.title' })}
-          </Typography>
-        </Flex>
-      ) : null}
+      <Flex
+        alignItems="center"
+        justifyContent={'space-between'}
+        display={{ base: 'flex', md: 'none' }}
+      >
+        <Typography
+          variant="body"
+          lineHeight={'16px'}
+          size={'sm'}
+          color={theme.colors[colorMode].text.placeholder}
+        >
+          {formatMessage({ id: 'from.section.title' })}
+        </Typography>
+      </Flex>
 
       <SelectButton
         isActive={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
index 2b6a33d1..45c30e82 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Flex,
-  Typography,
-  useBreakpointValue,
-  useColorMode,
-  useIntl,
-  useTheme,
-} from '@bnb-chain/space';
+import { Flex, Typography, useColorMode, useIntl, useTheme } from '@bnb-chain/space';
 
 import { TransferToIcon } from '@/core/components/icons/TransferToIcon';
 import { FromSection } from '@/modules/transfer/components/FromSection';
@@ -15,36 +8,37 @@ export const NetWorkSection = () => {
   const { formatMessage } = useIntl();
   const { colorMode } = useColorMode();
   const theme = useTheme();
-  const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
 
   return (
     <Flex flexDir={'column'} gap={'12px'}>
-      {!isBase ? (
-        <>
-          <Flex flexDir={'row'}>
-            <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
-              <Typography
-                variant="body"
-                size={'sm'}
-                lineHeight={'16px'}
-                color={theme.colors[colorMode].text.placeholder}
-              >
-                {formatMessage({ id: 'from.section.title' })}
-              </Typography>
-            </Flex>
-            <Flex alignItems="center" justifyContent={'space-between'} flex={1} ml="49px">
-              <Typography
-                variant="body"
-                lineHeight={'16px'}
-                size={'sm'}
-                color={theme.colors[colorMode].text.placeholder}
-              >
-                {formatMessage({ id: 'to.section.title' })}
-              </Typography>
-            </Flex>
-          </Flex>{' '}
-        </>
-      ) : null}
+      <Flex flexDir={'row'} display={{ base: 'none', md: 'flex' }}>
+        <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
+          <Typography
+            variant="body"
+            size={'sm'}
+            lineHeight={'16px'}
+            color={theme.colors[colorMode].text.placeholder}
+          >
+            {formatMessage({ id: 'from.section.title' })}
+          </Typography>
+        </Flex>
+        <Flex
+          alignItems="center"
+          justifyContent={'space-between'}
+          flex={1}
+          ml="49px"
+          display={{ base: 'none', md: 'flex' }}
+        >
+          <Typography
+            variant="body"
+            lineHeight={'16px'}
+            size={'sm'}
+            color={theme.colors[colorMode].text.placeholder}
+          >
+            {formatMessage({ id: 'to.section.title' })}
+          </Typography>
+        </Flex>
+      </Flex>{' '}
       <Flex
         flexDir={['column', 'column', 'row']}
         justifyContent={'space-between'}
@@ -52,7 +46,7 @@ export const NetWorkSection = () => {
         gap={['16px', '16px', '16px', '12px']}
       >
         <FromSection />
-        <TransferToIcon w={'24px'} h={'24px'} transform={!isBase ? '' : 'rotate(90deg)'} />
+        <TransferToIcon w={'24px'} h={'24px'} transform={{ base: 'rotate(90deg)', md: 'none' }} />
         <ToSection />
       </Flex>
     </Flex>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
index f34820c6..dd20ac3c 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
@@ -1,41 +1,45 @@
-import { Flex, Skeleton, SkeletonCircle, useBreakpointValue } from '@bnb-chain/space';
+import { Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space';
 
 export const ReceiveLoading = () => {
-  const isBase = useBreakpointValue({ base: true, lg: false }) ?? false;
-
-  return !isBase ? (
-    <Flex flexDir={'column'} gap={'8px'}>
-      <Flex gap={'8px'} mb={'2px'}>
-        <Skeleton height={'24px'} width={'160px'} />
-        <Skeleton height={'24px'} width={'80px'} />
-      </Flex>
-      <Skeleton height={'12px'} maxW={'333px'} width={'100%'} />
-      <Skeleton height={'12px'} maxW={'371px'} width={'100%'} />
-    </Flex>
-  ) : (
-    <Flex flexDir={'row'} alignItems={'flex-start'} justifyContent={'space-between'} gap={'23px'}>
-      <Flex flexDir={'column'} flex={1} gap={'8px'}>
-        <Flex gap={'8px'} mb={'2px'} flexDir={'row'}>
-          <Skeleton height={'12px'} flexBasis={'66%'} />
-          <Skeleton height={'12px'} flexBasis={'33%'} />
-        </Flex>
+  return (
+    <>
+      <Flex flexDir={'column'} gap={'8px'} display={{ base: 'none', lg: 'flex' }}>
         <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'24px'} flexBasis={'66%'} />
-          <Skeleton height={'24px'} flexBasis={'33%'} />
+          <Skeleton height={'24px'} width={'160px'} />
+          <Skeleton height={'24px'} width={'80px'} />
         </Flex>
+        <Skeleton height={'12px'} maxW={'333px'} width={'100%'} />
+        <Skeleton height={'12px'} maxW={'371px'} width={'100%'} />
+      </Flex>
+      <Flex
+        display={{ base: 'flex', lg: 'none' }}
+        flexDir={'row'}
+        alignItems={'flex-start'}
+        justifyContent={'space-between'}
+        gap={'23px'}
+      >
+        <Flex flexDir={'column'} flex={1} gap={'8px'}>
+          <Flex gap={'8px'} mb={'2px'} flexDir={'row'}>
+            <Skeleton height={'12px'} flexBasis={'66%'} />
+            <Skeleton height={'12px'} flexBasis={'33%'} />
+          </Flex>
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'24px'} flexBasis={'66%'} />
+            <Skeleton height={'24px'} flexBasis={'33%'} />
+          </Flex>
 
-        <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
-        </Flex>
-        <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
-        </Flex>
-        <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          </Flex>
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          </Flex>
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          </Flex>
         </Flex>
+        <SkeletonCircle w={'32px'} h={'32px'} />
       </Flex>
-
-      <SkeletonCircle w={'32px'} h={'32px'} />
-    </Flex>
+    </>
   );
 };
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
index 4317d92c..63c9366f 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
@@ -1,4 +1,12 @@
-import { Box, Flex, useBreakpointValue, useColorMode, useIntl, useTheme } from '@bnb-chain/space';
+import {
+  Box,
+  Flex,
+  useBreakpointValue,
+  useColorMode,
+  useIntl,
+  useTheme,
+  Collapse,
+} from '@bnb-chain/space';
 import { useEffect, useMemo } from 'react';
 
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
@@ -116,13 +124,13 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
 
   const isHideSection = useMemo(() => {
     // no receive amount and some routes are displayed
+    if (!Number(sendValue)) return true;
     if (isGlobalFeeLoading) return false;
     return (
-      !Number(sendValue) ||
-      (!isBase &&
-        estimatedAmount &&
-        !Object.values(estimatedAmount).every((element) => element === undefined) &&
-        !receiveAmt)
+      !isBase &&
+      estimatedAmount &&
+      !Object.values(estimatedAmount).every((element) => element === undefined) &&
+      !receiveAmt
     );
   }, [sendValue, estimatedAmount, isBase, receiveAmt, isGlobalFeeLoading]);
 
@@ -132,61 +140,65 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
     );
   }, [estimatedAmount]);
 
-  return !isHideSection ? (
-    <Flex flexDir={'column'} gap={'12px'}>
-      <Flex flexDir={'row'} alignItems={'center'} justifyContent={'space-between'}>
-        <Box color={theme.colors[colorMode].input.title} fontSize={'14px'} fontWeight={400}>
-          {formatMessage({ id: 'you.receive.title' })}
-        </Box>
-        {isBase && !isHideRouteButton ? <RouteChangeButton onOpen={onOpen} /> : null}
-      </Flex>
-      <Flex
-        borderRadius={'8px'}
-        p={'16px'}
-        flexDir={'column'}
-        gap={'12px'}
-        background={theme.colors[colorMode].receive.background}
-        position={'relative'}
-      >
-        {debouncedSendValue === sendValue ? (
-          receiveAmt && !isGlobalFeeLoading ? (
-            <>
-              {isBase && <RouteName bridgeType={bridgeType} isReceiveSection={true} />}
-              {isBase && <RefreshingButton position={'absolute'} right={'16px'} top={'16px'} />}
-              {bridgeType && (
-                <RouteTitle
-                  receiveAmt={receiveAmt ? formatNumber(Number(Number(receiveAmt)), 8) : undefined}
-                  toTokenInfo={toTokenInfo?.[bridgeType]}
-                />
-              )}
-              <Flex flexDir={'column'} gap={'4px'}>
-                <EstimatedArrivalTime bridgeType={bridgeType} />
-                <FeesInfo
-                  bridgeType={bridgeType}
-                  summary={feeDetails.summary}
-                  breakdown={feeDetails.breakdown}
-                />
-                <AllowedSendAmount
-                  allowedSendAmount={allowedAmtContent}
-                  isError={
-                    bridgeType === 'cBridge'
-                      ? isAllowSendError
-                      : bridgeType === 'stargate'
-                      ? STIsAllowSendError
-                      : false
-                  }
-                />
-              </Flex>
-            </>
-          ) : !receiveAmt && !isGlobalFeeLoading ? (
-            <NoRouteFound onOpen={onOpen} />
+  return (
+    <Collapse in={!isHideSection} animateOpacity>
+      <Flex flexDir={'column'} gap={'12px'}>
+        <Flex flexDir={'row'} alignItems={'center'} justifyContent={'space-between'}>
+          <Box color={theme.colors[colorMode].input.title} fontSize={'14px'} fontWeight={400}>
+            {formatMessage({ id: 'you.receive.title' })}
+          </Box>
+          {isBase && !isHideRouteButton ? <RouteChangeButton onOpen={onOpen} /> : null}
+        </Flex>
+        <Flex
+          borderRadius={'8px'}
+          p={'16px'}
+          flexDir={'column'}
+          gap={'12px'}
+          background={theme.colors[colorMode].receive.background}
+          position={'relative'}
+        >
+          {debouncedSendValue === sendValue ? (
+            receiveAmt && !isGlobalFeeLoading ? (
+              <>
+                {isBase && <RouteName bridgeType={bridgeType} isReceiveSection={true} />}
+                {isBase && <RefreshingButton position={'absolute'} right={'16px'} top={'16px'} />}
+                {bridgeType && (
+                  <RouteTitle
+                    receiveAmt={
+                      receiveAmt ? formatNumber(Number(Number(receiveAmt)), 8) : undefined
+                    }
+                    toTokenInfo={toTokenInfo?.[bridgeType]}
+                  />
+                )}
+                <Flex flexDir={'column'} gap={'4px'}>
+                  <EstimatedArrivalTime bridgeType={bridgeType} />
+                  <FeesInfo
+                    bridgeType={bridgeType}
+                    summary={feeDetails.summary}
+                    breakdown={feeDetails.breakdown}
+                  />
+                  <AllowedSendAmount
+                    allowedSendAmount={allowedAmtContent}
+                    isError={
+                      bridgeType === 'cBridge'
+                        ? isAllowSendError
+                        : bridgeType === 'stargate'
+                        ? STIsAllowSendError
+                        : false
+                    }
+                  />
+                </Flex>
+              </>
+            ) : !receiveAmt && !isGlobalFeeLoading ? (
+              <NoRouteFound onOpen={onOpen} />
+            ) : (
+              <ReceiveLoading />
+            )
           ) : (
             <ReceiveLoading />
-          )
-        ) : (
-          <ReceiveLoading />
-        )}
+          )}
+        </Flex>
       </Flex>
-    </Flex>
-  ) : null;
+    </Collapse>
+  );
 };
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
index a89174be..b3068832 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
@@ -1,4 +1,4 @@
-import { Box, useBreakpointValue, useColorMode, useTheme } from '@bnb-chain/space';
+import { Box, useColorMode, useTheme } from '@bnb-chain/space';
 import { useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
@@ -13,7 +13,6 @@ export const InputValidationMessage = () => {
   const { validateInput } = useInputValidation();
   const { chain } = useAccount();
   const dispatch = useAppDispatch();
-  const isBase = useBreakpointValue({ base: true, lg: false }) ?? false;
 
   const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
   const theme = useTheme();
@@ -65,7 +64,7 @@ export const InputValidationMessage = () => {
       fontSize={'12px'}
       fontWeight={400}
       lineHeight={'16px'}
-      position={isBase ? 'static' : 'absolute'}
+      position={{ base: 'static', lg: 'absolute' }}
       top={`calc(100% + ${'8px'})`}
     >
       {balanceInputError ?? error?.text}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
index d37568b3..ad33a7c6 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
@@ -1,12 +1,4 @@
-import {
-  Flex,
-  Typography,
-  theme,
-  useBreakpointValue,
-  useColorMode,
-  useDisclosure,
-  useIntl,
-} from '@bnb-chain/space';
+import { Flex, Typography, theme, useColorMode, useDisclosure, useIntl } from '@bnb-chain/space';
 
 import { SelectButton } from '@/modules/transfer/components/SelectButton';
 import { useAppSelector } from '@/modules/store/StoreProvider';
@@ -16,25 +8,26 @@ import { DestinationNetworkModal } from '@/modules/aggregator/components/SelectM
 export function ToSection() {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { formatMessage } = useIntl();
-  const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
   const { colorMode } = useColorMode();
 
   const toChain = useAppSelector((state) => state.transfer.toChain);
 
   return (
     <Flex flexDir="column" gap={'12px'} w={'100%'} flex={1} h={'64px'}>
-      {isBase ? (
-        <Flex alignItems="center" justifyContent={'space-between'}>
-          <Typography
-            variant="body"
-            lineHeight={'16px'}
-            size={'sm'}
-            color={theme.colors[colorMode].text.placeholder}
-          >
-            {formatMessage({ id: 'to.section.title' })}
-          </Typography>
-        </Flex>
-      ) : null}
+      <Flex
+        alignItems="center"
+        justifyContent={'space-between'}
+        display={{ base: 'flex', md: 'none' }}
+      >
+        <Typography
+          variant="body"
+          lineHeight={'16px'}
+          size={'sm'}
+          color={theme.colors[colorMode].text.placeholder}
+        >
+          {formatMessage({ id: 'to.section.title' })}
+        </Typography>
+      </Flex>
 
       <SelectButton
         isActive={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index dc825360..3586f3d9 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -6,6 +6,7 @@ import {
   useColorMode,
   useIntl,
   useTheme,
+  Collapse,
 } from '@bnb-chain/space';
 import { ReactNode, useEffect, useMemo } from 'react';
 
@@ -109,7 +110,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
 
   return (
     <Flex flexDir="column" ml={['0', '0', '0', '24px']} gap={['12px', '12px', '12px', '24px']}>
-      {showRoute && (
+      <Collapse in={showRoute} animateOpacity>
         <Box overflow={['auto', 'auto', 'auto', 'hidden']}>
           <Box
             position={'relative'}
@@ -120,30 +121,29 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
             w={'100%'}
           >
             <Flex flexDir={'column'} gap={'12px'}>
-              {!isBase ? (
-                <Flex
-                  justifyContent={'space-between'}
-                  alignItems={'center'}
-                  px={['0', '0', '0', '24px']}
-                  color={theme.colors[colorMode].text.route.title}
-                  fontSize={'14px'}
-                  fontWeight={500}
-                  h={'32px'}
-                  sx={{
-                    svg: {
-                      w: '32px',
-                      h: '32px',
-                    },
-                  }}
-                >
-                  {formatMessage({ id: 'route.title' })}
-                  {!options.length || isGlobalFeeLoading ? (
-                    <SkeletonCircle w={'32px'} h={'32px'} />
-                  ) : !isBase ? (
-                    <RefreshingButton />
-                  ) : null}
-                </Flex>
-              ) : null}
+              <Flex
+                display={{ base: 'none', lg: 'flex' }}
+                justifyContent={'space-between'}
+                alignItems={'center'}
+                px={['0', '0', '0', '24px']}
+                color={theme.colors[colorMode].text.route.title}
+                fontSize={'14px'}
+                fontWeight={500}
+                h={'32px'}
+                sx={{
+                  svg: {
+                    w: '32px',
+                    h: '32px',
+                  },
+                }}
+              >
+                {formatMessage({ id: 'route.title' })}
+                {!options.length || isGlobalFeeLoading ? (
+                  <SkeletonCircle w={'32px'} h={'32px'} />
+                ) : !isBase ? (
+                  <RefreshingButton />
+                ) : null}
+              </Flex>
               <Box
                 px={['0', '0', '0', '24px']}
                 flex={1}
@@ -171,7 +171,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
             </Flex>
           </Box>
         </Box>
-      )}
+      </Collapse>
       <Box>{routeContentBottom ? routeContentBottom : null}</Box>
     </Flex>
   );
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
index 4ad1c877..d96138b4 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
@@ -53,12 +53,12 @@ export function TransferWidget() {
         {appearance.bridgeTitle && (
           <Box
             as="h1"
-            display={['none', 'none', 'block']}
-            fontSize={'24px'}
+            fontSize={{ base: '20px', md: '24px' }}
             fontWeight={500}
             textAlign={'center'}
-            borderBottom={`1px solid ${theme.colors[colorMode].border[2]}`}
-            pb={'24px'}
+            lineHeight={{ base: 1.4, md: 1.333 }}
+            borderBottom={{ base: 'none', md: `1px solid ${theme.colors[colorMode].border[2]}` }}
+            pb={{ base: 0, md: '24px' }}
           >
             {appearance.bridgeTitle}
           </Box>
@@ -70,11 +70,12 @@ export function TransferWidget() {
         <Flex flexDir="column">
           <TransferButtonGroup />
         </Flex>
-        {isBase ? routeContentBottom : null}
+        <Box display={{ base: 'block', lg: 'none' }}>{routeContentBottom}</Box>
       </Flex>
-      {!isBase ? (
+      <Box display={{ base: 'none', lg: 'flex' }}>
         <TransferOverview routeContentBottom={routeContentBottom} />
-      ) : (
+      </Box>
+      {isBase && (
         <RoutesModal
           title={formatMessage({ id: 'route.title.select.routes' })}
           isOpen={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
index e9a7686b..f89811de 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
@@ -1,6 +1,7 @@
-import { Flex, useColorMode, useIntl, useTheme, Text } from '@bnb-chain/space';
+import { Flex, useColorMode, useIntl, useTheme, Text, Typography, Box } from '@bnb-chain/space';
 import { useAccount } from 'wagmi';
-import { TickIcon } from '@bnb-chain/icons';
+import { TickIcon, WarningTriangleSolidIcon, InfoCircleIcon } from '@bnb-chain/icons';
+import { useEffect, useRef } from 'react';
 
 import { IconImage } from '@/core/components/IconImage';
 import { useAppSelector } from '@/modules/store/StoreProvider';
@@ -10,80 +11,152 @@ import { Dropdown } from '@/modules/wallet/components/Dropdown/Dropdown';
 import { DropdownButton } from '@/modules/wallet/components/Dropdown/DropdownButton';
 import { DropdownList } from '@/modules/wallet/components/Dropdown/DropdownList';
 import { DropdownItem } from '@/modules/wallet/components/Dropdown/DropdownItem';
+import { TransferToIcon } from '@/core/components/icons/TransferToIcon';
+import { SwitchNetworkButton } from '@/modules/transfer/components/Button/SwitchNetworkButton';
 
 export function NetworkStatus() {
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
-
+  const thresholdRef = useRef(false);
   const theme = useTheme();
   const { colorMode } = useColorMode();
   const { chain, chainId } = useAccount();
   const { formatMessage } = useIntl();
   const fromChains = useFromChains();
   const { switchChain } = useEvmSwitchChain();
-
   const bridgeChains = useFromChains();
 
+  useEffect(() => {
+    thresholdRef.current = true;
+    setTimeout(() => {
+      thresholdRef.current = false;
+    }, 1000);
+  }, [chainId]);
+
+  const switchDropdown = (onClose: () => void) => (
+    <DropdownList maxW={'240px'}>
+      <Flex flexDir={'column'} alignItems={'center'} padding={'16px'} gap={'8px'}>
+        <Typography
+          color={theme.colors[colorMode].text.secondary}
+          variant={'label'}
+          size={'md'}
+          display={'flex'}
+          align={'center'}
+          gap={'4px'}
+        >
+          <InfoCircleIcon boxSize={'16px'} color={theme.colors[colorMode].text.tertiary} />
+          {formatMessage({ id: 'wallet.network.switch-network' })}
+        </Typography>
+        <TransferToIcon w={'24px'} h={'24px'} transform={'rotate(90deg)'} />
+
+        <Flex
+          maxW={'100%'}
+          borderRadius={'24px'}
+          padding={'4px'}
+          pr={'8px'}
+          alignItems={'center'}
+          justifyContent={'center'}
+          bg={theme.colors[colorMode].support.primary['4']}
+          gap={'8px'}
+        >
+          <IconImage src={fromChain!.icon} boxSize="24px" flexShrink={0} />
+          <Flex flex={1} flexShrink={0} noOfLines={1}>
+            {fromChain!.name}
+          </Flex>
+        </Flex>
+
+        <Box onClick={onClose} w={'100%'}>
+          <SwitchNetworkButton h={'40px'} mt={'16px'} fontSize={'14px'} />
+        </Box>
+      </Flex>
+    </DropdownList>
+  );
+
   if (!chain) {
-    return null;
+    if (!chainId || !fromChain) return null;
+
+    return (
+      <Dropdown>
+        {({ isOpen, onClose }) => {
+          return (
+            <>
+              <DropdownButton isActive={isOpen} isWarning={true}>
+                <WarningTriangleSolidIcon
+                  boxSize={'24px'}
+                  color={theme.colors[colorMode].support.warning['3']}
+                />
+                <Flex flexDir="column" gap="0" alignItems="flex-start" textAlign="left">
+                  <Text fontSize="14px" noOfLines={1} fontWeight={500}>
+                    Unknown
+                  </Text>
+                </Flex>
+              </DropdownButton>
+
+              {switchDropdown(onClose)}
+            </>
+          );
+        }}
+      </Dropdown>
+    );
   }
 
-  const isWrongNetwork = !!fromChain && fromChain.id !== chain.id;
+  const isWrongNetwork = !!fromChain && fromChain.id !== chain.id && !thresholdRef.current;
   const iconUrl = bridgeChains.find((e) => e.id === chain.id)?.icon;
 
   return (
     <Dropdown>
-      {({ isOpen }) => {
+      {({ isOpen, onClose }) => {
         return (
           <>
             <DropdownButton isActive={isOpen} isWarning={isWrongNetwork}>
-              <IconImage src={iconUrl} boxSize="24px" />
+              {isWrongNetwork ? (
+                <WarningTriangleSolidIcon
+                  boxSize={'24px'}
+                  color={theme.colors[colorMode].support.warning['3']}
+                />
+              ) : (
+                <IconImage src={iconUrl} boxSize="24px" />
+              )}
               <Flex flexDir="column" gap="0" alignItems="flex-start" textAlign="left">
                 <Text fontSize="14px" noOfLines={1}>
                   {chain.name}
                 </Text>
-                {isWrongNetwork && (
-                  <Text
-                    color={theme.colors[colorMode].support.warning['3']}
-                    fontSize={'12px'}
-                    fontWeight={400}
-                    noOfLines={1}
-                  >
-                    {formatMessage({ id: 'wallet.network.wrong-network' })}
-                  </Text>
-                )}
               </Flex>
             </DropdownButton>
 
-            <DropdownList>
-              {fromChains.map((item) => {
-                const isSelected = chainId === item.id;
+            {isWrongNetwork ? (
+              switchDropdown(onClose)
+            ) : (
+              <DropdownList>
+                {fromChains.map((item) => {
+                  const isSelected = chainId === item.id;
 
-                return (
-                  <DropdownItem
-                    key={item.id}
-                    color={
-                      isSelected
-                        ? theme.colors[colorMode].text.primary
-                        : theme.colors[colorMode].text.secondary
-                    }
-                    bg={isSelected ? theme.colors[colorMode].popover.selected : undefined}
-                    onClick={() => {
-                      if (chainId !== item.id) {
-                        switchChain({
-                          chainId: item.id,
-                        });
+                  return (
+                    <DropdownItem
+                      key={item.id}
+                      color={
+                        isSelected
+                          ? theme.colors[colorMode].text.primary
+                          : theme.colors[colorMode].text.secondary
                       }
-                    }}
-                  >
-                    <IconImage src={item.icon} boxSize="16px" flexShrink={0} />
-                    <Flex flex={1} flexShrink={0} noOfLines={1}>
-                      {item.name}
-                    </Flex>
-                    {isSelected && <TickIcon boxSize={'16px'} />}
-                  </DropdownItem>
-                );
-              })}
-            </DropdownList>
+                      bg={isSelected ? theme.colors[colorMode].popover.selected : undefined}
+                      onClick={() => {
+                        if (chainId !== item.id) {
+                          switchChain({
+                            chainId: item.id,
+                          });
+                        }
+                      }}
+                    >
+                      <IconImage src={item.icon} boxSize="16px" flexShrink={0} />
+                      <Flex flex={1} flexShrink={0} noOfLines={1}>
+                        {item.name}
+                      </Flex>
+                      {isSelected && <TickIcon boxSize={'16px'} />}
+                    </DropdownItem>
+                  );
+                })}
+              </DropdownList>
+            )}
           </>
         );
       }}