diff --git a/netlify.toml b/netlify.toml
index 1326ee320..e581bf826 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -103,6 +103,43 @@ REACT_APP_L2_GAS_PRICE_ORACLE = "0x247969F4fad93a33d4826046bc3eAE0D36BdE548"
 REACT_APP_SCROLL_CHAIN = "0x2D567EcE699Eabe5afCd141eDB7A4f2D0D6ce8a0"
 REACT_APP_L1_MESSAGE_QUEUE = "0xF0B2293F5D834eAe920c6974D50957A1732de763"
 
+[context.bridge-redesign.environment]
+REACT_APP_SCROLL_ENVIRONMENT = "Mainnet"
+REACT_APP_API_BASE_URI = "https://mainnet-api.scroll.io"
+REACT_APP_BRIDGE_API_URI = "https://mainnet-api-bridge.scroll.io/api"
+REACT_APP_ROLLUPSCAN_API_URI = "https://mainnet-api-re.scroll.io/api"
+REACT_APP_CHAIN_ID_L1 = "1"
+REACT_APP_CHAIN_ID_L2 = "534352"
+REACT_APP_EXTERNAL_RPC_URI_L1 = "https://ethereum.blockpi.network/v1/rpc/public"
+REACT_APP_EXTERNAL_RPC_URI_L2 = "https://rpc.scroll.io"
+REACT_APP_EXTERNAL_EXPLORER_URI_L1 = "https://etherscan.io"
+REACT_APP_EXTERNAL_EXPLORER_URI_L2 = "https://scrollscan.com"
+REACT_APP_EXTERNAL_EXPLORER_URI_DORA = "https://www.ondora.xyz/network/scroll"
+REACT_APP_ETHERSCAN_L2 = "https://scrollscan.com"
+REACT_APP_L2_SCAN_URI = "https://scroll.l2scan.co"
+REACT_APP_L1_ETH_GATEWAY_PROXY_ADDR = "0x7F2b8C31F88B6006c382775eea88297Ec1e3E905"
+REACT_APP_L2_ETH_GATEWAY_PROXY_ADDR = "0x6EA73e05AdC79974B931123675ea8F78FfdacDF0"
+REACT_APP_L1_WETH_GATEWAY_PROXY_ADDR = "0x7AC440cAe8EB6328de4fA621163a792c1EA9D4fE"
+REACT_APP_L2_WETH_GATEWAY_PROXY_ADDR = "0x7003E7B7186f0E6601203b99F7B8DECBfA391cf9"
+REACT_APP_L1_CUSTOM_ERC20_GATEWAY_PROXY_ADDR = "0xb2b10a289A229415a124EFDeF310C10cb004B6ff"
+REACT_APP_L2_CUSTOM_ERC20_GATEWAY_PROXY_ADDR = "0x64CCBE37c9A82D85A1F2E74649b7A42923067988"
+REACT_APP_L1_USDC_GATEWAY_PROXY_ADDR = "0xf1AF3b23DE0A5Ca3CAb7261cb0061C0D779A5c7B"
+REACT_APP_L2_USDC_GATEWAY_PROXY_ADDR = "0x33B60d5Dd260d453cAC3782b0bDC01ce84672142"
+REACT_APP_L1_DAI_GATEWAY_PROXY_ADDR = "0x67260A8B73C5B77B55c1805218A42A7A6F98F515"
+REACT_APP_L2_DAI_GATEWAY_PROXY_ADDR = "0xaC78dff3A87b5b534e366A93E785a0ce8fA6Cc62"
+REACT_APP_L1_LIDO_GATEWAY_PROXY_ADDR = "0x6625C6332c9F91F2D27c304E729B86db87A3f504"
+REACT_APP_L2_LIDO_GATEWAY_PROXY_ADDR = "0x8aE8f22226B9d789A36AC81474e633f8bE2856c9"
+REACT_APP_L1_STANDARD_ERC20_GATEWAY_PROXY_ADDR = "0xD8A791fE2bE73eb6E6cF1eb0cb3F36adC9B3F8f9"
+REACT_APP_L2_STANDARD_ERC20_GATEWAY_PROXY_ADDR = "0xE2b4795039517653c5Ae8C2A9BFdd783b48f447A"
+REACT_APP_L1_SCROLL_MESSENGER = "0x6774Bcbd5ceCeF1336b5300fb5186a12DDD8b367"
+REACT_APP_L2_SCROLL_MESSENGER = "0x781e90f1c8Fc4611c9b7497C3B47F99Ef6969CbC"
+REACT_APP_L1_GATEWAY_ROUTER_PROXY_ADDR = "0xF8B1378579659D8F7EE5f3C929c2f3E332E41Fd6"
+REACT_APP_L2_GATEWAY_ROUTER_PROXY_ADDR = "0x4C0926FF5252A435FD19e10ED15e5a249Ba19d79"
+REACT_APP_L1_GAS_PRICE_ORACLE = "0x5300000000000000000000000000000000000002"
+REACT_APP_L2_GAS_PRICE_ORACLE = "0x987e300fDfb06093859358522a79098848C33852"
+REACT_APP_SCROLL_CHAIN = "0xa13BAF47339d63B743e7Da8741db5456DAc1E556"
+REACT_APP_L1_MESSAGE_QUEUE = "0x0d7E906BD9cAFa154b048cFa766Cc1E54E39AF9B"
+
 [context.sepolia.environment]
 REACT_APP_SCROLL_ENVIRONMENT = "Sepolia"
 REACT_APP_API_BASE_URI = "https://sepolia-api.scroll.io"
diff --git a/public/favicon_new.ico b/public/favicon_new.ico
index 00c69ea55..756e7314f 100644
Binary files a/public/favicon_new.ico and b/public/favicon_new.ico differ
diff --git a/public/logo.png b/public/logo.png
index b6291d994..7c84b4785 100644
Binary files a/public/logo.png and b/public/logo.png differ
diff --git a/src/Homepage.tsx b/src/Homepage.tsx
index 86e5580b9..b5b056fc1 100644
--- a/src/Homepage.tsx
+++ b/src/Homepage.tsx
@@ -8,7 +8,6 @@ import ScrollToTop from "@/hooks/useScrollToTop"
 import NotFound from "@/pages/404"
 import { isSepolia, requireEnv } from "@/utils"
 
-import AppWrapper from "./contexts"
 import useMatchedRoute from "./hooks/useMatchedRoute"
 import routes from "./routes"
 
@@ -42,18 +41,16 @@ function Homepage() {
         <meta name="twitter:image" content={getImageUrl("twitter")} />
       </Helmet>
       <RainbowProvider>
-        <AppWrapper>
-          <ScrollToTop>
-            <Header />
-            <Routes>
-              {routes.map((route, key) => (
-                <Route key={key} path={route.path} element={route.element} />
-              ))}
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-            {isSepolia ? null : <Footer />}
-          </ScrollToTop>
-        </AppWrapper>
+        <ScrollToTop>
+          <Header />
+          <Routes>
+            {routes.map((route, key) => (
+              <Route key={key} path={route.path} element={route.element} />
+            ))}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+          {isSepolia ? null : <Footer />}
+        </ScrollToTop>
       </RainbowProvider>
     </div>
   )
diff --git a/src/assets/svgs/refactor/bridge-alert-error.svg b/src/assets/svgs/refactor/bridge-alert-error.svg
new file mode 100644
index 000000000..1a73ea90f
--- /dev/null
+++ b/src/assets/svgs/refactor/bridge-alert-error.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 27.5C22.35 27.5 27.5 22.35 27.5 16C27.5 9.65 22.35 4.5 16 4.5C9.65 4.5 4.5 9.65 4.5 16C4.5 22.35 9.65 27.5 16 27.5ZM16 30C23.73 30 30 23.73 30 16C30 8.27 23.73 2 16 2C8.27 2 2 8.27 2 16C2 23.73 8.27 30 16 30Z" fill="#FF684B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 13.12C16.69 13.12 17.25 13.68 17.25 14.37V22.37C17.25 23.06 16.69 23.62 16 23.62C15.31 23.62 14.75 23.06 14.75 22.37V14.37C14.75 13.68 15.31 13.12 16 13.12Z" fill="#FF684B"/>
+<path d="M16 10.87C16.6904 10.87 17.25 10.3104 17.25 9.62C17.25 8.92964 16.6904 8.37 16 8.37C15.3096 8.37 14.75 8.92964 14.75 9.62C14.75 10.3104 15.3096 10.87 16 10.87Z" fill="#FF684B"/>
+</svg>
diff --git a/src/assets/svgs/refactor/bridge-alert-success.svg b/src/assets/svgs/refactor/bridge-alert-success.svg
new file mode 100644
index 000000000..a52069ad3
--- /dev/null
+++ b/src/assets/svgs/refactor/bridge-alert-success.svg
@@ -0,0 +1,4 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16.5" cy="16" r="13" stroke="#0F8E7E" stroke-width="2" fill="none"/>
+<path d="M11.5 17L14.5 20L21.5 13" stroke="#0F8E7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/src/assets/svgs/refactor/bridge-empty.svg b/src/assets/svgs/refactor/bridge-empty.svg
new file mode 100644
index 000000000..23e732af7
--- /dev/null
+++ b/src/assets/svgs/refactor/bridge-empty.svg
@@ -0,0 +1,8 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 16.7551V25.9388L16.5 29L27.5 25.9388V16.7551M5.5 16.7551L16.5 19.7692L19.8846 18.9038M5.5 16.7551L16.5 14L27.5 16.7551M27.5 16.7551L22 18.3269" stroke="#5B5B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<line x1="16.5" y1="20" x2="16.5" y2="29" stroke="#5B5B4B" stroke-width="2" fill="none"/>
+<rect x="6.5" y="6" width="8" height="3" rx="1.5" stroke="#5B5B4B" stroke-width="2" fill="none"/>
+<path d="M9.66795 4.4453L8.63148 6H10.5H12.5H13.5V5C13.5 4.73591 13.4524 4.32603 13.2682 3.94227C13.0728 3.53526 12.6253 3 11.8333 3C11.1883 3 10.6739 3.37611 10.3927 3.62134C10.0752 3.89823 9.81874 4.21911 9.66795 4.4453Z" stroke="#5B5B4B" stroke-width="2" fill="none"/>
+<path d="M9.66795 10.5547L8.63148 9H10.5H12.5H13.5V10C13.5 10.2641 13.4524 10.674 13.2682 11.0577C13.0728 11.4647 12.6253 12 11.8333 12C11.1883 12 10.6739 11.6239 10.3927 11.3787C10.0752 11.1018 9.81874 10.7809 9.66795 10.5547Z" stroke="#5B5B4B" stroke-width="2" fill="none"/>
+<path d="M17.5 6H23.7C24.5 6 26.5 6 26.5 8C26.5 10 26 10 23.7 10C21.4 10 17.5 9 17.5 14" stroke="#5B5B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 4" fill="none"/>
+</svg>
diff --git a/src/assets/svgs/refactor/bridge-external-ink.svg b/src/assets/svgs/refactor/bridge-external-ink.svg
new file mode 100644
index 000000000..24c874b42
--- /dev/null
+++ b/src/assets/svgs/refactor/bridge-external-ink.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
+  <g clipPath="url(#clip0_4136_4325)">
+    <path
+      d="M8 0V6.10256L6.96722 5.06977V1.74565C4.85745 3.79488 2.92927 6.02666 0.758977 8L0 7.25639C2.15588 5.28305 4.06773 3.08202 6.16308 1.0472H2.94464L1.89744 0H8Z"
+      fill="#6D6D6D"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_4136_4325">
+      <rect width="8" height="8" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svgs/refactor/bridge-history-disconnected.svg b/src/assets/svgs/refactor/bridge-history-disconnected.svg
new file mode 100644
index 000000000..f03b882a9
--- /dev/null
+++ b/src/assets/svgs/refactor/bridge-history-disconnected.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.0286 17.686C24.5934 18.121 23.8917 18.121 23.4565 17.686C23.2433 17.4729 23.1278 17.1976 23.1278 16.8958C23.1278 16.5939 23.2433 16.3187 23.4565 16.1056L25.2595 14.3033C27.2758 12.2879 27.2758 8.8786 25.2595 6.86321L25.1263 6.73003C23.1101 4.71464 19.6994 4.72352 17.6832 6.73003L15.8801 8.54122C15.4449 8.97626 14.7432 8.97626 14.308 8.54122C14.0948 8.32814 13.9793 8.05291 13.9793 7.75105C13.9793 7.45806 14.0948 7.17395 14.308 6.96087L16.111 5.15856C18.9888 2.28196 23.8384 2.28196 26.7073 5.14968L26.8405 5.28286C29.7183 8.15057 29.7183 12.9982 26.8494 15.8748L25.0464 17.6771L25.0286 17.686Z" fill="#5B5B5B"/>
+<path d="M15.8801 26.8484C13.0112 29.7162 8.16159 29.7162 5.29268 26.8484L5.15945 26.7153C2.28167 23.8476 2.28167 19 5.15057 16.1234L6.95363 14.321C7.38885 13.886 8.09053 13.886 8.52575 14.321C8.96097 14.7561 8.96097 15.4575 8.52575 15.8925L6.72269 17.6948C4.70647 19.7191 4.70647 23.1195 6.72269 25.1349L6.85592 25.2681C8.87215 27.2835 12.2829 27.2746 14.2991 25.2681L16.1021 23.4569C16.5374 23.0219 17.239 23.0219 17.6743 23.4569C17.8874 23.67 18.0029 23.9452 18.0029 24.2471C18.0029 24.5401 17.8874 24.8242 17.6743 25.0373L15.8623 26.8484H15.8801Z" fill="#5B5B5B"/>
+<path d="M24.1315 24.1228C23.6963 24.5578 22.9946 24.5578 22.5594 24.1228L7.85071 9.45569C7.63754 9.24261 7.52208 8.96738 7.52208 8.66552C7.52208 8.37253 7.63754 8.08842 7.85071 7.87534C8.28593 7.4403 8.98762 7.4403 9.42284 7.87534L24.1315 22.5424C24.3447 22.7555 24.4602 23.0307 24.4602 23.3326C24.4602 23.6256 24.3447 23.9097 24.1315 24.1228Z" fill="#5B5B5B"/>
+</svg>
diff --git a/src/assets/svgs/refactor/bridge-info.svg b/src/assets/svgs/refactor/bridge-info.svg
new file mode 100644
index 000000000..07b199691
--- /dev/null
+++ b/src/assets/svgs/refactor/bridge-info.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 13.1797C10.5242 13.1797 13.1797 10.5242 13.1797 7.25C13.1797 3.97578 10.5242 1.32031 7.25 1.32031C3.97578 1.32031 1.32031 3.97578 1.32031 7.25C1.32031 10.5242 3.97578 13.1797 7.25 13.1797ZM7.25 14.4688C11.2358 14.4688 14.4688 11.2358 14.4688 7.25C14.4688 3.26422 11.2358 0.03125 7.25 0.03125C3.26422 0.03125 0.03125 3.26422 0.03125 7.25C0.03125 11.2358 3.26422 14.4688 7.25 14.4688Z" fill="#FF664D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 5.765C7.60578 5.765 7.89453 6.05375 7.89453 6.40953V10.5345C7.89453 10.8903 7.60578 11.1791 7.25 11.1791C6.89422 11.1791 6.60547 10.8903 6.60547 10.5345V6.40953C6.60547 6.05375 6.89422 5.765 7.25 5.765Z" fill="#FF664D"/>
+<path d="M7.25 4.60484C7.60596 4.60484 7.89453 4.31628 7.89453 3.96031C7.89453 3.60435 7.60596 3.31578 7.25 3.31578C6.89404 3.31578 6.60547 3.60435 6.60547 3.96031C6.60547 4.31628 6.89404 4.60484 7.25 4.60484Z" fill="#FF664D"/>
+</svg>
diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx
new file mode 100644
index 000000000..a0829382f
--- /dev/null
+++ b/src/components/Alert/index.tsx
@@ -0,0 +1,58 @@
+import { makeStyles } from "tss-react/mui"
+
+import { Alert as MuiAlert, SvgIcon } from "@mui/material"
+
+import { ReactComponent as ErrorSvg } from "@/assets/svgs/refactor/bridge-alert-error.svg"
+import { ReactComponent as SuccessSvg } from "@/assets/svgs/refactor/bridge-alert-success.svg"
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    borderRadius: "1rem",
+    padding: "1.2rem 1.6rem",
+  },
+  standardError: {
+    backgroundColor: "#FFE1DB",
+    color: "#FF684B",
+    fontWeight: 600,
+  },
+  standardSuccess: {
+    backgroundColor: "#DFFCF8",
+    color: "#0F8E7E",
+    fontWeight: 600,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  message: {
+    fontFamily: "var(--onboard-font-family-normal) !important",
+    lineHeight: 1.5,
+    fontWeight: 600,
+  },
+}))
+
+const Alert = props => {
+  const { children, ...restProps } = props
+
+  const { classes } = useStyles()
+
+  return (
+    <MuiAlert
+      iconMapping={{
+        success: <SvgIcon sx={{ fontSize: "3.2rem" }} component={SuccessSvg} inheritViewBox></SvgIcon>,
+        error: <SvgIcon sx={{ fontSize: "3.2rem" }} component={ErrorSvg} inheritViewBox></SvgIcon>,
+      }}
+      classes={{
+        root: classes.root,
+        icon: classes.icon,
+        standardError: classes.standardError,
+        standardSuccess: classes.standardSuccess,
+        message: classes.message,
+      }}
+      {...restProps}
+    >
+      {children}
+    </MuiAlert>
+  )
+}
+
+export default Alert
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1ff78782f..1c485a466 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,7 +1,7 @@
 import { motion, useCycle } from "framer-motion"
 import { makeStyles } from "tss-react/mui"
 
-import { ButtonBase, CircularProgress, IconButton, SvgIcon } from "@mui/material"
+import { ButtonBase, CircularProgress, IconButton, SvgIcon, alpha } from "@mui/material"
 
 import { ReactComponent as ArrowRightIcon } from "@/assets/svgs/refactor/arrow-right.svg"
 import useCheckViewport from "@/hooks/useCheckViewport"
@@ -51,7 +51,7 @@ const useStyles = makeStyles<any>()((theme, { width, color, disabled, loading, w
     paddingRight: "2rem",
     border: "unset",
     gap: "0.4em",
-    color: "#0F8E7E",
+    color: theme.palette.primary.contrastText,
   },
   active: {
     color: theme.palette.primary.contrastText,
@@ -68,7 +68,7 @@ const useStyles = makeStyles<any>()((theme, { width, color, disabled, loading, w
   },
   maskLoading: {
     width: "100% !important",
-    backgroundColor: "#DFFCF8",
+    backgroundColor: alpha(theme.palette.primary.main, 0.6),
   },
   maskDisabled: {
     backgroundColor: "#EBC28E",
@@ -145,7 +145,7 @@ const Button = props => {
         disabled={disabled || gloomy || loading}
         {...restProps}
       >
-        {children} {loading && <CircularProgress sx={{ color: "#0F8E7E" }} size={isMobile ? 18 : 24} thickness={4}></CircularProgress>}
+        {children} {loading && <CircularProgress sx={{ color: "inherit" }} size={isMobile ? 18 : 24} thickness={4}></CircularProgress>}
       </ButtonBase>
     </motion.div>
   )
diff --git a/src/components/GlobalComponents/index.tsx b/src/components/GlobalComponents/index.tsx
new file mode 100644
index 000000000..d8dee00b6
--- /dev/null
+++ b/src/components/GlobalComponents/index.tsx
@@ -0,0 +1,11 @@
+import TxHistoryDialog from "@/pages/new-bridge/TxHistoryDialog"
+
+const GlobalComponents = () => {
+  return (
+    <>
+      <TxHistoryDialog></TxHistoryDialog>
+    </>
+  )
+}
+
+export default GlobalComponents
diff --git a/src/components/GlobalWarning/index.tsx b/src/components/GlobalWarning/index.tsx
deleted file mode 100644
index 800b29504..000000000
--- a/src/components/GlobalWarning/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Alert, Snackbar } from "@mui/material"
-
-import { RPC_URL } from "@/constants"
-import useBlockNumbers from "@/hooks/useBlockNumbers"
-
-const GlobalWarning = () => {
-  const { isL1Available, isL2Available } = useBlockNumbers()
-
-  return (
-    <>
-      {!isL1Available && (
-        <Snackbar open={true}>
-          <Alert severity="error">{RPC_URL.L1} is not available, please wait...</Alert>
-        </Snackbar>
-      )}
-      {!isL2Available && (
-        <Snackbar open={true}>
-          <Alert severity="error">{RPC_URL.L2} is not available, please wait...</Alert>
-        </Snackbar>
-      )}
-    </>
-  )
-}
-
-export default GlobalWarning
diff --git a/src/components/TextButton/index.tsx b/src/components/TextButton/index.tsx
index ec76d60a5..a3f4281db 100644
--- a/src/components/TextButton/index.tsx
+++ b/src/components/TextButton/index.tsx
@@ -1,7 +1,7 @@
 import Link from "@/components/Link"
 
 const TextButton = props => {
-  const { sx, children, ...restProps } = props
+  const { sx, underline = "hover", children, ...restProps } = props
   return (
     <Link
       component="button"
@@ -10,7 +10,7 @@ const TextButton = props => {
         verticalAlign: "baseline",
         ...sx,
       }}
-      underline="hover"
+      underline={underline}
       {...restProps}
     >
       {children}
diff --git a/src/components/WalletToolkit/NetworkSelect.tsx b/src/components/WalletToolkit/NetworkSelect.tsx
index ba1637941..c92612011 100644
--- a/src/components/WalletToolkit/NetworkSelect.tsx
+++ b/src/components/WalletToolkit/NetworkSelect.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles<any>()((theme, { dark }) => ({
     color: "#F1F0F0",
   },
   paper: {
-    marginTop: "0.6rem",
+    marginTop: "0.5rem",
     borderRadius: "0.5rem",
     border: dark ? `1px solid ${theme.palette.primary.contrastText}` : "none",
     backgroundColor: dark ? theme.palette.themeBackground.dark : theme.palette.themeBackground.normal,
diff --git a/src/components/WalletToolkit/WalletDropdown.tsx b/src/components/WalletToolkit/WalletDropdown.tsx
index 38d2e7db0..14853f855 100644
--- a/src/components/WalletToolkit/WalletDropdown.tsx
+++ b/src/components/WalletToolkit/WalletDropdown.tsx
@@ -1,16 +1,19 @@
 import copy from "copy-to-clipboard"
 import { useCallback, useMemo, useState } from "react"
+import { useLocation } from "react-router-dom"
 import { makeStyles } from "tss-react/mui"
 
 import { ButtonBase, Fade, ListItemIcon, ListItemText, Menu, MenuItem, SvgIcon } from "@mui/material"
 
 import { ReactComponent as CopySuccessSvg } from "@/assets/svgs/refactor/bridge-copy-success.svg"
+import { ReactComponent as HistorySvg } from "@/assets/svgs/refactor/bridge-history.svg"
 import { ReactComponent as BlockSvg } from "@/assets/svgs/refactor/wallet-connector-block.svg"
 import { ReactComponent as CopySvg } from "@/assets/svgs/refactor/wallet-connector-copy.svg"
 import { ReactComponent as DisconnectSvg } from "@/assets/svgs/refactor/wallet-connector-disconnect.svg"
 import { ReactComponent as DownTriangleSvg } from "@/assets/svgs/refactor/wallet-connector-down-triangle.svg"
 import { CHAIN_ID, EXPLORER_URL } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
+import useBridgeStore from "@/stores/bridgeStore"
 import { generateExploreLink, truncateAddress } from "@/utils"
 
 const useStyles = makeStyles<any>()((theme, { dark }) => ({
@@ -25,10 +28,7 @@ const useStyles = makeStyles<any>()((theme, { dark }) => ({
     color: dark ? theme.palette.primary.contrastText : "#473835",
     whiteSpace: "nowrap",
   },
-  openButton: {
-    borderRadius: "0.5rem 0.5rem 0 0",
-    borderBottomColor: "transparent",
-  },
+
   connectButton: {
     fontFamily: "var(--onboard-font-family-normal)",
     backgroundColor: "#FF684B",
@@ -77,18 +77,18 @@ const useStyles = makeStyles<any>()((theme, { dark }) => ({
 const WalletDropdown = props => {
   const { sx, dark } = props
   const { classes, cx } = useStyles({ dark })
+  const { pathname } = useLocation()
 
   const { walletCurrentAddress, connect, disconnect, chainId } = useRainbowContext()
+  const { changeHistoryVisible } = useBridgeStore()
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const [anchorWidth, setAnchorWidth] = useState(0)
   const [copied, setCopied] = useState(false)
 
   const open = useMemo(() => Boolean(anchorEl), [anchorEl])
 
   const handleClick = e => {
     setAnchorEl(e.currentTarget)
-    setAnchorWidth(e.currentTarget.offsetWidth)
   }
 
   const handleClose = () => {
@@ -107,6 +107,14 @@ const WalletDropdown = props => {
 
   const operations = useMemo(
     () => [
+      {
+        icon: HistorySvg,
+        label: "Transaction history",
+        action: () => {
+          changeHistoryVisible(true)
+          handleClose()
+        },
+      },
       {
         icon: BlockSvg,
         label: "Block explorer",
@@ -122,7 +130,7 @@ const WalletDropdown = props => {
         },
       },
     ],
-    [viewScan, copyAddress, copied, disconnect],
+    [pathname, viewScan, copyAddress, copied, disconnect],
   )
 
   return (
@@ -143,7 +151,14 @@ const WalletDropdown = props => {
         open={open}
         onClose={handleClose}
         TransitionComponent={Fade}
-        sx={{ ".MuiMenu-paper": { width: anchorWidth } }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
         classes={{ paper: classes.paper, list: classes.list }}
       >
         {operations.map(({ icon, label, action }) => (
diff --git a/src/components/WalletToolkit/index.tsx b/src/components/WalletToolkit/index.tsx
index 7e533670c..094a3f1a9 100644
--- a/src/components/WalletToolkit/index.tsx
+++ b/src/components/WalletToolkit/index.tsx
@@ -1,24 +1,19 @@
-import { useLocation } from "react-router-dom"
-
 import { Stack } from "@mui/material"
 
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
-import BridgeHistoryButton from "./BridgeHistoryButton"
 import NetworkIndicator from "./NetworkSelect"
 import WalletDropdown from "./WalletDropdown"
 
 const WalletToolkit = props => {
   const { dark } = props
-  const { pathname } = useLocation()
   const { isMobile } = useCheckViewport()
   const { chainId } = useRainbowContext()
 
   return (
     <Stack direction="row" spacing="0.8rem">
       {chainId && !isMobile && <NetworkIndicator dark={dark}></NetworkIndicator>}
-      {chainId && pathname === "/bridge" && <BridgeHistoryButton></BridgeHistoryButton>}
       <WalletDropdown dark={dark}></WalletDropdown>
     </Stack>
   )
diff --git a/src/constants/networks.ts b/src/constants/networks.ts
index 50fc15979..569a91c8a 100644
--- a/src/constants/networks.ts
+++ b/src/constants/networks.ts
@@ -8,7 +8,6 @@ export const NETWORKS: Network[] = [
   {
     name: L1_NAME,
     slug: "layer1",
-    imageUrl: "/imgs/bridge/mainnet.svg",
     icon: MainnetSvg,
     rpcUrl: RPC_URL.L1,
     explorer: EXPLORER_URL.L1,
@@ -19,7 +18,6 @@ export const NETWORKS: Network[] = [
   {
     name: L2_NAME,
     slug: "layer2",
-    imageUrl: "/logo.png",
     icon: ScrollSvg,
     rpcUrl: RPC_URL.L2,
     explorer: EXPLORER_URL.L2,
diff --git a/src/constants/transaction.ts b/src/constants/transaction.ts
index 11591b6e7..c5d54a9b6 100644
--- a/src/constants/transaction.ts
+++ b/src/constants/transaction.ts
@@ -2,6 +2,8 @@ export const WAIT_CONFIRMATIONS = 10
 
 export const BRIDGE_PAGE_SIZE = 3
 
+export const CLAIM_TABEL_PAGE_SIZE = 5
+
 export const MAX_CACHE_NUMBER = 18
 
 export enum TX_STATUS {
diff --git a/src/contexts/AppContextProvider.tsx b/src/contexts/BridgeContextProvider.tsx
similarity index 84%
rename from src/contexts/AppContextProvider.tsx
rename to src/contexts/BridgeContextProvider.tsx
index 9ad7de42a..0ba65c20f 100644
--- a/src/contexts/AppContextProvider.tsx
+++ b/src/contexts/BridgeContextProvider.tsx
@@ -11,11 +11,12 @@ import L2_GATEWAY_ROUTER_PROXY_ABI from "@/assets/abis/L2_GATEWAY_ROUTER_PROXY_A
 import { CHAIN_ID, ETH_SYMBOL, GATEWAY_ROUTE_PROXY_ADDR, NATIVE_TOKEN_LIST, RPC_URL } from "@/constants"
 import { BLOCK_NUMBERS, BRIDGE_TOKEN_SYMBOL, USER_TOKEN_LIST } from "@/constants/storageKey"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
+import useBlockNumbers from "@/hooks/useBlockNumbers"
 import useClaim from "@/hooks/useClaim"
 import useTxHistory, { TxHistory } from "@/hooks/useTxHistory"
 import { loadState } from "@/utils/localStorage"
 
-type AppContextProps = {
+type BridgeContextProps = {
   networksAndSigners: any
   txHistory: TxHistory
   blockNumbers: number[]
@@ -24,10 +25,12 @@ type AppContextProps = {
   refreshTokenList: () => void
 }
 
-const AppContext = createContext<AppContextProps | undefined>(undefined)
+const BridgeContext = createContext<BridgeContextProps | undefined>(undefined)
 
-const AppContextProvider = ({ children }: any) => {
+const BridgeContextProvider = ({ children }: any) => {
   const { provider, walletCurrentAddress, chainId } = useRainbowContext()
+  const { isL1Available, isL2Available } = useBlockNumbers()
+
   const [tokenSymbol, setTokenSymbol] = useStorage(localStorage, BRIDGE_TOKEN_SYMBOL, ETH_SYMBOL)
   const [blockNumbers] = useStorage(localStorage, BLOCK_NUMBERS, [-1, -1])
 
@@ -38,7 +41,7 @@ const AppContextProvider = ({ children }: any) => {
 
   const [fetchTokenListError, setFetchTokenListError] = useState("")
 
-  const txHistory = useTxHistory(networksAndSigners)
+  const txHistory = useTxHistory()
   const claim = useClaim()
 
   // TODO: need refactoring inspired by publicClient and walletClient
@@ -139,7 +142,7 @@ const AppContextProvider = ({ children }: any) => {
   }
 
   return (
-    <AppContext.Provider
+    <BridgeContext.Provider
       value={{
         networksAndSigners,
         txHistory,
@@ -156,16 +159,30 @@ const AppContextProvider = ({ children }: any) => {
           {fetchTokenListError}
         </Alert>
       </Snackbar>
-    </AppContext.Provider>
+      {!isL1Available && (
+        <Snackbar open={true}>
+          <Alert severity="error" key="l1">
+            {RPC_URL.L1} is not available, please wait...
+          </Alert>
+        </Snackbar>
+      )}
+      {!isL2Available && (
+        <Snackbar open={true}>
+          <Alert severity="error" key="l2">
+            {RPC_URL.L2} is not available, please wait...
+          </Alert>
+        </Snackbar>
+      )}
+    </BridgeContext.Provider>
   )
 }
 
-export function useApp() {
-  const ctx = useContext(AppContext)
+export function useBrigeContext() {
+  const ctx = useContext(BridgeContext)
   if (!ctx) {
-    throw new Error("useApp must be used within AppProvider")
+    throw new Error("useBrigeContext must be used within BridgeContextProvider")
   }
   return ctx
 }
 
-export default AppContextProvider
+export default BridgeContextProvider
diff --git a/src/contexts/PriceFeeProvider.tsx b/src/contexts/PriceFeeProvider.tsx
index b509fcbd4..c09a84d34 100644
--- a/src/contexts/PriceFeeProvider.tsx
+++ b/src/contexts/PriceFeeProvider.tsx
@@ -5,9 +5,9 @@ import { useBlockNumber } from "wagmi"
 
 import { CHAIN_ID, ETH_SYMBOL } from "@/constants"
 import { BRIDGE_TOKEN_SYMBOL } from "@/constants/storageKey"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
-import { requireEnv } from "@/utils"
+import { requireEnv, trimErrorMessage } from "@/utils"
 
 const OFFSET = "0x1111000000000000000000000000000000001111"
 const amount = BigInt(1)
@@ -98,7 +98,7 @@ export const usePriceFeeContext = () => {
 export const PriceFeeProvider = ({ children }) => {
   const { walletCurrentAddress, chainId } = useRainbowContext()
   const [tokenSymbol] = useStorage(localStorage, BRIDGE_TOKEN_SYMBOL, ETH_SYMBOL)
-  const { networksAndSigners, tokenList } = useApp()
+  const { networksAndSigners, tokenList } = useBrigeContext()
   const [gasLimit, setGasLimit] = useState(BigInt(0))
   const [gasPrice, setGasPrice] = useState(BigInt(0))
   const [errorMessage, setErrorMessage] = useState("")
@@ -129,7 +129,10 @@ export const PriceFeeProvider = ({ children }) => {
           setErrorMessage("")
         })
         .catch(error => {
-          setErrorMessage(error.message)
+          //TODO:
+          // setGasLimit(null)
+          // setGasPrice(null)
+          setErrorMessage(trimErrorMessage(error.message))
         })
     },
   })
@@ -146,7 +149,7 @@ export const PriceFeeProvider = ({ children }) => {
 
   const getGasPrice = async () => {
     try {
-      const L2GasPriceOracleContract = getContract("L2_GAS_PRICE_ORACLE", networksAndSigners[CHAIN_ID.L1].signer)
+      const L2GasPriceOracleContract = getContract("L2_GAS_PRICE_ORACLE", networksAndSigners[CHAIN_ID.L1].provider)
       const gasPrice = await L2GasPriceOracleContract.l2BaseFee()
       return (gasPrice * BigInt(120)) / BigInt(100)
     } catch (err) {
@@ -156,22 +159,21 @@ export const PriceFeeProvider = ({ children }) => {
   }
 
   const getGasLimit = async () => {
-    if (l2Token.symbol !== ETH_SYMBOL) {
-      const { provider } = networksAndSigners[CHAIN_ID.L2]
-      const code = await provider.getCode((l2Token as ERC20Token).address)
-      // This address does not have a contract deployed.
-      if (code === "0x") {
-        return BigInt(7e5)
-      }
-    }
     if (l2Token.symbol === ETH_SYMBOL) {
       return await getGasLimitGeneric(requireEnv(`REACT_APP_L1_ETH_GATEWAY_PROXY_ADDR`))
-    } else {
-      // fetch gateway address from router.getERC20Gateway((l1Token as ERC20Token).address)
-      const gatewayRouter = getContract("L1_GATEWAY_ROUTER_PROXY", networksAndSigners[CHAIN_ID.L1].provider)
-      const gatewayAddress = await gatewayRouter.getERC20Gateway((l1Token as ERC20Token).address)
-      return await getGasLimitGeneric(gatewayAddress)
     }
+
+    const { provider } = networksAndSigners[CHAIN_ID.L2]
+    const code = await provider.getCode((l2Token as ERC20Token).address)
+    // This address does not have a contract deployed.
+    if (code === "0x") {
+      return BigInt(7e5)
+    }
+
+    // fetch gateway address from router.getERC20Gateway((l1Token as ERC20Token).address)
+    const gatewayRouter = getContract("L1_GATEWAY_ROUTER_PROXY", networksAndSigners[CHAIN_ID.L1].provider)
+    const gatewayAddress = await gatewayRouter.getERC20Gateway((l1Token as ERC20Token).address)
+    return await getGasLimitGeneric(gatewayAddress)
   }
 
   const messageDataGeneric = gatewayAddress => {
diff --git a/src/contexts/Web3ContextProvider.tsx b/src/contexts/Web3ContextProvider.tsx
deleted file mode 100644
index e3dea0827..000000000
--- a/src/contexts/Web3ContextProvider.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-// TODO: remove later
-import injectedModule from "@web3-onboard/injected-wallets"
-import { init, useConnectWallet, useSetChain, useWallets } from "@web3-onboard/react"
-import { ethers, getAddress } from "ethers"
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
-
-import { NETWORKS } from "@/constants"
-import { CONNECTED_WALLETS as cacheKey } from "@/constants/storageKey"
-import useTxStore from "@/stores/txStore"
-import { convertHexadecimal, toHexadecimal } from "@/utils"
-import { loadState, saveState } from "@/utils/localStorage"
-import logger from "@/utils/logger"
-
-type Props = {
-  onboard: any
-  provider: ethers.BrowserProvider | undefined
-  walletCurrentAddress?: string
-  balance?: bigint
-  chainId?: number
-  connectWallet: () => void
-  disconnectWallet: () => void
-  walletName: string | undefined
-  checkConnectedChainId: (chainId: number) => boolean
-}
-
-const Web3Context = createContext<Props | undefined>(undefined)
-
-const injected = injectedModule()
-
-// const INFURA_ID = "84842078b09946638c03157f83405213";
-
-const web3Onboard = init({
-  wallets: [injected],
-  chains: NETWORKS.map(({ chainId, nativeTokenSymbol, name, rpcUrl, imageUrl }) => ({
-    id: toHexadecimal(chainId),
-    token: nativeTokenSymbol as string,
-    label: name,
-    rpcUrl: rpcUrl as string,
-  })),
-  appMetadata: {
-    name: "Scroll",
-    icon: "/logo.svg",
-    description: "Scroll Portal",
-    recommendedInjectedWallets: [
-      { name: "MetaMask", url: "https://metamask.io" },
-      { name: "BlockWallet", url: "https://blockwallet.io" },
-    ],
-  },
-  // i18n: {
-  //   en: {
-  //     connect: {
-  //       selectingWallet: {
-  //         header: "select Wallet",
-  //       },
-  //     },
-  //   },
-  // },
-  connect: {
-    showSidebar: false,
-  },
-  accountCenter: {
-    desktop: {
-      enabled: false,
-    },
-    mobile: {
-      enabled: false,
-    },
-  },
-})
-
-const Web3ContextProvider = ({ children }: any) => {
-  const [provider, setProvider] = useState<ethers.BrowserProvider | undefined>()
-  const [walletConnected, setWalletConnected] = useState(false)
-
-  const [onboard, setOnboard] = useState<any>(null)
-
-  const [{ wallet }, connect, disconnect] = useConnectWallet()
-  const [{ connectedChain }] = useSetChain()
-  const connectedWallets = useWallets()
-
-  const { clearTransactions } = useTxStore()
-
-  const checkWalletConnected = async () => {
-    if (typeof window.ethereum !== "undefined") {
-      const provider = new ethers.BrowserProvider(window.ethereum, "any")
-      try {
-        const accounts = await provider.listAccounts()
-        if (accounts.length > 0) {
-          setWalletConnected(true)
-        } else {
-          setWalletConnected(false)
-        }
-      } catch (err) {
-        setWalletConnected(false)
-      }
-    } else {
-      setWalletConnected(false)
-    }
-  }
-
-  useEffect(() => {
-    checkWalletConnected()
-    setOnboard(web3Onboard)
-  }, [])
-
-  useEffect(() => {
-    if (!connectedWallets.length) return
-
-    const connectedWalletsLabelArray = connectedWallets.map(({ label }) => label)
-    saveState(cacheKey, connectedWalletsLabelArray)
-  }, [connectedWallets])
-
-  useEffect(() => {
-    if (!wallet?.provider) {
-      setProvider(undefined)
-    } else {
-      const ethersProvider = new ethers.BrowserProvider(wallet.provider, "any")
-      setProvider(ethersProvider)
-    }
-  }, [wallet])
-
-  useEffect(() => {
-    const previouslyConnectedWallets = loadState(cacheKey)
-    if (walletConnected && previouslyConnectedWallets?.length) {
-      const setWalletFromLocalStorage = async () => {
-        await connect({
-          autoSelect: {
-            label: previouslyConnectedWallets[0],
-            disableModals: true,
-          },
-        })
-      }
-      setWalletFromLocalStorage()
-    } else {
-      clearTransactions()
-    }
-  }, [onboard, connect, walletConnected])
-
-  const connectWallet = () => {
-    try {
-      clearTransactions()
-      connect()
-      setTimeout(() => {
-        let shadowRoot = (document as any).querySelector("onboard-v2").shadowRoot
-        let svgBox = shadowRoot.querySelector(".svg-box")
-        svgBox.style.display = "flex"
-        let noticeContainer = shadowRoot.querySelector(".notice-container")
-        noticeContainer.style.flex = "unset"
-      }, 0)
-    } catch (err) {
-      logger.error(err)
-    }
-  }
-
-  const disconnectWallet = () => {
-    try {
-      clearTransactions()
-      wallet && disconnect(wallet)
-      localStorage.removeItem("connectedWallets")
-    } catch (error) {
-      logger.error(error)
-    }
-  }
-
-  const checkConnectedChainId = useCallback(
-    (chainId: number): boolean => {
-      if (connectedChain && chainId === convertHexadecimal(connectedChain.id)) {
-        return true
-      }
-      return false
-    },
-    [connectedChain],
-  )
-
-  const walletCurrentAddress = useMemo(() => (wallet?.accounts[0]?.address ? getAddress(wallet.accounts[0].address) : undefined), [wallet])
-
-  return (
-    <Web3Context.Provider
-      value={{
-        onboard,
-        provider,
-        walletCurrentAddress,
-        chainId: connectedChain ? convertHexadecimal(connectedChain.id) : undefined,
-        connectWallet,
-        disconnectWallet,
-        walletName: wallet?.label,
-        checkConnectedChainId,
-      }}
-    >
-      {children}
-    </Web3Context.Provider>
-  )
-}
-
-export function useRainbowContext() {
-  const ctx = useContext(Web3Context)
-  if (ctx === undefined) {
-    throw new Error("useApp must be used within Web3Provider")
-  }
-  return ctx
-}
-
-export default Web3ContextProvider
diff --git a/src/contexts/index.tsx b/src/contexts/index.tsx
deleted file mode 100644
index e45dbbc78..000000000
--- a/src/contexts/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { createContext, useContext } from "react"
-
-import useTheme, { Theme } from "./useTheme"
-
-interface AppContextProps {
-  theme: Theme
-}
-
-const AppContext = createContext<AppContextProps | undefined>(undefined)
-
-const AppContextProvider = ({ children }: React.PropsWithChildren<{}>) => {
-  const theme = useTheme()
-
-  return (
-    <AppContext.Provider
-      value={{
-        theme,
-      }}
-    >
-      {children}
-    </AppContext.Provider>
-  )
-}
-
-export function useApp() {
-  const ctx = useContext(AppContext)
-  if (ctx === undefined) {
-    throw new Error("useApp must be used within AppProvider")
-  }
-  return ctx
-}
-
-export default AppContextProvider
diff --git a/src/contexts/useTheme.tsx b/src/contexts/useTheme.tsx
deleted file mode 100644
index 80730455a..000000000
--- a/src/contexts/useTheme.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { requireEnv } from "@/utils"
-
-export type Theme = {
-  prefixCls: string
-}
-
-const useTheme = (): Theme => {
-  return {
-    prefixCls: (requireEnv("REACT_APP_PREFIX_CLS") as string) || "scroll",
-  }
-}
-
-export default useTheme
diff --git a/src/hooks/useBalance.tsx b/src/hooks/useBalance.tsx
index 01e16c581..1bbeee80e 100644
--- a/src/hooks/useBalance.tsx
+++ b/src/hooks/useBalance.tsx
@@ -2,12 +2,12 @@ import { ethers } from "ethers"
 import useSWR from "swr"
 
 import L1_erc20ABI from "@/assets/abis/L1_erc20ABI.json"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 
 const useBalance = (token: any, network?: any) => {
   const { walletCurrentAddress } = useRainbowContext()
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
 
   async function fetchBalance({ provider, token, network, address }) {
     try {
diff --git a/src/hooks/useClaim.ts b/src/hooks/useClaim.ts
index 4032cf917..32adc12b6 100644
--- a/src/hooks/useClaim.ts
+++ b/src/hooks/useClaim.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"
 import useSWR from "swr"
 
 import { fetchTxByHashUrl } from "@/apis/bridge"
-import { BRIDGE_PAGE_SIZE } from "@/constants"
+import { CLAIM_TABEL_PAGE_SIZE } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useBridgeStore from "@/stores/bridgeStore"
 import useClaimStore from "@/stores/claimStore"
@@ -56,7 +56,7 @@ const useClaim = () => {
   const refreshPageTransactions = useCallback(
     page => {
       if (walletCurrentAddress) {
-        comboPageTransactions(walletCurrentAddress, page, BRIDGE_PAGE_SIZE).catch(e => {
+        comboPageTransactions(walletCurrentAddress, page, CLAIM_TABEL_PAGE_SIZE).catch(e => {
           setErrorMessage(e)
         })
       }
diff --git a/src/hooks/useSymbol.ts b/src/hooks/useSymbol.ts
index 6c8a412db..1cd57dffe 100644
--- a/src/hooks/useSymbol.ts
+++ b/src/hooks/useSymbol.ts
@@ -4,11 +4,11 @@ import useSWR from "swr"
 import L1_erc20ABI from "@/assets/abis/L1_erc20ABI.json"
 import { CHAIN_ID, ETH_SYMBOL } from "@/constants"
 import { TOKEN_SYMBOL_MAP_KEY } from "@/constants/storageKey"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { loadState, saveState } from "@/utils/localStorage"
 
 const useSymbol = (address: string, isL1: boolean) => {
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
   const { data, isLoading } = useSWR(
     () => {
       const provider = networksAndSigners[isL1 ? CHAIN_ID.L1 : CHAIN_ID.L2].provider
diff --git a/src/hooks/useTokenInfo.ts b/src/hooks/useTokenInfo.ts
index 7ac06931b..927574167 100644
--- a/src/hooks/useTokenInfo.ts
+++ b/src/hooks/useTokenInfo.ts
@@ -4,11 +4,11 @@ import useSWR from "swr"
 import L1_erc20ABI from "@/assets/abis/L1_erc20ABI.json"
 import { CHAIN_ID, ETH_SYMBOL } from "@/constants"
 import { TOKEN_INFO_MAP } from "@/constants/storageKey"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { loadState, saveState } from "@/utils/localStorage"
 
 const useTokenInfo = (address: string, isL1: boolean) => {
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
   const { data, isLoading } = useSWR(
     () => {
       const provider = networksAndSigners[isL1 ? CHAIN_ID.L1 : CHAIN_ID.L2].provider
diff --git a/src/hooks/useTxHistory.ts b/src/hooks/useTxHistory.ts
index 6a4fce388..41f7117ca 100644
--- a/src/hooks/useTxHistory.ts
+++ b/src/hooks/useTxHistory.ts
@@ -13,7 +13,7 @@ export interface TxHistory {
   changeErrorMessage: (value) => void
 }
 
-const useTxHistory = networksAndSigners => {
+const useTxHistory = () => {
   const { walletCurrentAddress } = useRainbowContext()
   const { pageTransactions, generateTransactions, comboPageTransactions, combineClaimableTransactions, orderedTxDB, clearTransactions } = useTxStore()
 
diff --git a/src/index.css b/src/index.css
index 76149ee17..7a1a59ef9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,12 +14,12 @@ object {
   vertical-align: middle;
 }
 
-@media screen and (max-width: 600px) {
+/* @media screen and (max-width: 600px) {
   body {
     overflow: auto !important;
     max-height: 100vh;
   }
-}
+} */
 html {
   scroll-padding-top: 140px;
 }
diff --git a/src/pages/bridge/Content.tsx b/src/pages/bridge/Content.tsx
index 140c3aa37..e3025ef7c 100644
--- a/src/pages/bridge/Content.tsx
+++ b/src/pages/bridge/Content.tsx
@@ -1,6 +1,6 @@
 import { Alert, Snackbar } from "@mui/material"
 
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { PriceFeeProvider } from "@/contexts/PriceFeeProvider"
 
 import Send from "./Send"
@@ -8,7 +8,7 @@ import Send from "./Send"
 const Content = () => {
   const {
     txHistory: { errorMessage, changeErrorMessage },
-  } = useApp()
+  } = useBrigeContext()
 
   const handleClose = () => {
     changeErrorMessage("")
diff --git a/src/pages/bridge/Header/TransactionHistory.tsx b/src/pages/bridge/Header/TransactionHistory.tsx
index 4f91ad772..bc356a349 100644
--- a/src/pages/bridge/Header/TransactionHistory.tsx
+++ b/src/pages/bridge/Header/TransactionHistory.tsx
@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material"
 
 import { BRIDGE_PAGE_SIZE } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import useTxStore from "@/stores/txStore"
 
 import TxTable from "../components/TxTable"
@@ -9,7 +9,7 @@ import TxTable from "../components/TxTable"
 const TransactionsList = (props: any) => {
   const {
     txHistory: { refreshPageTransactions },
-  } = useApp()
+  } = useBrigeContext()
 
   const { page, total, pageTransactions } = useTxStore()
 
diff --git a/src/pages/bridge/Header/index.tsx b/src/pages/bridge/Header/index.tsx
index 794c6c6d1..199cdffc8 100644
--- a/src/pages/bridge/Header/index.tsx
+++ b/src/pages/bridge/Header/index.tsx
@@ -8,7 +8,7 @@ import ButtonPopover from "@/components/ButtonPopover"
 import Link from "@/components/Link"
 import PageHeader from "@/components/PageHeader"
 import { NETWORKS } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import useBridgeStore from "@/stores/bridgeStore"
 import useTxStore from "@/stores/txStore"
 
@@ -30,7 +30,7 @@ const Title = styled(Typography)(({ theme }) => ({
 const Header = () => {
   const {
     txHistory: { refreshPageTransactions },
-  } = useApp()
+  } = useBrigeContext()
   const { loading } = useTxStore()
 
   const { historyVisible, changeHistoryVisible } = useBridgeStore()
diff --git a/src/pages/bridge/Send/index.tsx b/src/pages/bridge/Send/index.tsx
index 98f2030ea..e9c04cd92 100644
--- a/src/pages/bridge/Send/index.tsx
+++ b/src/pages/bridge/Send/index.tsx
@@ -9,7 +9,7 @@ import LoadingButton from "@/components/LoadingButton"
 import TextButton from "@/components/TextButton"
 import { CHAIN_ID, ETH_SYMBOL, GATEWAY_ROUTE_PROXY_ADDR, NETWORKS, WETH_GATEWAY_PROXY_ADDR, WETH_SYMBOL } from "@/constants"
 import { BRIDGE_TOKEN_SYMBOL } from "@/constants/storageKey"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { usePriceFeeContext } from "@/contexts/PriceFeeProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import { useApprove, useAsyncMemo, useBalance, useSufficientBalance } from "@/hooks"
@@ -32,7 +32,7 @@ const Send: FC = () => {
   const { checkConnectedChainId, chainId, walletName, connect } = useRainbowContext()
   const [tokenSymbol, setTokenSymbol] = useStorage(localStorage, BRIDGE_TOKEN_SYMBOL, ETH_SYMBOL)
   const { classes: styles, cx } = useSendStyles()
-  const { networksAndSigners, tokenList } = useApp()
+  const { networksAndSigners, tokenList } = useBrigeContext()
   const { gasLimit, gasPrice, errorMessage: priceFeeErrorMessage, fetchData: fetchPriceFee } = usePriceFeeContext()
 
   const [fromNetwork, setFromNetwork] = useState({} as any)
diff --git a/src/pages/bridge/Send/useEstimateSendTransaction.tsx b/src/pages/bridge/Send/useEstimateSendTransaction.tsx
index 6ed78a5ce..75ce2858d 100644
--- a/src/pages/bridge/Send/useEstimateSendTransaction.tsx
+++ b/src/pages/bridge/Send/useEstimateSendTransaction.tsx
@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react"
 
 import { CHAIN_ID } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { usePriceFeeContext } from "@/contexts/PriceFeeProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 
 export function useEstimateSendTransaction(props) {
   const { fromNetwork, toNetwork, selectedToken } = props
 
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
 
   const { checkConnectedChainId } = useRainbowContext()
   const { gasLimit, gasPrice } = usePriceFeeContext()
diff --git a/src/pages/bridge/Send/useSendTransaction.ts b/src/pages/bridge/Send/useSendTransaction.ts
index 268001ac2..ee06b1dcf 100644
--- a/src/pages/bridge/Send/useSendTransaction.ts
+++ b/src/pages/bridge/Send/useSendTransaction.ts
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react"
 
 import { CHAIN_ID, NETWORKS } from "@/constants"
 import { TX_STATUS } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { usePriceFeeContext } from "@/contexts/PriceFeeProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useBridgeStore from "@/stores/bridgeStore"
@@ -21,7 +21,7 @@ export function useSendTransaction(props) {
   const { fromNetwork, fromTokenAmount, setSendError, toNetwork, selectedToken } = props
   const { walletCurrentAddress } = useRainbowContext()
 
-  const { networksAndSigners, blockNumbers } = useApp()
+  const { networksAndSigners, blockNumbers } = useBrigeContext()
   const { addTransaction, updateTransaction, addEstimatedTimeMap, updateOrderedTxs, addAbnormalTransactions, removeFrontTransactions } = useTxStore()
   const { changeHistoryVisible } = useBridgeStore()
   const [sending, setSending] = useState<boolean>(false)
diff --git a/src/pages/bridge/components/TxTable/index.tsx b/src/pages/bridge/components/TxTable/index.tsx
index bf25ffb1c..3f425a559 100644
--- a/src/pages/bridge/components/TxTable/index.tsx
+++ b/src/pages/bridge/components/TxTable/index.tsx
@@ -28,7 +28,7 @@ import L1ScrollMessenger from "@/assets/abis/L1ScrollMessenger.json"
 import Link from "@/components/Link"
 import { TX_STATUS } from "@/constants"
 import { CHAIN_ID } from "@/constants/common"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useTokenInfo from "@/hooks/useTokenInfo"
 import useTxStore from "@/stores/txStore"
@@ -159,14 +159,14 @@ const TxTable = (props: any) => {
 const TxRow = props => {
   const { tx } = props
   const { estimatedTimeMap } = useTxStore()
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
   const { chainId } = useRainbowContext()
   const [claimButtonLabel, setClaimButtonLabel] = useState("Claim")
   const { classes, cx } = useStyles()
 
   const [loading, setLoading] = useState(false)
 
-  const { blockNumbers } = useApp()
+  const { blockNumbers } = useBrigeContext()
 
   const txStatus = useCallback(
     (blockNumber, assumedStatus, isL1, to) => {
diff --git a/src/pages/bridge/index.tsx b/src/pages/bridge/index.tsx
index 88153844b..48dd7cb6b 100644
--- a/src/pages/bridge/index.tsx
+++ b/src/pages/bridge/index.tsx
@@ -1,7 +1,7 @@
 import createCache from "@emotion/cache"
 import { QueryClient, QueryClientProvider } from "react-query"
 
-import AppProvider from "@/contexts/AppContextProvider"
+import BridgeContextProvider from "@/contexts/BridgeContextProvider"
 
 import Content from "./Content"
 import FAQ from "./FAQ"
@@ -31,11 +31,11 @@ const queryClient = new QueryClient({
 const Bridge = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <AppProvider>
+      <BridgeContextProvider>
         <Header />
         <Content />
         <FAQ />
-      </AppProvider>
+      </BridgeContextProvider>
     </QueryClientProvider>
   )
 }
diff --git a/src/pages/developer-nft/coming-soon/index.tsx b/src/pages/developer-nft/coming-soon/index.tsx
index 134262d45..bed554aec 100644
--- a/src/pages/developer-nft/coming-soon/index.tsx
+++ b/src/pages/developer-nft/coming-soon/index.tsx
@@ -1,4 +1,6 @@
+import GlobalComponents from "@/components/GlobalComponents"
 import SectionWrapper from "@/components/SectionWrapper"
+import BridgeContextProvider from "@/contexts/BridgeContextProvider"
 
 import CheckElegbility from "./CheckElegbility"
 import Header from "./Header"
@@ -8,24 +10,27 @@ import Stepper from "./Stepper"
 
 const ComingSoon = () => {
   return (
-    <SectionWrapper
-      dark
-      maxWidth="108rem"
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        pb: ["8rem", "16rem"],
-        pt: 0,
-        "& .MuiTypography-root": { color: theme => theme.palette.primary.contrastText },
-      }}
-    >
-      <Header></Header>
-      <Stepper></Stepper>
-      <Purpose></Purpose>
-      <Stage></Stage>
-      <CheckElegbility></CheckElegbility>
-    </SectionWrapper>
+    <BridgeContextProvider>
+      <GlobalComponents></GlobalComponents>
+      <SectionWrapper
+        dark
+        maxWidth="108rem"
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          pb: ["8rem", "16rem"],
+          pt: 0,
+          "& .MuiTypography-root": { color: theme => theme.palette.primary.contrastText },
+        }}
+      >
+        <Header></Header>
+        <Stepper></Stepper>
+        <Purpose></Purpose>
+        <Stage></Stage>
+        <CheckElegbility></CheckElegbility>
+      </SectionWrapper>
+    </BridgeContextProvider>
   )
 }
 
diff --git a/src/pages/new-bridge/FAQ/link.tsx b/src/pages/new-bridge/FAQ/link.tsx
index 3fff43f72..c7db51563 100644
--- a/src/pages/new-bridge/FAQ/link.tsx
+++ b/src/pages/new-bridge/FAQ/link.tsx
@@ -1,8 +1,9 @@
 import { Link } from "react-router-dom"
 
-import { Stack } from "@mui/material"
+import { Stack, SvgIcon } from "@mui/material"
 import { styled } from "@mui/system"
 
+import { ReactComponent as LinkSvg } from "@/assets/svgs/refactor/bridge-external-ink.svg"
 import { isProduction } from "@/utils"
 
 const FAQsLink = styled(Link)(({ theme }) => ({
@@ -10,61 +11,28 @@ const FAQsLink = styled(Link)(({ theme }) => ({
   fontSize: "1.4rem",
   fontWeight: 600,
   textDecoration: "underline",
-  marginTop: "1rem",
+  svg: {
+    marginLeft: "0.2rem",
+    fontSize: "0.8rem",
+  },
 }))
 
 const BridgeLinks = () => {
   return (
-    <Stack direction="row" justifyContent="center" sx={{ width: "100%" }}>
+    <Stack direction="row" justifyContent="center" alignItems="center" spacing="2rem" sx={{ width: "100%", marginTop: "1rem" }}>
       <FAQsLink to="faq">
         FAQs
-        <svg style={{ margin: "-2px 0 0 3px" }} xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-          <g clipPath="url(#clip0_4136_4325)">
-            <path
-              d="M8 0V6.10256L6.96722 5.06977V1.74565C4.85745 3.79488 2.92927 6.02666 0.758977 8L0 7.25639C2.15588 5.28305 4.06773 3.08202 6.16308 1.0472H2.94464L1.89744 0H8Z"
-              fill="#6D6D6D"
-            />
-          </g>
-          <defs>
-            <clipPath id="clip0_4136_4325">
-              <rect width="8" height="8" fill="white" />
-            </clipPath>
-          </defs>
-        </svg>
+        <SvgIcon component={LinkSvg} inheritViewBox></SvgIcon>
       </FAQsLink>
       {isProduction && (
-        <FAQsLink style={{ marginLeft: "2rem" }} target="_blank" to="https://sepolia.scroll.io/bridge">
+        <FAQsLink target="_blank" to="https://sepolia.scroll.io/bridge">
           Testnet Bridge
-          <svg style={{ margin: "-2px 0 0 3px" }} xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-            <g clipPath="url(#clip0_4136_4325)">
-              <path
-                d="M8 0V6.10256L6.96722 5.06977V1.74565C4.85745 3.79488 2.92927 6.02666 0.758977 8L0 7.25639C2.15588 5.28305 4.06773 3.08202 6.16308 1.0472H2.94464L1.89744 0H8Z"
-                fill="#6D6D6D"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_4136_4325">
-                <rect width="8" height="8" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
+          <SvgIcon component={LinkSvg} inheritViewBox></SvgIcon>
         </FAQsLink>
       )}
-      <FAQsLink style={{ marginLeft: "2rem" }} to="/terms-of-service">
-        T&C
-        <svg style={{ margin: "-2px 0 0 3px" }} xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-          <g clipPath="url(#clip0_4136_4325)">
-            <path
-              d="M8 0V6.10256L6.96722 5.06977V1.74565C4.85745 3.79488 2.92927 6.02666 0.758977 8L0 7.25639C2.15588 5.28305 4.06773 3.08202 6.16308 1.0472H2.94464L1.89744 0H8Z"
-              fill="#6D6D6D"
-            />
-          </g>
-          <defs>
-            <clipPath id="clip0_4136_4325">
-              <rect width="8" height="8" fill="white" />
-            </clipPath>
-          </defs>
-        </svg>
+      <FAQsLink to="/terms-of-service">
+        Terms of Service
+        <SvgIcon component={LinkSvg} inheritViewBox></SvgIcon>
       </FAQsLink>
     </Stack>
   )
diff --git a/src/pages/new-bridge/Send/Claim.tsx b/src/pages/new-bridge/Send/Claim.tsx
index d5e1cf635..fbcb876cd 100644
--- a/src/pages/new-bridge/Send/Claim.tsx
+++ b/src/pages/new-bridge/Send/Claim.tsx
@@ -1,40 +1,69 @@
 import { useEffect } from "react"
+import { makeStyles } from "tss-react/mui"
 
-import { Box, Typography } from "@mui/material"
-import { styled } from "@mui/system"
+import { Box } from "@mui/material"
 
-import { BRIDGE_PAGE_SIZE } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { CLAIM_TABEL_PAGE_SIZE } from "@/constants"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import ClaimTable from "@/pages/new-bridge/components/ClaimTable"
 import useBridgeStore from "@/stores/bridgeStore"
 import useClaimStore from "@/stores/claimStore"
 
-const TableBox = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  minHeight: "20rem",
+import NotConnected from "../components/NoConnected"
+
+const useStyles = makeStyles()(theme => ({
+  tableBox: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "44rem",
+    [theme.breakpoints.down("sm")]: {
+      height: "41.8rem",
+    },
+  },
+  loadingBox: {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    background: "rgba(255,255,255,0.5)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  loadingIndicator: {
+    color: "#EB7106",
+  },
 }))
 
 const Claim = (props: any) => {
+  const { classes } = useStyles()
   const { walletCurrentAddress, chainId } = useRainbowContext()
   const {
     claim: { refreshPageTransactions },
-  } = useApp()
+  } = useBrigeContext()
 
-  const { page, total, pageTransactions, loading, targetTransaction, setTargetTransaction, orderedTxDB } = useClaimStore()
+  const { page, total, pageTransactions, loading, targetTransaction, orderedTxDB, setTargetTransaction, clearTransactions } = useClaimStore()
   const { historyVisible } = useBridgeStore()
 
   useEffect(() => {
     handleChangePage(1)
   }, [walletCurrentAddress])
 
+  useEffect(() => {
+    return () => {
+      clearTransactions()
+    }
+  }, [])
+
   useEffect(() => {
     // if targetTransaction has value, then we need to move to the target transaction
     if (targetTransaction) {
       const index = orderedTxDB.findIndex(tx => tx.hash === targetTransaction)
-      const page = Math.ceil((index + 1) / BRIDGE_PAGE_SIZE)
+      const page = Math.ceil((index + 1) / CLAIM_TABEL_PAGE_SIZE)
       handleChangePage(page)
       setTargetTransaction(null)
     }
@@ -45,23 +74,21 @@ const Claim = (props: any) => {
   }
 
   return (
-    <TableBox>
-      {pageTransactions?.length && chainId ? (
+    <Box className={classes.tableBox}>
+      {chainId ? (
         <ClaimTable
           data={pageTransactions}
           loading={loading}
           pagination={{
-            count: Math.ceil(total / BRIDGE_PAGE_SIZE),
+            count: Math.ceil(total / CLAIM_TABEL_PAGE_SIZE),
             page,
             onChange: handleChangePage,
           }}
         />
       ) : (
-        <Typography variant="body1" color="textSecondary" sx={{ color: "#C58D49" }}>
-          Your claimable transactions will appear here...
-        </Typography>
+        <NotConnected description="Connect wallet to see your claimable asset"></NotConnected>
       )}
-    </TableBox>
+    </Box>
   )
 }
 
diff --git a/src/pages/new-bridge/Send/Deposit.tsx b/src/pages/new-bridge/Send/Deposit.tsx
index e7dedbfcb..efb4a4d1e 100644
--- a/src/pages/new-bridge/Send/Deposit.tsx
+++ b/src/pages/new-bridge/Send/Deposit.tsx
@@ -1,17 +1,6 @@
-import useBridgeStore from "@/stores/bridgeStore"
-
 import SendTransaction from "./SendTransaction"
-import TxFailure from "./TxFailure"
-import TxSuccess from "./TxSuccess"
 
 const Deposit = () => {
-  const { txResult, txError } = useBridgeStore()
-
-  if (txResult) {
-    return <TxSuccess></TxSuccess>
-  } else if (txError) {
-    return <TxFailure></TxFailure>
-  }
   return <SendTransaction></SendTransaction>
 }
 
diff --git a/src/pages/new-bridge/Send/SendTransaction/BalanceInput.tsx b/src/pages/new-bridge/Send/SendTransaction/BalanceInput.tsx
index 683a6a475..efd1954cb 100644
--- a/src/pages/new-bridge/Send/SendTransaction/BalanceInput.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/BalanceInput.tsx
@@ -2,8 +2,9 @@ import { formatUnits } from "ethers"
 import { useMemo } from "react"
 import { makeStyles } from "tss-react/mui"
 
-import { Button, InputBase, Skeleton, Stack, Typography } from "@mui/material"
+import { InputBase, Skeleton, Stack, Typography } from "@mui/material"
 
+import TextButton from "@/components/TextButton"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import { sanitizeNumericalString, toTokenDisplay } from "@/utils"
 
@@ -19,6 +20,14 @@ const useStyles = makeStyles()(theme => ({
       width: "100%",
     },
   },
+  inputWrapper: {
+    "&.Mui-error": {
+      ".MuiInputBase-input": {
+        border: `1px solid ${theme.palette.primary.main}`,
+        outline: `1px solid ${theme.palette.primary.main}`,
+      },
+    },
+  },
   input: {
     width: "100%",
     fontSize: "2rem",
@@ -42,9 +51,8 @@ const useStyles = makeStyles()(theme => ({
   },
   fromBalance: {
     fontSize: "1.4rem",
-    fontWeight: 600,
+    fontWeight: 500,
     lineHeight: 2,
-    marginTop: "0.4rem",
     color: "#A39B9A",
     whiteSpace: "nowrap",
     [theme.breakpoints.down("sm")]: {
@@ -52,27 +60,15 @@ const useStyles = makeStyles()(theme => ({
     },
   },
   maxButton: {
-    marginLeft: "2px",
-    textDecoration: "underline",
     height: "2.8rem",
     fontSize: "1.4rem",
-    padding: 0,
-    fontWeight: 600,
-    backgroundColor: "transparent !important",
-    minWidth: "unset",
-    color: theme.palette.primary.main,
     "&:hover": {
-      color: theme.palette.primary.main,
       opacity: 0.8,
     },
-    "&.Mui-disabled": {
-      color: "#EBC28E",
-      backgroundColor: "#FFF5E8",
-    },
-    [theme.breakpoints.down("sm")]: {
-      minWidth: "5rem",
-      fontSize: "1.4rem",
-    },
+  },
+  disabledMaxButton: {
+    pointerEvents: "none",
+    color: "#EBC28E",
   },
 }))
 
@@ -86,29 +82,37 @@ const BalanceInput = props => {
     token: selectedToken,
     tokenOptions,
     fee,
+    error,
     disabled,
     readOnly,
     onChangeToken,
+    onError,
     ...restProps
   } = props
-  const { classes } = useStyles()
+  const { cx, classes } = useStyles()
   const transactionBuffer = useTransactionBuffer(selectedToken)
 
   const { isMobile } = useCheckViewport()
 
   const displayedBalance = useMemo(
-    () => (disabled ? "0.00" : toTokenDisplay(balance, selectedToken.decimals, selectedToken.symbol)),
+    () => (disabled ? "-" : toTokenDisplay(balance, selectedToken.decimals, selectedToken.symbol)),
     [selectedToken, balance, disabled],
   )
 
   const shouldPayFee = useMemo(() => (selectedToken.native ? fee : BigInt(0)), [selectedToken, fee])
 
-  const invalid = useMemo(() => {
-    if (balance) {
-      return BigInt(balance) - transactionBuffer <= BigInt(shouldPayFee)
+  const judgeMaxWarning = () => {
+    if (!balance) {
+      return "No balance"
+    }
+    if (shouldPayFee === null) {
+      return "FeeError"
+    }
+    if (balance && shouldPayFee) {
+      return BigInt(balance) - transactionBuffer <= BigInt(shouldPayFee) ? "Your balance is insufficient to cover tx fees." : ""
     }
-    return true
-  }, [balance, shouldPayFee, transactionBuffer])
+    return ""
+  }
 
   const handleChangeAmount = e => {
     const amount = sanitizeNumericalString(e.target.value)
@@ -116,16 +120,19 @@ const BalanceInput = props => {
   }
 
   const handleMaxAmount = () => {
-    if (balance) {
-      let maxValue
-      if (selectedToken.native) {
-        // 0.01  0.001
-        maxValue = formatUnits(BigInt(balance) - BigInt(shouldPayFee) - transactionBuffer, selectedToken.decimals)
-      } else {
-        maxValue = formatUnits(balance, selectedToken.decimals)
-      }
-      onChange(maxValue)
+    const maxWarning = judgeMaxWarning()
+    if (maxWarning) {
+      onError(maxWarning)
+      return
+    }
+    let maxValue
+    if (selectedToken.native) {
+      // 0.01  0.001
+      maxValue = formatUnits(BigInt(balance) - BigInt(shouldPayFee) - transactionBuffer, selectedToken.decimals)
+    } else {
+      maxValue = formatUnits(balance, selectedToken.decimals)
     }
+    onChange(maxValue)
   }
 
   const handleChangeToken = value => {
@@ -140,24 +147,24 @@ const BalanceInput = props => {
           value={value}
           placeholder="0.0000"
           disabled={disabled}
-          classes={{ input: classes.input }}
+          classes={{ root: classes.inputWrapper, input: classes.input }}
+          error={error}
           sx={{ width: "100%" }}
           readOnly={readOnly}
           onChange={handleChangeAmount}
         ></InputBase>
-        <TokenSelect value={selectedToken} options={tokenOptions} onChange={handleChangeToken} disabled={disabled}></TokenSelect>
+        <TokenSelect value={selectedToken} options={tokenOptions} onChange={handleChangeToken} disabled={disabled} readOnly={readOnly}></TokenSelect>
       </Stack>
-      <Stack sx={{ width: "100%" }} direction="row" alignItems="center" justifyContent="flex-start">
+      <Stack sx={{ width: "100%", pt: "0.4rem" }} direction="row" alignItems="center" spacing="0.4rem">
         {balanceLoading ? (
           <Skeleton variant="text" width="12rem" />
         ) : (
-          <Typography className={classes.fromBalance} sx={{ color: disabled ? "text.disabled" : "#0F8E7E" }}>
-            Available: {displayedBalance}
-          </Typography>
+          <Typography className={classes.fromBalance}>Available: {displayedBalance}</Typography>
         )}
-        <Button className={classes.maxButton} variant="contained" color="info" disabled={disabled || invalid} onClick={handleMaxAmount}>
-          (Max)
-        </Button>
+
+        <TextButton underline="always" className={cx(classes.maxButton, disabled && classes.disabledMaxButton)} onClick={handleMaxAmount}>
+          Max
+        </TextButton>
       </Stack>
     </>
   )
diff --git a/src/pages/new-bridge/Send/SendTransaction/InfoTooltip/DetailRow.tsx b/src/pages/new-bridge/Send/SendTransaction/InfoTooltip/DetailRow.tsx
index de777690f..256982a89 100644
--- a/src/pages/new-bridge/Send/SendTransaction/InfoTooltip/DetailRow.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/InfoTooltip/DetailRow.tsx
@@ -20,11 +20,18 @@ const useStyles = makeStyles()(theme => ({
   detailLabel: {
     display: "flex",
     alignItems: "center",
+    fontSize: "1.6rem",
     fontWeight: 600,
-    width: "14rem",
+    lineHeight: 1.5,
+    width: "16rem",
+    [theme.breakpoints.down("sm")]: {
+      fontSize: "1.4rem",
+    },
   },
   label: {
     fontSize: "1.6rem",
+    fontWeight: 400,
+    lineHeight: 1.5,
     [theme.breakpoints.down("sm")]: {
       fontSize: "1.4rem",
     },
@@ -40,12 +47,12 @@ const useStyles = makeStyles()(theme => ({
 
 const DetailRow: FC<DetailRowProps & BoxProps> = props => {
   const { title, tooltip, value, large = false, xlarge = false, sx } = props
-  const { classes: styles, cx } = useStyles()
+  const { classes: styles } = useStyles()
   const variant = xlarge || large ? "h6" : "subtitle2"
 
   return (
     <Box display="flex" alignItems="center" sx={{ width: "100%", fontWeight: "400", margin: "0.6rem 0", ...sx }}>
-      <Typography variant={variant} color="textPrimary" className={cx(styles.detailLabel, styles.label)}>
+      <Typography variant={variant} color="textPrimary" className={styles.detailLabel}>
         <Box>{title}&nbsp;</Box>
         {tooltip ? <InfoTooltip title={tooltip} /> : null}
       </Typography>
diff --git a/src/pages/new-bridge/Send/SendTransaction/NetworkDirection.tsx b/src/pages/new-bridge/Send/SendTransaction/NetworkDirection.tsx
index 607be79d8..81f40a171 100644
--- a/src/pages/new-bridge/Send/SendTransaction/NetworkDirection.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/NetworkDirection.tsx
@@ -10,7 +10,6 @@ const useStyles = makeStyles()(theme => ({
     padding: "0 1rem",
     height: "3.5rem",
     [theme.breakpoints.down("sm")]: {
-      flex: 1,
       overflow: "hidden",
       padding: "0 1rem",
     },
diff --git a/src/pages/new-bridge/Send/SendTransaction/TokenList.tsx b/src/pages/new-bridge/Send/SendTransaction/TokenList.tsx
index 0b764b70f..062bf4ecf 100644
--- a/src/pages/new-bridge/Send/SendTransaction/TokenList.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/TokenList.tsx
@@ -19,8 +19,15 @@ import useAddToken, { TOKEN_LEVEL } from "../../hooks/useAddToken"
 const DialogStyled = styled(Dialog)(({ theme }) => ({
   "& .MuiPaper-root": {
     maxWidth: "47rem !important",
+    borderRadius: "2rem",
+    maxHeight: "100vh",
     position: "absolute",
     top: "10rem",
+    [theme.breakpoints.down("sm")]: {
+      top: "2rem",
+      width: "calc(100% - 4rem)",
+      height: "calc(100% - 4rem)",
+    },
   },
 }))
 
@@ -28,6 +35,7 @@ const InputBaseStyled = styled(InputBase)(({ theme }) => ({
   width: "100%",
   borderRadius: "1rem",
   border: `1px solid ${theme.palette.text.primary}`,
+  fontFamily: "var(--developer-page-font-family)",
   height: "4.8rem",
   [theme.breakpoints.down("sm")]: {
     height: "4.8rem",
@@ -38,10 +46,11 @@ const InputBaseStyled = styled(InputBase)(({ theme }) => ({
 
 const DialogContentStyled = styled(DialogContent)(({ theme }) => ({
   minHeight: "30rem",
+  padding: "0 0 1.6rem",
 }))
 
 const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
-  padding: "1rem 0",
+  padding: "1rem 2.4rem",
   gap: "1rem",
   "&:hover": {
     background: "rgba(255, 248, 243, 0.50)",
@@ -49,7 +58,9 @@ const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
   "& *:hover": {
     cursor: "pointer !important",
   },
-  [theme.breakpoints.down("sm")]: {},
+  [theme.breakpoints.down("sm")]: {
+    padding: "1rem 2rem",
+  },
 }))
 
 const ListTitleStyled = styled(Typography)(({ theme }) => ({
@@ -58,6 +69,10 @@ const ListTitleStyled = styled(Typography)(({ theme }) => ({
   lineHeight: "3.5rem",
   letterSpacing: "0.17px",
   marginTop: "3rem",
+  padding: "0 2.4rem",
+  [theme.breakpoints.down("sm")]: {
+    padding: "0 2rem",
+  },
 }))
 
 const ListItemIconStyled = styled(ListItemIcon)(({ theme }) => ({
@@ -114,20 +129,23 @@ const ListItemTextStyled = styled(ListItemText)(({ theme }) => ({
 const ErrorBoxStyled = styled(Box)(({ theme }) => ({
   color: "#FF684B",
   fontSize: "1.3rem",
-  fontWeight: 400,
-  marginTop: "1rem",
+  fontWeight: 500,
+  margin: "1rem 2.4rem 0",
   background: "#FFE1DB",
   borderRadius: "1rem",
   textAlign: "center",
   lineHeight: "1.8rem",
   padding: "0.7rem 0",
+  [theme.breakpoints.down("sm")]: {
+    margin: "1rem 2rem 0",
+  },
 }))
 
 const TokenListWrapper = styled(Box)(({ theme }) => ({
   maxHeight: "50rem",
   overflow: "auto",
   "&::-webkit-scrollbar-thumb": {
-    backgroundColor: theme.palette.themeBackground.optionHightlight,
+    backgroundColor: "rgba(209, 205, 204, 0.30)",
     borderRadius: "8px",
   },
   "&::-webkit-scrollbar": {
@@ -135,7 +153,7 @@ const TokenListWrapper = styled(Box)(({ theme }) => ({
   },
   // Firefox
   scrollbarWidth: "thin",
-  scrollbarColor: `${theme.palette.themeBackground.optionHightlight} transparent`,
+  scrollbarColor: "rgba(209, 205, 204, 0.30) transparent",
 }))
 
 export interface TokenListProps {
@@ -249,7 +267,7 @@ function List(props: TokenListProps) {
 
   return (
     <DialogStyled fullWidth onClose={handleClose} open={open}>
-      <DialogTitle sx={{ marginBottom: ["0.8rem", "2.8rem"] }}>
+      <DialogTitle sx={{ marginBottom: ["0.8rem", "2.8rem"], padding: ["1.6rem 2rem", "1.6rem 2.4rem"] }}>
         <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
           <Box sx={{ fontSize: "2.4rem", fontWeight: 600 }}>Select a token</Box>
           <svg
@@ -274,10 +292,10 @@ function List(props: TokenListProps) {
         </Box>
       </DialogTitle>
       <DialogContentStyled>
-        <Box sx={{ display: "flex", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "center", padding: ["0 2rem", "0 2.4rem"] }}>
           <InputBaseStyled
             startAdornment={
-              <svg style={{ margin: "0 1.4rem" }} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <svg style={{ margin: "0 1rem 0 1.4rem" }} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path
                   fill-rule="evenodd"
                   clip-rule="evenodd"
diff --git a/src/pages/new-bridge/Send/SendTransaction/TokenSelect.tsx b/src/pages/new-bridge/Send/SendTransaction/TokenSelect.tsx
index 75a7eb919..a566abaef 100644
--- a/src/pages/new-bridge/Send/SendTransaction/TokenSelect.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/TokenSelect.tsx
@@ -17,19 +17,30 @@ const useStyles = makeStyles()(theme => ({
     padding: 0,
   },
   menuItem: {
-    background: "#ffffff",
+    backgroundColor: "#ffffff",
     border: "1px solid #473835",
     borderRadius: "1rem",
     height: "5.6rem",
     "&:hover": {
       backgroundColor: "#ffffff",
     },
+    "&.Mui-disabled": {
+      backgroundColor: "#FFF5E8",
+      border: "1px solid #A39B9A",
+      opacity: 1,
+      "*": {
+        opacity: 0.75,
+      },
+    },
     [theme.breakpoints.down("sm")]: {
       padding: "0.6rem 0.8rem",
       height: "4.8rem",
       gap: "0.6rem",
     },
   },
+  readOnly: {
+    pointerEvents: "none",
+  },
   listItemIcon: { minWidth: "unset !important" },
   listItemText: {
     margin: "0 1rem",
@@ -46,15 +57,15 @@ const useStyles = makeStyles()(theme => ({
 }))
 
 const TokenSelect = props => {
-  const { options, onChange, value, disabled } = props
-  const { classes } = useStyles()
+  const { options, onChange, value, disabled, readOnly } = props
+  const { cx, classes } = useStyles()
   const [open, setOpen] = useState(false)
   return (
     <>
       <MenuItem
         onClick={() => setOpen(true)}
         sx={{ marginLeft: "0.8rem !important" }}
-        classes={{ root: classes.menuItem }}
+        classes={{ root: cx(classes.menuItem, readOnly && classes.readOnly) }}
         value={value}
         key={value.symbol}
         disabled={disabled}
diff --git a/src/pages/new-bridge/Send/SendTransaction/TransactionSummary.tsx b/src/pages/new-bridge/Send/SendTransaction/TransactionSummary.tsx
index e5c965bc3..4211ac28a 100644
--- a/src/pages/new-bridge/Send/SendTransaction/TransactionSummary.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/TransactionSummary.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from "react"
+import { FC, useCallback, useMemo } from "react"
 import { makeStyles } from "tss-react/mui"
 
 import { Box, Divider, Typography } from "@mui/material"
@@ -23,15 +23,17 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
+type TransactionValue = bigint | null
+
 type Props = {
   amount?: string
-  priceFeeErrorMessage?: string
+  feeError?: string
   selectedToken: any
-  estimatedGasCost: bigint
-  relayFee: bigint
-  totalFee: bigint
+  l1GasFee: TransactionValue
+  l2GasFee: bigint
   l1DataFee?: bigint
   bridgeWarning?: string | JSX.Element | null
+  needApproval?: boolean
 }
 
 const CustomTypography = ({ isError, ...props }) => <Typography sx={{ color: isError ? "primary.main" : undefined }} {...props} />
@@ -40,43 +42,62 @@ const TransactionSummary: FC<Props> = props => {
   const { classes: styles } = useStyles()
   const { txType, isNetworkCorrect } = useBridgeStore()
 
-  const { amount, priceFeeErrorMessage, selectedToken, estimatedGasCost, relayFee, l1DataFee, totalFee, bridgeWarning } = props
+  const { amount, feeError, selectedToken, l1GasFee, l2GasFee, l1DataFee, needApproval } = props
+
+  const allowDisplayValue = useMemo(() => {
+    return isNetworkCorrect && amount && needApproval === false && !feeError
+  }, [isNetworkCorrect, amount, needApproval, feeError])
 
-  const getDisplayedValue = (value, decimals = BigInt(18), symbol = ETH_SYMBOL) => {
-    const condition = isNetworkCorrect && amount && bridgeWarning === null
-    if (!condition || priceFeeErrorMessage) return <CustomTypography isError={!!priceFeeErrorMessage}>-</CustomTypography>
-    return toTokenDisplay(value, decimals, symbol)
-  }
+  const showFeeError = useMemo(() => {
+    return !!feeError && amount && !needApproval
+  }, [feeError, amount, needApproval])
 
-  const displayedAmount = useMemo(
-    () => getDisplayedValue(amountToBN(amount, selectedToken.decimals), selectedToken.decimals, selectedToken.symbol),
-    [isNetworkCorrect, amount, selectedToken, priceFeeErrorMessage, bridgeWarning],
+  const getDisplayedValue = useCallback(
+    (value: TransactionValue = BigInt(0), decimals = BigInt(18), symbol = ETH_SYMBOL) => {
+      if (allowDisplayValue) {
+        return toTokenDisplay(value, decimals, symbol)
+      }
+      return <CustomTypography isError={showFeeError}>-</CustomTypography>
+    },
+    [allowDisplayValue, showFeeError],
   )
 
+  const getDisplayedMultiplexValue = useCallback(() => {
+    if (allowDisplayValue) {
+      return (
+        getDisplayedValue(amountToBN(amount, selectedToken.decimals), selectedToken.decimals, selectedToken.symbol) +
+        " + " +
+        getDisplayedValue((l1GasFee ?? BigInt(0)) + l2GasFee + (l1DataFee ?? BigInt(0)))
+      )
+    }
+    return <CustomTypography isError={showFeeError}>-</CustomTypography>
+  }, [allowDisplayValue, showFeeError, amount, selectedToken, l1GasFee, l2GasFee, l1DataFee])
+
+  const displayedAmount = useMemo(() => {
+    const value = amountToBN(amount, selectedToken.decimals)
+    return getDisplayedValue(value, selectedToken.decimals, selectedToken.symbol)
+  }, [amount, selectedToken, getDisplayedValue])
+
   const displayedL1Fee = useMemo(() => {
-    const fee = txType === "Deposit" ? estimatedGasCost : relayFee
+    const fee = txType === "Deposit" ? l1GasFee : l2GasFee
     return getDisplayedValue(fee)
-  }, [isNetworkCorrect, amount, estimatedGasCost, relayFee, selectedToken, priceFeeErrorMessage, bridgeWarning])
+  }, [txType, l1GasFee, l2GasFee, getDisplayedValue])
 
   const displayedL2Fee = useMemo(() => {
-    const fee = txType === "Deposit" ? relayFee : estimatedGasCost
+    const fee = txType === "Deposit" ? l2GasFee : l1GasFee
     return getDisplayedValue(fee)
-  }, [isNetworkCorrect, amount, estimatedGasCost, relayFee, selectedToken, priceFeeErrorMessage, bridgeWarning])
+  }, [txType, l1GasFee, l2GasFee, getDisplayedValue])
 
   const displayedL1DataFee = useMemo(() => {
     return getDisplayedValue(l1DataFee)
-  }, [isNetworkCorrect, amount, estimatedGasCost, l1DataFee, selectedToken, priceFeeErrorMessage, bridgeWarning])
+  }, [l1DataFee, getDisplayedValue])
 
   const displayedTotalCost = useMemo(() => {
-    if (selectedToken.symbol === ETH_SYMBOL) return getDisplayedValue(totalFee + amountToBN(amount, selectedToken.decimals))
-    const condition = isNetworkCorrect && amount && bridgeWarning === null
-    if (!condition || priceFeeErrorMessage) return <CustomTypography isError={!!priceFeeErrorMessage}>-</CustomTypography>
-    return (
-      getDisplayedValue(amountToBN(amount, selectedToken.decimals), selectedToken.decimals, selectedToken.symbol) +
-      " + " +
-      getDisplayedValue(totalFee)
-    )
-  }, [isNetworkCorrect, amount, totalFee, selectedToken, priceFeeErrorMessage, bridgeWarning])
+    if (selectedToken.symbol === ETH_SYMBOL)
+      return getDisplayedValue((l1GasFee ?? BigInt(0)) + l2GasFee + (l1DataFee ?? BigInt(0)) + amountToBN(amount))
+
+    return getDisplayedMultiplexValue()
+  }, [l1GasFee, l2GasFee, l1DataFee, selectedToken, getDisplayedValue, getDisplayedMultiplexValue])
 
   return (
     <div className={styles.root}>
@@ -86,22 +107,17 @@ const TransactionSummary: FC<Props> = props => {
       <Box
         sx={{
           borderRadius: "1rem",
-          background: "#FFF0DD",
+          background: theme => theme.palette.themeBackground.normal,
           width: "100%",
           padding: "1rem 1.6rem",
         }}
       >
-        <DetailRow title="You're moving" value={displayedAmount} large />
-        <DetailRow
-          title="L1 gas fee"
-          // tooltip={<FeeDetails content="L1 fees go to Ethereum Validators." />}
-          value={displayedL1Fee}
-          large
-        />
-        <DetailRow title="L2 gas fee" value={displayedL2Fee} large />
-        {txType === "Withdraw" && <DetailRow title="L1 data fee" value={displayedL1DataFee} large />}
-        <Divider sx={{ my: "0.8rem" }} />
-        <DetailRow title="Total" sx={{ mt: "0.8rem" }} value={displayedTotalCost} large />
+        <DetailRow title={`You're ${txType === "Deposit" ? "depositing" : "withdrawing"}`} value={displayedAmount} large />
+        {txType === "Deposit" && <DetailRow title="Ethereum gas fee" value={displayedL1Fee} large />}
+        <DetailRow title="Scroll gas fee" value={displayedL2Fee} large />
+        {txType === "Withdraw" && <DetailRow title="Ethereum data fee" value={displayedL1DataFee} large />}
+        <Divider sx={{ my: "1.2rem" }} />
+        <DetailRow title="Total" value={displayedTotalCost} large />
       </Box>
     </div>
   )
diff --git a/src/pages/new-bridge/Send/SendTransaction/index.tsx b/src/pages/new-bridge/Send/SendTransaction/index.tsx
index 00a27237f..dd0e2da56 100644
--- a/src/pages/new-bridge/Send/SendTransaction/index.tsx
+++ b/src/pages/new-bridge/Send/SendTransaction/index.tsx
@@ -1,23 +1,23 @@
 import { useEffect, useMemo, useState } from "react"
 import useStorage from "squirrel-gill"
 
-import { Box, Stack, Typography } from "@mui/material"
+import { Box, Stack, SvgIcon, Typography } from "@mui/material"
 
+import { ReactComponent as InfoSvg } from "@/assets/svgs/refactor/bridge-info.svg"
 import Button from "@/components/Button"
 import TextButton from "@/components/TextButton"
 import { ETH_SYMBOL } from "@/constants"
 import { BRIDGE_TOKEN_SYMBOL } from "@/constants/storageKey"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { usePriceFeeContext } from "@/contexts/PriceFeeProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import { useAsyncMemo, useBalance } from "@/hooks"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import useBridgeStore from "@/stores/bridgeStore"
-import { amountToBN, switchNetwork } from "@/utils"
+import { amountToBN, switchNetwork, trimErrorMessage } from "@/utils"
 
 import useApprove from "../../hooks/useApprove"
 // import useBalance from "../../hooks/useBalance"
-import useCheckValidAmount from "../../hooks/useCheckValidAmount"
 import useGasFee from "../../hooks/useGasFee"
 import { useSendTransaction } from "../../hooks/useSendTransaction"
 import useSufficientBalance from "../../hooks/useSufficientBalance"
@@ -28,16 +28,23 @@ import TransactionSummary from "./TransactionSummary"
 const SendTransaction = props => {
   const { chainId, connect } = useRainbowContext()
   // TODO: extract tokenList
-  const { tokenList } = useApp()
+  const { tokenList } = useBrigeContext()
   const { isMobile } = useCheckViewport()
   const [tokenSymbol, setTokenSymbol] = useStorage(localStorage, BRIDGE_TOKEN_SYMBOL, ETH_SYMBOL)
 
-  const { gasLimit, gasPrice, errorMessage: priceFeeErrorMessage, fetchData: fetchPriceFee, getL1DataFee } = usePriceFeeContext()
+  const { gasLimit, gasPrice, errorMessage: relayFeeErrorMessage, fetchData: fetchPriceFee, getL1DataFee } = usePriceFeeContext()
 
-  const { txType, isNetworkCorrect, fromNetwork, changeTxError } = useBridgeStore()
+  const { txType, isNetworkCorrect, fromNetwork, changeTxResult } = useBridgeStore()
 
   const [amount, setAmount] = useState<string>()
 
+  const [maxWarning, setMaxWarning] = useState<string>()
+
+  const [bridgeWarning, setBridgeWarning] = useState()
+  const [inputError, setInputError] = useState(false)
+
+  const validAmount = useMemo(() => (Number(amount) > 0 ? amount : ""), [amount])
+
   const tokenOptions = useMemo(() => {
     return fromNetwork.chainId ? tokenList.filter(item => item.chainId === fromNetwork.chainId) : []
   }, [tokenList, fromNetwork])
@@ -47,26 +54,24 @@ const SendTransaction = props => {
   // const { balance, isLoading: balanceLoading } = useBalance(selectedToken.address)
   const { balance, loading: balanceLoading } = useBalance(selectedToken, fromNetwork)
 
-  const { isNeeded: needApproval, approve, isLoading: approveLoading } = useApprove(fromNetwork, selectedToken, amount)
-
+  const { isNeeded: needApproval, approve, isLoading: approveLoading } = useApprove(fromNetwork, selectedToken, validAmount)
   const {
     send: sendTransaction,
     isLoading: sendLoading,
     error: sendError,
   } = useSendTransaction({
-    amount,
+    amount: validAmount,
     selectedToken,
   })
 
-  const invalidAmountMessage = useCheckValidAmount(amount)
   // fee start
   const {
     gasFee: estimatedGasCost,
     gasLimit: txGasLimit,
-    error: estimatedGasCostError,
+    error: gasFeeErrorMessage,
     calculateGasFee,
     displayedGasFee: displayedEstimatedGasCost,
-  } = useGasFee(selectedToken)
+  } = useGasFee(selectedToken, needApproval)
 
   const l1DataFee = useAsyncMemo(
     async () =>
@@ -76,13 +81,11 @@ const SendTransaction = props => {
     [amount, selectedToken, txGasLimit, txType],
   )
 
-  const totalFee = useMemo(() => estimatedGasCost + gasLimit * gasPrice + (l1DataFee ?? BigInt(0)), [estimatedGasCost, gasLimit, gasPrice])
-  const displayedTotalFee = useMemo(
-    () => displayedEstimatedGasCost + gasLimit * gasPrice + (l1DataFee ?? BigInt(0)),
-    [displayedEstimatedGasCost, gasLimit, gasPrice],
-  )
-
   const relayFee = useMemo(() => gasLimit * gasPrice, [gasLimit, gasPrice])
+  const totalFee = useMemo(
+    () => (estimatedGasCost && !relayFeeErrorMessage ? estimatedGasCost + relayFee + (l1DataFee ?? BigInt(0)) : null),
+    [estimatedGasCost, relayFeeErrorMessage, relayFee, l1DataFee],
+  )
 
   const { insufficientWarning } = useSufficientBalance(
     selectedToken,
@@ -90,58 +93,69 @@ const SendTransaction = props => {
     totalFee,
     balance ?? undefined,
   )
-  // fee end
 
-  const bridgeWarning = useMemo(() => {
-    if (insufficientWarning) {
-      return insufficientWarning
-    } else if (invalidAmountMessage) {
-      return invalidAmountMessage
-    } else if (priceFeeErrorMessage && amount) {
-      return (
+  useEffect(() => {
+    let nextBridgeWarning
+    let nextInputError = false
+    if (!chainId) {
+      nextBridgeWarning = (
+        <TextButton underline="always" sx={{ fontSize: "1.4rem" }} onClick={connect}>
+          Connect wallet
+        </TextButton>
+      )
+    } else if (chainId !== fromNetwork.chainId) {
+      nextBridgeWarning = (
         <>
-          {priceFeeErrorMessage},{" "}
-          <TextButton underline="always" sx={{ fontSize: "1.4rem" }} onClick={() => fetchPriceFee()}>
-            Click here to retry.
+          Wrong network.{" "}
+          <TextButton underline="always" sx={{ fontSize: "1.4rem" }} onClick={() => switchNetwork(fromNetwork.chainId)}>
+            Switch to {fromNetwork.name}
           </TextButton>
         </>
       )
-    } else if (estimatedGasCostError && amount && !needApproval) {
-      return (
+    } else if (maxWarning && maxWarning !== "FeeError") {
+      nextBridgeWarning = <>{maxWarning}</>
+      nextInputError = true
+    } else if (gasFeeErrorMessage && (validAmount || maxWarning) && needApproval === false) {
+      nextBridgeWarning = (
         <>
-          {estimatedGasCostError},{" "}
+          {gasFeeErrorMessage},{" "}
           <TextButton underline="always" sx={{ fontSize: "1.4rem" }} onClick={() => calculateGasFee()}>
             Click here to retry.
           </TextButton>
         </>
       )
+    } else if (relayFeeErrorMessage && (validAmount || maxWarning) && needApproval === false) {
+      nextBridgeWarning = (
+        <>
+          {relayFeeErrorMessage},{" "}
+          <TextButton underline="always" sx={{ fontSize: "1.4rem" }} onClick={() => fetchPriceFee()}>
+            Click here to retry.
+          </TextButton>
+        </>
+      )
+    } else if (insufficientWarning) {
+      nextBridgeWarning = insufficientWarning
+      nextInputError = insufficientWarning !== ">0"
     }
-    return null
-  }, [
-    chainId,
-    isNetworkCorrect,
-    fromNetwork,
-    insufficientWarning,
-    invalidAmountMessage,
-    priceFeeErrorMessage,
-    amount,
-    estimatedGasCostError,
-    needApproval,
-  ])
+    setBridgeWarning(nextBridgeWarning)
+    setInputError(nextInputError)
+  }, [chainId, fromNetwork, maxWarning, insufficientWarning, relayFeeErrorMessage, validAmount, gasFeeErrorMessage, needApproval])
+
+  // fee end
 
   const necessaryCondition = useMemo(() => {
-    return amount && !bridgeWarning
-  }, [amount, bridgeWarning])
+    return validAmount && !bridgeWarning
+  }, [validAmount, bridgeWarning])
 
   const sendText = useMemo(() => {
     if (txType === "Deposit" && sendLoading) {
-      return "Depositing Funds"
+      return "Depositing funds"
     } else if (txType === "Deposit" && !sendLoading) {
-      return "Deposit Funds"
+      return "Deposit funds"
     } else if (txType === "Withdraw" && sendLoading) {
-      return "Withdrawing Funds"
+      return "Withdrawing funds"
     }
-    return "Withdraw Funds"
+    return "Withdraw funds"
   }, [txType, sendLoading])
 
   useEffect(() => {
@@ -155,20 +169,13 @@ const SendTransaction = props => {
 
   useEffect(() => {
     if (sendError && sendError !== "cancel" && sendError !== "reject") {
-      changeTxError({ message: sendError.message })
-    } else {
-      changeTxError(null)
+      changeTxResult({ code: 0, message: trimErrorMessage(sendError.message) })
     }
   }, [sendError])
 
-  const handleSend = () => {
-    if (fromNetwork.isL1) {
-      sendTransaction()
-    } else {
-      sendTransaction()
-      // TODO: withdraw
-    }
-  }
+  useEffect(() => {
+    setMaxWarning("")
+  }, [balance, amount, totalFee])
 
   const handleChangeTokenSymbol = symbol => {
     setTokenSymbol(symbol)
@@ -178,6 +185,10 @@ const SendTransaction = props => {
     setAmount(value)
   }
 
+  const handleError = value => {
+    setMaxWarning(value)
+  }
+
   const renderButton = () => {
     if (!chainId) {
       return (
@@ -201,7 +212,7 @@ const SendTransaction = props => {
           key="approve"
           width={isMobile ? "100%" : "25rem"}
           color="primary"
-          disabled={!needApproval || !necessaryCondition}
+          disabled={!necessaryCondition}
           loading={approveLoading}
           onClick={approve}
           whiteButton
@@ -217,9 +228,9 @@ const SendTransaction = props => {
         key="send"
         width={isMobile ? "100%" : "25rem"}
         color="primary"
-        disabled={!necessaryCondition}
+        disabled={!necessaryCondition || needApproval === undefined}
         loading={sendLoading}
-        onClick={handleSend}
+        onClick={sendTransaction}
         whiteButton
       >
         {sendText}
@@ -228,12 +239,13 @@ const SendTransaction = props => {
   }
 
   return (
-    <Stack direction="column" alignItems="center" sx={{ minHeight: ["30rem", "47.6rem"] }}>
+    <Stack direction="column" alignItems="center">
       <NetworkDirection></NetworkDirection>
       <BalanceInput
         sx={{ mt: "1.6rem" }}
         value={amount}
         onChange={handleChangeAmount}
+        error={inputError}
         token={selectedToken}
         fee={totalFee}
         balance={balance}
@@ -241,34 +253,54 @@ const SendTransaction = props => {
         disabled={fromNetwork.chainId !== chainId}
         readOnly={approveLoading || sendLoading}
         tokenOptions={tokenOptions}
+        onError={handleError}
         onChangeToken={handleChangeTokenSymbol}
       ></BalanceInput>
+      <Box sx={{ height: "2rem", width: "100%" }}>
+        {!!bridgeWarning && bridgeWarning !== ">0" && (
+          <Typography
+            sx={{
+              fontSize: "1.4rem",
+              fontWeight: 500,
+              width: ["calc(100% + 1rem)", "100%"],
+              "@media (max-width: 600px)": {
+                marginLeft: "-0.5rem",
+              },
+            }}
+            color="primary"
+          >
+            <SvgIcon sx={{ fontSize: "1.4rem", mr: "0.4rem", verticalAlign: "middle" }} component={InfoSvg} inheritViewBox></SvgIcon>
+            <Stack direction="row" style={{ display: "inline-flex", verticalAlign: "middle", alignItems: "center", gap: "0.2rem" }}>
+              {bridgeWarning}
+            </Stack>
+          </Typography>
+        )}
+      </Box>
+
       <TransactionSummary
         selectedToken={selectedToken}
-        amount={amount}
-        priceFeeErrorMessage={priceFeeErrorMessage}
-        totalFee={displayedTotalFee}
-        relayFee={relayFee}
+        amount={validAmount}
+        feeError={relayFeeErrorMessage || gasFeeErrorMessage}
+        // totalFee={displayedEstimatedGasCost}
+        l2GasFee={relayFee}
+        l1GasFee={displayedEstimatedGasCost}
         l1DataFee={l1DataFee}
-        estimatedGasCost={displayedEstimatedGasCost}
         bridgeWarning={bridgeWarning}
+        needApproval={needApproval}
       />
-      <Typography
+
+      <Box
         sx={{
-          fontSize: "1.3rem",
-          fontWeight: 500,
-          width: ["calc(100% + 1rem)", "32.4rem"],
-          textAlign: "center",
-          margin: "0 auto",
-          "@media (max-width: 600px)": {
-            marginLeft: "-0.5rem",
-          },
+          mt: ["2.4rem", "2.8rem"],
+          display: "flex",
+          alignItems: "flex-end",
+          width: "100%",
+          justifyContent: "center",
+          "& .MuiButtonBase-root": { fontFamily: "var(--onboard-font-family-normal) !important" },
         }}
-        color="primary"
       >
-        {bridgeWarning}
-      </Typography>
-      <Box sx={{ flex: 1, display: "flex", alignItems: "flex-end", width: "100%", justifyContent: "center" }}>{renderButton()}</Box>
+        {renderButton()}
+      </Box>
     </Stack>
   )
 }
diff --git a/src/pages/new-bridge/Send/TxFailure.tsx b/src/pages/new-bridge/Send/TxFailure.tsx
deleted file mode 100644
index 525491e08..000000000
--- a/src/pages/new-bridge/Send/TxFailure.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Typography as MuiTypography, Stack } from "@mui/material"
-import { styled } from "@mui/material/styles"
-
-import Button from "@/components/Button"
-import TxAlert from "@/components/TxAlert"
-import useCheckViewport from "@/hooks/useCheckViewport"
-import useBridgeStore from "@/stores/bridgeStore"
-
-const Typography = styled(MuiTypography)(({ theme }) => ({
-  wordBreak: "break-all",
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: theme.palette.themeBackground.normal,
-    borderRadius: "8px",
-  },
-  "&::-webkit-scrollbar": {
-    width: "8px",
-  },
-}))
-
-// TODO: In order to prevent withdraw from having more displays, do not merge first
-const TxFailure = () => {
-  const { isMobile } = useCheckViewport()
-  const { txError, changeTxError, txType, withDrawStep } = useBridgeStore()
-
-  const handleGoback = () => {
-    changeTxError(null)
-  }
-
-  if (txType === "Deposit") {
-    return (
-      <Stack sx={{ height: "34rem" }} direction="column" spacing="2.5rem">
-        <TxAlert severity="error">Failed</TxAlert>
-        <Typography sx={{ fontSize: "1.8rem", overflow: "auto" }}>{txError?.message}</Typography>
-        <Stack flex={1} direction="column" justifyContent="flex-end" alignItems="center">
-          <Button color="primary" width={isMobile ? "100%" : "35rem"} onClick={handleGoback}>
-            Return to Deposit
-          </Button>
-        </Stack>
-      </Stack>
-    )
-  } else if (txType === "Withdraw" && withDrawStep === "1") {
-    return (
-      <Stack sx={{ height: "34rem" }} direction="column" spacing="2.5rem">
-        <TxAlert severity="error">Failed</TxAlert>
-        <Typography sx={{ fontSize: "1.8rem", overflow: "auto" }}>{txError?.message}</Typography>
-        <Stack flex={1} direction="column" justifyContent="flex-end" alignItems="center">
-          <Button color="primary" width={isMobile ? "100%" : "35rem"} onClick={handleGoback}>
-            Return to Withdraw
-          </Button>
-        </Stack>
-      </Stack>
-    )
-  }
-  return null
-}
-
-export default TxFailure
diff --git a/src/pages/new-bridge/Send/TxSuccess.tsx b/src/pages/new-bridge/Send/TxSuccess.tsx
deleted file mode 100644
index 7286ad8e9..000000000
--- a/src/pages/new-bridge/Send/TxSuccess.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useMemo } from "react"
-import useStorage from "squirrel-gill"
-
-import { Alert, Box, Tooltip, Typography } from "@mui/material"
-
-import Button from "@/components/Button"
-import Link from "@/components/Link"
-import TextButton from "@/components/TextButton"
-import TxAlert from "@/components/TxAlert"
-import { ETH_SYMBOL } from "@/constants"
-import { BRIDGE_TOKEN_SYMBOL } from "@/constants/storageKey"
-import useCheckViewport from "@/hooks/useCheckViewport"
-import useBridgeStore from "@/stores/bridgeStore"
-import { truncateHash } from "@/utils"
-
-const TxSuccess = () => {
-  const { fromNetwork, toNetwork, txResult, changeTxResult, txType, withDrawStep, changeWithdrawStep } = useBridgeStore()
-  const [tokenSymbol] = useStorage(localStorage, BRIDGE_TOKEN_SYMBOL, ETH_SYMBOL)
-
-  const { isMobile } = useCheckViewport()
-  const transactionUrl = useMemo(() => `${fromNetwork.explorer}/tx/${txResult?.hash}`, [fromNetwork, txResult])
-
-  const handleReturnDeposit = () => {
-    changeTxResult(null)
-  }
-
-  // TODO: need confirm
-  const handleReturnWithdraw = () => {
-    changeWithdrawStep("1")
-    changeTxResult(null)
-  }
-
-  const handleClaim = () => {
-    changeWithdrawStep("2")
-    changeTxResult(null)
-  }
-
-  if (txType === "Deposit") {
-    return (
-      <Box sx={{ height: "34rem" }}>
-        <TxAlert severity="success">Success!</TxAlert>
-
-        <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "2.5rem" }}>
-          Moving {txResult?.amount} {tokenSymbol} to {toNetwork.name}
-        </Typography>
-        <Typography>...Approximately 20 minutes remaining</Typography>
-        <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "4rem" }}>
-          This is your tx hash:
-          <Tooltip placement="top-start" title={txResult?.hash as string}>
-            <Typography>{truncateHash(txResult?.hash as string)}</Typography>
-          </Tooltip>
-        </Typography>
-        <Link sx={{ color: "success.main" }} underline="always" href={transactionUrl} external>
-          Check your transaction in the block explorer
-        </Link>
-        <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "4rem" }}>Deposit more {tokenSymbol}</Typography>
-        <TextButton sx={{ color: "success.main" }} underline="always" onClick={handleReturnDeposit}>
-          Return to Deposit
-        </TextButton>
-      </Box>
-    )
-  } else if (txType === "Withdraw" && withDrawStep === "1") {
-    return (
-      <Box sx={{ height: "34rem" }}>
-        <Alert icon={false} severity="success" sx={{ fontSize: "2.4rem", fontWeight: "600", textAlign: "center" }}>
-          Success!
-        </Alert>
-        <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "2.5rem" }}>
-          Moving {txResult?.amount} {tokenSymbol} to {toNetwork.name}
-        </Typography>
-        <Typography>...Approximately 1 hour remaining</Typography>
-        <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "4rem" }}>
-          This is your tx hash:
-          <Tooltip placement="top-start" title={txResult?.hash as string}>
-            <Typography>{truncateHash(txResult?.hash as string)}</Typography>
-          </Tooltip>
-        </Typography>
-        <Link sx={{ color: "success.main", marginBottom: "4.8rem" }} underline="always" href={transactionUrl} external>
-          Check your transaction in the block explorer
-        </Link>
-
-        <Box sx={{ flex: 1, display: "flex", alignItems: "flex-end", width: "100%", marginTop: "4.8rem", justifyContent: "center" }}>
-          <Button width={isMobile ? "100%" : "35rem"} color="primary" onClick={handleClaim}>
-            Claim Funds on Ethereum
-          </Button>
-        </Box>
-      </Box>
-    )
-  }
-  return (
-    <Box sx={{ height: "34rem" }}>
-      <Alert icon={false} severity="success" sx={{ fontSize: "2.4rem", fontWeight: "600", textAlign: "center" }}>
-        Success!
-      </Alert>
-      <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "2.5rem" }}>Your withdrawal is completed!</Typography>
-      <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "4rem" }}>
-        This is your tx hash:{" "}
-        <Tooltip placement="top-start" title={txResult?.hash as string}>
-          <Typography>{truncateHash(txResult?.hash as string)}</Typography>
-        </Tooltip>
-      </Typography>
-      <Link sx={{ color: "success.main" }} href={transactionUrl} underline="always" external>
-        Check your transaction in the block explorer
-      </Link>
-      <Typography sx={{ fontSize: "1.8rem", fontWeight: 700, mt: "4rem" }}>Withdraw more {tokenSymbol}</Typography>
-      <TextButton sx={{ color: "success.main" }} underline="always" onClick={handleReturnWithdraw}>
-        Return to Withdraw
-      </TextButton>
-    </Box>
-  )
-}
-
-export default TxSuccess
diff --git a/src/pages/new-bridge/Send/Withdraw.tsx b/src/pages/new-bridge/Send/Withdraw.tsx
index 0a7b73d4f..8307267f5 100644
--- a/src/pages/new-bridge/Send/Withdraw.tsx
+++ b/src/pages/new-bridge/Send/Withdraw.tsx
@@ -7,8 +7,6 @@ import useBridgeStore from "@/stores/bridgeStore"
 
 import Claim from "./Claim"
 import SendTransaction from "./SendTransaction"
-import TxFailure from "./TxFailure"
-import TxSuccess from "./TxSuccess"
 
 const useStyles = makeStyles()(theme => ({
   tabList: {
@@ -18,21 +16,17 @@ const useStyles = makeStyles()(theme => ({
     width: "100%",
     justifyContent: "center",
     borderBottom: "1px solid #5b5b5b",
-    maxWidth: "52rem",
     margin: "0 auto",
-    [theme.breakpoints.down("sm")]: {
-      gap: "2rem",
-    },
   },
   tab: {
     minHeight: "unset",
-    height: "3.4rem",
+    height: "4.4rem",
     fontSize: "1.6rem",
     fontWeight: 600,
     textTransform: "unset",
     color: theme.palette.text.primary,
     padding: 0,
-    width: "26rem",
+    flex: 1,
     "&.Mui-selected": {
       color: theme.palette.text.primary,
     },
@@ -55,18 +49,12 @@ const useStyles = makeStyles()(theme => ({
 
 const Withdraw = () => {
   const { classes } = useStyles()
-  const { withDrawStep, changeWithdrawStep, txResult, txError } = useBridgeStore()
+  const { withDrawStep, changeWithdrawStep } = useBridgeStore()
 
   const handleChange = (e, newValue) => {
     changeWithdrawStep(newValue)
   }
 
-  if (txResult) {
-    return <TxSuccess></TxSuccess>
-  } else if (txError) {
-    return <TxFailure></TxFailure>
-  }
-
   return (
     <Stack direction="column" sx={{ height: "100%" }}>
       <TabContext value={withDrawStep}>
@@ -75,8 +63,8 @@ const Withdraw = () => {
           textColor="primary"
           classes={{ root: classes.tabList, flexContainer: classes.tabFlex, indicator: classes.indicator }}
         >
-          <Tab label="Step 1: Withdraw from Scroll" value="1" classes={{ root: classes.tab }}></Tab>
-          <Tab label="Step 2: Claim on Ethereum" value="2" classes={{ root: classes.tab }}></Tab>
+          <Tab label="Step 1: Withdraw" value="1" classes={{ root: classes.tab }}></Tab>
+          <Tab label="Step 2: Claim" value="2" classes={{ root: classes.tab }}></Tab>
         </TabList>
         <TabPanel value="1" classes={{ root: classes.tabPanel }}>
           <SendTransaction></SendTransaction>
diff --git a/src/pages/new-bridge/Send/index.tsx b/src/pages/new-bridge/Send/index.tsx
index 9d6d97d30..16509e943 100644
--- a/src/pages/new-bridge/Send/index.tsx
+++ b/src/pages/new-bridge/Send/index.tsx
@@ -2,8 +2,10 @@ import { useEffect } from "react"
 import { makeStyles } from "tss-react/mui"
 
 import { TabContext, TabList, TabPanel } from "@mui/lab"
-import { Box, Tab } from "@mui/material"
+import { Box, Snackbar, Tab } from "@mui/material"
 
+import Alert from "@/components/Alert"
+import TextButton from "@/components/TextButton"
 import { CHAIN_ID } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useBridgeStore from "@/stores/bridgeStore"
@@ -54,20 +56,35 @@ const useStyles = makeStyles()(theme => ({
   tabPanel: {
     backgroundColor: theme.palette.themeBackground.optionHightlight,
     padding: "3rem 5.4rem",
-    "&.tx": {
-      padding: "3rem",
+
+    "&.withdraw": {
+      padding: "1rem 3rem 3rem",
     },
 
     [theme.breakpoints.down("sm")]: {
       padding: "3rem 2rem 2rem",
+
+      "&.withdraw": {
+        padding: "1rem 2rem 2rem",
+      },
+    },
+  },
+
+  snackbar: {
+    width: "max-content",
+    maxWidth: "calc(100% - 1.6rem)",
+
+    [theme.breakpoints.down("sm")]: {
+      left: "50%",
+      transform: "translateX(-50%)",
     },
   },
 }))
 
 const Send = () => {
-  const { classes } = useStyles()
+  const { classes, cx } = useStyles()
   const { chainId } = useRainbowContext()
-  const { txType, fromNetwork, withDrawStep, changeTxType, changeTxResult, changeIsNetworkCorrect } = useBridgeStore()
+  const { txType, txResult, fromNetwork, withDrawStep, changeTxType, changeTxResult, changeHistoryVisible, changeIsNetworkCorrect } = useBridgeStore()
 
   useEffect(() => {
     let networkCorrect
@@ -83,6 +100,15 @@ const Send = () => {
 
   const handleChange = (e, newValue) => {
     changeTxType(newValue)
+    handleClose()
+  }
+
+  const handleOpenHistory = () => {
+    changeHistoryVisible(true)
+    handleClose()
+  }
+
+  const handleClose = () => {
     changeTxResult(null)
   }
 
@@ -100,10 +126,41 @@ const Send = () => {
         <TabPanel value="Deposit" classes={{ root: classes.tabPanel }}>
           <Deposit></Deposit>
         </TabPanel>
-        <TabPanel value="Withdraw" className={withDrawStep === "2" ? "tx" : ""} classes={{ root: classes.tabPanel }}>
+        <TabPanel value="Withdraw" className={withDrawStep === "2" ? "tx" : ""} classes={{ root: cx(classes.tabPanel, "withdraw") }}>
           <Withdraw></Withdraw>
         </TabPanel>
       </TabContext>
+
+      <Snackbar
+        open={!!txResult}
+        autoHideDuration={6000}
+        classes={{ root: classes.snackbar }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        onClose={handleClose}
+      >
+        <div>
+          {txResult?.code === 1 && (
+            <Alert severity="success">
+              <>
+                Submitted successfully! <br />
+                {txType === "Deposit" ? "Funds take up to 20 mins to be ready" : "Funds take up to 1h to be claimable"}
+                <br />
+                <TextButton underline="always" sx={{ color: "inherit" }} onClick={handleOpenHistory}>
+                  View transaction history
+                </TextButton>
+              </>
+            </Alert>
+          )}
+          {txResult?.code === 0 && (
+            <Alert severity="error" sx={{ maxWidth: "49rem" }}>
+              <>
+                Failed in submission.
+                <br /> {txResult?.message}
+              </>
+            </Alert>
+          )}
+        </div>
+      </Snackbar>
     </Box>
   )
 }
diff --git a/src/pages/new-bridge/TxHistoryDialog/TxHistoryTable.tsx b/src/pages/new-bridge/TxHistoryDialog/TxHistoryTable.tsx
index eb7f2c839..98cf4888c 100644
--- a/src/pages/new-bridge/TxHistoryDialog/TxHistoryTable.tsx
+++ b/src/pages/new-bridge/TxHistoryDialog/TxHistoryTable.tsx
@@ -1,28 +1,29 @@
-import { Box, Typography } from "@mui/material"
+import { Box } from "@mui/material"
 import { styled } from "@mui/system"
 
 import { BRIDGE_PAGE_SIZE } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useTxStore from "@/stores/txStore"
 
+import NoConnected from "../components/NoConnected"
 import TxTable from "../components/TxTable"
 
 const TableBox = styled(Box)(({ theme }) => ({
-  minHeight: "26.8rem",
   borderRadius: "2rem",
-  backgroundColor: theme.palette.themeBackground.optionHightlight,
-  width: "100%",
-  maxWidth: "70rem",
+  padding: "0 3rem 3rem",
   "& *": {
     fontFamily: "var(--developer-page-font-family) !important",
   },
+  [theme.breakpoints.down("sm")]: {
+    padding: "0 2rem 2rem",
+  },
 }))
 
 const TransactionsList = (props: any) => {
   const {
     txHistory: { refreshPageTransactions },
-  } = useApp()
+  } = useBrigeContext()
   const { chainId } = useRainbowContext()
 
   const { page, total, pageTransactions, loading } = useTxStore()
@@ -33,7 +34,7 @@ const TransactionsList = (props: any) => {
 
   return (
     <TableBox>
-      {pageTransactions.length && chainId ? (
+      {chainId ? (
         <TxTable
           data={pageTransactions}
           loading={loading}
@@ -44,9 +45,7 @@ const TransactionsList = (props: any) => {
           }}
         />
       ) : (
-        <Typography variant="body1" color="textSecondary" sx={{ paddingTop: "2rem", color: "#C58D49" }} align="center">
-          Your transactions will appear here...
-        </Typography>
+        <NoConnected sx={{ height: ["20rem", "30rem"] }} description="Connect wallet to see your transaction history"></NoConnected>
       )}
     </TableBox>
   )
diff --git a/src/pages/new-bridge/TxHistoryDialog/index.tsx b/src/pages/new-bridge/TxHistoryDialog/index.tsx
index f9535fded..89cf690b8 100644
--- a/src/pages/new-bridge/TxHistoryDialog/index.tsx
+++ b/src/pages/new-bridge/TxHistoryDialog/index.tsx
@@ -8,16 +8,10 @@ import useBridgeStore from "@/stores/bridgeStore"
 import TxHistoryTable from "./TxHistoryTable"
 
 const useStyles = makeStyles()(theme => ({
-  root: {
-    ".MuiBackdrop-root": {
-      backgroundColor: theme.palette.primary.contrastText,
-    },
-  },
   paper: {
-    backgroundColor: theme.palette.themeBackground.optionHightlight,
     boxShadow: "unset",
     width: "100%",
-    maxWidth: "70rem",
+    maxWidth: "75rem",
     [theme.breakpoints.down("sm")]: {
       maxWidth: "unset",
     },
@@ -31,7 +25,7 @@ const TxHistoryDialog = (props: any) => {
     changeHistoryVisible(false)
   }
   return (
-    <Dialog maxWidth={false} open={historyVisible} classes={{ root: classes.root, paper: classes.paper }} onClose={handleClose}>
+    <Dialog maxWidth={false} open={historyVisible} classes={{ paper: classes.paper }} onClose={handleClose}>
       <DialogTitle
         sx={{
           m: 0,
diff --git a/src/pages/new-bridge/components/ClaimTable/ClaimButton.tsx b/src/pages/new-bridge/components/ClaimTable/ClaimButton.tsx
index c0e17890b..619e63c4e 100644
--- a/src/pages/new-bridge/components/ClaimTable/ClaimButton.tsx
+++ b/src/pages/new-bridge/components/ClaimTable/ClaimButton.tsx
@@ -1,52 +1,96 @@
+import dayjs from "dayjs"
 import { ethers } from "ethers"
 import { isError } from "ethers"
 import { useState } from "react"
+import Countdown from "react-countdown"
 
-import { Box, CircularProgress, Tooltip } from "@mui/material"
+import { Box, ButtonBase, Chip, CircularProgress, SvgIcon, Tooltip, alpha } from "@mui/material"
 import { styled } from "@mui/system"
 
 import L1ScrollMessenger from "@/assets/abis/L1ScrollMessenger.json"
+import { ReactComponent as InfoSvg } from "@/assets/svgs/refactor/bridge-info.svg"
 import { TX_STATUS } from "@/constants"
 import { CHAIN_ID } from "@/constants/common"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import { ClaimStatus } from "@/stores/claimStore"
 import useTxStore, { TxPosition, isValidOffsetTime } from "@/stores/txStore"
 import { requireEnv, sentryDebug, switchNetwork } from "@/utils"
 
-const StyledButton = styled("button")(({ theme }) => ({
-  width: "8.6rem",
-  height: "2.8rem",
-  borderRadius: "14px",
-  color: "#ffffff",
+const StyledButton = styled(ButtonBase)(({ theme }) => ({
+  width: "15rem",
+  height: "4rem",
+  fontSize: "1.4rem",
   fontWeight: 600,
-  background: theme.palette.primary.main,
-  cursor: "pointer",
+
+  borderRadius: "0.5rem",
   display: "flex",
-  alignItems: "center",
   justifyContent: "center",
-  "&.disabled": {
-    background: "#F0F0F0",
-    color: "#5B5B5B",
+  alignItems: "center",
+
+  color: theme.palette.primary.contrastText,
+  background: theme.palette.primary.main,
+}))
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  width: "15rem",
+  height: "4rem",
+  fontSize: "1.4rem",
+  fontWeight: 600,
+  padding: 0,
+  borderRadius: "2rem",
+  verticalAlign: "middle",
+
+  ".MuiChip-label": {
+    display: "flex",
+    alignItems: "center",
+  },
+
+  "&.loading": {
+    borderRadius: "0.5rem",
+    backgroundColor: alpha(theme.palette.primary.main, 0.6),
+    color: theme.palette.primary.contrastText,
+  },
+  "&.waiting": {
+    backgroundColor: theme.palette.themeBackground.normal,
+    color: "#8C591A",
   },
   "&.claimed": {
-    background: " #DFFCF8",
+    backgroundColor: "#DFFCF8",
     color: "#0F8E7E",
   },
   "&.failed": {
-    background: "#5B5B5B",
-    color: "#FFFFFF",
+    backgroundColor: "#FFE1DB",
+    color: "#FF684B",
   },
 }))
 
 const ClaimButton = props => {
-  const { tx, txStatus } = props
-  const { networksAndSigners, blockNumbers } = useApp()
+  const { tx, txStatus, loading, changeLoading } = props
+  const { networksAndSigners, blockNumbers } = useBrigeContext()
   const { chainId, walletCurrentAddress } = useRainbowContext()
   const [claimButtonLabel, setClaimButtonLabel] = useState("Claim")
   const { updateTransaction, addEstimatedTimeMap, updateOrderedTxs, removeFrontTransactions } = useTxStore()
 
-  const [loading, setLoading] = useState(false)
+  const renderEstimatedWaitingTime = initialUTCStr => {
+    if (!initialUTCStr) {
+      return <>{tx.isL1 ? "Ready" : "Claimable"} in ...</>
+    }
+    const timestamp = dayjs(tx.initiatedAt).add(1, "h").valueOf()
+
+    return <Countdown date={timestamp} renderer={renderCountDown}></Countdown>
+  }
+
+  const renderCountDown = ({ total, hours, minutes, seconds, completed }) => {
+    if (completed) {
+      return <>Pending</>
+    }
+    return (
+      <>
+        {tx.isL1 ? "Ready" : "Claimable"} in ~{minutes ? `${minutes}m` : `${seconds}s`}
+      </>
+    )
+  }
 
   const handleSwitchNetwork = async (chainId: number) => {
     try {
@@ -61,7 +105,7 @@ const ClaimButton = props => {
     const contract = new ethers.Contract(requireEnv("REACT_APP_L1_SCROLL_MESSENGER"), L1ScrollMessenger, networksAndSigners[chainId as number].signer)
     const { from, to, value, nonce, message, proof, batch_index } = tx.claimInfo
     try {
-      setLoading(true)
+      changeLoading(true)
       addEstimatedTimeMap(`claim_${tx.hash}`, Date.now())
       const result = await contract.relayMessageWithProof(from, to, value, nonce, message, {
         batchIndex: batch_index,
@@ -115,14 +159,14 @@ const ClaimButton = props => {
           }
         })
         .finally(() => {
-          setLoading(false)
+          changeLoading(false)
         })
     } catch (error) {
       if (isError(error, "ACTION_REJECTED")) {
         addEstimatedTimeMap(`claim_${tx.hash}`, 0)
       }
 
-      setLoading(false)
+      changeLoading(false)
     }
   }
 
@@ -146,40 +190,31 @@ const ClaimButton = props => {
   if (txStatus === ClaimStatus.FAILED) {
     return (
       <Tooltip placement="top" title={tx.errMsg || tx.assumedStatus}>
-        <StyledButton className="failed" color="primary">
-          Failed{" "}
-          <svg style={{ marginLeft: "4px" }} xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M7 12.75C10.175 12.75 12.75 10.175 12.75 7C12.75 3.825 10.175 1.25 7 1.25C3.825 1.25 1.25 3.825 1.25 7C1.25 10.175 3.825 12.75 7 12.75ZM7 14C10.865 14 14 10.865 14 7C14 3.135 10.865 0 7 0C3.135 0 0 3.135 0 7C0 10.865 3.135 14 7 14Z"
-              fill="currentColor"
-            />
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M7 5.56C7.345 5.56 7.625 5.84 7.625 6.185V10.185C7.625 10.53 7.345 10.81 7 10.81C6.655 10.81 6.375 10.53 6.375 10.185V6.185C6.375 5.84 6.655 5.56 7 5.56Z"
-              fill="currentColor"
-            />
-            <path
-              d="M7 4.435C7.34518 4.435 7.625 4.15518 7.625 3.81C7.625 3.46482 7.34518 3.185 7 3.185C6.65482 3.185 6.375 3.46482 6.375 3.81C6.375 4.15518 6.65482 4.435 7 4.435Z"
-              fill="currentColor"
-            />
-          </svg>
-        </StyledButton>
+        <StyledChip
+          className="failed"
+          color="primary"
+          label={
+            <>
+              <span>Failed</span>
+              <SvgIcon sx={{ fontSize: "1.6rem", ml: "0.4rem" }} component={InfoSvg} inheritViewBox></SvgIcon>
+            </>
+          }
+        ></StyledChip>
       </Tooltip>
     )
   } else if (txStatus === ClaimStatus.CLAIMED) {
-    return (
-      <StyledButton className="claimed" color="primary">
-        Claimed
-      </StyledButton>
-    )
+    return <StyledChip className="claimed" color="primary" label="Claimed"></StyledChip>
   } else if (txStatus === ClaimStatus.CLAIMING || loading) {
     return (
-      <StyledButton className="" disabled color="primary">
-        Claiming <CircularProgress size={10} sx={{ marginLeft: "0.5rem" }} color="inherit" />
-      </StyledButton>
+      <StyledChip
+        className="loading"
+        label={
+          <>
+            <span>Claiming</span>
+            <CircularProgress size={15} sx={{ ml: "0.4rem" }} color="inherit" />
+          </>
+        }
+      ></StyledChip>
     )
   } else if (txStatus === ClaimStatus.CLAIMABLE) {
     const isOnScrollLayer1 = chainId === CHAIN_ID.L1
@@ -206,15 +241,14 @@ const ClaimButton = props => {
       )
     }
   }
+
   // ClaimStatus.NOT_READY
   return (
     <Tooltip
       placement="top"
       title="Scroll provers are still finalizing your transaction, this can take up to 1 hour. Once done, you'll be able to claim it here for use on the target network."
     >
-      <Box>
-        <StyledButton className="disabled">Claim</StyledButton>
-      </Box>
+      <StyledChip className="waiting" label={<>{renderEstimatedWaitingTime(tx.initiatedAt)}</>}></StyledChip>
     </Tooltip>
   )
 }
diff --git a/src/pages/new-bridge/components/ClaimTable/index.tsx b/src/pages/new-bridge/components/ClaimTable/index.tsx
index ac4d3d1e6..6d1f34843 100644
--- a/src/pages/new-bridge/components/ClaimTable/index.tsx
+++ b/src/pages/new-bridge/components/ClaimTable/index.tsx
@@ -1,15 +1,13 @@
-import dayjs from "dayjs"
-import { useMemo } from "react"
-import Countdown from "react-countdown"
+import { useMemo, useState } from "react"
 import { makeStyles } from "tss-react/mui"
 
 import {
   Box,
   CircularProgress,
-  LinearProgress,
   Pagination,
   Paper,
   Skeleton,
+  Stack,
   Table,
   TableBody,
   TableCell,
@@ -23,10 +21,10 @@ import Link from "@/components/Link"
 import { EXPLORER_URL } from "@/constants"
 import useTokenInfo from "@/hooks/useTokenInfo"
 import { ClaimStatus } from "@/stores/claimStore"
-import useTxStore from "@/stores/txStore"
-import { generateExploreLink, toTokenDisplay, truncateHash } from "@/utils"
+import { formatDate, generateExploreLink, toTokenDisplay, truncateHash } from "@/utils"
 
-import useLastFinalizedBatchIndex from "../../hooks/useLastFinalizedBatchIndex"
+import useCheckClaimStatus from "../../hooks/useCheckClaimStatus"
+import NoData from "../NoData"
 import ClaimButton from "./ClaimButton"
 
 const useStyles = makeStyles()(theme => {
@@ -34,15 +32,16 @@ const useStyles = makeStyles()(theme => {
     tableContainer: {
       [theme.breakpoints.down("sm")]: {
         width: "100%",
-        overflowX: "scroll",
       },
     },
     tableWrapper: {
       boxShadow: "unset",
       backgroundColor: theme.palette.themeBackground.optionHightlight,
       borderRadius: 0,
+      minHeight: "28.7rem",
       [theme.breakpoints.down("sm")]: {
-        minWidth: "50rem",
+        width: "100%",
+        overflowX: "auto",
       },
     },
     tableTitle: {
@@ -69,8 +68,10 @@ const useStyles = makeStyles()(theme => {
     tableBody: {
       minHeight: "18.3rem",
       ".MuiTableCell-root": {
-        verticalAlign: "top",
-        padding: "2rem 0.8rem",
+        padding: "1.6rem 0.8rem",
+        [theme.breakpoints.down("sm")]: {
+          padding: "1.5rem 0.8rem",
+        },
         "*": {
           fontSize: "1.4rem",
         },
@@ -83,6 +84,11 @@ const useStyles = makeStyles()(theme => {
       },
     },
     pagination: {
+      overflowX: "auto",
+
+      ".MuiPagination-ul": {
+        flexWrap: "nowrap",
+      },
       ".MuiPaginationItem-text": {
         fontSize: "1.6rem",
       },
@@ -112,49 +118,55 @@ const useStyles = makeStyles()(theme => {
   }
 })
 
-const TxTable = (props: any) => {
+const ClaimTable = (props: any) => {
   const { data, loading, pagination } = props
   const { classes } = useStyles()
 
-  const { lastFinalizedBatchIndex } = useLastFinalizedBatchIndex()
   const handleChangePage = (e, newPage) => {
     pagination?.onChange?.(newPage)
   }
 
   return (
     <Box className={classes.tableContainer}>
-      <TableContainer component={Paper} className={classes.tableWrapper}>
-        <Table aria-label="Tx Table" sx={{ minHeight: "20rem" }}>
-          <TableHead className={classes.tableHeader}>
-            <TableRow>
-              <TableCell align="center">Claim</TableCell>
-              <TableCell>Amount</TableCell>
-              <TableCell sx={{ width: "18rem" }}>Transaction Hash</TableCell>
-              <TableCell>Status</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody className={classes.tableBody}>
-            <>
-              {data?.map((tx: any) => (
-                <TxRow key={tx.hash} tx={tx} finalizedIndex={lastFinalizedBatchIndex ?? 0} />
-              ))}
-            </>
-          </TableBody>
-        </Table>
-      </TableContainer>
-      {pagination && (
-        <div className="flex justify-center mt-[2.8rem]">
-          <Pagination
-            size="small"
-            classes={{
-              root: classes.pagination,
-            }}
-            page={pagination?.page}
-            count={pagination?.count}
-            onChange={handleChangePage}
-          />
-        </div>
+      {data.length ? (
+        <>
+          <TableContainer component={Paper} className={classes.tableWrapper}>
+            <Table aria-label="Tx Table">
+              <TableHead className={classes.tableHeader}>
+                <TableRow>
+                  <TableCell align="center">Claim</TableCell>
+                  <TableCell>Amount</TableCell>
+                  <TableCell sx={{ whiteSpace: "nowrap" }}>Initiated At</TableCell>
+                  <TableCell sx={{ whiteSpace: "nowrap" }}>Transaction Hash</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody className={classes.tableBody}>
+                <>
+                  {data?.map((tx: any) => (
+                    <TxRow key={tx.hash} tx={tx} />
+                  ))}
+                </>
+              </TableBody>
+            </Table>
+          </TableContainer>
+          {pagination && (
+            <Stack direction="row" justifyContent="center" alignItems="flex-end" sx={{ mt: ["0.4rem", "1.4rem"] }}>
+              <Pagination
+                size="small"
+                classes={{
+                  root: classes.pagination,
+                }}
+                page={pagination?.page}
+                count={pagination?.count}
+                onChange={handleChangePage}
+              />
+            </Stack>
+          )}
+        </>
+      ) : (
+        <NoData title="No claimable transactions" description="When you withdraw from Scroll, your claimable asset will appear here"></NoData>
       )}
+
       {loading ? (
         <Box className={classes.loadingBox}>
           <CircularProgress className={classes.loadingIndicator} />
@@ -165,84 +177,27 @@ const TxTable = (props: any) => {
 }
 
 const TxRow = props => {
-  const { tx, finalizedIndex } = props
-  const { estimatedTimeMap } = useTxStore()
+  const { tx } = props
 
   const { loading: tokenInfoLoading, tokenInfo } = useTokenInfo(tx.symbolToken, tx.isL1)
+  const [loading, setLoading] = useState(false)
 
   const txAmount = amount => {
     return toTokenDisplay(amount, tokenInfo?.decimals ? BigInt(tokenInfo.decimals) : undefined)
   }
+  const { claimStatus, claimTip } = useCheckClaimStatus(tx)
 
-  const txStatus = useMemo(() => {
-    const { assumedStatus, toBlockNumber, claimInfo } = tx
-    if (assumedStatus) {
-      return ClaimStatus.FAILED
-    }
-    if (toBlockNumber) {
-      return ClaimStatus.CLAIMED
-    }
-    // The estimated claim time will not exceed 5 minutes.
-    if (estimatedTimeMap[`claim_${tx.hash}`] + 1000 * 60 * 5 > Date.now()) {
-      return ClaimStatus.CLAIMING
-    }
-    if (+claimInfo?.batch_index && claimInfo?.batch_index <= finalizedIndex) {
-      return ClaimStatus.CLAIMABLE
-    }
-    return ClaimStatus.NOT_READY
-  }, [tx, finalizedIndex, estimatedTimeMap[`claim_${tx.hash}`]])
-
-  const initiatedAt = useMemo(() => {
-    const date = dayjs(tx.initiatedAt)
-    return tx.initiatedAt ? date.format("DD/MM HH:mm:ss") : "-"
-  }, [tx])
-
-  const txStatusCopy = () => {
-    return (
-      <>
-        <Typography sx={{ fontWeight: 600 }}>
-          {txStatus === ClaimStatus.CLAIMED ? "Claimed" : null}
-          {txStatus === ClaimStatus.CLAIMING ? "Claiming... " : null}
-          {txStatus === ClaimStatus.CLAIMABLE ? "Ready to be Claimed" : null}
-          {txStatus === ClaimStatus.NOT_READY ? "Not yet finalised" : null}
-        </Typography>
-
-        {renderEstimatedWaitingTime(estimatedTimeMap[`to_${tx.toHash}`])}
-        <Typography sx={{ fontWeight: 400, whiteSpace: "nowrap" }}>Transaction sent: {initiatedAt}</Typography>
-      </>
-    )
-  }
-
-  const renderEstimatedWaitingTime = timestamp => {
-    if (txStatus === ClaimStatus.CLAIMED) {
-      return null
-    } else if (timestamp === 0) {
-      return <Typography variant="body2">Estimating...</Typography>
-    } else if (timestamp) {
-      return (
-        <Typography variant="body2" color="textSecondary">
-          <Countdown date={timestamp} renderer={renderCountDown}></Countdown>
-        </Typography>
-      )
+  const claimTipWithLoading = useMemo(() => {
+    if (loading || claimStatus === ClaimStatus.CLAIMING) {
+      return "Claiming in progress"
     }
-    return null
-  }
-
-  const renderCountDown = ({ minutes, seconds, completed }) => {
-    if (completed) {
-      return <LinearProgress />
-    }
-    return (
-      <span>
-        Ready in {minutes}m {seconds}s (estimate)
-      </span>
-    )
-  }
+    return claimTip
+  }, [claimStatus, claimTip, loading])
 
   return (
     <TableRow key={tx.hash}>
       <TableCell>
-        <ClaimButton tx={tx} txStatus={txStatus} />
+        <ClaimButton tx={tx} txStatus={claimStatus} loading={loading} changeLoading={setLoading} />
       </TableCell>
       <TableCell>
         <Typography sx={{ fontWeight: 500 }}>
@@ -251,24 +206,45 @@ const TxRow = props => {
         </Typography>
       </TableCell>
       <TableCell>
-        <Typography>
-          Scroll:{" "}
-          <Link sx={{ color: "#396CE8" }} external href={generateExploreLink(EXPLORER_URL.L2, tx.hash)} className="leading-normal flex-1">
-            {truncateHash(tx.hash)}
-          </Link>
-        </Typography>
-        {tx.toHash ? (
-          <Typography>
-            Ethereum:{" "}
-            <Link sx={{ color: "#396CE8" }} external href={generateExploreLink(EXPLORER_URL.L1, tx.toHash)} className="leading-normal flex-1">
-              {truncateHash(tx.toHash)}
+        <Typography sx={{ minWidth: "8.2rem" }}>{tx.initiatedAt ? formatDate(tx.initiatedAt, { withTime: true }) : "-"}</Typography>
+      </TableCell>
+      <TableCell sx={{ minWidth: "21rem" }}>
+        <Stack direction="column">
+          <Typography sx={{ whiteSpace: "nowrap" }}>
+            Scroll:{" "}
+            <Link
+              external
+              sx={{ color: "#0F8E7E" }}
+              underline="always"
+              href={generateExploreLink(EXPLORER_URL.L2, tx.hash)}
+              className="leading-normal flex-1"
+            >
+              {truncateHash(tx.hash)}
             </Link>
           </Typography>
-        ) : null}
+        </Stack>
+
+        <Stack direction="column">
+          <Typography sx={{ whiteSpace: "nowrap" }}>
+            Ethereum:{" "}
+            {tx.toHash ? (
+              <Link
+                external
+                sx={{ color: "#0F8E7E" }}
+                underline="always"
+                href={generateExploreLink(EXPLORER_URL.L1, tx.toHash)}
+                className="leading-normal flex-1"
+              >
+                {truncateHash(tx.toHash)}
+              </Link>
+            ) : (
+              <span className="leading-normal flex-1">{claimTipWithLoading}</span>
+            )}
+          </Typography>
+        </Stack>
       </TableCell>
-      <TableCell>{txStatusCopy()}</TableCell>
     </TableRow>
   )
 }
 
-export default TxTable
+export default ClaimTable
diff --git a/src/components/WalletToolkit/BridgeHistoryButton.tsx b/src/pages/new-bridge/components/HistoryButton/index.tsx
similarity index 73%
rename from src/components/WalletToolkit/BridgeHistoryButton.tsx
rename to src/pages/new-bridge/components/HistoryButton/index.tsx
index 7131b6777..7938da661 100644
--- a/src/components/WalletToolkit/BridgeHistoryButton.tsx
+++ b/src/pages/new-bridge/components/HistoryButton/index.tsx
@@ -3,12 +3,12 @@ import { makeStyles } from "tss-react/mui"
 import { ButtonBase, SvgIcon } from "@mui/material"
 
 import { ReactComponent as HistorySvg } from "@/assets/svgs/refactor/bridge-history.svg"
-import useCheckViewport from "@/hooks/useCheckViewport"
 import useBridgeStore from "@/stores/bridgeStore"
+import { isSepolia } from "@/utils"
 
 const useStyles = makeStyles()(theme => ({
   button: {
-    height: "3.6rem",
+    height: "4.8rem",
     padding: "0 1.2rem",
     backgroundColor: theme.palette.themeBackground.normal,
     color: "#473835",
@@ -16,13 +16,16 @@ const useStyles = makeStyles()(theme => ({
     fontWeight: 500,
     borderRadius: "0.5rem",
     gap: "0.5rem",
+    whiteSpace: "nowrap",
+    [theme.breakpoints.down("sm")]: {
+      fontSize: "1.4rem",
+    },
   },
 }))
 
 const BridgeHistoryButton = props => {
   const { classes } = useStyles()
   const { changeHistoryVisible } = useBridgeStore()
-  const { isMobile } = useCheckViewport()
 
   const handleOpenHistory = () => {
     changeHistoryVisible(true)
@@ -30,8 +33,8 @@ const BridgeHistoryButton = props => {
 
   return (
     <ButtonBase classes={{ root: classes.button }} {...props} onClick={handleOpenHistory}>
-      <SvgIcon sx={{ fontSize: "1.8rem" }} component={HistorySvg} inheritViewBox></SvgIcon>
-      {!isMobile && "History"}
+      <SvgIcon sx={{ fontSize: ["1.4rem", "1.8rem"] }} component={HistorySvg} inheritViewBox></SvgIcon>
+      {isSepolia ? "" : "Transaction History"}
     </ButtonBase>
   )
 }
diff --git a/src/pages/new-bridge/components/NoConnected/index.tsx b/src/pages/new-bridge/components/NoConnected/index.tsx
new file mode 100644
index 000000000..cc1fce096
--- /dev/null
+++ b/src/pages/new-bridge/components/NoConnected/index.tsx
@@ -0,0 +1,28 @@
+import { Stack, SvgIcon, Typography } from "@mui/material"
+
+import { ReactComponent as DisconnectedSvg } from "@/assets/svgs/refactor/bridge-history-disconnected.svg"
+import Button from "@/components/Button"
+import { useRainbowContext } from "@/contexts/RainbowProvider"
+import useCheckViewport from "@/hooks/useCheckViewport"
+
+const NotConnected = props => {
+  const { description, ...restProps } = props
+  const { connect } = useRainbowContext()
+  const { isMobile } = useCheckViewport()
+  return (
+    <Stack direction="column" alignItems="center" justifyContent="center" spacing={isMobile ? "0.4rem" : "0.8rem"} {...restProps}>
+      <SvgIcon sx={{ fontSize: "3.2rem" }} component={DisconnectedSvg} inheritViewBox></SvgIcon>
+      <Typography sx={{ fontSize: "1.6rem", fontWeight: 600, lineHeight: "2.4rem", color: "#5B5B5B" }}>Wallet not connected</Typography>
+      <Typography
+        sx={{ fontSize: "1.6rem", lineHeight: "2.4rem", color: "#5B5B5B", textAlign: "center", mb: ["1rem !important", "1.6rem !important"] }}
+      >
+        {description}
+      </Typography>
+      <Button whiteButton color="primary" width={isMobile ? "100%" : "22rem"} onClick={connect}>
+        Connect wallet
+      </Button>
+    </Stack>
+  )
+}
+
+export default NotConnected
diff --git a/src/pages/new-bridge/components/NoData/index.tsx b/src/pages/new-bridge/components/NoData/index.tsx
new file mode 100644
index 000000000..d96269e7a
--- /dev/null
+++ b/src/pages/new-bridge/components/NoData/index.tsx
@@ -0,0 +1,18 @@
+import { Stack, SvgIcon, Typography } from "@mui/material"
+
+import { ReactComponent as EmptySvg } from "@/assets/svgs/refactor/bridge-empty.svg"
+import useCheckViewport from "@/hooks/useCheckViewport"
+
+const NoData = props => {
+  const { title, description, ...restProps } = props
+  const { isMobile } = useCheckViewport()
+  return (
+    <Stack direction="column" alignItems="center" justifyContent="center" spacing={isMobile ? "0.4rem" : "0.8rem"} {...restProps}>
+      <SvgIcon sx={{ fontSize: "3.2rem" }} component={EmptySvg} inheritViewBox></SvgIcon>
+      <Typography sx={{ fontSize: "1.6rem", fontWeight: 600, lineHeight: "2.4rem", color: "#5B5B4B" }}>{title}</Typography>
+      <Typography sx={{ fontSize: "1.6rem", lineHeight: "2.4rem", color: "#5B5B4B", textAlign: "center" }}>{description}</Typography>
+    </Stack>
+  )
+}
+
+export default NoData
diff --git a/src/pages/new-bridge/components/TxTable/TxStatusButton.tsx b/src/pages/new-bridge/components/TxTable/TxStatusButton.tsx
index f76113173..7ee341d08 100644
--- a/src/pages/new-bridge/components/TxTable/TxStatusButton.tsx
+++ b/src/pages/new-bridge/components/TxTable/TxStatusButton.tsx
@@ -1,43 +1,56 @@
+import dayjs from "dayjs"
+import Countdown from "react-countdown"
 import { makeStyles } from "tss-react/mui"
 
-import { Tooltip } from "@mui/material"
+import { ButtonBase, Chip, SvgIcon, Tooltip } from "@mui/material"
 
+import { ReactComponent as InfoSvg } from "@/assets/svgs/refactor/bridge-info.svg"
 import { TX_STATUS } from "@/constants"
 import useBridgeStore from "@/stores/bridgeStore"
 import useClaimStore from "@/stores/claimStore"
+import useTxStore from "@/stores/txStore"
 
 const useStyles = makeStyles()(theme => {
   return {
     chip: {
-      width: "8.6rem",
-      height: "2.8rem",
+      width: "15rem",
+      height: "4rem",
       fontSize: "1.4rem",
       fontWeight: 600,
       borderRadius: "10rem",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
+      ".MuiChip-label": {
+        display: "flex",
+        alignItems: "center",
+      },
     },
 
     pendingChip: {
-      color: "#FFF8F3",
-      backgroundColor: "#FF684B",
+      color: "#8C591A",
+      backgroundColor: "#FFF8F3",
     },
     successChip: {
       color: "#0F8E7E",
       backgroundColor: "#DFFCF8",
     },
     failedChip: {
+      backgroundColor: "#FFE1DB",
+      color: "#FF684B",
+    },
+    canceledChip: {
       color: "#FFF8F3",
       background: "#5B5B5B",
     },
-    canNotClaimChip: {
-      background: "#F0F0F0",
-      color: "#5B5B5B",
+    waitingClaimChip: {
+      background: "#FFF8F3",
+      color: "#8C591A",
     },
-    claimedChip: {
-      color: theme.palette.tagSuccess.main,
-      backgroundColor: theme.palette.tagSuccess.light,
+    claimButton: {
+      borderRadius: "0.5rem",
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
     },
     pagination: {
       ".MuiPaginationItem-text": {
@@ -60,9 +73,31 @@ const useStyles = makeStyles()(theme => {
 const TxStatus = props => {
   const { toStatus, tx, fromStatus, finalizedIndex } = props
   const { classes, cx } = useStyles()
+  const { estimatedTimeMap } = useTxStore()
+
   const { changeTxType, changeWithdrawStep, changeHistoryVisible, changeTxResult } = useBridgeStore()
   const { setTargetTransaction } = useClaimStore()
 
+  const renderEstimatedWaitingTime = timestamp => {
+    if (timestamp === 0) {
+      return <>Pending</>
+    } else if (timestamp) {
+      return <Countdown date={timestamp} renderer={renderCountDown}></Countdown>
+    }
+    return <>{tx.isL1 ? "Ready" : "Claimable"} in ...</>
+  }
+
+  const renderCountDown = ({ total, hours, minutes, seconds, completed }) => {
+    if (completed) {
+      return <>Pending</>
+    }
+    return (
+      <>
+        {tx.isL1 ? "Ready" : "Claimable"} in ~{minutes ? `${minutes}m` : `${seconds}s`}
+      </>
+    )
+  }
+
   const moveToClaim = () => {
     changeHistoryVisible(false)
     changeTxResult(null)
@@ -72,33 +107,21 @@ const TxStatus = props => {
   }
 
   if (toStatus === TX_STATUS.success) {
-    return <button className={cx(classes.chip, classes.successChip)}>{TX_STATUS.success}</button>
+    return <Chip className={cx(classes.chip, classes.successChip)} label={TX_STATUS.success}></Chip>
   }
 
   if (tx.assumedStatus) {
     return (
       <Tooltip placement="top" title={tx.errMsg || tx.assumedStatus}>
-        <button className={cx(classes.chip, classes.failedChip)}>
-          Failed
-          <svg style={{ marginLeft: "4px" }} xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M7 12.75C10.175 12.75 12.75 10.175 12.75 7C12.75 3.825 10.175 1.25 7 1.25C3.825 1.25 1.25 3.825 1.25 7C1.25 10.175 3.825 12.75 7 12.75ZM7 14C10.865 14 14 10.865 14 7C14 3.135 10.865 0 7 0C3.135 0 0 3.135 0 7C0 10.865 3.135 14 7 14Z"
-              fill="#FFF8F3"
-            />
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M7 5.56C7.345 5.56 7.625 5.84 7.625 6.185V10.185C7.625 10.53 7.345 10.81 7 10.81C6.655 10.81 6.375 10.53 6.375 10.185V6.185C6.375 5.84 6.655 5.56 7 5.56Z"
-              fill="#FFF8F3"
-            />
-            <path
-              d="M7 4.435C7.34518 4.435 7.625 4.15518 7.625 3.81C7.625 3.46482 7.34518 3.185 7 3.185C6.65482 3.185 6.375 3.46482 6.375 3.81C6.375 4.15518 6.65482 4.435 7 4.435Z"
-              fill="#FFF8F3"
-            />
-          </svg>
-        </button>
+        <Chip
+          className={cx(classes.chip, classes[`${tx.assumedStatus.toLowerCase()}Chip`])}
+          label={
+            <>
+              <span>{tx.assumedStatus}</span>
+              <SvgIcon sx={{ fontSize: "1.6rem", ml: "0.4rem" }} component={InfoSvg} inheritViewBox></SvgIcon>
+            </>
+          }
+        ></Chip>
       </Tooltip>
     )
   }
@@ -108,9 +131,9 @@ const TxStatus = props => {
     // withdraw claimable
     if (+tx?.claimInfo?.batch_index && tx?.claimInfo?.batch_index <= finalizedIndex) {
       return (
-        <button onClick={moveToClaim} className={cx(classes.chip, classes.pendingChip)}>
+        <ButtonBase onClick={moveToClaim} className={cx(classes.chip, classes.claimButton)}>
           Claim
-        </button>
+        </ButtonBase>
       )
     }
 
@@ -120,13 +143,13 @@ const TxStatus = props => {
         placement="top"
         title="Scroll provers are still finalizing your transaction, this can take up to 1 hour. Once done, you'll be able to claim it here for use on the target network."
       >
-        <button onClick={moveToClaim} className={cx(classes.chip, classes.canNotClaimChip)}>
-          Claim
-        </button>
+        <ButtonBase onClick={moveToClaim} className={cx(classes.chip, classes.waitingClaimChip)}>
+          {renderEstimatedWaitingTime(tx.initiatedAt ? dayjs(tx.initiatedAt).add(1, "h").valueOf() : null)}
+        </ButtonBase>
       </Tooltip>
     )
   }
-  return <button className={cx(classes.chip, classes.pendingChip)}>Pending</button>
+  return <Chip label={renderEstimatedWaitingTime(estimatedTimeMap[`from_${tx.hash}`])} className={cx(classes.chip, classes.pendingChip)}></Chip>
 }
 
 export default TxStatus
diff --git a/src/pages/new-bridge/components/TxTable/index.tsx b/src/pages/new-bridge/components/TxTable/index.tsx
index f0e20156c..d400411df 100644
--- a/src/pages/new-bridge/components/TxTable/index.tsx
+++ b/src/pages/new-bridge/components/TxTable/index.tsx
@@ -1,12 +1,9 @@
-import dayjs from "dayjs"
 import { useCallback, useMemo } from "react"
-import Countdown from "react-countdown"
 import { makeStyles } from "tss-react/mui"
 
 import {
   Box,
   CircularProgress,
-  LinearProgress,
   Pagination,
   Paper,
   Skeleton,
@@ -22,12 +19,13 @@ import {
 
 import Link from "@/components/Link"
 import { NETWORKS, TX_STATUS } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import useTokenInfo from "@/hooks/useTokenInfo"
-import useTxStore from "@/stores/txStore"
-import { generateExploreLink, toTokenDisplay, truncateHash } from "@/utils"
+import { formatDate, generateExploreLink, toTokenDisplay, truncateHash } from "@/utils"
 
+import useCheckClaimStatus from "../../hooks/useCheckClaimStatus"
 import useLastFinalizedBatchIndex from "../../hooks/useLastFinalizedBatchIndex"
+import NoData from "../NoData"
 import TxStatusButton from "./TxStatusButton"
 
 const useStyles = makeStyles()(theme => {
@@ -36,18 +34,16 @@ const useStyles = makeStyles()(theme => {
       whiteSpace: "nowrap",
       [theme.breakpoints.down("sm")]: {
         paddingBottom: "1.6rem",
-        overflowX: "scroll",
       },
     },
     tableWrapper: {
       boxShadow: "unset",
       borderRadius: "20px",
-      // maxWidth: "70rem",
-      backgroundColor: theme.palette.themeBackground.optionHightlight,
-      padding: "0 3rem 3rem",
+    },
+    tableMinHeight: {
+      minHeight: "20rem",
       [theme.breakpoints.down("sm")]: {
-        width: "calc(100vw - 4rem)",
-        padding: "0 2rem 2rem",
+        overflowX: "auto",
       },
     },
     tableTitle: {
@@ -66,6 +62,7 @@ const useStyles = makeStyles()(theme => {
         fontSize: "1.6rem",
         padding: "0.8rem 1.6rem",
         color: theme.palette.text.primary,
+        whiteSpace: "nowrap",
         "&:first-of-type": {
           paddingLeft: 0,
         },
@@ -73,8 +70,7 @@ const useStyles = makeStyles()(theme => {
     },
     tableBody: {
       ".MuiTableCell-root": {
-        verticalAlign: "top",
-        padding: "2rem",
+        padding: "2rem 1.6rem",
         "*": {
           fontSize: "1.4rem",
         },
@@ -113,6 +109,11 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: theme.palette.tagSuccess.light,
     },
     pagination: {
+      overflowX: "auto",
+
+      ".MuiPagination-ul": {
+        flexWrap: "nowrap",
+      },
       ".MuiPaginationItem-text": {
         fontSize: "1.6rem",
       },
@@ -156,44 +157,57 @@ const TxTable = (props: any) => {
   return (
     <>
       <TableContainer component={Paper} className={classes.tableWrapper}>
-        <Table aria-label="Tx Table" sx={{ minHeight: "20rem" }}>
-          <TableHead className={classes.tableHeader}>
-            <TableRow>
-              <TableCell align="center">Status</TableCell>
-              <TableCell>Amount</TableCell>
-              <TableCell sx={{ width: "16rem" }}>Action</TableCell>
-              <TableCell sx={{ width: "12rem" }} align="left">
-                Initiated At
-              </TableCell>
-              <TableCell sx={{ width: "32rem" }}>Transaction Hash</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody className={classes.tableBody}>
-            <>
-              {data?.map((tx: any) => (
-                <TxRow finalizedIndex={lastFinalizedBatchIndex ?? 0} key={tx.hash} tx={tx} />
-              ))}
-            </>
-          </TableBody>
-        </Table>
-        {pagination && (
-          <div className="flex justify-center mt-[2rem]">
-            <Pagination
-              size="small"
-              classes={{
-                root: classes.pagination,
-              }}
-              page={pagination?.page}
-              count={pagination?.count}
-              onChange={handleChangePage}
-            />
-          </div>
+        {data.length ? (
+          <>
+            <Box className={classes.tableMinHeight}>
+              <Table aria-label="Tx Table">
+                <TableHead className={classes.tableHeader}>
+                  <TableRow>
+                    <TableCell align="center">Status</TableCell>
+                    <TableCell>Amount</TableCell>
+                    <TableCell sx={{ width: "16rem" }}>Action</TableCell>
+                    <TableCell sx={{ width: "12rem" }} align="left">
+                      Initiated At
+                    </TableCell>
+                    <TableCell sx={{ width: "32rem" }}>Transaction Hash</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody className={classes.tableBody}>
+                  <>
+                    {data.map((tx: any) => (
+                      <TxRow finalizedIndex={lastFinalizedBatchIndex ?? 0} key={tx.hash} tx={tx} />
+                    ))}
+                  </>
+                </TableBody>
+              </Table>
+            </Box>
+
+            {pagination && (
+              <div className="flex justify-center mt-[2rem]">
+                <Pagination
+                  size="small"
+                  classes={{
+                    root: classes.pagination,
+                  }}
+                  page={pagination?.page}
+                  count={pagination?.count}
+                  onChange={handleChangePage}
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <NoData
+            sx={{ height: ["20rem", "30rem"] }}
+            title="No transaction hisotry"
+            description="When you bridge assets, your transactions will appear here"
+          ></NoData>
         )}
-        {loading ? (
+        {loading && (
           <Box className={classes.loadingBox}>
             <CircularProgress className={classes.loadingIndicator} />
           </Box>
-        ) : null}
+        )}
       </TableContainer>
     </>
   )
@@ -201,9 +215,8 @@ const TxTable = (props: any) => {
 
 const TxRow = props => {
   const { tx, finalizedIndex } = props
-  const { estimatedTimeMap } = useTxStore()
 
-  const { blockNumbers } = useApp()
+  const { blockNumbers } = useBrigeContext()
 
   const txStatus = useCallback(
     (blockNumber, assumedStatus, isL1, to) => {
@@ -230,6 +243,15 @@ const TxRow = props => {
     [blockNumbers],
   )
 
+  const { claimTip } = useCheckClaimStatus(tx)
+
+  const toTip = useMemo(() => {
+    if (tx.isL1) {
+      return "Pending..."
+    }
+    return claimTip
+  }, [tx, claimTip])
+
   const fromStatus = useMemo(() => {
     return txStatus(tx.fromBlockNumber, tx.assumedStatus, tx.isL1, false)
   }, [tx, txStatus])
@@ -244,42 +266,19 @@ const TxRow = props => {
     return toTokenDisplay(amount, tokenInfo?.decimals ? BigInt(tokenInfo.decimals) : undefined)
   }
 
-  const renderEstimatedWaitingTime = (timestamp, isL1, to) => {
-    if (fromStatus === TX_STATUS.success) {
-      return null
-    } else if (timestamp === 0) {
-      return <Typography variant="body2">Estimating...</Typography>
-    } else if (timestamp) {
-      return (
-        <Typography variant="body2" color="textSecondary">
-          <Countdown date={timestamp} renderer={renderCountDown}></Countdown>
-        </Typography>
-      )
-    }
-    return null
-  }
-
-  const renderCountDown = ({ total, hours, minutes, seconds, completed }) => {
-    if (completed) {
-      return <LinearProgress />
-    }
-    return (
-      <span style={{ whiteSpace: "nowrap" }}>
-        Ready in {minutes}m {seconds}s (estimate)
-      </span>
-    )
-  }
-
-  const formatDate = (inputStr: string): string => {
-    const date = dayjs(inputStr)
-    return inputStr ? date.format("DD/MM/YYYY HH:mm:ss") : "-"
-  }
-
   const actionText = tx => {
     if (tx.isL1) {
-      return `Deposit to Scroll`
+      return (
+        <>
+          Deposit <span style={{ whiteSpace: "nowrap" }}>to Scroll</span>
+        </>
+      )
     } else {
-      return `Withdraw to Ethereum`
+      return (
+        <>
+          Withdraw <span style={{ whiteSpace: "nowrap" }}>to Ethereum</span>
+        </>
+      )
     }
   }
 
@@ -303,47 +302,44 @@ const TxRow = props => {
       </TableCell>
 
       <TableCell>
-        <Typography>
-          <span>{formatDate(tx.initiatedAt)}</span>
-        </Typography>
+        <Typography>{tx.initiatedAt ? formatDate(tx.initiatedAt, { withTime: true }) : "-"}</Typography>
       </TableCell>
 
       <TableCell sx={{ width: "21rem" }}>
         <Stack direction="column">
-          <Typography>
+          <Typography sx={{ whiteSpace: "nowrap" }}>
             {tx.isL1 ? "Ethereum" : "Scroll"}:{" "}
             <Link
               external
-              sx={{ color: "#396CE8" }}
+              sx={{ color: "#0F8E7E" }}
+              underline="always"
               href={generateExploreLink(NETWORKS[+!tx.isL1].explorer, tx.hash)}
               className="leading-normal flex-1"
             >
               {truncateHash(tx.hash)}
             </Link>
           </Typography>
-
-          {!tx.fromBlockNumber && !tx.assumedStatus && <LinearProgress />}
-          {renderEstimatedWaitingTime(estimatedTimeMap[`from_${tx.hash}`], tx.isL1, false)}
         </Stack>
 
         <Stack direction="column" className="mt-[0.4rem]">
-          <Typography>
+          <Typography sx={{ whiteSpace: "nowrap" }}>
             {tx.isL1 ? "Scroll" : "Ethereum"}:{" "}
             {tx.toHash ? (
               <Link
                 external
-                sx={{ color: "#396CE8" }}
+                sx={{ color: "#0F8E7E" }}
+                underline="always"
                 href={generateExploreLink(NETWORKS[+tx.isL1].explorer, tx.toHash)}
                 className="leading-normal flex-1"
               >
                 {truncateHash(tx.toHash)}
               </Link>
             ) : (
-              <span className="leading-normal flex-1">-</span>
-            )}{" "}
+              <Typography component="span" sx={{ fontSize: "1.4rem", lineHeight: 1.5, whiteSpace: "nowrap" }}>
+                {toTip}
+              </Typography>
+            )}
           </Typography>
-
-          {renderEstimatedWaitingTime(estimatedTimeMap[`to_${tx.toHash}`], tx.isL1, true)}
         </Stack>
       </TableCell>
     </TableRow>
diff --git a/src/pages/new-bridge/hooks/useAddToken.ts b/src/pages/new-bridge/hooks/useAddToken.ts
index 953df802f..a151b4113 100644
--- a/src/pages/new-bridge/hooks/useAddToken.ts
+++ b/src/pages/new-bridge/hooks/useAddToken.ts
@@ -6,7 +6,7 @@ import L1_erc20ABI from "@/assets/abis/L1_erc20ABI.json"
 import L2_GATEWAY_ROUTER_PROXY_ABI from "@/assets/abis/L2_GATEWAY_ROUTER_PROXY_ADDR.json"
 import { CHAIN_ID, GATEWAY_ROUTE_PROXY_ADDR } from "@/constants"
 import { USER_TOKEN_LIST } from "@/constants/storageKey"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { loadState, saveState } from "@/utils/localStorage"
 
 export enum TOKEN_LEVEL {
@@ -16,7 +16,7 @@ export enum TOKEN_LEVEL {
 }
 
 const useAddToken = () => {
-  const { networksAndSigners, refreshTokenList } = useApp()
+  const { networksAndSigners, refreshTokenList } = useBrigeContext()
   const [isLoading, setIsLoading] = useState(false)
 
   const getProvider = chainId => networksAndSigners[chainId].provider
diff --git a/src/pages/new-bridge/hooks/useApprove.ts b/src/pages/new-bridge/hooks/useApprove.ts
index b90a2c0be..d02bfd324 100644
--- a/src/pages/new-bridge/hooks/useApprove.ts
+++ b/src/pages/new-bridge/hooks/useApprove.ts
@@ -1,21 +1,21 @@
 import { ethers } from "ethers"
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 import L1_erc20ABI from "@/assets/abis/L1_erc20ABI.json"
 import { GATEWAY_ROUTE_PROXY_ADDR, USDC_GATEWAY_PROXY_ADDR, USDC_SYMBOL, WETH_GATEWAY_PROXY_ADDR, WETH_SYMBOL } from "@/constants"
 import { CHAIN_ID } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import { amountToBN } from "@/utils"
 
 const useApprove = (fromNetwork, selectedToken, amount) => {
   const { walletCurrentAddress, chainId } = useRainbowContext()
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
 
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState(null)
 
-  const [isNeeded, setIsNeeded] = useState(false)
+  const [isNeeded, setIsNeeded] = useState<boolean>()
 
   const approveAddress = useMemo(() => {
     if (!fromNetwork.isL1 && selectedToken.symbol === WETH_SYMBOL) return WETH_GATEWAY_PROXY_ADDR[fromNetwork.chainId]
@@ -35,30 +35,35 @@ const useApprove = (fromNetwork, selectedToken, amount) => {
       const { signer } = networksAndSigners[chainId as number]
       return new ethers.Contract(address, L1_erc20ABI, signer)
     }
+
     return null
   }, [selectedToken, networksAndSigners[chainId as number]])
 
-  const checkApproval = async (token, amount) => {
+  const checkApproval = useCallback(async () => {
     try {
       if (!tokenInstance) {
         return false
       }
-      const parsedAmount = amountToBN(amount, token.decimals)
+      if (!amount) {
+        return undefined
+      }
+
+      const parsedAmount = amountToBN(amount, selectedToken.decimals)
       const approvedAmount = await tokenInstance.allowance(walletCurrentAddress, approveAddress)
       if (approvedAmount >= parsedAmount) {
         return false
       }
       return true
     } catch (err) {
-      return false
+      return undefined
     }
-  }
+  }, [tokenInstance, selectedToken, walletCurrentAddress, approveAddress, amount])
 
   useEffect(() => {
-    checkApproval(selectedToken, amount).then(needApproval => {
+    checkApproval().then(needApproval => {
       setIsNeeded(needApproval)
     })
-  }, [selectedToken, amount, approveAddress, tokenInstance])
+  }, [checkApproval])
 
   const approve = async () => {
     if (!tokenInstance) {
@@ -68,7 +73,7 @@ const useApprove = (fromNetwork, selectedToken, amount) => {
     try {
       const tx = await tokenInstance.approve(approveAddress, ethers.MaxUint256)
       await tx?.wait()
-      const needApproval = await checkApproval(selectedToken, amount)
+      const needApproval = await checkApproval()
       setIsNeeded(needApproval)
     } catch (error) {
       setError(error)
@@ -81,7 +86,7 @@ const useApprove = (fromNetwork, selectedToken, amount) => {
   const cancelApproval = async () => {
     const tx = await tokenInstance?.approve(approveAddress, 0)
     await tx?.wait()
-    const needApproval = await checkApproval(selectedToken, amount)
+    const needApproval = await checkApproval()
     setIsNeeded(needApproval)
   }
 
diff --git a/src/pages/new-bridge/hooks/useCheckClaimStatus.ts b/src/pages/new-bridge/hooks/useCheckClaimStatus.ts
new file mode 100644
index 000000000..082bc5054
--- /dev/null
+++ b/src/pages/new-bridge/hooks/useCheckClaimStatus.ts
@@ -0,0 +1,45 @@
+import { useMemo } from "react"
+
+import { ClaimStatus } from "@/stores/claimStore"
+import useTxStore from "@/stores/txStore"
+
+import useLastFinalizedBatchIndex from "./useLastFinalizedBatchIndex"
+
+const useCheckClaimStatus = tx => {
+  const { lastFinalizedBatchIndex } = useLastFinalizedBatchIndex()
+
+  const { estimatedTimeMap } = useTxStore()
+
+  const claimStatus = useMemo(() => {
+    const { assumedStatus, toBlockNumber, claimInfo } = tx
+
+    if (assumedStatus) {
+      return ClaimStatus.FAILED
+    }
+    if (toBlockNumber) {
+      return ClaimStatus.CLAIMED
+    }
+    // The estimated claim time will not exceed 5 minutes.
+    if (estimatedTimeMap[`claim_${tx.hash}`] + 1000 * 60 * 5 > Date.now()) {
+      return ClaimStatus.CLAIMING
+    }
+    if (+claimInfo?.batch_index && claimInfo?.batch_index <= lastFinalizedBatchIndex) {
+      return ClaimStatus.CLAIMABLE
+    }
+    return ClaimStatus.NOT_READY
+  }, [tx, lastFinalizedBatchIndex, estimatedTimeMap])
+
+  const claimTip = useMemo(() => {
+    if (claimStatus === ClaimStatus.CLAIMABLE) {
+      return "Ready to be claimed"
+    } else if (claimStatus === ClaimStatus.NOT_READY) {
+      return "Pending..."
+    }
+
+    return ""
+  }, [claimStatus])
+
+  return { claimStatus, claimTip }
+}
+
+export default useCheckClaimStatus
diff --git a/src/pages/new-bridge/hooks/useCheckValidAmount.ts b/src/pages/new-bridge/hooks/useCheckValidAmount.ts
deleted file mode 100644
index 2e0ab10a7..000000000
--- a/src/pages/new-bridge/hooks/useCheckValidAmount.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useState } from "react"
-
-import { checkAmountOverflow } from "@/utils"
-
-const useCheckValidAmount = amount => {
-  const [invalidMessage, setInvalidMessage] = useState("")
-  useEffect(() => {
-    const isZero = amount && Number(amount) === 0
-    const valid = checkAmountOverflow(amount)
-
-    let errorMsg = ""
-    if (isZero) {
-      errorMsg = "The amount should be greater than 0!"
-    } else if (!valid) {
-      errorMsg = "The amount exceeds the maximum value!"
-    }
-    setInvalidMessage(errorMsg)
-  }, [amount])
-
-  return invalidMessage
-}
-
-export default useCheckValidAmount
diff --git a/src/pages/new-bridge/hooks/useEstimateSendTransaction.ts b/src/pages/new-bridge/hooks/useEstimateSendTransaction.ts
index 0d0aa6110..3bb53ba32 100644
--- a/src/pages/new-bridge/hooks/useEstimateSendTransaction.ts
+++ b/src/pages/new-bridge/hooks/useEstimateSendTransaction.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 
 import { CHAIN_ID } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { usePriceFeeContext } from "@/contexts/PriceFeeProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 
@@ -10,7 +10,7 @@ export function useEstimateSendTransaction(props) {
   const { checkConnectedChainId, walletCurrentAddress } = useRainbowContext()
   const { gasLimit, gasPrice } = usePriceFeeContext()
 
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
 
   const [instance, setInstance] = useState<any>(null)
 
@@ -52,12 +52,13 @@ export function useEstimateSendTransaction(props) {
     if (!isNetworkConnected) return BigInt(0)
     const nativeTokenBalance = await networksAndSigners[fromNetwork.chainId].provider.getBalance(walletCurrentAddress)
     if (!nativeTokenBalance) {
-      return BigInt(0)
+      return null
     } else if (fromNetwork.isL1 && gasLimit && gasPrice) {
       return await estimateSendL1ToL2()
     } else if (!fromNetwork.isL1 && toNetwork.isL1) {
       return await estimateSendL2ToL1()
     }
+    return null
   }
 
   const estimateSendL1ToL2 = () => {
diff --git a/src/pages/new-bridge/hooks/useGasFee.ts b/src/pages/new-bridge/hooks/useGasFee.ts
index 8190d43c5..6e87a238d 100644
--- a/src/pages/new-bridge/hooks/useGasFee.ts
+++ b/src/pages/new-bridge/hooks/useGasFee.ts
@@ -2,13 +2,14 @@ import { getPublicClient } from "@wagmi/core"
 import { useState } from "react"
 import { useBlockNumber } from "wagmi"
 
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import useBridgeStore from "@/stores/bridgeStore"
+import { trimErrorMessage } from "@/utils"
 
 import { useEstimateSendTransaction } from "./useEstimateSendTransaction"
 
-const useGasFee = selectedToken => {
-  const { networksAndSigners } = useApp()
+const useGasFee = (selectedToken, needApproval) => {
+  const { networksAndSigners } = useBrigeContext()
   const { fromNetwork, toNetwork } = useBridgeStore()
   const { estimateSend } = useEstimateSendTransaction({
     fromNetwork,
@@ -16,9 +17,9 @@ const useGasFee = selectedToken => {
     selectedToken,
   })
 
-  const [gasFee, setGasFee] = useState(BigInt(0))
-  const [displayedGasFee, setDisplayedGasFee] = useState(BigInt(0))
-  const [gasLimit, setGasLimit] = useState(BigInt(0))
+  const [gasFee, setGasFee] = useState<bigint | null>(null)
+  const [displayedGasFee, setDisplayedGasFee] = useState<bigint | null>(null)
+  const [gasLimit, setGasLimit] = useState<bigint | null>(null)
   const [maxFeePerGas, setMaxFeePerGas] = useState<bigint | null>(null)
   const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState<bigint | null>(null)
   const [error, setError] = useState("")
@@ -38,13 +39,22 @@ const useGasFee = selectedToken => {
       priorityFee = null
     }
 
-    const gas = await estimateSend()
-    const limit = (gas * BigInt(120)) / BigInt(100)
+    const estimatedGasLimit = await estimateSend()
+    if (estimatedGasLimit === null) {
+      return {
+        gasLimit: null,
+        gasFee: null,
+        gasPrice,
+        maxPriorityFeePerGas: priorityFee,
+        displayedGasFee: null,
+      }
+    }
+    const enlargedGasLimit = (estimatedGasLimit * BigInt(120)) / BigInt(100)
     const displayedGasPrice = await getPublicClient({ chainId: fromNetwork.chainId }).getGasPrice()
-    const estimatedGasCost = BigInt(limit) * BigInt(gasPrice || 1e9)
-    const displayedEstimatedGasCost = BigInt(gas) * BigInt(displayedGasPrice || 1e9)
+    const estimatedGasCost = enlargedGasLimit * (gasPrice || BigInt(1e9))
+    const displayedEstimatedGasCost = estimatedGasLimit * (displayedGasPrice || BigInt(1e9))
     return {
-      gasLimit: limit,
+      gasLimit: enlargedGasLimit,
       gasFee: estimatedGasCost,
       gasPrice,
       maxPriorityFeePerGas: priorityFee,
@@ -53,7 +63,7 @@ const useGasFee = selectedToken => {
   }
 
   useBlockNumber({
-    enabled: !!networksAndSigners[fromNetwork.chainId].provider,
+    enabled: !!networksAndSigners[fromNetwork.chainId].provider && needApproval === false,
     onBlock(blockNumber) {
       calculateGasFee()
         .then(value => {
@@ -65,12 +75,12 @@ const useGasFee = selectedToken => {
           setError("")
         })
         .catch(error => {
-          setGasFee(BigInt(0))
-          setDisplayedGasFee(BigInt(0))
-          setGasLimit(BigInt(0))
+          setGasFee(null)
+          setDisplayedGasFee(null)
+          setGasLimit(null)
           setMaxFeePerGas(null)
           setMaxPriorityFeePerGas(null)
-          setError(error.message)
+          setError(trimErrorMessage(error.message))
         })
     },
   })
diff --git a/src/pages/new-bridge/hooks/useLastFinalizedBatchIndex.tsx b/src/pages/new-bridge/hooks/useLastFinalizedBatchIndex.tsx
index 3ec69c43e..0b0ad8c17 100644
--- a/src/pages/new-bridge/hooks/useLastFinalizedBatchIndex.tsx
+++ b/src/pages/new-bridge/hooks/useLastFinalizedBatchIndex.tsx
@@ -3,11 +3,11 @@ import useSWR from "swr"
 
 import ScrollChain from "@/assets/abis/ScrollChain.json"
 import { CHAIN_ID } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { requireEnv } from "@/utils"
 
 const useLastFinalizedBatchIndex = () => {
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
 
   async function fetchLastFinalizedBatchIndex() {
     const provider = networksAndSigners[CHAIN_ID.L1].provider
@@ -25,7 +25,7 @@ const useLastFinalizedBatchIndex = () => {
   })
   return {
     loading: isLoading,
-    lastFinalizedBatchIndex: data,
+    lastFinalizedBatchIndex: data || 0,
     error,
   }
 }
diff --git a/src/pages/new-bridge/hooks/useSendTransaction.ts b/src/pages/new-bridge/hooks/useSendTransaction.ts
index 331ca1ee5..6724c7d4a 100644
--- a/src/pages/new-bridge/hooks/useSendTransaction.ts
+++ b/src/pages/new-bridge/hooks/useSendTransaction.ts
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react"
 
 import { CHAIN_ID, NETWORKS } from "@/constants"
 import { TX_STATUS } from "@/constants"
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { usePriceFeeContext } from "@/contexts/PriceFeeProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useBridgeStore from "@/stores/bridgeStore"
@@ -21,10 +21,10 @@ type TxOptions = {
 export function useSendTransaction(props) {
   const { amount: fromTokenAmount, selectedToken } = props
   const { walletCurrentAddress } = useRainbowContext()
-  const { networksAndSigners, blockNumbers } = useApp()
-  const { gasLimit: txGasLimit, maxFeePerGas, maxPriorityFeePerGas } = useGasFee(selectedToken)
+  const { networksAndSigners, blockNumbers } = useBrigeContext()
+  const { gasLimit: txGasLimit, maxFeePerGas, maxPriorityFeePerGas } = useGasFee(selectedToken, false)
   const { addTransaction, updateTransaction, addEstimatedTimeMap, updateOrderedTxs, addAbnormalTransactions, removeFrontTransactions } = useTxStore()
-  const { fromNetwork, toNetwork, changeTxResult } = useBridgeStore()
+  const { fromNetwork, toNetwork, changeTxResult, changeWithdrawStep } = useBridgeStore()
   const { gasLimit, gasPrice } = usePriceFeeContext()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -57,8 +57,10 @@ export function useSendTransaction(props) {
       tx.wait()
         .then(receipt => {
           if (receipt?.status === 1) {
-            changeTxResult({ hash: tx.hash, amount: fromTokenAmount })
-
+            changeTxResult({ code: 1 })
+            if (!tx.isL1) {
+              changeWithdrawStep("2")
+            }
             handleTransaction(tx, {
               fromBlockNumber: receipt.blockNumber,
             })
diff --git a/src/pages/new-bridge/hooks/useSufficientBalance.ts b/src/pages/new-bridge/hooks/useSufficientBalance.ts
index ada8a32b7..22549259a 100644
--- a/src/pages/new-bridge/hooks/useSufficientBalance.ts
+++ b/src/pages/new-bridge/hooks/useSufficientBalance.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 
-import { useApp } from "@/contexts/AppContextProvider"
+import { useBrigeContext } from "@/contexts/BridgeContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import { useIsSmartContractWallet } from "@/hooks"
 import useBridgeStore from "@/stores/bridgeStore"
@@ -8,9 +8,9 @@ import { toTokenDisplay } from "@/utils"
 
 import useTransactionBuffer from "./useTransactionBuffer"
 
-function useSufficientBalance(selectedToken: any, amount?: bigint, fee?: bigint, tokenBalance: bigint = BigInt(0)) {
+function useSufficientBalance(selectedToken: any, amount?: bigint, fee?: bigint | null, tokenBalance: bigint = BigInt(0)) {
   const { walletCurrentAddress, chainId } = useRainbowContext()
-  const { networksAndSigners } = useApp()
+  const { networksAndSigners } = useBrigeContext()
   const networksAndSigner = networksAndSigners[chainId as number]
   const transactionBuffer = useTransactionBuffer(selectedToken)
 
@@ -21,10 +21,19 @@ function useSufficientBalance(selectedToken: any, amount?: bigint, fee?: bigint,
 
   useEffect(() => {
     async function checkEnoughBalance() {
-      if (!isNetworkCorrect || !amount) {
+      if (!isNetworkCorrect || amount === undefined) {
         setWarning("")
         return
       }
+      const isZero = Number(amount) === 0
+      if (isZero) {
+        setWarning(">0")
+        return
+      }
+      if (!tokenBalance) {
+        setWarning(`Insufficient balance. Your account has 0 ${selectedToken.symbol}.`)
+        return
+      }
 
       let enoughFeeBalance: boolean
       let enoughTokenBalance: boolean
@@ -35,11 +44,10 @@ function useSufficientBalance(selectedToken: any, amount?: bigint, fee?: bigint,
 
       if (selectedToken.native) {
         const totalCost = amount + totalFee
-
         enoughFeeBalance = tokenBalance >= totalCost
         enoughTokenBalance = enoughFeeBalance
       } else {
-        const nativeTokenBalance = await networksAndSigner.provider.getBalance(walletCurrentAddress)
+        nativeTokenBalance = await networksAndSigner.provider.getBalance(walletCurrentAddress)
         enoughFeeBalance = nativeTokenBalance ? nativeTokenBalance >= totalFee : false
         enoughTokenBalance = tokenBalance >= amount
       }
@@ -49,25 +57,17 @@ function useSufficientBalance(selectedToken: any, amount?: bigint, fee?: bigint,
         return setSufficientBalance(true)
       }
 
-      if (!tokenBalance) {
-        message = `Insufficient balance. Your account has 0 ${selectedToken.symbol}.`
+      if (!enoughTokenBalance && !selectedToken.native) {
+        message = `Insufficient balance. The amount should be less than ${toTokenDisplay(tokenBalance, selectedToken.decimals, selectedToken.symbol)}`
       } else if (!enoughFeeBalance) {
-        if (tokenBalance > totalFee) {
+        if (!selectedToken.native) {
+          message = `${nativeTokenBalance ? "Insufficient" : "No"} balance. Please add ETH to pay for tx fees.`
+        } else if (tokenBalance > totalFee) {
           const diff = tokenBalance - totalFee
-          message = `Insufficient balance to cover the cost of tx. The amount should be less than ${toTokenDisplay(
-            diff,
-            selectedToken.decimals,
-            selectedToken.symbol,
-          )}`
+          message = `Insufficient balance. The amount should be less than ${toTokenDisplay(diff, selectedToken.decimals, selectedToken.symbol)}`
         } else {
-          message = `Insufficient balance to cover the cost of tx. Please add ETH to pay for tx fees.`
-        }
-
-        if (!selectedToken.native) {
-          message = `${nativeTokenBalance ? "Insufficient" : "No"} balance to cover the tx fee. Please add ETH to pay for tx fees.`
+          message = `Insufficient balance. Please add ETH to pay for tx fees.`
         }
-      } else if (!enoughTokenBalance) {
-        message = `Insufficient balance. The amount should be less than ${toTokenDisplay(tokenBalance, selectedToken.decimals, selectedToken.symbol)}`
       }
 
       setWarning(message)
@@ -81,6 +81,7 @@ function useSufficientBalance(selectedToken: any, amount?: bigint, fee?: bigint,
     // We will trust on the wallet UI to handle this issue for now.
     if (isSmartContractWallet) {
       setSufficientBalance(true)
+      setWarning("")
     } else {
       checkEnoughBalance()
     }
diff --git a/src/pages/new-bridge/index.tsx b/src/pages/new-bridge/index.tsx
index c29c36e6f..e9886d96a 100644
--- a/src/pages/new-bridge/index.tsx
+++ b/src/pages/new-bridge/index.tsx
@@ -3,17 +3,17 @@ import { useEffect } from "react"
 
 import { Stack, Typography } from "@mui/material"
 
-import GlobalWarning from "@/components/GlobalWarning"
+import GlobalComponents from "@/components/GlobalComponents"
 import SectionWrapper from "@/components/SectionWrapper"
 import { NETWORKS } from "@/constants"
-import AppProvider from "@/contexts/AppContextProvider"
+import BridgeContextProvider from "@/contexts/BridgeContextProvider"
 import { PriceFeeProvider } from "@/contexts/PriceFeeProvider"
 import useBridgeStore from "@/stores/bridgeStore"
-import { isProduction, requireEnv } from "@/utils"
+import { isSepolia, requireEnv } from "@/utils"
 
 import FAQsLink from "./FAQ/link"
 import Send from "./Send"
-import TxHistoryDialog from "./TxHistoryDialog"
+import HistoryButton from "./components/HistoryButton"
 
 const Bridge = () => {
   const { txType, changeFromNetwork, changeToNetwork } = useBridgeStore()
@@ -29,12 +29,12 @@ const Bridge = () => {
   }, [txType])
 
   return (
-    <AppProvider>
+    <BridgeContextProvider>
       <PriceFeeProvider>
-        <GlobalWarning></GlobalWarning>
+        <GlobalComponents></GlobalComponents>
         <SectionWrapper
           sx={{
-            pt: "8.4rem",
+            pt: ["4.8rem", "8.4rem"],
             pb: "6rem",
             minHeight: "calc(100vh - 69.2rem)",
             display: "flex",
@@ -43,17 +43,33 @@ const Bridge = () => {
             maxWidth: ["100% !important"],
           }}
         >
-          <Stack direction="row" sx={{ width: "100%", mb: ["3rem", "5rem"] }} spacing="4px" justifyContent="space-between" alignItems="center">
-            <Typography sx={{ fontSize: ["4rem", "4.8rem"], fontWeight: 600, textAlign: "center", width: "100%", whiteSpace: "nowrap" }}>
-              {isProduction ? "" : `${requireEnv("REACT_APP_SCROLL_ENVIRONMENT")} Testnet`} Bridge
+          <Stack
+            direction="row"
+            sx={{ mb: "2.4rem", width: "64rem", maxWidth: "100%" }}
+            spacing="2rem"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography
+              sx={{
+                fontSize: ["4rem", "4.8rem"],
+                lineHeight: ["4.8rem", "7.2rem"],
+                fontWeight: 600,
+                width: "100%",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {isSepolia ? `${requireEnv("REACT_APP_SCROLL_ENVIRONMENT")} Testnet` : ""} Bridge
             </Typography>
+            <HistoryButton></HistoryButton>
           </Stack>
           <Send></Send>
-          <TxHistoryDialog></TxHistoryDialog>
           <FAQsLink />
         </SectionWrapper>
       </PriceFeeProvider>
-    </AppProvider>
+    </BridgeContextProvider>
   )
 }
 
diff --git a/src/stores/bridgeStore.ts b/src/stores/bridgeStore.ts
index e510e4c67..c99c9810e 100644
--- a/src/stores/bridgeStore.ts
+++ b/src/stores/bridgeStore.ts
@@ -6,14 +6,15 @@ type TransactionType = "Deposit" | "Withdraw"
 
 type WithDrawStep = "1" | "2"
 
-interface TxResult {
-  hash: string
-  amount: string
+interface TxSuccess {
+  code: 1
 }
 interface TxError {
-  hash?: string
+  code: 0
   message: string
 }
+
+type TxResult = TxSuccess | TxError | null
 interface BridgeStore {
   historyVisible: boolean
   changeHistoryVisible: (value) => void
@@ -23,15 +24,16 @@ interface BridgeStore {
   toNetwork: Network
   txType: TransactionType
   withDrawStep: WithDrawStep
-  txResult: TxResult | null
-  txError: TxError | null
+  txResult: TxResult
+  // txError: TxError | null
+  // txResult:
   isNetworkCorrect: boolean
 
   changeFromNetwork: (network: Network) => void
   changeToNetwork: (network: Network) => void
   changeTxType: (txType: TransactionType) => void
   changeTxResult: (txResult: TxResult | null) => void
-  changeTxError: (txError: TxError | null) => void
+  // changeTxError: (txError: TxError | null) => void
   changeWithdrawStep: (withDrawStep: WithDrawStep) => void
   changeIsNetworkCorrect: (isNetworkCorrect: boolean) => void
 }
@@ -52,7 +54,7 @@ const useBridgeStore = create<BridgeStore>()((set, get) => ({
   txType: "Deposit",
   withDrawStep: "1",
   txResult: null,
-  txError: null,
+  // txError: null,
   isNetworkCorrect: true,
 
   changeFromNetwork: network => {
@@ -77,11 +79,11 @@ const useBridgeStore = create<BridgeStore>()((set, get) => ({
     })
   },
 
-  changeTxError: txError => {
-    set({
-      txError,
-    })
-  },
+  // changeTxError: txError => {
+  //   set({
+  //     txError,
+  //   })
+  // },
 
   changeWithdrawStep: withDrawStep => {
     set({
diff --git a/src/stores/claimStore.ts b/src/stores/claimStore.ts
index 5acc22319..7d6418721 100644
--- a/src/stores/claimStore.ts
+++ b/src/stores/claimStore.ts
@@ -11,12 +11,15 @@ interface TxStore {
   page: number
   total: number
   loading: boolean
+  claimLoading: boolean
+  txStatus: ClaimStatus
   targetTransaction: string | null
   pageTransactions: Transaction[]
   orderedTxDB: TimestampTx[]
   comboPageTransactions: (walletAddress, page, rowsPerPage) => Promise<any>
   generateTransactions: (transactions) => void
   setTargetTransaction: (address) => void
+  clearTransactions: () => void
 }
 
 export const enum ClaimStatus {
@@ -42,6 +45,7 @@ interface Transaction {
   errMsg?: string
   initiatedAt?: string
   finalisedAt?: string
+  loading?: boolean
 }
 
 const MAX_OFFSET_TIME = 30 * 60 * 1000
@@ -109,6 +113,8 @@ const useTxStore = create<TxStore>()(
       page: 1,
       total: 0,
       loading: false,
+      claimLoading: false,
+      txStatus: 1,
       pageTransactions: [],
       orderedTxDB: [],
       targetTransaction: null,
@@ -157,6 +163,13 @@ const useTxStore = create<TxStore>()(
           targetTransaction: address,
         })
       },
+      clearTransactions: () => {
+        set({
+          pageTransactions: [],
+          page: 1,
+          total: 0,
+        })
+      },
     }),
     {
       name: CLAIM_TRANSACTIONS,
diff --git a/src/types/network.d.ts b/src/types/network.d.ts
index fcfb4d636..34852804e 100644
--- a/src/types/network.d.ts
+++ b/src/types/network.d.ts
@@ -3,7 +3,6 @@ type EmptyNetwork = ValidNetwork<string, never>
 type ValidNetwork = {
   name: string
   slug: string
-  imageUrl: string
   icon: any
   rpcUrl: string
   explorer: string
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 5bfebc084..cd12cb158 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -1,3 +1,4 @@
+import dayjs from "dayjs"
 import { formatUnits, parseUnits } from "ethers"
 import _ from "lodash"
 import numbro from "numbro"
@@ -125,7 +126,7 @@ export const formatUTCDate = (date, needSub?: boolean) => {
 
 export const formatDate = (date, options: { needSub?: boolean; withTime?: boolean } = {}) => {
   const { needSub, withTime } = options
-  let finalDate = date
+  let finalDate = dayjs.isDayjs(date) ? date : dayjs(date)
   if (needSub) {
     finalDate = date.subtract(1, "ms")
   }
@@ -134,3 +135,7 @@ export const formatDate = (date, options: { needSub?: boolean; withTime?: boolea
   }
   return finalDate.format("MMM D, YYYY")
 }
+
+export const trimErrorMessage = message => {
+  return message.split("(")[0].trim()
+}