diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
index d11fd50ee17..6da2f7704d9 100644
--- a/_raw/locales/en/messages.json
+++ b/_raw/locales/en/messages.json
@@ -987,7 +987,7 @@
       "slippage-adjusted-refresh-quote": "Slippage adjusted. Refresh route.",
       "price-expired-refresh-route": "Price expired. Refresh route.",
       "approve-x-symbol": "Approve {{symbol}}",
-      "approve-and-bridge": "Approve and Bridge on {{name}}",
+      "approve-and-bridge": "Approve and Bridge",
       "need-to-approve-token-before-bridge": "Need to approve token before bridge",
       "via-bridge": "via {{bridge}}",
       "duration": "{{duration}} min",
@@ -1004,7 +1004,7 @@
       "est-receiving": "Est. Receiving:",
       "est-difference": "Est. Difference:",
       "loss-tips": "You're losing {{usd}}. Try a different amount.",
-      "price-impact": "price impact",
+      "price-impact": "Price Impact",
 
       "showMore": {
         "title": "Show More",
diff --git a/src/ui/component/ChainSelector/InForm.tsx b/src/ui/component/ChainSelector/InForm.tsx
index bf3a6b621aa..af93b19d25e 100644
--- a/src/ui/component/ChainSelector/InForm.tsx
+++ b/src/ui/component/ChainSelector/InForm.tsx
@@ -138,6 +138,7 @@ interface ChainSelectorProps {
   hideTestnetTab?: boolean;
   excludeChains?: CHAINS_ENUM[];
   drawerHeight?: number;
+  showClosableIcon?: boolean;
 }
 export default function ChainSelectorInForm({
   value,
@@ -153,6 +154,7 @@ export default function ChainSelectorInForm({
   hideTestnetTab = false,
   excludeChains,
   drawerHeight,
+  showClosableIcon,
 }: ChainSelectorProps) {
   const [showSelectorModal, setShowSelectorModal] = useState(showModal);
 
@@ -194,6 +196,7 @@ export default function ChainSelectorInForm({
           supportChains={supportChains}
           disabledTips={disabledTips}
           title={title}
+          showClosableIcon={showClosableIcon}
           showRPCStatus
         />
       )}
diff --git a/src/ui/component/ChainSelector/Modal.tsx b/src/ui/component/ChainSelector/Modal.tsx
index ce51d128fdf..759a7e1311e 100644
--- a/src/ui/component/ChainSelector/Modal.tsx
+++ b/src/ui/component/ChainSelector/Modal.tsx
@@ -27,6 +27,7 @@ import {
   SelectChainListProps,
 } from './components/SelectChainList';
 import { LoadingBalances } from './LoadingBalances';
+import { ReactComponent as RcIconCloseCC } from 'ui/assets/component/close-cc.svg';
 
 interface ChainSelectorModalProps {
   visible: boolean;
@@ -44,6 +45,7 @@ interface ChainSelectorModalProps {
   height?: number;
   zIndex?: number;
   excludeChains?: CHAINS_ENUM[];
+  showClosableIcon?: boolean;
 }
 
 const useChainSeletorList = ({
@@ -142,6 +144,7 @@ const ChainSelectorModal = ({
   height = 494,
   zIndex,
   excludeChains,
+  showClosableIcon = false,
 }: ChainSelectorModalProps) => {
   const handleCancel = () => {
     onCancel();
@@ -207,7 +210,7 @@ const ChainSelectorModal = ({
         title={title}
         width="400px"
         height={height}
-        closable={false}
+        closable={showClosableIcon}
         placement={'bottom'}
         visible={visible}
         onClose={handleCancel}
@@ -220,6 +223,9 @@ const ChainSelectorModal = ({
         )}
         zIndex={zIndex}
         destroyOnClose
+        closeIcon={
+          <RcIconCloseCC className="w-[20px] h-[20px] text-r-neutral-foot" />
+        }
       >
         <header className={title ? 'pt-[8px]' : 'pt-[20px]'}>
           {isShowTestnet && !hideMainnetTab && (
diff --git a/src/ui/component/TokenSelector/index.tsx b/src/ui/component/TokenSelector/index.tsx
index c51dc0679b6..f1e81e131ac 100644
--- a/src/ui/component/TokenSelector/index.tsx
+++ b/src/ui/component/TokenSelector/index.tsx
@@ -159,7 +159,7 @@ const TokenSelector = ({
   const bridgeFromNoDataTip = useMemo(() => {
     if (type === 'bridgeFrom') {
       return (
-        <div className="no-token w-full top-[120px]">
+        <div className="no-token w-full">
           <RcIconMatchCC
             className="w-[32px] h-[32px] text-r-neutral-foot"
             viewBox="0 0 33 32"
@@ -244,7 +244,7 @@ const TokenSelector = ({
   const Header = React.useMemo(() => {
     if (type === 'bridgeFrom') {
       return (
-        <li className="token-list__header">
+        <li className="token-list__header h-auto mb-8">
           <div>{t('component.TokenSelector.bridge.token')}</div>
           <div />
           <div>{t('component.TokenSelector.bridge.value')}</div>
diff --git a/src/ui/views/Bridge/Component/BridgeContent.tsx b/src/ui/views/Bridge/Component/BridgeContent.tsx
index 139258abde7..3aa4ee87da8 100644
--- a/src/ui/views/Bridge/Component/BridgeContent.tsx
+++ b/src/ui/views/Bridge/Component/BridgeContent.tsx
@@ -106,6 +106,8 @@ export const BridgeContent = () => {
     slippageState,
     setSlippage,
     setSlippageChanged,
+    isSlippageHigh,
+    isSlippageLow,
   } = useBridge();
 
   const amountAvailable = useMemo(() => Number(amount) > 0, [amount]);
@@ -119,8 +121,11 @@ export const BridgeContent = () => {
   const { t } = useTranslation();
 
   const btnText = useMemo(() => {
+    if (selectedBridgeQuote?.shouldApproveToken) {
+      return t('page.bridge.approve-and-bridge');
+    }
     return t('page.bridge.title');
-  }, []);
+  }, [selectedBridgeQuote?.shouldApproveToken]);
 
   const wallet = useWallet();
   const rbiSource = useRbiSource();
@@ -438,6 +443,7 @@ export const BridgeContent = () => {
             toAmount={selectedBridgeQuote?.to_token_amount}
             openQuotesList={openQuotesList}
             quoteLoading={quoteLoading}
+            slippageError={isSlippageHigh || isSlippageLow}
           />
         )}
         {noQuote && recommendFromToken && (
@@ -458,7 +464,7 @@ export const BridgeContent = () => {
             <RcIconWarningCC
               viewBox="0 0 16 16"
               className={clsx(
-                'relative top-[3px] self-start origin-center w-16 h-15',
+                'relative top-[3px] mr-2 self-start origin-center w-16 h-15',
                 'text-red-forbidden'
               )}
             />
@@ -466,7 +472,7 @@ export const BridgeContent = () => {
           banner
           message={
             <span
-              className={clsx('text-13 leading-normal', 'text-red-forbidden')}
+              className={clsx('text-13 font-medium', 'text-rabby-red-default')}
             >
               {inSufficient
                 ? t('page.bridge.insufficient-balance')
diff --git a/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx b/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx
index 8f5eeb0a2ce..89074857f2f 100644
--- a/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx
+++ b/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx
@@ -62,12 +62,6 @@ export const BridgeQuoteItem = (props: QuoteItemProps) => {
     (s) => s.bridge.selectedAggregators || []
   );
 
-  const availableSelectedAggregators = useMemo(() => {
-    return selectedAggregators?.filter((e) =>
-      aggregatorsList.some((item) => item.id === e)
-    );
-  }, [selectedAggregators, aggregatorsList]);
-
   const diffPercent = React.useMemo(() => {
     if (props.onlyShow || props.isBestQuote) {
       return '';
@@ -129,7 +123,7 @@ export const BridgeQuoteItem = (props: QuoteItemProps) => {
         onClick={handleClick}
       >
         <div className="flex items-center justify-between relative">
-          <div className="flex gap-6  items-center  overflow-hidden">
+          <div className="flex gap-6  items-center  overflow-hidden pr-16">
             <QuoteLogo
               logo={props.aggregator.logo_url}
               bridgeLogo={props.bridge.logo_url}
@@ -172,7 +166,7 @@ export const BridgeQuoteItem = (props: QuoteItemProps) => {
 
           <div className="flex items-center gap-8 flex-1 justify-end">
             <TokenWithChain
-              token={props.payToken}
+              token={props.receiveToken}
               width="20px"
               height="20px"
               hideChainIcon
@@ -204,7 +198,7 @@ export const BridgeQuoteItem = (props: QuoteItemProps) => {
               })}
             </span>
           </div>
-          <div className="flex items-center gap-6 text-13 text-r-neutral-foot">
+          <div className="flex items-center gap-2 text-13 text-r-neutral-foot">
             <span>
               {t('page.bridge.estimated-value', {
                 value: formatUsdValue(
diff --git a/src/ui/views/Bridge/Component/BridgeShowMore.tsx b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
index 775b65d232c..268c3e1de7c 100644
--- a/src/ui/views/Bridge/Component/BridgeShowMore.tsx
+++ b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
@@ -17,7 +17,7 @@ import { BridgeSlippage } from './BridgeSlippage';
 import { tokenPriceImpact } from '../hooks';
 
 const dottedClassName =
-  'h-0 flex-1 border-b-[1px] border-solid border-rabby-neutral-line';
+  'h-0 flex-1 border-b-[1px] border-solid border-rabby-neutral-line opacity-50';
 
 export const BridgeShowMore = ({
   openQuotesList,
@@ -31,6 +31,7 @@ export const BridgeShowMore = ({
   amount,
   toAmount,
   quoteLoading,
+  slippageError,
 }: {
   openQuotesList: () => void;
   sourceName: string;
@@ -44,6 +45,7 @@ export const BridgeShowMore = ({
   amount?: string | number;
   toAmount?: string | number;
   quoteLoading?: boolean;
+  slippageError?: boolean;
 }) => {
   const { t } = useTranslation();
   const [show, setShow] = useState(false);
@@ -54,14 +56,14 @@ export const BridgeShowMore = ({
   );
 
   useEffect(() => {
-    if (!quoteLoading && data?.showLoss) {
+    if ((!quoteLoading && data?.showLoss) || slippageError) {
       setShow(true);
     }
   }, [quoteLoading, data?.showLoss]);
 
   return (
-    <div>
-      <div className="flex items-center gap-8 mt-28 mb-8 op">
+    <div className="mx-16">
+      <div className="flex items-center gap-8 mt-28 mb-8">
         <div className={clsx(dottedClassName)} />
         <div
           className={clsx(
@@ -82,7 +84,7 @@ export const BridgeShowMore = ({
         <div className={clsx(dottedClassName)} />
       </div>
 
-      <div className={clsx('px-16', 'overflow-hidden', !show && 'h-0')}>
+      <div className={clsx('overflow-hidden', !show && 'h-0')}>
         {data?.showLoss && !quoteLoading && (
           <div className="leading-4 mb-12 text-12 text-r-neutral-foot">
             <div className="flex justify-between">
@@ -150,7 +152,9 @@ export const BridgeShowMore = ({
                   alt={sourceName}
                 />
               )}
-              <span className="text-rabby-blue-default">{sourceName}</span>
+              <span className="text-rabby-blue-default font-medium">
+                {sourceName}
+              </span>
             </div>
           )}
         </ListItem>
diff --git a/src/ui/views/Bridge/Component/BridgeToken.tsx b/src/ui/views/Bridge/Component/BridgeToken.tsx
index cc72cb27344..d144bcb81ac 100644
--- a/src/ui/views/Bridge/Component/BridgeToken.tsx
+++ b/src/ui/views/Bridge/Component/BridgeToken.tsx
@@ -146,10 +146,11 @@ export const BridgeToken = ({
           hideTestnetTab
           value={chain}
           onChange={onChangeChain}
-          title={t('page.bridge.select-chain')}
+          title={<div className="mt-8">{t('page.bridge.select-chain')}</div>}
           excludeChains={excludeChains}
           supportChains={supportedChains}
           drawerHeight={540}
+          showClosableIcon
         />
       </div>
 
diff --git a/src/ui/views/Swap/Component/RabbyFeePopup.tsx b/src/ui/views/Swap/Component/RabbyFeePopup.tsx
index e3991ec3cff..9a7de08f211 100644
--- a/src/ui/views/Swap/Component/RabbyFeePopup.tsx
+++ b/src/ui/views/Swap/Component/RabbyFeePopup.tsx
@@ -71,7 +71,7 @@ export const RabbyFeePopup = ({
       }
       return 493;
     }
-    return 428;
+    return 446;
   }, [type, dexName, feeDexDesc]);
   return (
     <Popup