diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index a24c0ca4..18d979e7 100644
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -1,9 +1,9 @@
 const path = require("path");
 
 const buildAppsEslintCommand = (filenames) =>
-  `npm run lint -w apps -- --fix --file ${filenames.map((f) => path.relative("packages/apps", f)).join(" --file ")}`;
+  `npm run lint -- --fix --file ${filenames.map((f) => path.relative("./", f)).join(" --file ")}`;
 
 module.exports = {
-  "packages/apps/src/**/*.{js,jsx,ts,tsx}": [buildAppsEslintCommand],
+  "src/**/*.{js,jsx,ts,tsx}": [buildAppsEslintCommand],
   "**/*.{js,jsx,ts,tsx,json}": "prettier --write",
 };
diff --git a/src/app/relayer/page.tsx b/src/app/relayer/page.tsx
index 9299eaab..eea458b9 100644
--- a/src/app/relayer/page.tsx
+++ b/src/app/relayer/page.tsx
@@ -9,7 +9,7 @@ import RelayerProviderV3 from "@/providers/relayer-provider-v3";
 import PageWrap from "@/ui/page-wrap";
 import SegmentedTabs from "@/ui/segmented-tabs";
 import VersionSwitch from "@/components/version-switch";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 type TabKey = "manage" | "register" | "overview";
 
@@ -17,6 +17,8 @@ export default function RelayerPage() {
   const [activeTab, setActiveTab] = useState<TabKey>("manage");
   const [version, setVersion] = useState<"v2" | "v3">("v3");
 
+  const handleManage = useCallback(() => setActiveTab("manage"), []);
+
   return (
     <PageWrap>
       <div className="flex flex-col items-center gap-5">
@@ -46,11 +48,11 @@ export default function RelayerPage() {
               children:
                 version === "v3" ? (
                   <RelayerProviderV3>
-                    <RelayerRegisterV3 />
+                    <RelayerRegisterV3 onManage={handleManage} />
                   </RelayerProviderV3>
                 ) : (
                   <RelayerProvider>
-                    <RelayerRegister />
+                    <RelayerRegister onManage={handleManage} />
                   </RelayerProvider>
                 ),
             },
diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
index bc924255..9c43bf63 100644
--- a/src/components/balance-input.tsx
+++ b/src/components/balance-input.tsx
@@ -1,8 +1,7 @@
 import { InputValue, Token } from "@/types";
 import Input from "@/ui/input";
 import InputAlert from "@/ui/input-alert";
-import { formatBalance, getTokenLogoSrc } from "@/utils";
-import Image from "next/image";
+import { formatBalance } from "@/utils";
 import { ChangeEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { parseUnits } from "viem";
 
@@ -13,52 +12,34 @@ enum ErrorCode {
 }
 
 interface Props {
-  placeholder?: string;
-  balance?: bigint;
   max?: bigint;
   min?: bigint;
-  compact?: boolean;
-  autoFocus?: boolean;
   disabled?: boolean;
-  suffix?: "symbol";
-  enabledDynamicStyle?: boolean;
+  balance?: bigint;
+  placeholder?: string;
   value: InputValue<bigint>;
   token: Token | undefined;
-  tokenOptions?: Token[];
-  balanceLoading?: boolean;
-  onBalanceRefresh?: () => void;
   onChange?: (value: InputValue<bigint>) => void;
-  onTokenChange?: (token: Token) => void;
 }
 
 export function BalanceInput({
-  placeholder,
-  balance,
   max,
   min,
-  compact,
-  autoFocus,
+  balance,
   disabled,
-  suffix,
-  enabledDynamicStyle,
+  placeholder,
   value,
   token,
-  balanceLoading,
-  tokenOptions = [],
-  onBalanceRefresh = () => undefined,
   onChange = () => undefined,
-  onTokenChange = () => undefined,
 }: Props) {
-  const spanRef = useRef<HTMLSpanElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const balanceRef = useRef(balance);
   const tokenRef = useRef(token);
 
-  const [dynamicStyle, setDynamicStyle] = useState("text-sm font-medium");
   const [errorCode, setErrorCode] = useState<ErrorCode>();
 
   const _placeholder = useMemo(() => {
-    if (token && compact) {
+    if (token?.decimals) {
       if (max !== undefined) {
         return `Max ${formatBalance(max, token.decimals)}`;
       } else if (balance !== undefined) {
@@ -66,7 +47,7 @@ export function BalanceInput({
       }
     }
     return placeholder ?? "Enter an amount";
-  }, [balance, max, placeholder, token, compact]);
+  }, [balance, max, placeholder, token?.decimals]);
 
   const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
     (e) => {
@@ -121,93 +102,25 @@ export function BalanceInput({
     }
   }, [token, onChange]);
 
-  useEffect(() => {
-    if (enabledDynamicStyle) {
-      const inputWidth = inputRef.current?.clientWidth || 1;
-      const spanWidth = spanRef.current?.clientWidth || 0;
-      const percent = (spanWidth / inputWidth) * 100;
-      if (percent < 10) {
-        setDynamicStyle("text-[3.75rem] font-extralight");
-      } else if (percent < 20) {
-        setDynamicStyle("text-[3rem] font-light");
-      } else if (percent < 30) {
-        setDynamicStyle("text-[2.25rem] font-light");
-      } else if (percent < 40) {
-        setDynamicStyle("text-[1.875rem] font-normal");
-      } else if (percent < 50) {
-        setDynamicStyle("text-[1.5rem] font-normal");
-      } else if (percent < 60) {
-        setDynamicStyle("text-[1.25rem] font-medium");
-      } else {
-        setDynamicStyle("text-[1.125rem] font-medium");
-      }
-    }
-  }, [value.input, enabledDynamicStyle]);
-
   return (
     <div
-      className={`normal-input-wrap relative flex flex-col rounded-medium bg-inner px-small py-small lg:px-medium ${
-        compact ? "lg:py-medium" : ""
-      } ${value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"}`}
+      className={`normal-input-wrap relative ${
+        value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"
+      } rounded-xl bg-app-bg px-medium`}
     >
-      <div className="flex items-center justify-between gap-small">
+      <div className="flex h-10 items-center justify-between gap-small text-sm font-semibold text-white lg:h-11">
         <Input
           placeholder={_placeholder}
-          className={`w-full rounded bg-transparent text-white transition-[font-size,font-weight,line-height] duration-300 ${
-            compact ? "" : "h-12"
-          } ${enabledDynamicStyle ? `leading-none ${dynamicStyle}` : "text-sm font-medium"}`}
+          className="w-full rounded bg-transparent"
           onChange={handleChange}
           ref={inputRef}
           disabled={disabled}
           value={value.input}
-          autoFocus={autoFocus}
         />
 
-        {compact ? (
-          suffix === "symbol" && token ? (
-            <span className="text-sm font-medium">{token.symbol}</span>
-          ) : null
-        ) : (
-          <div className="flex shrink-0 items-center gap-medium self-end">
-            {token ? (
-              <div className="flex shrink-0 items-center gap-small">
-                <Image width={32} height={32} alt="Token" src={getTokenLogoSrc(token.logo)} className="rounded-full" />
-                <span className="text-base font-medium text-white">{token.symbol}</span>
-              </div>
-            ) : null}
-            {tokenOptions
-              .filter((t) => t.symbol !== token?.symbol)
-              .map((t) => (
-                <Image
-                  key={t.symbol}
-                  width={26}
-                  height={26}
-                  alt="Token"
-                  src={getTokenLogoSrc(t.logo)}
-                  className="rounded-full opacity-80 transition-transform duration-300 hover:cursor-pointer hover:opacity-100 active:-translate-x-1"
-                  onClick={() => onTokenChange(t)}
-                />
-              ))}
-          </div>
-        )}
+        {token ? <span>{token.symbol}</span> : null}
       </div>
 
-      {!compact && token ? (
-        <div className="flex items-center gap-small">
-          <span className="text-xs font-medium text-white/50">
-            Balance: {formatBalance(balance ?? 0n, token.decimals)}
-          </span>
-          <button
-            className={`rounded-full bg-white/20 p-[3px] opacity-50 transition hover:bg-white/20 hover:opacity-100 active:scale-95 ${
-              balanceLoading ? "animate-spin" : ""
-            }`}
-            onClick={onBalanceRefresh}
-          >
-            <Image alt="Refresh" width={14} height={14} src="/images/refresh.svg" />
-          </button>
-        </div>
-      ) : null}
-
       {errorCode === ErrorCode.INSUFFICIENT ? (
         <InputAlert text="* Insufficient" />
       ) : errorCode === ErrorCode.REQUIRE_LESS ? (
@@ -215,10 +128,6 @@ export function BalanceInput({
       ) : errorCode === ErrorCode.REQUIRE_MORE ? (
         <InputAlert text={`* Min: ${formatBalance(min ?? 0n, token?.decimals ?? 0, { precision: 6 })}`} />
       ) : null}
-
-      <span className="invisible fixed left-0 top-0 -z-50" ref={spanRef}>
-        {value.input}
-      </span>
     </div>
   );
 }
diff --git a/src/components/chain-select.tsx b/src/components/chain-select.tsx
index a89a209a..1d24ecd8 100644
--- a/src/components/chain-select.tsx
+++ b/src/components/chain-select.tsx
@@ -1,15 +1,12 @@
 import { ChainConfig } from "@/types";
 import Select from "@/ui/select";
 import { getChainLogoSrc } from "@/utils";
-import { Placement } from "@floating-ui/react";
 import Image from "next/image";
 
 interface Props {
   options?: ChainConfig[];
   value?: ChainConfig;
   placeholder?: string;
-  compact?: boolean;
-  placement?: Placement;
   className?: string;
   onChange?: (value: ChainConfig | undefined) => void;
 }
@@ -17,84 +14,56 @@ interface Props {
 export default function ChainSelect({
   value,
   placeholder,
-  compact,
-  placement,
   className,
   options = [],
   onChange = () => undefined,
 }: Props) {
   return (
     <Select
-      labelClassName={`gap-small rounded-medium flex items-center justify-between transition active:translate-y-1 ${className}`}
-      childClassName={`bg-inner flex flex-col rounded-medium max-h-60 overflow-y-auto border border-component app-scrollbar ${
-        compact ? "py-small" : "p-medium"
-      }`}
+      sameWidth
+      clearable
       label={
         value ? (
           <div className="flex items-center gap-medium truncate">
-            {compact ? null : (
-              <Image
-                alt="Chain"
-                width={32}
-                height={32}
-                src={getChainLogoSrc(value.logo)}
-                className="h-8 w-8 shrink-0 rounded-full"
-              />
-            )}
-
-            <span className="truncate text-sm font-medium text-white">{value.name}</span>
+            <Image
+              alt="Chain"
+              width={22}
+              height={22}
+              src={getChainLogoSrc(value.logo)}
+              className="hidden shrink-0 rounded-full lg:inline"
+            />
+            <span className="truncate text-sm font-semibold text-white">{value.name}</span>
           </div>
         ) : undefined
       }
-      placeholder={<span className="truncate text-sm font-medium text-slate-400">{placeholder}</span>}
-      placement={placement}
-      sameWidth={compact ? true : false}
-      clearable={compact ? true : false}
+      placeholder={<span className="truncate text-sm font-semibold text-slate-400">{placeholder}</span>}
+      labelClassName={`gap-small flex items-center justify-between ${className}`}
+      childClassName="bg-app-bg flex flex-col rounded-xl max-h-60 overflow-y-auto border border-white/20 app-scrollbar py-small"
       onClear={() => onChange(undefined)}
     >
       {options.length ? (
-        compact ? (
-          options.map((option) => {
-            return (
-              <button
-                key={option.id}
-                onClick={() => onChange(option)}
-                className="flex items-center gap-medium px-large py-2 text-start transition-colors hover:bg-white/10"
-              >
-                <Image
-                  width={20}
-                  height={20}
-                  alt="Chain logo"
-                  src={getChainLogoSrc(option.logo)}
-                  className="rounded-full"
-                />
-                <span className="truncate text-sm font-medium text-white">{option.name}</span>
-              </button>
-            );
-          })
-        ) : (
-          <div className="grid grid-cols-2 gap-small">
-            {options.map((option) => (
-              <button
-                key={option.id}
-                className="flex w-36 shrink-0 items-center gap-small truncate rounded-medium bg-component px-2 py-1 transition-colors hover:bg-white/20"
-                onClick={() => onChange(option)}
-              >
-                <Image
-                  width={18}
-                  height={18}
-                  alt="Chain logo"
-                  src={getChainLogoSrc(option.logo)}
-                  className="rounded-full"
-                />
-                <span className="truncate text-sm font-medium text-white">{option.name}</span>
-              </button>
-            ))}
-          </div>
-        )
+        options.map((option) => {
+          return (
+            <button
+              key={option.id}
+              disabled={value?.id === option.id}
+              onClick={() => onChange(option)}
+              className="flex items-center gap-medium px-large py-medium text-start transition-colors hover:bg-white/5 disabled:bg-white/10"
+            >
+              <Image
+                width={20}
+                height={20}
+                alt="Chain logo"
+                src={getChainLogoSrc(option.logo)}
+                className="rounded-full"
+              />
+              <span className="truncate text-sm font-semibold text-white">{option.name}</span>
+            </button>
+          );
+        })
       ) : (
-        <div className="px-large py-small">
-          <span className="text-sm text-white/50">No data</span>
+        <div className="inline-flex justify-center p-2">
+          <span className="text-sm font-semibold text-slate-400">No data</span>
         </div>
       )}
     </Select>
diff --git a/src/components/fee-rate-input.tsx b/src/components/fee-rate-input.tsx
index 5fe52e91..f6244e61 100644
--- a/src/components/fee-rate-input.tsx
+++ b/src/components/fee-rate-input.tsx
@@ -8,10 +8,11 @@ interface Props {
   isV3?: boolean;
   placeholder?: string;
   value: InputValue<number>;
+  className?: string;
   onChange?: (value: InputValue<number>) => void;
 }
 
-export default function FeeRateInput({ isV3, placeholder, value, onChange = () => undefined }: Props) {
+export default function FeeRateInput({ isV3, placeholder, value, className, onChange = () => undefined }: Props) {
   const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
     (e) => {
       const input = e.target.value;
@@ -32,17 +33,17 @@ export default function FeeRateInput({ isV3, placeholder, value, onChange = () =
 
   return (
     <div
-      className={`normal-input-wrap relative flex items-center justify-between gap-small rounded-medium bg-inner p-small lg:p-medium ${
+      className={`normal-input-wrap relative flex items-center justify-between gap-small ${className} ${
         value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"
       }`}
     >
       <Input
-        className="w-full rounded bg-transparent text-sm font-medium text-white"
+        className="w-full rounded bg-transparent"
         placeholder={placeholder}
         onChange={handleChange}
         value={value.input}
       />
-      <span className="rounded bg-transparent text-sm font-medium text-white">%</span>
+      <span className="rounded bg-transparent">%</span>
 
       {value.valid ? null : <InputAlert text={`* Please enter 0 ~ ${isV3 ? "100" : "0.25"}`} />}
     </div>
diff --git a/src/components/lnrelayers-overview.tsx b/src/components/lnrelayers-overview.tsx
index 3119f40e..e926099b 100644
--- a/src/components/lnrelayers-overview.tsx
+++ b/src/components/lnrelayers-overview.tsx
@@ -71,7 +71,7 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
           <div className="flex items-center gap-medium">
             <span className="hidden font-medium text-white lg:inline">From</span>
             <ChainSelect
-              className="w-40 border border-white/20 px-medium py-[7px]"
+              className="h-9 w-40 rounded-medium border border-white/20 px-medium lg:w-44"
               placeholder="Source chain"
               options={defaultSourceChains}
               onChange={(value) => {
@@ -79,21 +79,19 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
                 setTargetChain(undefined);
                 setCurrentPage(0);
               }}
-              compact
               value={sourceChain}
             />
           </div>
           <div className="flex items-center gap-medium">
             <span className="hidden font-medium text-white lg:inline">To</span>
             <ChainSelect
-              className="w-40 border border-white/20 px-medium py-[7px]"
+              className="h-9 w-40 rounded-medium border border-white/20 px-medium lg:w-44"
               placeholder="Target chain"
               options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains)}
               onChange={(value) => {
                 setTargetChain(value);
                 setCurrentPage(0);
               }}
-              compact
               value={targetChain}
             />
           </div>
diff --git a/src/components/modals/relayer-manage-modal.tsx b/src/components/modals/relayer-manage-modal.tsx
index 09a0bc31..ed5bba3d 100644
--- a/src/components/modals/relayer-manage-modal.tsx
+++ b/src/components/modals/relayer-manage-modal.tsx
@@ -314,7 +314,7 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
       extra={
         activeKey === "withdraw" ? (
           <div className="h-6 self-end">
-            <span className="text-sm font-extrabold text-white/50">
+            <span className="text-sm font-medium text-white/50">
               {relayerInfo?.messageChannel === "layerzero"
                 ? "Powered by LayerZero & Helix"
                 : "Powered by Msgport & Helix"}
@@ -334,17 +334,12 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
             children: (
               <div className="flex flex-col gap-5" style={{ height: height }}>
                 <LabelSection label="Base Fee">
-                  <BalanceInput
-                    compact
-                    token={sourceToken}
-                    suffix="symbol"
-                    value={baseFeeInput}
-                    onChange={setBaseFeeInput}
-                  />
+                  <BalanceInput token={sourceToken} value={baseFeeInput} onChange={setBaseFeeInput} />
                 </LabelSection>
                 <LabelSection label="Liquidity Fee Rate">
                   <FeeRateInput
                     value={feeRateInput}
+                    className="h-10 rounded-xl bg-app-bg px-medium text-sm font-semibold text-white lg:h-11"
                     placeholder={feeRate === undefined ? undefined : `${formatFeeRate(feeRate)}%`}
                     onChange={setFeeRateInput}
                   />
@@ -372,8 +367,6 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
                       ? sourceBalance?.token
                       : undefined
                   }
-                  compact
-                  suffix="symbol"
                   value={depositAmount}
                   onChange={setDepositAmount}
                 />
@@ -387,7 +380,7 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
                 <span className="text-sm font-extrabold">Withdraw</span>
                 <Tooltip
                   content="A cross-chain message is required to perform a `withdraw margin` operation"
-                  contentClassName="w-60"
+                  contentClassName="w-72"
                   className="w-fit"
                 >
                   <Image width={16} height={16} alt="Info" src="/images/info.svg" />
@@ -400,15 +393,13 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
                   <BalanceInput
                     balance={margin}
                     token={sourceToken}
-                    compact
-                    suffix="symbol"
                     value={withdrawAmount}
                     onChange={setWithdrawAmount}
                   />
                 </LabelSection>
                 <LabelSection label="Withdraw Fee" tips="This value is calculated and does not require input">
                   <div
-                    className={`relative flex h-10 items-center justify-between rounded-medium border bg-inner px-small lg:px-medium ${
+                    className={`relative flex h-10 items-center justify-between rounded-xl border bg-app-bg px-medium lg:h-11 ${
                       withdrawFeeParams || loadingWithdrawFee ? "border-transparent" : "border-app-red"
                     }`}
                   >
@@ -416,10 +407,10 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
                       <CountLoading size="small" color="white" />
                     ) : withdrawFeeParams ? (
                       <>
-                        <span className="text-sm font-medium text-white">
+                        <span className="text-sm font-semibold text-white">
                           {formatBalance(withdrawFeeParams.value, withdrawFeeParams.token.decimals, { precision: 6 })}
                         </span>
-                        <span className="text-sm font-medium text-white">{withdrawFeeParams.token.symbol}</span>
+                        <span className="text-sm font-semibold text-white">{withdrawFeeParams.token.symbol}</span>
                       </>
                     ) : (
                       <span className="absolute -bottom-5 left-0 text-xs font-medium text-app-red">
@@ -439,8 +430,6 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
               <div className="flex flex-col gap-5">
                 <LabelSection label="Approve More" height={height}>
                   <BalanceInput
-                    compact
-                    suffix="symbol"
                     balance={targetBalance?.value}
                     token={targetBalance?.token}
                     value={allowanceInput}
@@ -468,7 +457,7 @@ function LabelSection({
   return (
     <div className="flex flex-col gap-medium" style={{ height }}>
       <div className="flex items-center gap-small">
-        <span className="text-sm font-extrabold">{label}</span>
+        <span className="text-sm font-semibold text-white/50">{label}</span>
         {tips ? (
           <Tooltip content={tips}>
             <Image width={16} height={16} alt="Info" src="/images/info.svg" />
diff --git a/src/components/modals/relayer-manage-v3-modal.tsx b/src/components/modals/relayer-manage-v3-modal.tsx
index 75274da1..9dbd6ce2 100644
--- a/src/components/modals/relayer-manage-v3-modal.tsx
+++ b/src/components/modals/relayer-manage-v3-modal.tsx
@@ -225,6 +225,7 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
     withdrawPenaltyReserve,
     withdrawLiquidity,
     refetchWithdrawableLiquidities,
+    sourceApprove,
     targetApprove,
   ]);
 
@@ -280,30 +281,19 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
             children: (
               <div className="flex flex-col gap-5">
                 <Label text="Base Fee">
-                  <BalanceInput
-                    compact
-                    token={sourceToken}
-                    suffix="symbol"
-                    value={baseFeeInput}
-                    onChange={setBaseFeeInput}
-                  />
+                  <BalanceInput token={sourceToken} value={baseFeeInput} onChange={setBaseFeeInput} />
                 </Label>
                 <Label text="Liquidity Fee Rate">
                   <FeeRateInput
                     isV3
+                    className="h-10 rounded-xl bg-app-bg px-medium text-sm font-semibold text-white lg:h-11"
                     value={feeRateInput}
                     placeholder={feeRate === undefined ? undefined : `${formatFeeRate(feeRate)}%`}
                     onChange={setFeeRateInput}
                   />
                 </Label>
                 <Label text="Trasfer Limit">
-                  <BalanceInput
-                    compact
-                    token={sourceToken}
-                    suffix="symbol"
-                    value={transferLimitInput}
-                    onChange={setTransferLimitInput}
-                  />
+                  <BalanceInput token={sourceToken} value={transferLimitInput} onChange={setTransferLimitInput} />
                 </Label>
               </div>
             ),
@@ -314,10 +304,8 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
             children: (
               <Label text="More Penalty Reserves">
                 <BalanceInput
-                  compact
                   balance={sourceBalance?.value}
                   token={sourceBalance?.token}
-                  suffix="symbol"
                   value={penaltyReserveInput}
                   onChange={setPenaltyReserveInput}
                 />
@@ -339,8 +327,6 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
                     <BalanceInput
                       balance={penaltyReserve}
                       token={sourceToken}
-                      compact
-                      suffix="symbol"
                       value={withdrawInput}
                       onChange={setWithdrawInput}
                     />
@@ -367,7 +353,7 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
                 {selectedLiquidities.length ? (
                   <Label text="Withdraw Fee" tips="This value is calculated and does not require input">
                     <div
-                      className={`relative flex h-10 items-center justify-between rounded-medium border bg-inner px-small lg:px-medium ${
+                      className={`relative flex h-10 items-center justify-between rounded-xl border bg-app-bg p-medium lg:h-11 ${
                         withdrawFeeAndParams || isLoadingWithdrawFee ? "border-transparent" : "border-app-red"
                       }`}
                     >
@@ -375,12 +361,12 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
                         <CountLoading size="small" color="white" />
                       ) : withdrawFeeAndParams ? (
                         <>
-                          <span className="text-sm font-medium text-white">
+                          <span className="text-sm font-semibold text-white">
                             {formatBalance(withdrawFeeAndParams.value, withdrawFeeAndParams.token.decimals, {
                               precision: 6,
                             })}
                           </span>
-                          <span className="text-sm font-medium text-white">{withdrawFeeAndParams.token.symbol}</span>
+                          <span className="text-sm font-semibold text-white">{withdrawFeeAndParams.token.symbol}</span>
                         </>
                       ) : (
                         <span className="absolute -bottom-5 left-0 text-xs font-medium text-app-red">
@@ -403,8 +389,6 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
                     balance={targetBalance?.value}
                     token={targetBalance?.token}
                     value={allowanceInput}
-                    suffix="symbol"
-                    compact
                     onChange={setAllowanceInput}
                   />
                 </Label>
@@ -424,7 +408,7 @@ function Label({ text, children, height, tips }: PropsWithChildren<{ text: strin
   return (
     <div className="flex flex-col gap-medium" style={{ height }}>
       <div className="flex items-center gap-small">
-        <span className="text-sm font-extrabold">{text}</span>
+        <span className="text-sm font-semibold text-white/50">{text}</span>
         {tips ? (
           <Tooltip content={tips}>
             <Image width={16} height={16} alt="Info" src="/images/info.svg" />
diff --git a/src/components/relayer-register-v3.tsx b/src/components/relayer-register-v3.tsx
index 14dce02f..b22a868c 100644
--- a/src/components/relayer-register-v3.tsx
+++ b/src/components/relayer-register-v3.tsx
@@ -31,9 +31,9 @@ import PrettyAddress from "./pretty-address";
 
 enum Step {
   ONE,
-  ONE_SUMMARY,
+  ONE_OVERVIEW,
   TWO,
-  TWO_SUMMARY,
+  TWO_OVERVIEW,
   THREE,
 }
 const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
@@ -42,11 +42,12 @@ const { defaultSourceChains, defaultTargetChains } = getLnBridgeCrossDefaultValu
 const bigintInputDefaultValue: InputValue<bigint> = { input: "", valid: true, value: 0n };
 const numberInputDefaultValue: InputValue<number> = { input: "", valid: true, value: 0 };
 
-export default function RelayerRegisterV3() {
+export default function RelayerRegisterV3({ onManage = () => undefined }: { onManage?: () => void }) {
   const {
     sourceChain,
     targetChain,
     sourceToken,
+    targetToken,
     sourceBalance,
     targetBalance,
     sourceAllowance,
@@ -115,7 +116,11 @@ export default function RelayerRegisterV3() {
         } else {
           const receipt = await depositPenaltyReserve(penaltyReserveInput.value);
           if (receipt?.status === "success") {
-            setCurrentStep(Step.THREE);
+            if (targetToken?.type && targetToken?.type !== "native") {
+              setCurrentStep(Step.THREE);
+            } else {
+              setIsOpenTrue();
+            }
           }
         }
       }
@@ -130,12 +135,14 @@ export default function RelayerRegisterV3() {
     apolloClient,
     sourceChain,
     sourceToken,
+    targetToken,
     sourceAllowance,
     penaltyReserveInput,
     depositPenaltyReserve,
     sourceApprove,
     isLnBridgeExist,
     switchNetwork,
+    setIsOpenTrue,
   ]);
 
   const handleApproveMore = useCallback(async () => {
@@ -158,16 +165,15 @@ export default function RelayerRegisterV3() {
     <>
       <div className="mx-auto flex w-full flex-col gap-5 lg:w-[40rem]">
         {/* Step 1 */}
-        <div className="flex flex-col gap-5 rounded-large bg-component p-5 lg:p-[1.875rem]">
+        <div className="flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-5 lg:p-8">
           <StepTitle step={1} title="Select Chain and Token" />
           <Divider />
-          {currentStep === Step.ONE && (
+          {Step.ONE === currentStep && (
             <>
               <div className="flex items-center gap-medium lg:gap-5">
                 <Label text="From" className="flex-1">
                   <ChainSelect
-                    compact
-                    className="bg-inner px-medium py-medium"
+                    className="h-10 rounded-xl bg-app-bg px-medium lg:h-11"
                     options={defaultSourceChains}
                     placeholder="Source chain"
                     value={sourceChain}
@@ -180,8 +186,7 @@ export default function RelayerRegisterV3() {
                 </Label>
                 <Label text="To" className="flex-1">
                   <ChainSelect
-                    compact
-                    className="bg-inner px-medium py-medium"
+                    className="h-10 rounded-xl bg-app-bg px-medium lg:h-11"
                     options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains)}
                     placeholder="Target chain"
                     value={targetChain}
@@ -194,10 +199,9 @@ export default function RelayerRegisterV3() {
               </div>
               <Label text="Token">
                 <TokenSelect
-                  className="bg-inner px-medium py-medium"
                   disabled={!getLnBridgeAvailableSourceTokens(sourceChain, targetChain).length}
                   options={getLnBridgeAvailableSourceTokens(sourceChain, targetChain)}
-                  placeholder="Select token"
+                  placeholder="Select a token"
                   value={sourceToken}
                   onChange={setSourceToken}
                 />
@@ -205,92 +209,75 @@ export default function RelayerRegisterV3() {
               <Divider />
               <Button
                 onClick={() => {
-                  address ? setCurrentStep(Step.ONE_SUMMARY) : openConnectModal?.();
+                  address ? setCurrentStep(Step.TWO) : openConnectModal?.();
                 }}
                 kind="primary"
-                className="flex h-9 items-center justify-center rounded-medium"
+                className="inline-flex h-11 items-center justify-center rounded-full"
                 disabled={!sourceToken}
               >
-                <span className="text-base font-normal text-white">{address ? "Confirm" : "Connect Wallet"}</span>
+                <span className="text-sm font-semibold text-white">{address ? "Next" : "Connect Wallet"}</span>
               </Button>
             </>
           )}
-          {currentStep >= Step.ONE_SUMMARY && (
+          {Step.ONE_OVERVIEW <= currentStep && (
             <>
               <div className="flex items-center justify-between gap-small">
-                <StepCompleteItem property="Address" address={address} />
-                <StepCompleteItem property="Bridge Type" bridge="lnv3" />
+                <StepCompleteItem property="Address" address={address} className="hidden lg:flex" />
+                <StepCompleteItem property="Bridge Type" bridge="lnv3" className="hidden lg:flex" />
                 <StepCompleteItem property="From" chain={sourceChain} />
                 <StepCompleteItem property="To" chain={targetChain} />
                 <StepCompleteItem property="Token" token={sourceToken} />
               </div>
               <Divider />
-              <div className="flex items-center gap-5">
-                <Button
-                  kind="default"
-                  onClick={() => {
-                    setCurrentStep(Step.ONE);
-                    setSourceChain(undefined);
-                    setTargetChain(undefined);
-                    setSourceToken(undefined);
-                    setPenaltyReserveInput(bigintInputDefaultValue);
-                    setTransferLimitInput(bigintInputDefaultValue);
-                    setBaseFeeInput(bigintInputDefaultValue);
-                    setFeeRateInput(numberInputDefaultValue);
-                    setIsRegistered(false);
-                  }}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                >
-                  <span className="text-base font-normal">Reset</span>
-                </Button>
-                <Button
-                  kind="primary"
-                  onClick={() => setCurrentStep(Step.TWO)}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                  disabled={currentStep !== Step.ONE_SUMMARY}
-                >
-                  <span className="text-base font-normal">Next</span>
-                </Button>
-              </div>
+              <Button
+                kind="default"
+                onClick={() => {
+                  setCurrentStep(Step.ONE);
+                  setSourceChain(undefined);
+                  setTargetChain(undefined);
+                  setSourceToken(undefined);
+                  setPenaltyReserveInput(bigintInputDefaultValue);
+                  setTransferLimitInput(bigintInputDefaultValue);
+                  setBaseFeeInput(bigintInputDefaultValue);
+                  setFeeRateInput(numberInputDefaultValue);
+                  setIsRegistered(false);
+                }}
+                className="inline-flex h-11 items-center justify-center rounded-full"
+              >
+                <span className="text-sm font-semibold text-white">Reset</span>
+              </Button>
             </>
           )}
         </div>
 
         {/* Step 2 */}
-        <div className="flex flex-col gap-5 rounded-large bg-component p-5 lg:p-[1.875rem]">
+        <div className="flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-5 lg:p-8">
           <StepTitle step={2} title="Deposit Penalty Reserve and Set Fee" />
-          {currentStep === Step.TWO && (
+          {Step.TWO === currentStep && (
             <>
               <Divider />
               <Label text="Base Fee" tips="The fixed fee set by the relayer and charged in a transaction">
-                <BalanceInput
-                  compact
-                  autoFocus
-                  token={sourceToken}
-                  suffix="symbol"
-                  value={baseFeeInput}
-                  onChange={setBaseFeeInput}
-                />
+                <BalanceInput token={sourceToken} value={baseFeeInput} onChange={setBaseFeeInput} />
               </Label>
               <Label
                 text="Liquidity Fee Rate"
                 tips="The percentage deducted by the relayer from the transfer amount in a transaction"
               >
-                <FeeRateInput isV3 placeholder="Enter 0 ~ 100" value={feeRateInput} onChange={setFeeRateInput} />
+                <FeeRateInput
+                  isV3
+                  placeholder="Enter 0 ~ 100"
+                  className="h-10 rounded-xl bg-app-bg px-medium text-sm font-semibold text-white lg:h-11"
+                  value={feeRateInput}
+                  onChange={setFeeRateInput}
+                />
               </Label>
               <Label text="Transfer Limit">
-                <BalanceInput
-                  compact
-                  token={sourceToken}
-                  suffix="symbol"
-                  value={transferLimitInput}
-                  onChange={setTransferLimitInput}
-                />
+                <BalanceInput token={sourceToken} value={transferLimitInput} onChange={setTransferLimitInput} />
               </Label>
               <Divider />
               {/* Register */}
               <Button
-                kind="primary"
+                kind={isRegistered ? "default" : "primary"}
                 disabled={
                   isRegistered ||
                   (sourceChain?.id === chain?.id &&
@@ -305,27 +292,25 @@ export default function RelayerRegisterV3() {
                     ))
                 }
                 busy={isRegistering}
-                className="flex h-9 items-center justify-center rounded-medium"
+                className="inline-flex h-11 items-center justify-center rounded-full"
                 onClick={handleRegister}
               >
-                <span className="text-base font-normal">
-                  {sourceChain?.id !== chain?.id ? "Switch Network" : "Confirm"}
+                <span className="text-sm font-semibold text-white">
+                  {sourceChain?.id !== chain?.id ? "Switch Network" : "Register"}
                 </span>
               </Button>
               <Label text="Deposit Penalty Reserve">
                 <BalanceInput
-                  compact
                   balance={sourceBalance?.value}
                   token={sourceBalance?.token}
                   value={penaltyReserveInput}
-                  suffix="symbol"
                   onChange={setPenaltyReserveInput}
                 />
               </Label>
               {/* Deposit */}
               <Button
-                kind="primary"
-                className="flex h-9 items-center justify-center rounded-medium"
+                kind={isRegistered ? "primary" : "default"}
+                className="inline-flex h-11 items-center justify-center rounded-full"
                 disabled={
                   !isRegistered ||
                   (sourceChain?.id === chain?.id && !(penaltyReserveInput.input && penaltyReserveInput.valid))
@@ -333,17 +318,17 @@ export default function RelayerRegisterV3() {
                 busy={isDepositing}
                 onClick={handleDeposit}
               >
-                <span className="text-base font-normal">
+                <span className="text-sm font-semibold text-white">
                   {isRegistered && sourceChain?.id !== chain?.id
                     ? "Switch Network"
                     : sourceToken?.type !== "native" && penaltyReserveInput.value > (sourceAllowance?.value || 0n)
                     ? "Approve"
-                    : "Confirm"}
+                    : "Deposit"}
                 </span>
               </Button>
             </>
           )}
-          {currentStep >= Step.TWO_SUMMARY && (
+          {Step.TWO_OVERVIEW <= currentStep && (
             <>
               <Divider />
               <div className="flex items-center justify-between gap-small">
@@ -356,55 +341,55 @@ export default function RelayerRegisterV3() {
           )}
         </div>
         {/* Step 3 */}
-        <div className="flex flex-col gap-5 rounded-large bg-component p-5 lg:p-[1.875rem]">
-          <StepTitle step={3} title="Authorize Token on Target Chain and Run Relayer" />
-          {Step.THREE === currentStep && (
-            <>
-              <Description content="Authorize token on target chain and run relayer to start relaying messages and earn rewards. Please note this step authorizes tokens for the relayer to send to users' target chain address based on transactions. Ensure you authorize enough tokens for multiple transactions as needed." />
-              <Divider />
-              <Label text="Current Allowance">
-                <BalanceInput
-                  token={targetAllowance?.token}
-                  disabled
-                  value={{
-                    value: targetAllowance?.value ?? 0n,
-                    input: formatBalance(targetAllowance?.value ?? 0n, targetAllowance?.token.decimals ?? 0),
-                    valid: true,
-                  }}
-                  compact
-                  suffix="symbol"
-                  placeholder="-"
-                />
-              </Label>
-              <div className="flex items-center gap-medium lg:gap-5">
-                <Button
-                  kind="primary"
-                  onClick={handleApproveMore}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                  busy={isApproving}
-                  disabled={sourceToken?.type === "native"}
-                >
-                  <span className="text-base font-normal">
-                    {chain?.id === targetChain?.id ? "Approve More" : "Switch Network"}
-                  </span>
-                </Button>
-                <Button
-                  kind="default"
-                  onClick={setIsOpenTrue}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                >
-                  <span className="text-base font-normal">Next</span>
-                </Button>
-              </div>
-            </>
-          )}
-        </div>
+        {targetToken?.type && targetToken.type !== "native" ? (
+          <div className="flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-5 lg:p-8">
+            <StepTitle step={3} title="Authorize Token on Target Chain and Run Relayer" />
+            {Step.THREE === currentStep && (
+              <>
+                <Description content="Authorize token on target chain and run relayer to start relaying messages and earn rewards. Please note this step authorizes tokens for the relayer to send to users' target chain address based on transactions. Ensure you authorize enough tokens for multiple transactions as needed." />
+                <Divider />
+                <Label text="Current Allowance">
+                  <BalanceInput
+                    token={targetAllowance?.token}
+                    disabled
+                    value={{
+                      value: targetAllowance?.value ?? 0n,
+                      input: formatBalance(targetAllowance?.value ?? 0n, targetAllowance?.token.decimals ?? 0),
+                      valid: true,
+                    }}
+                    placeholder="-"
+                  />
+                </Label>
+                <div className="flex items-center gap-medium lg:gap-5">
+                  <Button
+                    kind="default"
+                    onClick={setIsOpenTrue}
+                    className="inline-flex h-11 flex-1 items-center justify-center rounded-full"
+                  >
+                    <span className="text-sm font-semibold text-white">Skip</span>
+                  </Button>
+                  <Button
+                    kind="primary"
+                    onClick={handleApproveMore}
+                    className="inline-flex h-11 flex-1 items-center justify-center rounded-full"
+                    busy={isApproving}
+                    disabled={sourceToken?.type === "native"}
+                  >
+                    <span className="text-sm font-semibold text-white">
+                      {chain?.id === targetChain?.id ? "Approve More" : "Switch Network"}
+                    </span>
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        ) : null}
       </div>
 
       <Modal
         title="One More Step!"
         subTitle={
-          <div className="flex flex-wrap items-center text-sm font-extrabold text-white">
+          <div className="flex flex-wrap items-center text-sm font-semibold text-white">
             Now&nbsp;
             <RunRelayer style="link" />
             &nbsp;to start relaying messages and earn rewards.
@@ -414,57 +399,46 @@ export default function RelayerRegisterV3() {
         onClose={setIsOpenFalse}
       >
         <div
-          className="grid items-center gap-x-small gap-y-5 text-sm font-normal text-white"
+          className="grid items-center gap-x-small gap-y-5 text-sm font-semibold text-white"
           style={{ gridTemplateColumns: "130px auto" }}
         >
-          <span className="text-sm font-medium text-white">Address</span>
+          <span className="text-white/50">Address</span>
           {address ? <PrettyAddress address={address} /> : null}
 
-          <span className="text-sm font-medium text-white">Bridge Type</span>
+          <span className="text-white/50">Bridge Type</span>
           <span>LnBridgeV3</span>
 
-          <span className="text-sm font-medium text-white">From</span>
+          <span className="text-white/50">From</span>
           <PrettyChain chain={sourceChain} />
 
-          <span className="text-sm font-medium text-white">To</span>
+          <span className="text-white/50">To</span>
           <PrettyChain chain={targetChain} />
 
-          <span className="text-sm font-medium text-white">Token</span>
+          <span className="text-white/50">Token</span>
           <PrettyToken token={sourceToken} />
 
-          <span className="text-sm font-medium text-white">Penalty Reserve</span>
+          <span className="text-white/50">Penalty Reserve</span>
           <PrettyBalance amount={penaltyReserveInput.value} token={sourceToken} />
 
-          <span className="text-sm font-medium text-white">Transfer Limit</span>
+          <span className="text-white/50">Transfer Limit</span>
           <PrettyBalance amount={transferLimitInput.value} token={sourceToken} />
 
-          <span className="text-sm font-medium text-white">Base Fee</span>
+          <span className="text-white/50">Base Fee</span>
           <PrettyBalance amount={baseFeeInput.value} token={sourceToken} />
 
-          <span className="text-sm font-medium text-white">Liquidity Fee Rate</span>
+          <span className="text-white/50">Liquidity Fee Rate</span>
           <span>{formatFeeRate(feeRateInput.value)}%</span>
         </div>
         <Divider />
         <div className="flex items-center gap-medium lg:gap-5">
-          <RunRelayer style="button" />
           <Button
             kind="default"
-            onClick={() => {
-              setIsOpenFalse();
-              setCurrentStep(Step.ONE);
-              setSourceChain(undefined);
-              setTargetChain(undefined);
-              setSourceToken(undefined);
-              setPenaltyReserveInput(bigintInputDefaultValue);
-              setTransferLimitInput(bigintInputDefaultValue);
-              setBaseFeeInput(bigintInputDefaultValue);
-              setFeeRateInput(numberInputDefaultValue);
-              setIsRegistered(false);
-            }}
-            className="flex h-8 flex-1 items-center justify-center rounded-medium lg:h-9"
+            onClick={onManage}
+            className="inline-flex h-10 flex-1 items-center justify-center rounded-full lg:h-11"
           >
-            <span className="text-base font-normal">Register Another</span>
+            <span className="text-sm font-semibold text-white">Manage</span>
           </Button>
+          <RunRelayer style="button" />
         </div>
       </Modal>
     </>
@@ -477,14 +451,14 @@ function RunRelayer({ style, onClick = () => undefined }: { style: "button" | "l
       href="https://github.com/helix-bridge/relayer/tree/main"
       className={`inline-flex items-center justify-center ${
         style === "button"
-          ? `border-radius h-8 flex-1 items-center justify-center rounded-medium bg-primary text-base font-normal text-white transition hover:opacity-80 active:translate-y-1 lg:h-9`
-          : "text-sm font-extrabold text-primary hover:underline"
+          ? `h-10 flex-1 items-center justify-center rounded-full bg-primary text-sm font-semibold text-white transition-opacity hover:opacity-80 lg:h-11`
+          : "text-sm font-semibold text-primary hover:underline"
       }`}
       rel="noopener"
       target="_blank"
       onClick={onClick}
     >
-      {style === "button" ? "Run Relayer" : "Run a Relayer"}
+      {style === "button" ? "Run relayer" : "run a relayer"}
     </a>
   );
 }
@@ -498,9 +472,9 @@ function Label({
   return (
     <div className={`flex flex-col gap-medium ${className}`}>
       <div className="flex items-center gap-small">
-        <span className="text-sm font-extrabold text-white">{text}</span>
+        <span className="text-sm font-semibold text-white/50">{text}</span>
         {tips ? (
-          <Tooltip content={tips} className="w-fit" contentClassName="max-w-[18rem]">
+          <Tooltip content={tips} className="w-fit" contentClassName="max-w-[20rem]">
             <Image width={16} height={16} alt="Info" src="/images/info.svg" />
           </Tooltip>
         ) : null}
@@ -517,7 +491,7 @@ function Description({ content }: { content: string }) {
 function PrettyChain({ chain }: { chain?: ChainConfig }) {
   return chain ? (
     <div className="flex items-center gap-small">
-      <Image width={16} height={16} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
+      <Image width={22} height={22} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
       <span>{chain.name}</span>
     </div>
   ) : (
@@ -528,7 +502,7 @@ function PrettyChain({ chain }: { chain?: ChainConfig }) {
 function PrettyToken({ token }: { token?: Token }) {
   return token ? (
     <div className="flex items-center gap-small">
-      <Image width={16} height={16} alt="Chain" src={getTokenLogoSrc(token.logo)} className="shrink-0 rounded-full" />
+      <Image width={22} height={22} alt="Chain" src={getTokenLogoSrc(token.logo)} className="shrink-0 rounded-full" />
       <span>{token.symbol}</span>
     </div>
   ) : (
@@ -537,7 +511,7 @@ function PrettyToken({ token }: { token?: Token }) {
 }
 
 function PrettyBalance({ token, amount }: { token?: Token; amount: bigint }) {
-  return <span>{token ? formatBalance(amount, token.decimals) : ""}</span>;
+  return <span>{token ? `${formatBalance(amount, token.decimals, { precision: 6 })} ${token.symbol}` : ""}</span>;
 }
 
 function Divider() {
diff --git a/src/components/relayer-register.tsx b/src/components/relayer-register.tsx
index 9594cdc1..7111b379 100644
--- a/src/components/relayer-register.tsx
+++ b/src/components/relayer-register.tsx
@@ -42,17 +42,16 @@ import PrettyAddress from "./pretty-address";
 
 enum Step {
   ONE,
-  COMPLETE_ONE,
+  ONE_OVERVIEW,
   TWO,
-  COMPLETE_TWO,
+  TWO_OVERVIEW,
   THREE,
-  COMPLETE_THREE,
 }
 const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 
 const { defaultSourceChains, defaultTargetChains } = getLnBridgeCrossDefaultValue(true);
 
-export default function RelayerRegister() {
+export default function RelayerRegister({ onManage = () => undefined }: { onManage?: () => void }) {
   const {
     sourceChain,
     targetChain,
@@ -140,7 +139,7 @@ export default function RelayerRegister() {
     <>
       <div className="mx-auto flex w-full flex-col gap-5 lg:w-[40rem]">
         {/* Step 1 */}
-        <div className="flex flex-col gap-5 rounded-large bg-component p-5 lg:p-[1.875rem]">
+        <div className="flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-5 lg:p-8">
           <StepTitle step={1} title="Select Chain and Token" />
 
           {Step.ONE === currentStep && (
@@ -152,8 +151,7 @@ export default function RelayerRegister() {
               <div className="flex items-center gap-medium lg:gap-5">
                 <LabelItem label="From" className="flex-1">
                   <ChainSelect
-                    compact
-                    className="bg-inner px-medium py-medium"
+                    className="h-10 rounded-xl bg-app-bg px-medium lg:h-11"
                     options={defaultSourceChains}
                     placeholder="Source chain"
                     value={sourceChain}
@@ -166,8 +164,7 @@ export default function RelayerRegister() {
                 </LabelItem>
                 <LabelItem label="To" className="flex-1">
                   <ChainSelect
-                    compact
-                    className="bg-inner px-medium py-medium"
+                    className="h-10 rounded-xl bg-app-bg px-medium lg:h-11"
                     options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains, true)}
                     placeholder="Target chain"
                     value={targetChain}
@@ -181,10 +178,9 @@ export default function RelayerRegister() {
 
               <LabelItem label="Token">
                 <TokenSelect
-                  className="bg-inner px-medium py-medium"
                   disabled={!getLnBridgeAvailableSourceTokens(sourceChain, targetChain, [], true).length}
                   options={getLnBridgeAvailableSourceTokens(sourceChain, targetChain, [], true)}
-                  placeholder="Select token"
+                  placeholder="Select a token"
                   value={sourceToken}
                   onChange={setSourceToken}
                 />
@@ -194,27 +190,27 @@ export default function RelayerRegister() {
 
               <Button
                 onClick={() => {
-                  if (address) {
-                    setCurrentStep(Step.COMPLETE_ONE);
-                  } else {
-                    openConnectModal?.();
-                  }
+                  address ? setCurrentStep(Step.TWO) : openConnectModal?.();
                 }}
                 kind="primary"
-                className="flex h-9 items-center justify-center rounded-medium"
+                className="inline-flex h-11 items-center justify-center rounded-full"
                 disabled={!sourceToken}
               >
-                <span className="text-base font-normal text-white">{address ? "Confirm" : "Connect Wallet"}</span>
+                <span className="text-sm font-semibold text-white">{address ? "Next" : "Connect Wallet"}</span>
               </Button>
             </>
           )}
-          {Step.COMPLETE_ONE <= currentStep && (
+          {Step.ONE_OVERVIEW <= currentStep && (
             <>
               <Divider />
 
               <div className="flex items-center justify-between gap-small">
-                <StepCompleteItem property="Address" address={address} />
-                <StepCompleteItem property="Bridge Type" bridge={oppositeBridge ? "lnv2-opposite" : "lnv2-default"} />
+                <StepCompleteItem property="Address" address={address} className="hidden lg:flex" />
+                <StepCompleteItem
+                  property="Bridge Type"
+                  bridge={oppositeBridge ? "lnv2-opposite" : "lnv2-default"}
+                  className="hidden lg:flex"
+                />
                 <StepCompleteItem property="From" chain={sourceChain} />
                 <StepCompleteItem property="To" chain={targetChain} />
                 <StepCompleteItem property="Token" token={sourceToken} />
@@ -222,38 +218,28 @@ export default function RelayerRegister() {
 
               <Divider />
 
-              <div className="flex items-center gap-5">
-                <Button
-                  kind="default"
-                  onClick={() => {
-                    setSourceChain(undefined);
-                    setTargetChain(undefined);
-                    setSourceToken(undefined);
-                    setMarginInput({ input: "", valid: true, value: 0n });
-                    setBaseFeeInput({ input: "", valid: true, value: 0n });
-                    setFeeRateInput({ input: "", valid: true, value: 0 });
-                    setCurrentStep(Step.ONE);
-                    setCompleteMargin(false);
-                  }}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                >
-                  <span className="text-base font-normal">Reset</span>
-                </Button>
-                <Button
-                  kind="primary"
-                  onClick={() => setCurrentStep(Step.TWO)}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                  disabled={Step.COMPLETE_ONE !== currentStep}
-                >
-                  <span className="text-base font-normal">Next</span>
-                </Button>
-              </div>
+              <Button
+                kind="default"
+                onClick={() => {
+                  setCurrentStep(Step.ONE);
+                  setSourceChain(undefined);
+                  setTargetChain(undefined);
+                  setSourceToken(undefined);
+                  setMarginInput({ input: "", valid: true, value: 0n });
+                  setBaseFeeInput({ input: "", valid: true, value: 0n });
+                  setFeeRateInput({ input: "", valid: true, value: 0 });
+                  setCompleteMargin(false);
+                }}
+                className="inline-flex h-11 items-center justify-center rounded-full"
+              >
+                <span className="text-sm font-semibold text-white">Reset</span>
+              </Button>
             </>
           )}
         </div>
 
         {/* Step 2 */}
-        <div className="flex flex-col gap-5 rounded-large bg-component p-5 lg:p-[1.875rem]">
+        <div className="flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-5 lg:p-8">
           <StepTitle step={2} title="Deposit Margin and Set Fee" />
 
           {Step.TWO === currentStep && (
@@ -264,11 +250,9 @@ export default function RelayerRegister() {
 
               <LabelItem label="Deposit Margin">
                 <BalanceInput
-                  compact
                   balance={defaultBridge ? targetBalance?.value : sourceBalance?.value}
                   token={defaultBridge ? targetBalance?.token : sourceBalance?.token}
                   value={marginInput}
-                  suffix="symbol"
                   disabled={completeMargin}
                   onChange={setMarginInput}
                 />
@@ -277,8 +261,8 @@ export default function RelayerRegister() {
               {defaultBridge ? (
                 <>
                   <Button
-                    kind="primary"
-                    className="flex h-9 items-center justify-center rounded-medium"
+                    kind={completeMargin ? "default" : "primary"}
+                    className="inline-flex h-11 items-center justify-center rounded-full"
                     disabled={completeMargin || (targetChain?.id === chain?.id && marginInput.value === 0n)}
                     busy={isSettingDefaultMargin}
                     onClick={async () => {
@@ -321,14 +305,14 @@ export default function RelayerRegister() {
                       }
                     }}
                   >
-                    <span className="text-base font-normal">
+                    <span className="text-sm font-semibold text-white">
                       {!completeMargin && targetChain?.id !== chain?.id
                         ? "Switch Network"
                         : !completeMargin &&
                           targetToken?.type !== "native" &&
                           marginInput.value > (targetAllowance?.value || 0n)
                         ? "Approve"
-                        : "Confirm"}
+                        : "Deposit"}
                     </span>
                   </Button>
                   <Divider />
@@ -336,31 +320,30 @@ export default function RelayerRegister() {
               ) : null}
 
               <LabelItem label="Base Fee" tips="The fixed fee set by the relayer and charged in a transaction">
-                <BalanceInput
-                  compact
-                  token={sourceToken}
-                  suffix="symbol"
-                  value={baseFeeInput}
-                  onChange={setBaseFeeInput}
-                />
+                <BalanceInput token={sourceToken} value={baseFeeInput} onChange={setBaseFeeInput} />
               </LabelItem>
               <LabelItem
                 label="Liquidity Fee Rate"
                 tips="The percentage deducted by the relayer from the transfer amount in a transaction"
               >
-                <FeeRateInput placeholder="Enter 0 ~ 0.25" value={feeRateInput} onChange={setFeeRateInput} />
+                <FeeRateInput
+                  placeholder="Enter 0 ~ 0.25"
+                  className="h-10 rounded-xl bg-app-bg px-medium text-sm font-semibold text-white lg:h-11"
+                  value={feeRateInput}
+                  onChange={setFeeRateInput}
+                />
               </LabelItem>
 
               <Divider />
 
               <Button
-                kind="primary"
+                kind={completeMargin ? "primary" : "default"}
                 disabled={
                   sourceChain?.id === chain?.id &&
                   !(marginInput.input && baseFeeInput.input && feeRateInput.input && isValidFeeRate(feeRateInput.value))
                 }
                 busy={busy}
-                className="flex h-9 items-center justify-center rounded-medium"
+                className="inline-flex h-11 items-center justify-center rounded-full"
                 onClick={async () => {
                   let receipt: TransactionReceipt | undefined;
                   if (address && sourceChain && targetChain && sourceToken && targetToken) {
@@ -407,29 +390,33 @@ export default function RelayerRegister() {
                     } finally {
                       setBusy(false);
                       if (receipt?.status === "success") {
-                        setCurrentStep(Step.THREE);
+                        if (targetToken.type && targetToken.type !== "native") {
+                          setCurrentStep(Step.THREE);
+                        } else {
+                          setIsOpen(true);
+                        }
                       }
                     }
                   }
                 }}
               >
-                <span className="text-base font-normal">
+                <span className="text-sm font-semibold text-white">
                   {defaultBridge
                     ? sourceChain?.id !== chain?.id
                       ? "Switch Network"
-                      : "Confirm"
+                      : "Register"
                     : oppositeBridge
                     ? sourceChain?.id !== chain?.id
                       ? "Switch Network"
                       : sourceToken?.type !== "native" && marginInput.value > (sourceAllowance?.value || 0n)
                       ? "Approve"
-                      : "Confirm"
-                    : "Confirm"}
+                      : "Register"
+                    : "Register"}
                 </span>
               </Button>
             </>
           )}
-          {Step.COMPLETE_TWO <= currentStep && (
+          {Step.TWO_OVERVIEW <= currentStep && (
             <>
               <Divider />
               <div className="flex items-center justify-between gap-small">
@@ -446,77 +433,77 @@ export default function RelayerRegister() {
         </div>
 
         {/* Step 3 */}
-        <div className="flex flex-col gap-5 rounded-large bg-component p-5 lg:p-[1.875rem]">
-          <StepTitle step={3} title="Authorize Token on Target Chain and Run Relayer" />
-
-          {Step.THREE === currentStep && (
-            <>
-              <Description content="Authorize token on target chain and run relayer to start relaying messages and earn rewards. Please note this step authorizes tokens for the relayer to send to users' target chain address based on transactions. Ensure you authorize enough tokens for multiple transactions as needed." />
-
-              <Divider />
-
-              <LabelItem label="Current Allowance">
-                <BalanceInput
-                  token={targetToken}
-                  disabled
-                  value={{
-                    value: targetAllowance?.value ?? 0n,
-                    input: formatBalance(targetAllowance?.value ?? 0n, targetAllowance?.token.decimals ?? 0),
-                    valid: true,
-                  }}
-                  compact
-                  suffix="symbol"
-                  placeholder="-"
-                />
-              </LabelItem>
+        {targetToken?.type && targetToken.type !== "native" ? (
+          <div className="flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-5 lg:p-8">
+            <StepTitle step={3} title="Authorize Token on Target Chain and Run Relayer" />
+
+            {Step.THREE === currentStep && (
+              <>
+                <Description content="Authorize token on target chain and run relayer to start relaying messages and earn rewards. Please note this step authorizes tokens for the relayer to send to users' target chain address based on transactions. Ensure you authorize enough tokens for multiple transactions as needed." />
+
+                <Divider />
+
+                <LabelItem label="Current Allowance">
+                  <BalanceInput
+                    token={targetToken}
+                    disabled
+                    value={{
+                      value: targetAllowance?.value ?? 0n,
+                      input: formatBalance(targetAllowance?.value ?? 0n, targetAllowance?.token.decimals ?? 0),
+                      valid: true,
+                    }}
+                    placeholder="-"
+                  />
+                </LabelItem>
 
-              <div className="flex items-center gap-medium lg:gap-5">
-                <Button
-                  kind="primary"
-                  onClick={async () => {
-                    if (address && targetChain) {
-                      setBusy(true);
-                      try {
-                        if (chain?.id !== targetChain.id) {
-                          switchNetwork?.(targetChain.id);
-                        } else if (defaultBridge) {
-                          await targetApprove(address, targetBalance?.value || 0n, defaultBridge, targetChain);
-                        } else if (oppositeBridge) {
-                          await targetApprove(address, targetBalance?.value || 0n, oppositeBridge, targetChain);
+                <div className="flex items-center gap-medium lg:gap-5">
+                  <Button
+                    kind="default"
+                    onClick={() => setIsOpen(true)}
+                    className="inline-flex h-11 flex-1 items-center justify-center rounded-full"
+                  >
+                    <span className="text-sm font-semibold text-white">Skip</span>
+                  </Button>
+                  <Button
+                    kind="primary"
+                    onClick={async () => {
+                      if (address && targetChain) {
+                        setBusy(true);
+                        try {
+                          if (chain?.id !== targetChain.id) {
+                            switchNetwork?.(targetChain.id);
+                          } else if (defaultBridge) {
+                            await targetApprove(address, targetBalance?.value || 0n, defaultBridge, targetChain);
+                          } else if (oppositeBridge) {
+                            await targetApprove(address, targetBalance?.value || 0n, oppositeBridge, targetChain);
+                          }
+                        } catch (err) {
+                          console.error(err);
+                          notifyError(err);
+                        } finally {
+                          setBusy(false);
                         }
-                      } catch (err) {
-                        console.error(err);
-                        notifyError(err);
-                      } finally {
-                        setBusy(false);
                       }
-                    }
-                  }}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                  busy={busy}
-                  disabled={sourceToken?.type === "native"}
-                >
-                  <span className="text-base font-normal">
-                    {chain?.id === targetChain?.id ? "Approve More" : "Switch Network"}
-                  </span>
-                </Button>
-                <Button
-                  kind="default"
-                  onClick={() => setIsOpen(true)}
-                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
-                >
-                  <span className="text-base font-normal">Next</span>
-                </Button>
-              </div>
-            </>
-          )}
-        </div>
+                    }}
+                    className="inline-flex h-11 flex-1 items-center justify-center rounded-full"
+                    busy={busy}
+                    disabled={sourceToken?.type === "native"}
+                  >
+                    <span className="text-sm font-semibold text-white">
+                      {chain?.id === targetChain?.id ? "Approve More" : "Switch Network"}
+                    </span>
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        ) : null}
       </div>
 
       <Modal
         title="One More Step!"
         subTitle={
-          <div className="flex flex-wrap items-center text-sm font-extrabold text-white">
+          <div className="flex flex-wrap items-center text-sm font-semibold text-white">
             Now&nbsp;
             <RunRelayer style="link" />
             &nbsp;to start relaying messages and earn rewards.
@@ -526,55 +513,45 @@ export default function RelayerRegister() {
         onClose={() => setIsOpen(false)}
       >
         <div
-          className="grid items-center gap-x-small gap-y-5 text-sm font-normal text-white"
+          className="grid items-center gap-x-small gap-y-5 text-sm font-semibold text-white"
           style={{ gridTemplateColumns: "130px auto" }}
         >
-          <span className="text-sm font-medium text-white">Address</span>
+          <span className="text-white/50">Address</span>
           {address ? <PrettyAddress address={address} /> : null}
 
-          <span className="text-sm font-medium text-white">Bridge Type</span>
+          <span className="text-white/50">Bridge Type</span>
           <span>{defaultBridge ? "Default" : oppositeBridge ? "Opposite" : "-"}</span>
 
-          <span className="text-sm font-medium text-white">From</span>
+          <span className="text-white/50">From</span>
           <PrettyChain chain={sourceChain} />
 
-          <span className="text-sm font-medium text-white">To</span>
+          <span className="text-white/50">To</span>
           <PrettyChain chain={targetChain} />
 
-          <span className="text-sm font-medium text-white">Token</span>
+          <span className="text-white/50">Token</span>
           <PrettyToken token={sourceToken} />
 
-          <span className="text-sm font-medium text-white">Margin</span>
+          <span className="text-white/50">Margin</span>
           <PrettyMargin margin={marginInput.value} token={defaultBridge ? targetToken : sourceToken} />
 
-          <span className="text-sm font-medium text-white">Base Fee</span>
+          <span className="text-white/50">Base Fee</span>
           <PrettyBaseFee fee={baseFeeInput.value} token={sourceToken} />
 
-          <span className="text-sm font-medium text-white">Liquidity Fee Rate</span>
+          <span className="text-white/50">Liquidity Fee Rate</span>
           <span>{formatFeeRate(feeRateInput.value)}%</span>
         </div>
 
         <Divider />
 
         <div className="flex items-center gap-medium lg:gap-5">
-          <RunRelayer style="button" />
           <Button
             kind="default"
-            onClick={() => {
-              setIsOpen(false);
-              setSourceChain(undefined);
-              setTargetChain(undefined);
-              setSourceToken(undefined);
-              setMarginInput({ input: "", valid: true, value: 0n });
-              setBaseFeeInput({ input: "", valid: true, value: 0n });
-              setFeeRateInput({ input: "", valid: true, value: 0 });
-              setCurrentStep(Step.ONE);
-              setCompleteMargin(false);
-            }}
-            className="flex h-8 flex-1 items-center justify-center rounded-medium lg:h-9"
+            onClick={onManage}
+            className="inline-flex h-10 flex-1 items-center justify-center rounded-full lg:h-11"
           >
-            <span className="text-base font-normal">Register Another</span>
+            <span className="text-sm font-semibold">Manage</span>
           </Button>
+          <RunRelayer style="button" />
         </div>
       </Modal>
     </>
@@ -587,14 +564,14 @@ function RunRelayer({ style, onClick = () => undefined }: { style: "button" | "l
       href="https://github.com/helix-bridge/relayer/tree/main"
       className={`inline-flex items-center justify-center ${
         style === "button"
-          ? `border-radius h-8 flex-1 items-center justify-center rounded-medium bg-primary text-base font-normal text-white transition hover:opacity-80 active:translate-y-1 lg:h-9`
-          : "text-sm font-extrabold text-primary hover:underline"
+          ? `border-radius h-10 flex-1 items-center justify-center rounded-full bg-primary text-sm font-semibold text-white transition-opacity hover:opacity-80 lg:h-11`
+          : "text-sm font-semibold text-primary hover:underline"
       }`}
       rel="noopener"
       target="_blank"
       onClick={onClick}
     >
-      {style === "button" ? "Run Relayer" : "Run a Relayer"}
+      {style === "button" ? "Run relayer" : "run a relayer"}
     </a>
   );
 }
@@ -608,7 +585,7 @@ function LabelItem({
   return (
     <div className={`flex flex-col gap-medium ${className}`}>
       <div className="flex items-center gap-small">
-        <span className="text-sm font-extrabold text-white">{label}</span>
+        <span className="text-sm font-semibold text-white/50">{label}</span>
         {tips ? (
           <Tooltip content={tips} className="w-fit" contentClassName="max-w-[18rem]">
             <Image width={16} height={16} alt="Info" src="/images/info.svg" />
@@ -627,7 +604,7 @@ function Description({ content }: { content: string }) {
 function PrettyChain({ chain }: { chain?: ChainConfig }) {
   return chain ? (
     <div className="flex items-center gap-small">
-      <Image width={16} height={16} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
+      <Image width={22} height={22} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
       <span>{chain.name}</span>
     </div>
   ) : (
@@ -638,7 +615,7 @@ function PrettyChain({ chain }: { chain?: ChainConfig }) {
 function PrettyToken({ token }: { token?: Token }) {
   return token ? (
     <div className="flex items-center gap-small">
-      <Image width={16} height={16} alt="Chain" src={getTokenLogoSrc(token.logo)} className="shrink-0 rounded-full" />
+      <Image width={22} height={22} alt="Chain" src={getTokenLogoSrc(token.logo)} className="shrink-0 rounded-full" />
       <span>{token.symbol}</span>
     </div>
   ) : (
@@ -647,11 +624,11 @@ function PrettyToken({ token }: { token?: Token }) {
 }
 
 function PrettyMargin({ token, margin }: { token?: Token; margin: bigint }) {
-  return <span>{token ? formatBalance(margin, token.decimals) : ""}</span>;
+  return <span>{token ? `${formatBalance(margin, token.decimals)} ${token.symbol}` : ""}</span>;
 }
 
 function PrettyBaseFee({ fee, token }: { fee: bigint; token?: Token }) {
-  return <span>{token ? formatBalance(fee, token.decimals) : ""}</span>;
+  return <span>{token ? `${formatBalance(fee, token.decimals)} ${token.symbol}` : ""}</span>;
 }
 
 function Divider() {
diff --git a/src/components/step-complete-item.tsx b/src/components/step-complete-item.tsx
index effc900c..309a13ab 100644
--- a/src/components/step-complete-item.tsx
+++ b/src/components/step-complete-item.tsx
@@ -12,6 +12,7 @@ export default function StepCompleteItem({
   token,
   balance,
   percent,
+  className,
 }: {
   property: string;
   address?: Address;
@@ -20,44 +21,45 @@ export default function StepCompleteItem({
   token?: Token;
   balance?: bigint;
   percent?: number;
+  className?: string;
 }) {
   return (
-    <div className="flex flex-col items-start gap-small">
-      <span className="text-sm font-extrabold text-white/50">{property}</span>
-      {!!address && <PrettyAddress address={address} forceShort className="text-sm font-medium text-white" />}
+    <div className={`flex-col items-start gap-small ${className ?? "flex"}`}>
+      <span className="text-sm font-semibold text-white/50">{property}</span>
+      {!!address && <PrettyAddress address={address} forceShort className="text-sm font-semibold text-white" />}
       {!!bridge && (
-        <span className="text-sm font-medium text-white">
+        <span className="text-sm font-semibold text-white">
           {bridge === "lnv3" ? "LnBridgeV3" : bridge === "lnv2-opposite" ? "Opposite" : "Default"}
         </span>
       )}
       {!!chain && (
         <div className="flex items-center gap-small">
           <Image
-            width={16}
-            height={16}
+            width={18}
+            height={18}
             alt="Chain"
             src={getChainLogoSrc(chain.logo)}
             className="shrink-0 rounded-full"
           />
-          <span className="hidden truncate text-sm font-medium text-white lg:inline">{chain.name}</span>
+          <span className="truncate text-sm font-semibold text-white">{chain.name}</span>
         </div>
       )}
       {!!token && balance ? (
-        <span className="truncate text-sm font-medium text-white">{formatBalance(balance, token.decimals)}</span>
+        <span className="truncate text-sm font-semibold text-white">{formatBalance(balance, token.decimals)}</span>
       ) : null}
       {!!token && !balance && (
         <div className="flex items-center gap-small">
           <Image
-            width={16}
-            height={16}
+            width={18}
+            height={18}
             alt="Token"
             src={getTokenLogoSrc(token.logo)}
             className="shrink-0 rounded-full"
           />
-          <span className="hidden truncate text-sm font-medium text-white lg:inline">{token.symbol}</span>
+          <span className="truncate text-sm font-semibold text-white">{token.symbol}</span>
         </div>
       )}
-      {!!percent && <span className="text-sm font-medium text-white">{percent}%</span>}
+      {!!percent && <span className="text-sm font-semibold text-white">{percent}%</span>}
     </div>
   );
 }
diff --git a/src/components/token-select.tsx b/src/components/token-select.tsx
index 9dd76992..b82a242b 100644
--- a/src/components/token-select.tsx
+++ b/src/components/token-select.tsx
@@ -9,27 +9,32 @@ interface Props {
   disabled?: boolean;
   value?: Token;
   placeholder?: string;
-  className?: string;
   onChange?: (value: Token | undefined) => void;
 }
 
-export default function TokenSelect({
-  options,
-  disabled,
-  value,
-  placeholder,
-  className,
-  onChange = () => undefined,
-}: Props) {
+export default function TokenSelect({ options, disabled, value, placeholder, onChange = () => undefined }: Props) {
   return (
     <Select
-      labelClassName={`gap-small flex items-center justify-between rounded-medium ${className}`}
-      childClassName="bg-inner py-medium flex flex-col rounded-medium border border-component"
-      label={value ? <span className="text-sm font-medium text-white">{value.symbol}</span> : undefined}
-      placeholder={<span className="text-sm font-medium text-slate-400">{placeholder}</span>}
-      disabled={disabled}
       clearable
       sameWidth
+      labelClassName="gap-small flex items-center justify-between rounded-xl bg-app-bg h-11 px-medium"
+      childClassName="bg-app-bg py-medium flex flex-col rounded-xl border border-white/20 max-h-52 overflow-y-auto app-scrollbar"
+      label={
+        value ? (
+          <div className="flex items-center gap-medium truncate">
+            <Image
+              alt="Chain"
+              width={22}
+              height={22}
+              src={getTokenLogoSrc(value.logo)}
+              className="hidden shrink-0 rounded-full lg:inline"
+            />
+            <span className="truncate text-sm font-semibold text-white">{value.symbol}</span>
+          </div>
+        ) : undefined
+      }
+      placeholder={<span className="text-sm font-semibold text-slate-400">{placeholder}</span>}
+      disabled={disabled}
       onClear={() => onChange(undefined)}
     >
       {options.length ? (
@@ -43,9 +48,9 @@ export default function TokenSelect({
           >
             <Image width={26} height={26} alt="Token" src={getTokenLogoSrc(option.logo)} className="rounded-full" />
             <div className="flex flex-col items-start">
-              <span className="text-sm font-medium text-white">{option.symbol}</span>
+              <span className="text-sm font-semibold text-white">{option.symbol}</span>
               {option.type === "native" ? (
-                <span className="text-xs font-medium text-white/50">Native token</span>
+                <span className="text-xs font-medium text-white/50">native token</span>
               ) : (
                 <PrettyAddress address={option.address} copyable className="text-xs font-medium text-white/50" />
               )}
@@ -53,8 +58,8 @@ export default function TokenSelect({
           </button>
         ))
       ) : (
-        <div className="px-large py-small text-center">
-          <span className="text-sm font-medium text-white/50">No data</span>
+        <div className="inline-flex justify-center p-2">
+          <span className="text-sm font-semibold text-slate-400">No data</span>
         </div>
       )}
     </Select>
diff --git a/src/components/transfer-chain-select.tsx b/src/components/transfer-chain-select.tsx
index 43faaf63..4d9a9667 100644
--- a/src/components/transfer-chain-select.tsx
+++ b/src/components/transfer-chain-select.tsx
@@ -39,14 +39,14 @@ export default function TransferChainSelect({
             <span className="truncate text-lg font-extrabold text-white">{chain.name}</span>
           </div>
         }
-        labelClassName="flex items-center justify-between gap-small w-full mx-medium transition-colors hover:bg-white/10 group py-small rounded-[0.625rem]"
+        labelClassName="flex items-center justify-between gap-small w-full mx-medium transition-colors hover:bg-white/5 group py-small rounded-[0.625rem]"
         childClassName="py-medium rounded-large bg-[#00141D] border border-white/20 flex flex-col gap-2"
         offsetSize={6}
         sameWidth
       >
         {chainOptions.length ? (
           <>
-            <div className="mx-medium flex items-center gap-1 rounded-xl bg-[#1F282C] px-medium transition-colors focus-within:bg-white/20 focus-within:outline-none hover:bg-white/20">
+            <div className="mx-medium flex items-center gap-1 rounded-xl bg-white/5 px-medium transition-colors focus-within:bg-white/10 focus-within:outline-none hover:bg-white/10">
               <Image alt="Search" width={24} height={24} src="/images/search.svg" className="h-6 w-6 opacity-60" />
               <input
                 className="w-full bg-transparent py-2 text-base font-medium focus-visible:outline-none"
@@ -116,9 +116,7 @@ function ChainOption({
 }) {
   return (
     <button
-      className={`flex items-center gap-large px-5 py-medium transition-colors ${
-        selected.id === option.id ? "bg-white/20" : "hover:bg-[#1F282C]"
-      }`}
+      className="flex items-center gap-large px-5 py-medium transition-colors hover:bg-white/5 disabled:bg-white/10"
       disabled={selected.id === option.id}
       onClick={() => {
         onSelect(option);
@@ -147,9 +145,7 @@ function TokenOption({
 }) {
   return (
     <button
-      className={`flex items-center gap-small rounded-[0.625rem] p-small transition-colors ${
-        selected.symbol === option.symbol ? "bg-white/20" : "bg-[#1F282C] hover:cursor-pointer hover:bg-white/20"
-      }`}
+      className="flex items-center gap-small rounded-[0.625rem] p-small transition-colors hover:bg-white/5 disabled:bg-white/10"
       disabled={selected.symbol === option.symbol}
       onClick={() => {
         onSelect(option);
diff --git a/src/components/version-switch.tsx b/src/components/version-switch.tsx
index b411c3c7..6190dc39 100644
--- a/src/components/version-switch.tsx
+++ b/src/components/version-switch.tsx
@@ -7,9 +7,9 @@ interface Props {
 
 export default function VersionSwitch({ value, onChange }: Props) {
   return (
-    <div className="relative flex items-center rounded-3xl bg-[#343946] p-small">
+    <div className="relative flex items-center rounded-full bg-[#343946] p-1">
       <div
-        className="absolute left-small top-small inline-flex h-7 w-12 items-center justify-center rounded-3xl bg-primary transition-transform"
+        className="absolute left-1 top-1 inline-flex h-7 w-12 items-center justify-center rounded-full bg-primary transition-transform"
         style={{ transform: value === "v3" ? "translate(0, 0)" : "translate(3rem, 0)" }}
       >
         <span className="text-sm font-bold uppercase text-white/90">{value}</span>
diff --git a/src/components/withdrawable-liquidities-select.tsx b/src/components/withdrawable-liquidities-select.tsx
index c2f01d35..968b4d48 100644
--- a/src/components/withdrawable-liquidities-select.tsx
+++ b/src/components/withdrawable-liquidities-select.tsx
@@ -22,7 +22,7 @@ export default function WithdrawableLiquiditiesSelect({
 }: Props) {
   return (
     <div
-      className={`relative max-h-60 rounded-medium bg-inner ${
+      className={`relative max-h-60 rounded-xl bg-app-bg ${
         loading ? "overflow-y-hidden" : "app-scrollbar overflow-y-auto"
       }`}
     >
@@ -73,14 +73,14 @@ export default function WithdrawableLiquiditiesSelect({
           ))
         ) : (
           <div className="flex items-center justify-center py-small">
-            <span className="text-sm font-medium text-white/50">No data</span>
+            <span className="text-sm font-semibold text-slate-400">No data</span>
           </div>
         )}
       </div>
       {total > options.length ? (
         <button
           onClick={onLoadMore}
-          className="w-full rounded-b-medium border-t border-t-white/10 py-2 text-sm font-medium text-white transition-[transform,color] hover:bg-primary active:translate-y-1"
+          className="w-full rounded-b-medium border-t border-t-white/10 py-2 text-sm font-semibold text-white transition-[transform,color] hover:bg-primary active:translate-y-1"
         >
           Load More
         </button>
diff --git a/src/ui/modal.tsx b/src/ui/modal.tsx
index b1d45795..c250f539 100644
--- a/src/ui/modal.tsx
+++ b/src/ui/modal.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { PropsWithChildren, ReactElement, useRef } from "react";
+import { PropsWithChildren, ReactElement, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { CSSTransition } from "react-transition-group";
 import Button from "./button";
@@ -45,6 +45,13 @@ export default function Modal({
 }: PropsWithChildren<Props>) {
   const nodeRef = useRef<HTMLDivElement | null>(null);
 
+  useEffect(
+    () => () => {
+      document.body.style.overflow = "auto";
+    },
+    [],
+  );
+
   return createPortal(
     <CSSTransition
       in={isOpen}
@@ -68,7 +75,7 @@ export default function Modal({
       >
         {/* modal */}
         <div
-          className={`relative flex flex-col gap-5 rounded-large bg-component p-medium lg:p-5 ${className}`}
+          className={`relative flex flex-col gap-5 rounded-3xl bg-[#1F282C] p-medium lg:p-5 ${className}`}
           onClick={(e) => e.stopPropagation()}
         >
           {/* close icon */}
@@ -110,7 +117,7 @@ export default function Modal({
                     kind="default"
                     onClick={onCancel}
                     disabled={disabledCancel}
-                    className="h-10 flex-1 rounded-[1.25rem] text-base font-extrabold lg:h-11"
+                    className="h-10 flex-1 rounded-[1.25rem] text-sm font-bold lg:h-11"
                   >
                     {cancelText || "Cancel"}
                   </Button>
@@ -121,7 +128,7 @@ export default function Modal({
                     onClick={onOk}
                     disabled={disabledOk}
                     busy={busy}
-                    className="h-10 flex-1 rounded-[1.25rem] text-base font-extrabold lg:h-11"
+                    className="h-10 flex-1 rounded-[1.25rem] text-sm font-bold lg:h-11"
                   >
                     {okText || "Ok"}
                   </Button>