diff --git a/src/app/error.tsx b/src/app/error.tsx
index 2b382b550..9919176c8 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -9,7 +9,7 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
 
   return (
     <main className="app-main flex items-center justify-center">
-      <div className="flex w-fit flex-col items-start gap-middle">
+      <div className="flex w-fit flex-col items-start gap-medium">
         <h2 className="text-base font-medium text-white">Oops, something went wrong !</h2>
         <button
           onClick={reset}
diff --git a/src/app/globals.css b/src/app/globals.css
index 10aa2bde5..59bab5b55 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -41,15 +41,15 @@ body {
 
   /* Page */
   .page-container {
-    @apply max-w-8xl w-full mx-auto px-middle py-5;
+    @apply max-w-8xl w-full mx-auto px-medium py-5;
   }
 
   /* User */
   .user-connect-wallet {
-    @apply flex h-9 shrink-0 items-center gap-middle rounded-middle bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
+    @apply flex h-9 shrink-0 items-center gap-medium rounded-medium bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
   }
   .user-dropdown-item {
-    @apply inline-flex items-center gap-middle rounded-middle px-middle py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;
+    @apply inline-flex items-center gap-medium rounded-medium px-medium py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;
   }
 
   .button {
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 7a16c5555..db2d981bf 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function NotFound() {
   return (
     <main className="app-main flex items-center justify-center">
-      <div className="flex w-fit flex-col items-start gap-middle">
+      <div className="flex w-fit flex-col items-start gap-medium">
         <h2 className="text-base font-medium text-white">Not Found !</h2>
         <p className="text-sm font-normal text-white">Could not find requested resource</p>
         <Link href="/" className="text-sm font-normal text-primary hover:underline">
diff --git a/src/components/address-input.tsx b/src/components/address-input.tsx
index 9ecacd813..77651ae50 100644
--- a/src/components/address-input.tsx
+++ b/src/components/address-input.tsx
@@ -23,7 +23,7 @@ export default function AddressInput({ value, placeholder, className, onChange =
 
   return (
     <div
-      className={`normal-input-wrap relative px-small lg:px-middle ${
+      className={`normal-input-wrap relative px-small lg:px-medium ${
         value.valid ? "valid-input-wrap" : "invalid-input-wrap"
       } ${className}`}
     >
diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
index 6dc6db9ae..00e012f4c 100644
--- a/src/components/balance-input.tsx
+++ b/src/components/balance-input.tsx
@@ -151,8 +151,8 @@ export function BalanceInput({
 
   return (
     <div
-      className={`normal-input-wrap relative flex flex-col rounded-middle bg-inner px-small py-small lg:px-middle ${
-        compact ? "lg:py-middle" : ""
+      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"}`}
     >
       <div className="flex items-center justify-between gap-small">
@@ -181,7 +181,7 @@ export function BalanceInput({
             </button>
           ) : null
         ) : (
-          <div className="flex shrink-0 items-center gap-middle self-end">
+          <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" />
diff --git a/src/components/bridge-select.tsx b/src/components/bridge-select.tsx
index b2692c0b9..a85ef3d17 100644
--- a/src/components/bridge-select.tsx
+++ b/src/components/bridge-select.tsx
@@ -11,8 +11,8 @@ interface Props {
 export default function BridgeSelect({ value, options = [], onChange = () => undefined }: Props) {
   return (
     <Select
-      labelClassName="bg-inner p-middle flex items-center justify-between rounded-middle transition-transform lg:active:translate-y-1"
-      childClassName="bg-inner p-middle flex flex-col rounded-middle gap-small border border-component"
+      labelClassName="bg-inner p-medium flex items-center justify-between rounded-medium transition-transform lg:active:translate-y-1"
+      childClassName="bg-inner p-medium flex flex-col rounded-medium gap-small border border-component"
       label={<span className="text-sm font-medium text-white">{bridgeName(value)}</span>}
       placeholder={<span className="text-sm font-medium text-slate-400">Select a bridge</span>}
       sameWidth
@@ -27,14 +27,14 @@ export default function BridgeSelect({ value, options = [], onChange = () => und
               onClick={() => {
                 onChange(c);
               }}
-              className="rounded-middle bg-component px-middle py-small text-start text-sm font-medium text-white transition-colors hover:bg-white/10"
+              className="rounded-medium bg-component px-medium py-small text-start text-sm font-medium text-white transition-colors hover:bg-white/10"
             >
               {bridgeName(c) || "-"}
             </button>
           );
         })
       ) : (
-        <div className="rounded-middle bg-component px-middle py-small">
+        <div className="rounded-medium bg-component px-medium py-small">
           <span className="text-sm font-medium text-white/50">No data</span>
         </div>
       )}
diff --git a/src/components/chain-identity.tsx b/src/components/chain-identity.tsx
index 762b9eeab..1d15362af 100644
--- a/src/components/chain-identity.tsx
+++ b/src/components/chain-identity.tsx
@@ -7,7 +7,7 @@ export default function ChainIdentity() {
   const config = getChainConfig(chain?.id);
 
   return chain ? (
-    <div className="hidden h-9 max-w-[9rem] items-center gap-middle rounded-full border border-primary px-middle lg:flex">
+    <div className="hidden h-9 max-w-[9rem] items-center gap-medium rounded-full border border-primary px-medium lg:flex">
       {config ? (
         <Image
           width={20}
diff --git a/src/components/chain-select.tsx b/src/components/chain-select.tsx
index 18dd3591f..6737670c5 100644
--- a/src/components/chain-select.tsx
+++ b/src/components/chain-select.tsx
@@ -25,13 +25,13 @@ export default function ChainSelect({
 }: Props) {
   return (
     <Select
-      labelClassName={`gap-small rounded-middle flex items-center justify-between transition active:translate-y-1 ${className}`}
-      childClassName={`bg-inner flex flex-col rounded-middle max-h-60 overflow-y-auto border border-component ${
-        compact ? "py-small" : "p-middle"
+      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 ${
+        compact ? "py-small" : "p-medium"
       }`}
       label={
         value ? (
-          <div className="flex items-center gap-middle truncate">
+          <div className="flex items-center gap-medium truncate">
             {compact ? null : (
               <Image
                 alt="Chain"
@@ -59,7 +59,7 @@ export default function ChainSelect({
               <button
                 key={option.id}
                 onClick={() => onChange(option)}
-                className="flex items-center gap-middle px-large py-2 text-start transition-colors hover:bg-white/10"
+                className="flex items-center gap-medium px-large py-2 text-start transition-colors hover:bg-white/10"
               >
                 <Image
                   width={20}
@@ -77,7 +77,7 @@ export default function ChainSelect({
             {options.map((option) => (
               <button
                 key={option.id}
-                className="flex w-36 shrink-0 items-center gap-small truncate rounded-middle bg-component px-2 py-1 transition-colors hover:bg-white/20"
+                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
diff --git a/src/components/faucet.tsx b/src/components/faucet.tsx
index 32fb3f479..701eab35b 100644
--- a/src/components/faucet.tsx
+++ b/src/components/faucet.tsx
@@ -149,7 +149,7 @@ export default function Faucet() {
 
 function Item({ value, token }: { value: bigint; token?: Token }) {
   return (
-    <div className="flex items-center justify-between rounded-middle bg-inner px-middle py-middle">
+    <div className="flex items-center justify-between rounded-medium bg-inner px-medium py-medium">
       <span className="text-sm font-medium">{token && formatBalance(value, token.decimals)}</span>
       <span className="text-sm font-medium">{token?.symbol}</span>
     </div>
diff --git a/src/components/fee-rate-input.tsx b/src/components/fee-rate-input.tsx
index 6169f7bbd..5fe52e915 100644
--- a/src/components/fee-rate-input.tsx
+++ b/src/components/fee-rate-input.tsx
@@ -32,7 +32,7 @@ export default function FeeRateInput({ isV3, placeholder, value, onChange = () =
 
   return (
     <div
-      className={`normal-input-wrap relative flex items-center justify-between gap-small rounded-middle bg-inner p-small lg:p-middle ${
+      className={`normal-input-wrap relative flex items-center justify-between gap-small rounded-medium bg-inner p-small lg:p-medium ${
         value.valid ? "valid-input-wrap border-transparent" : "invalid-input-wrap"
       }`}
     >
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 27a54f06a..9eb769b3a 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -25,13 +25,13 @@ export default function Footer() {
 
   return (
     <div className="app-footer w-full">
-      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-middle">
+      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-medium">
         {/* Copyright */}
         <span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
 
         <div className="mx-3 h-4 w-[1px] bg-white/30 lg:mx-5 lg:bg-transparent" />
 
-        <div className="flex shrink-0 items-center gap-middle lg:gap-5">
+        <div className="flex shrink-0 items-center gap-medium lg:gap-5">
           <Link
             className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
             href="/records"
diff --git a/src/components/header.tsx b/src/components/header.tsx
index e5cbf6ca7..fe8bcc104 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -33,11 +33,11 @@ export default function Header() {
   return (
     <>
       <div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
-        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-middle">
+        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-medium">
           {/* Left */}
           <div className="flex items-center gap-5">
             {/* Logo */}
-            <div className="flex items-center gap-middle">
+            <div className="flex items-center gap-medium">
               <Link href="/">
                 <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
               </Link>
@@ -49,7 +49,7 @@ export default function Header() {
             </div>
 
             {/* Navigations */}
-            <div className="hidden items-center gap-middle lg:flex">
+            <div className="hidden items-center gap-medium lg:flex">
               {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
                 external ? (
                   <a
@@ -57,7 +57,7 @@ export default function Header() {
                     target="_blank"
                     href={href}
                     key={label}
-                    className={`rounded-middle px-3 py-1 text-base font-bold transition hover:bg-white/10 active:translate-y-1 ${
+                    className={`rounded-medium px-3 py-1 text-base font-bold transition hover:bg-white/10 active:translate-y-1 ${
                       pathname === href ? "text-primary underline" : "text-white"
                     }`}
                   >
@@ -65,13 +65,13 @@ export default function Header() {
                   </a>
                 ) : soon || disabled ? (
                   <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
-                    <span className="rounded-middle px-3 py-1 text-base font-bold text-white/50">{label}</span>
+                    <span className="rounded-medium px-3 py-1 text-base font-bold text-white/50">{label}</span>
                   </Tooltip>
                 ) : (
                   <Link
                     key={label}
                     href={href}
-                    className={`rounded-middle px-3 py-1 text-base font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
+                    className={`rounded-medium px-3 py-1 text-base font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
                       pathname === href ? "text-primary underline underline-offset-8" : "text-white"
                     }`}
                   >
@@ -83,7 +83,7 @@ export default function Header() {
           </div>
 
           {/* Right */}
-          <div className="hidden items-center gap-middle lg:flex">
+          <div className="hidden items-center gap-medium lg:flex">
             <ChainIdentity />
             <HistoryNav />
             <User placement="bottom-end" prefixLength={14} suffixLength={10} />
diff --git a/src/components/lnrelayers-overview.tsx b/src/components/lnrelayers-overview.tsx
index 10f9061da..ebc85e36a 100644
--- a/src/components/lnrelayers-overview.tsx
+++ b/src/components/lnrelayers-overview.tsx
@@ -55,7 +55,7 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
 
   return (
     <div>
-      <div className="mb-5 flex flex-col items-start justify-between gap-middle lg:flex-row lg:items-center">
+      <div className="mb-5 flex flex-col items-start justify-between gap-medium lg:flex-row lg:items-center">
         <Search
           className="w-full lg:w-[21.5rem]"
           placeholder="Search by address"
@@ -68,10 +68,10 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
         />
 
         <div className="flex items-center gap-small lg:gap-5">
-          <div className="flex items-center gap-middle">
+          <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-middle py-[7px]"
+              className="w-40 border border-white/20 px-medium py-[7px]"
               placeholder="Source chain"
               options={defaultSourceChains}
               onChange={(value) => {
@@ -83,10 +83,10 @@ export default function LnRelayersOverview({ bridgeVersion }: Props) {
               value={sourceChain}
             />
           </div>
-          <div className="flex items-center gap-middle">
+          <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-middle py-[7px]"
+              className="w-40 border border-white/20 px-medium py-[7px]"
               placeholder="Target chain"
               options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains)}
               onChange={(value) => {
diff --git a/src/components/modals/disclaimer-modal.tsx b/src/components/modals/disclaimer-modal.tsx
index ab2955b6c..c6aaed607 100644
--- a/src/components/modals/disclaimer-modal.tsx
+++ b/src/components/modals/disclaimer-modal.tsx
@@ -17,7 +17,7 @@ export default function DisclaimerModal() {
 
   return (
     <Modal title="Disclaimer" className="w-full lg:w-[30rem]" isOpen={isOpen} onClose={setIsOpenFalse}>
-      <div className="flex flex-col gap-middle">
+      <div className="flex flex-col gap-medium">
         <Paragraph content="By using Helix, I agree to the following:" />
         <Paragraph content="I understand that Helix is a bridge aggregator and is only responsible for routing the transfer to the selected bridge. Helix does not hold any funds in custody at any point." />
         <Paragraph content="I understand that the fees shown in a route are estimations and may vary." />
@@ -29,7 +29,7 @@ export default function DisclaimerModal() {
       <div />
 
       <Button
-        className="mx-auto w-fit rounded-middle px-large py-small"
+        className="mx-auto w-fit rounded-medium px-large py-small"
         kind="primary"
         onClick={() => {
           setIsOpenFalse();
diff --git a/src/components/modals/relayer-manage-modal.tsx b/src/components/modals/relayer-manage-modal.tsx
index 3570bb06a..52c85d691 100644
--- a/src/components/modals/relayer-manage-modal.tsx
+++ b/src/components/modals/relayer-manage-modal.tsx
@@ -403,7 +403,7 @@ export default function RelayerManageModal({ relayerInfo, isOpen, onClose, onSuc
                 </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-middle border bg-inner px-small lg:px-middle ${
+                    className={`relative flex h-10 items-center justify-between rounded-medium border bg-inner px-small lg:px-medium ${
                       withdrawFeeParams || loadingWithdrawFee ? "border-transparent" : "border-app-red"
                     }`}
                   >
@@ -461,7 +461,7 @@ function LabelSection({
   tips,
 }: PropsWithChildren<{ label: string; height?: number; tips?: string }>) {
   return (
-    <div className="flex flex-col gap-middle" style={{ height }}>
+    <div className="flex flex-col gap-medium" style={{ height }}>
       <div className="flex items-center gap-small">
         <span className="text-sm font-extrabold">{label}</span>
         {tips ? (
diff --git a/src/components/modals/relayer-manage-v3-modal.tsx b/src/components/modals/relayer-manage-v3-modal.tsx
index 156a8b962..0f0a297b4 100644
--- a/src/components/modals/relayer-manage-v3-modal.tsx
+++ b/src/components/modals/relayer-manage-v3-modal.tsx
@@ -358,7 +358,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-middle border bg-inner px-small lg:px-middle ${
+                      className={`relative flex h-10 items-center justify-between rounded-medium border bg-inner px-small lg:px-medium ${
                         withdrawFeeAndParams || isLoadingWithdrawFee ? "border-transparent" : "border-app-red"
                       }`}
                     >
@@ -413,7 +413,7 @@ export default function RelayerManageV3Modal({ relayerInfo, isOpen, onClose, onS
 
 function Label({ text, children, height, tips }: PropsWithChildren<{ text: string; height?: number; tips?: string }>) {
   return (
-    <div className="flex flex-col gap-middle" style={{ height }}>
+    <div className="flex flex-col gap-medium" style={{ height }}>
       <div className="flex items-center gap-small">
         <span className="text-sm font-extrabold">{text}</span>
         {tips ? (
diff --git a/src/components/modals/transfer-modal.tsx b/src/components/modals/transfer-modal.tsx
index 6fe93b2ff..a7198498f 100644
--- a/src/components/modals/transfer-modal.tsx
+++ b/src/components/modals/transfer-modal.tsx
@@ -134,13 +134,13 @@ export default function TransferModal({ sender, recipient, transferAmount, isOpe
       </div>
 
       {/* information */}
-      <div className="flex flex-col gap-middle">
+      <div className="flex flex-col gap-medium">
         <span className="text-sm font-extrabold text-white">Information</span>
         <Information fee={bridgeFee} bridge={bridgeInstance} />
       </div>
 
       {txHash ? (
-        <div className="flex h-10 items-center rounded-middle bg-inner px-middle">
+        <div className="flex h-10 items-center rounded-medium bg-inner px-medium">
           <Progress
             confirmedBlocks={txProgressData?.historyRecordByTxHash?.confirmedBlocks}
             result={txProgressData?.historyRecordByTxHash?.result}
@@ -167,9 +167,9 @@ function SourceTarget({
   address?: Address | null;
 }) {
   return chain && token ? (
-    <div className="flex items-center justify-between rounded-middle bg-inner p-middle lg:p-5">
+    <div className="flex items-center justify-between rounded-medium bg-inner p-medium lg:p-5">
       {/* Left */}
-      <div className="flex items-center gap-middle">
+      <div className="flex items-center gap-medium">
         <Image width={36} height={36} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
         <div className="flex flex-col items-start">
           <span className="text-base font-medium text-white">{chain.name}</span>
@@ -194,7 +194,7 @@ function SourceTarget({
 
 function Information({ fee, bridge }: { fee?: { value: bigint; token: Token }; bridge?: BaseBridge | null }) {
   return (
-    <div className="flex flex-col gap-small rounded-middle bg-inner p-middle">
+    <div className="flex flex-col gap-small rounded-medium bg-inner p-medium">
       <Item
         label="Transaction Fee"
         value={
@@ -210,7 +210,7 @@ function Information({ fee, bridge }: { fee?: { value: bigint; token: Token }; b
 
 function Item({ label, value }: { label: string; value?: string | null }) {
   return (
-    <div className="flex items-center justify-between gap-middle text-sm font-medium text-white">
+    <div className="flex items-center justify-between gap-medium text-sm font-medium text-white">
       <span>{label}</span>
       <span className="truncate">{value}</span>
     </div>
diff --git a/src/components/record-detail.tsx b/src/components/record-detail.tsx
index 17f0b2180..23c8c321b 100644
--- a/src/components/record-detail.tsx
+++ b/src/components/record-detail.tsx
@@ -53,7 +53,7 @@ export default function RecordDetail(props: Props) {
         <CountdownRefresh onClick={refetch} />
       </div>
       <div className="mt-5 overflow-x-auto">
-        <div className="relative flex min-w-max flex-col gap-middle rounded-large bg-component px-7 py-middle">
+        <div className="relative flex min-w-max flex-col gap-medium rounded-large bg-component px-7 py-medium">
           {/* loading */}
           <ComponentLoading loading={loading} className="rounded-large" />
 
@@ -142,7 +142,7 @@ export default function RecordDetail(props: Props) {
 
 function Item({ label, tips, children }: PropsWithChildren<{ label: string; tips?: string }>) {
   return (
-    <div className="flex flex-col items-start gap-small lg:h-11 lg:flex-row lg:items-center lg:gap-middle">
+    <div className="flex flex-col items-start gap-small lg:h-11 lg:flex-row lg:items-center lg:gap-medium">
       <RecordItemTitle text={label} tips={tips} />
       <div className="pl-5 lg:pl-0">{children}</div>
     </div>
diff --git a/src/components/records-table.tsx b/src/components/records-table.tsx
index 01c5f57da..5d1434629 100644
--- a/src/components/records-table.tsx
+++ b/src/components/records-table.tsx
@@ -65,7 +65,7 @@ export default function RecordsTable({
       render: ({ fromChain, sendAmount, sendToken }) => {
         const token = getChainConfig(fromChain)?.tokens.find((t) => t.symbol === sendToken);
         return token ? (
-          <div className="flex items-center justify-start gap-middle">
+          <div className="flex items-center justify-start gap-medium">
             <Image width={32} height={32} alt="Token" src={getTokenLogoSrc(token.logo)} className="rounded-full" />
             <span className="truncate">
               {formatBalance(BigInt(sendAmount), token.decimals, { precision: 4 })} {token.symbol}
@@ -134,7 +134,7 @@ function FromTo({ network }: { network: Network }) {
   const chain = getChainConfig(network);
 
   return chain ? (
-    <div className="flex items-center gap-middle">
+    <div className="flex items-center gap-medium">
       <Image width={32} height={32} alt="Logo" src={getChainLogoSrc(chain.logo)} className="rounded-full" />
       <span className="truncate">{chain.name}</span>
     </div>
diff --git a/src/components/relayer-register-v3.tsx b/src/components/relayer-register-v3.tsx
index f1ddf8ebb..14dce02fb 100644
--- a/src/components/relayer-register-v3.tsx
+++ b/src/components/relayer-register-v3.tsx
@@ -163,11 +163,11 @@ export default function RelayerRegisterV3() {
           <Divider />
           {currentStep === Step.ONE && (
             <>
-              <div className="flex items-center gap-middle lg:gap-5">
+              <div className="flex items-center gap-medium lg:gap-5">
                 <Label text="From" className="flex-1">
                   <ChainSelect
                     compact
-                    className="bg-inner px-middle py-middle"
+                    className="bg-inner px-medium py-medium"
                     options={defaultSourceChains}
                     placeholder="Source chain"
                     value={sourceChain}
@@ -181,7 +181,7 @@ export default function RelayerRegisterV3() {
                 <Label text="To" className="flex-1">
                   <ChainSelect
                     compact
-                    className="bg-inner px-middle py-middle"
+                    className="bg-inner px-medium py-medium"
                     options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains)}
                     placeholder="Target chain"
                     value={targetChain}
@@ -194,7 +194,7 @@ export default function RelayerRegisterV3() {
               </div>
               <Label text="Token">
                 <TokenSelect
-                  className="bg-inner px-middle py-middle"
+                  className="bg-inner px-medium py-medium"
                   disabled={!getLnBridgeAvailableSourceTokens(sourceChain, targetChain).length}
                   options={getLnBridgeAvailableSourceTokens(sourceChain, targetChain)}
                   placeholder="Select token"
@@ -208,7 +208,7 @@ export default function RelayerRegisterV3() {
                   address ? setCurrentStep(Step.ONE_SUMMARY) : openConnectModal?.();
                 }}
                 kind="primary"
-                className="flex h-9 items-center justify-center rounded-middle"
+                className="flex h-9 items-center justify-center rounded-medium"
                 disabled={!sourceToken}
               >
                 <span className="text-base font-normal text-white">{address ? "Confirm" : "Connect Wallet"}</span>
@@ -239,14 +239,14 @@ export default function RelayerRegisterV3() {
                     setFeeRateInput(numberInputDefaultValue);
                     setIsRegistered(false);
                   }}
-                  className="flex h-9 flex-1 items-center justify-center rounded-middle"
+                  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-middle"
+                  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>
@@ -305,7 +305,7 @@ export default function RelayerRegisterV3() {
                     ))
                 }
                 busy={isRegistering}
-                className="flex h-9 items-center justify-center rounded-middle"
+                className="flex h-9 items-center justify-center rounded-medium"
                 onClick={handleRegister}
               >
                 <span className="text-base font-normal">
@@ -325,7 +325,7 @@ export default function RelayerRegisterV3() {
               {/* Deposit */}
               <Button
                 kind="primary"
-                className="flex h-9 items-center justify-center rounded-middle"
+                className="flex h-9 items-center justify-center rounded-medium"
                 disabled={
                   !isRegistered ||
                   (sourceChain?.id === chain?.id && !(penaltyReserveInput.input && penaltyReserveInput.valid))
@@ -376,11 +376,11 @@ export default function RelayerRegisterV3() {
                   placeholder="-"
                 />
               </Label>
-              <div className="flex items-center gap-middle lg:gap-5">
+              <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-middle"
+                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
                   busy={isApproving}
                   disabled={sourceToken?.type === "native"}
                 >
@@ -391,7 +391,7 @@ export default function RelayerRegisterV3() {
                 <Button
                   kind="default"
                   onClick={setIsOpenTrue}
-                  className="flex h-9 flex-1 items-center justify-center rounded-middle"
+                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
                 >
                   <span className="text-base font-normal">Next</span>
                 </Button>
@@ -445,7 +445,7 @@ export default function RelayerRegisterV3() {
           <span>{formatFeeRate(feeRateInput.value)}%</span>
         </div>
         <Divider />
-        <div className="flex items-center gap-middle lg:gap-5">
+        <div className="flex items-center gap-medium lg:gap-5">
           <RunRelayer style="button" />
           <Button
             kind="default"
@@ -461,7 +461,7 @@ export default function RelayerRegisterV3() {
               setFeeRateInput(numberInputDefaultValue);
               setIsRegistered(false);
             }}
-            className="flex h-8 flex-1 items-center justify-center rounded-middle lg:h-9"
+            className="flex h-8 flex-1 items-center justify-center rounded-medium lg:h-9"
           >
             <span className="text-base font-normal">Register Another</span>
           </Button>
@@ -477,7 +477,7 @@ 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-middle bg-primary text-base font-normal text-white transition hover:opacity-80 active:translate-y-1 lg:h-9`
+          ? `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"
       }`}
       rel="noopener"
@@ -496,7 +496,7 @@ function Label({
   className,
 }: PropsWithChildren<{ text: string; tips?: string; className?: string }>) {
   return (
-    <div className={`flex flex-col gap-middle ${className}`}>
+    <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>
         {tips ? (
diff --git a/src/components/relayer-register.tsx b/src/components/relayer-register.tsx
index d2d3eaa89..9594cdc19 100644
--- a/src/components/relayer-register.tsx
+++ b/src/components/relayer-register.tsx
@@ -149,11 +149,11 @@ export default function RelayerRegister() {
 
               <Divider />
 
-              <div className="flex items-center gap-middle lg:gap-5">
+              <div className="flex items-center gap-medium lg:gap-5">
                 <LabelItem label="From" className="flex-1">
                   <ChainSelect
                     compact
-                    className="bg-inner px-middle py-middle"
+                    className="bg-inner px-medium py-medium"
                     options={defaultSourceChains}
                     placeholder="Source chain"
                     value={sourceChain}
@@ -167,7 +167,7 @@ export default function RelayerRegister() {
                 <LabelItem label="To" className="flex-1">
                   <ChainSelect
                     compact
-                    className="bg-inner px-middle py-middle"
+                    className="bg-inner px-medium py-medium"
                     options={getLnBridgeAvailableTargetChains(sourceChain, defaultTargetChains, true)}
                     placeholder="Target chain"
                     value={targetChain}
@@ -181,7 +181,7 @@ export default function RelayerRegister() {
 
               <LabelItem label="Token">
                 <TokenSelect
-                  className="bg-inner px-middle py-middle"
+                  className="bg-inner px-medium py-medium"
                   disabled={!getLnBridgeAvailableSourceTokens(sourceChain, targetChain, [], true).length}
                   options={getLnBridgeAvailableSourceTokens(sourceChain, targetChain, [], true)}
                   placeholder="Select token"
@@ -201,7 +201,7 @@ export default function RelayerRegister() {
                   }
                 }}
                 kind="primary"
-                className="flex h-9 items-center justify-center rounded-middle"
+                className="flex h-9 items-center justify-center rounded-medium"
                 disabled={!sourceToken}
               >
                 <span className="text-base font-normal text-white">{address ? "Confirm" : "Connect Wallet"}</span>
@@ -235,14 +235,14 @@ export default function RelayerRegister() {
                     setCurrentStep(Step.ONE);
                     setCompleteMargin(false);
                   }}
-                  className="flex h-9 flex-1 items-center justify-center rounded-middle"
+                  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-middle"
+                  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>
@@ -278,7 +278,7 @@ export default function RelayerRegister() {
                 <>
                   <Button
                     kind="primary"
-                    className="flex h-9 items-center justify-center rounded-middle"
+                    className="flex h-9 items-center justify-center rounded-medium"
                     disabled={completeMargin || (targetChain?.id === chain?.id && marginInput.value === 0n)}
                     busy={isSettingDefaultMargin}
                     onClick={async () => {
@@ -360,7 +360,7 @@ export default function RelayerRegister() {
                   !(marginInput.input && baseFeeInput.input && feeRateInput.input && isValidFeeRate(feeRateInput.value))
                 }
                 busy={busy}
-                className="flex h-9 items-center justify-center rounded-middle"
+                className="flex h-9 items-center justify-center rounded-medium"
                 onClick={async () => {
                   let receipt: TransactionReceipt | undefined;
                   if (address && sourceChain && targetChain && sourceToken && targetToken) {
@@ -470,7 +470,7 @@ export default function RelayerRegister() {
                 />
               </LabelItem>
 
-              <div className="flex items-center gap-middle lg:gap-5">
+              <div className="flex items-center gap-medium lg:gap-5">
                 <Button
                   kind="primary"
                   onClick={async () => {
@@ -492,7 +492,7 @@ export default function RelayerRegister() {
                       }
                     }
                   }}
-                  className="flex h-9 flex-1 items-center justify-center rounded-middle"
+                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
                   busy={busy}
                   disabled={sourceToken?.type === "native"}
                 >
@@ -503,7 +503,7 @@ export default function RelayerRegister() {
                 <Button
                   kind="default"
                   onClick={() => setIsOpen(true)}
-                  className="flex h-9 flex-1 items-center justify-center rounded-middle"
+                  className="flex h-9 flex-1 items-center justify-center rounded-medium"
                 >
                   <span className="text-base font-normal">Next</span>
                 </Button>
@@ -556,7 +556,7 @@ export default function RelayerRegister() {
 
         <Divider />
 
-        <div className="flex items-center gap-middle lg:gap-5">
+        <div className="flex items-center gap-medium lg:gap-5">
           <RunRelayer style="button" />
           <Button
             kind="default"
@@ -571,7 +571,7 @@ export default function RelayerRegister() {
               setCurrentStep(Step.ONE);
               setCompleteMargin(false);
             }}
-            className="flex h-8 flex-1 items-center justify-center rounded-middle lg:h-9"
+            className="flex h-8 flex-1 items-center justify-center rounded-medium lg:h-9"
           >
             <span className="text-base font-normal">Register Another</span>
           </Button>
@@ -587,7 +587,7 @@ 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-middle bg-primary text-base font-normal text-white transition hover:opacity-80 active:translate-y-1 lg:h-9`
+          ? `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"
       }`}
       rel="noopener"
@@ -606,7 +606,7 @@ function LabelItem({
   className,
 }: PropsWithChildren<{ label: string; tips?: string; className?: string }>) {
   return (
-    <div className={`flex flex-col gap-middle ${className}`}>
+    <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>
         {tips ? (
diff --git a/src/components/relayers-manage.tsx b/src/components/relayers-manage.tsx
index e714c1c28..0e16cf059 100644
--- a/src/components/relayers-manage.tsx
+++ b/src/components/relayers-manage.tsx
@@ -39,7 +39,7 @@ export default function RelayersManage({ bridgeVersion }: Props) {
 
   return (
     <div>
-      <div className="mb-middle flex items-center justify-between">
+      <div className="mb-medium flex items-center justify-between">
         <span className="text-base font-semibold text-white">Relayers</span>
         <CountdownRefresh onClick={refetch} />
       </div>
diff --git a/src/components/relayers-table.tsx b/src/components/relayers-table.tsx
index b8270fcb1..1b2c89a1c 100644
--- a/src/components/relayers-table.tsx
+++ b/src/components/relayers-table.tsx
@@ -243,7 +243,7 @@ export default function RelayersTable({
           render: (row) => (
             <div className="flex justify-end">
               <Button
-                className="w-fit rounded-middle px-middle py-[2px]"
+                className="w-fit rounded-medium px-medium py-[2px]"
                 onClick={() => setRelayerInfo(row)}
                 kind="default"
               >
diff --git a/src/components/token-select.tsx b/src/components/token-select.tsx
index 50a74c389..9dd769928 100644
--- a/src/components/token-select.tsx
+++ b/src/components/token-select.tsx
@@ -23,8 +23,8 @@ export default function TokenSelect({
 }: Props) {
   return (
     <Select
-      labelClassName={`gap-small flex items-center justify-between rounded-middle ${className}`}
-      childClassName="bg-inner py-middle flex flex-col rounded-middle border border-component"
+      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}
@@ -39,7 +39,7 @@ export default function TokenSelect({
             onClick={() => {
               onChange(option);
             }}
-            className="flex items-center gap-middle px-large py-small transition hover:bg-white/5"
+            className="flex items-center gap-medium px-large py-small transition hover:bg-white/5"
           >
             <Image width={26} height={26} alt="Token" src={getTokenLogoSrc(option.logo)} className="rounded-full" />
             <div className="flex flex-col items-start">
diff --git a/src/components/token-to-receive.tsx b/src/components/token-to-receive.tsx
index 914188953..bb5e74852 100644
--- a/src/components/token-to-receive.tsx
+++ b/src/components/token-to-receive.tsx
@@ -17,7 +17,7 @@ export default function TokenToReceive({ record }: Props) {
   );
 
   return token ? (
-    <div className="flex items-center gap-middle">
+    <div className="flex items-center gap-medium">
       {token.type !== "native" && (
         <PrettyAddress address={token.address} copyable className="text-sm font-medium text-primary" />
       )}
@@ -27,7 +27,7 @@ export default function TokenToReceive({ record }: Props) {
       {/* add to metamask */}
       {window.ethereum && token.type !== "native" ? (
         <Button
-          className="rounded-middle px-middle py-[1px]"
+          className="rounded-medium px-medium py-[1px]"
           onClick={async () => {
             try {
               await window.ethereum.request({
diff --git a/src/components/token-transfer.tsx b/src/components/token-transfer.tsx
index 85ca37e47..9041afc03 100644
--- a/src/components/token-transfer.tsx
+++ b/src/components/token-transfer.tsx
@@ -55,7 +55,7 @@ function Item({
   const token = chainConfig?.tokens.find((t) => t.symbol === symbol);
 
   return token && chainConfig ? (
-    <div className="flex items-center gap-middle">
+    <div className="flex items-center gap-medium">
       <Tooltip content={chainConfig.name} className="shrink-0">
         <Image
           width={16}
diff --git a/src/components/transaction-hash.tsx b/src/components/transaction-hash.tsx
index 2ae938e4c..75ed7750c 100644
--- a/src/components/transaction-hash.tsx
+++ b/src/components/transaction-hash.tsx
@@ -11,7 +11,7 @@ export function TransactionHash({ chain, txHash }: Props) {
   const chainConfig = getChainConfig(chain);
 
   return txHash ? (
-    <div className="flex items-center gap-middle">
+    <div className="flex items-center gap-medium">
       {chainConfig?.blockExplorers ? (
         <a
           className="text-sm font-medium text-primary transition hover:underline"
diff --git a/src/components/transaction-status.tsx b/src/components/transaction-status.tsx
index f9cf20c1a..a98721f69 100644
--- a/src/components/transaction-status.tsx
+++ b/src/components/transaction-status.tsx
@@ -160,7 +160,7 @@ export default function TransactionStatus({ record }: Props) {
 
   return (
     <>
-      <div className="flex items-center gap-middle">
+      <div className="flex items-center gap-medium">
         <RecordResultTag result={record?.result} />
 
         {record?.result === RecordResult.PENDING && (
@@ -189,7 +189,7 @@ export default function TransactionStatus({ record }: Props) {
         {record?.result === RecordResult.PENDING_TO_CLAIM && (
           <div className="flex items-center gap-small">
             <span className="text-sm font-medium text-white/50">Please claim the tokens on the target chain.</span>
-            <Button className="rounded-middle px-1" kind="primary" busy={busy} onClick={handleClaim}>
+            <Button className="rounded-medium px-1" kind="primary" busy={busy} onClick={handleClaim}>
               <span className="text-sm font-medium text-white">Claim</span>
             </Button>
           </div>
@@ -198,7 +198,7 @@ export default function TransactionStatus({ record }: Props) {
         {record?.result === RecordResult.PENDING_TO_REFUND && (
           <div className="flex items-center gap-small">
             <span className="text-sm font-medium text-white/50">Please request refund on the target chain.</span>
-            <Button className="rounded-middle px-1" kind="primary" busy={busy} onClick={handleRefund}>
+            <Button className="rounded-medium px-1" kind="primary" busy={busy} onClick={handleRefund}>
               <span className="text-sm font-medium text-white">Refund</span>
             </Button>
           </div>
@@ -209,10 +209,10 @@ export default function TransactionStatus({ record }: Props) {
             <span className="text-sm font-medium text-white/50">
               You can request refund or speed up this transaction.
             </span>
-            <Button className="rounded-middle px-1" kind="primary" busy={busy} onClick={handleRefund}>
+            <Button className="rounded-medium px-1" kind="primary" busy={busy} onClick={handleRefund}>
               <span className="text-sm font-medium text-white">Refund</span>
             </Button>
-            <Button className="rounded-middle px-1" kind="primary" onClick={() => setIsOpen(true)}>
+            <Button className="rounded-medium px-1" kind="primary" onClick={() => setIsOpen(true)}>
               <span className="text-sm font-medium text-white">SpeedUp</span>
             </Button>
           </div>
diff --git a/src/components/transaction-timestamp.tsx b/src/components/transaction-timestamp.tsx
index e8943f3a2..5beceab56 100644
--- a/src/components/transaction-timestamp.tsx
+++ b/src/components/transaction-timestamp.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 export default function TransactionTimestamp({ record }: Props) {
   return (
-    <div className="flex items-center gap-middle">
+    <div className="flex items-center gap-medium">
       <Image width={16} height={16} alt="Confirm time" src="/images/time.svg" className="shrink-0" />
       <span className="text-sm font-medium text-white">
         {record ? `${toTimeAgo(record.startTime * 1000)} (${formatTime(record.startTime * 1000)})` : null}
diff --git a/src/components/transfer-action.tsx b/src/components/transfer-action.tsx
index ab16c769b..7a5205692 100644
--- a/src/components/transfer-action.tsx
+++ b/src/components/transfer-action.tsx
@@ -121,7 +121,7 @@ function Button({
       kind="primary"
       busy={busy}
       disabled={disabled}
-      className="flex h-10 items-center justify-center rounded-middle"
+      className="flex h-10 items-center justify-center rounded-medium"
       onClick={onClick}
     >
       <span className="text-base font-medium text-white">{children}</span>
diff --git a/src/components/transfer-info.tsx b/src/components/transfer-info.tsx
index 6e47b476a..7b21559d9 100644
--- a/src/components/transfer-info.tsx
+++ b/src/components/transfer-info.tsx
@@ -49,7 +49,7 @@ export default function TransferInfo({ fee, bridge, transferLimit: propTransferL
   }, [bridge]);
 
   return (
-    <div className="flex flex-col gap-small rounded-middle bg-inner p-middle">
+    <div className="flex flex-col gap-small rounded-medium bg-inner p-medium">
       <Item label="Estimated Arrival Time" value={bridge?.formatEstimateTime()} />
       {bridge?.getCategory().startsWith("xtoken") ? null : (
         <Item
diff --git a/src/components/transfer.tsx b/src/components/transfer.tsx
index 5c68b3f48..1bfcfa363 100644
--- a/src/components/transfer.tsx
+++ b/src/components/transfer.tsx
@@ -230,12 +230,12 @@ export default function Transfer() {
 
   return (
     <>
-      <div className="mx-auto flex w-full flex-col gap-large rounded-large bg-component p-middle lg:mt-20 lg:w-[30rem] lg:gap-5 lg:p-5">
+      <div className="mx-auto flex w-full flex-col gap-large rounded-large bg-component p-medium lg:mt-20 lg:w-[30rem] lg:gap-5 lg:p-5">
         {/* From-To */}
         <div className="mt-8 flex items-center justify-between gap-small lg:gap-large">
           <Label text="From" className="w-[45%] lg:w-full" textClassName="font-medium" needAbsolute>
             <ChainSelect
-              className="w-full bg-inner p-middle"
+              className="w-full bg-inner p-medium"
               placement="bottom-start"
               value={sourceChain}
               options={defaultSourceChains}
@@ -288,7 +288,7 @@ export default function Transfer() {
           />
           <Label text="To" className="w-[45%] lg:w-full" textClassName="font-medium" needAbsolute>
             <ChainSelect
-              className="w-full bg-inner p-middle"
+              className="w-full bg-inner p-medium"
               placement="bottom-end"
               value={targetChain}
               options={getAvailableTargetChains(sourceChain)}
diff --git a/src/components/user.tsx b/src/components/user.tsx
index 82e933a6d..4b0cddb08 100644
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@@ -47,7 +47,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
       placement={placement}
       label={<LabelSpan>{toShortAdrress(address)}</LabelSpan>}
     >
-      <div className="flex items-center gap-middle px-5">
+      <div className="flex items-center gap-medium px-5">
         <AddressIdenticon address={address} diameter={32} />
         <PrettyAddress
           forceShort
@@ -85,7 +85,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
           .map((balance) => (
             <button
               key={`${balance.chain.network}-${balance.token.symbol}`}
-              className="flex items-center gap-large rounded-middle px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-middle"
+              className="flex items-center gap-large rounded-medium px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-medium"
               disabled={pathname !== "/"}
               onClick={() => {
                 const _sourceChain = balance.chain;
diff --git a/src/components/withdrawable-liquidities-select.tsx b/src/components/withdrawable-liquidities-select.tsx
index 3442e4282..1b5ef59ca 100644
--- a/src/components/withdrawable-liquidities-select.tsx
+++ b/src/components/withdrawable-liquidities-select.tsx
@@ -21,14 +21,14 @@ export default function WithdrawableLiquiditiesSelect({
   onLoadMore = () => undefined,
 }: Props) {
   return (
-    <div className={`relative max-h-60 rounded-middle bg-inner ${loading ? "overflow-y-hidden" : "overflow-y-auto"}`}>
+    <div className={`relative max-h-60 rounded-medium bg-inner ${loading ? "overflow-y-hidden" : "overflow-y-auto"}`}>
       <ComponentLoading loading={loading} />
 
       <div className="flex flex-col py-2">
         {options.length ? (
           options.map((option) => (
-            <div key={option.id} className="flex items-center justify-between gap-middle px-large py-2">
-              <div className="flex items-center gap-middle">
+            <div key={option.id} className="flex items-center justify-between gap-medium px-large py-2">
+              <div className="flex items-center gap-medium">
                 <button
                   className={`h-4 w-4 border border-primary transition-[transform,color] hover:scale-105 active:scale-95 ${
                     value.some(({ id }) => id === option.id) ? "bg-primary" : "bg-transparent"
@@ -76,7 +76,7 @@ export default function WithdrawableLiquiditiesSelect({
       {total > options.length ? (
         <button
           onClick={onLoadMore}
-          className="w-full rounded-b-middle 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-medium text-white transition-[transform,color] hover:bg-primary active:translate-y-1"
         >
           Load More
         </button>
diff --git a/src/ui/drawer.tsx b/src/ui/drawer.tsx
index 8b10bc3c0..00d8c667b 100644
--- a/src/ui/drawer.tsx
+++ b/src/ui/drawer.tsx
@@ -47,7 +47,7 @@ export default function Drawer({
           onClick={(e) => e.stopPropagation()}
         >
           <div className="flex h-full w-full flex-col items-start">
-            <div className="flex w-full items-center justify-between p-middle">
+            <div className="flex w-full items-center justify-between p-medium">
               <Link href="/" onClick={onClose}>
                 <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
               </Link>
diff --git a/src/ui/modal.tsx b/src/ui/modal.tsx
index a76f126db..09bacab7c 100644
--- a/src/ui/modal.tsx
+++ b/src/ui/modal.tsx
@@ -64,11 +64,11 @@ export default function Modal({
       <div
         ref={nodeRef}
         onClick={() => maskClosable && onClose()}
-        className="fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-app-bg/80 p-middle"
+        className="fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-app-bg/80 p-medium"
       >
         {/* modal */}
         <div
-          className={`relative flex flex-col gap-5 rounded-large bg-component p-middle lg:p-5 ${className}`}
+          className={`relative flex flex-col gap-5 rounded-large bg-component p-medium lg:p-5 ${className}`}
           onClick={(e) => e.stopPropagation()}
         >
           {/* close icon */}
@@ -80,7 +80,7 @@ export default function Modal({
           </button>
 
           {/* header */}
-          <div className="flex flex-col gap-middle lg:gap-5">
+          <div className="flex flex-col gap-medium lg:gap-5">
             <h3 className="text-xl font-semibold text-white">{title}</h3>
             {subTitle ? (
               typeof subTitle === "string" ? (
@@ -110,7 +110,7 @@ export default function Modal({
                     kind="default"
                     onClick={onCancel}
                     disabled={disabledCancel}
-                    className="h-9 flex-1 rounded-middle text-base font-medium"
+                    className="h-9 flex-1 rounded-medium text-base font-medium"
                   >
                     {cancelText || "Cancel"}
                   </Button>
@@ -121,7 +121,7 @@ export default function Modal({
                     onClick={onOk}
                     disabled={disabledOk}
                     busy={busy}
-                    className="h-9 flex-1 rounded-middle text-base font-medium"
+                    className="h-9 flex-1 rounded-medium text-base font-medium"
                   >
                     {okText || "Ok"}
                   </Button>
diff --git a/src/ui/notification.tsx b/src/ui/notification.tsx
index 5755d0eab..5900cc984 100644
--- a/src/ui/notification.tsx
+++ b/src/ui/notification.tsx
@@ -15,14 +15,14 @@ type Status = "success" | "info" | "warn" | "error";
 
 const createContainer = () => {
   const container = document.createElement("div");
-  container.className = "fixed top-middle right-middle lg:top-5 lg:right-5 flex flex-col overflow-hidden z-40";
+  container.className = "fixed top-medium right-medium lg:top-5 lg:right-5 flex flex-col overflow-hidden z-40";
   document.body.appendChild(container);
   return container;
 };
 
 const createItem = (config: Config, status: Status, onClose: () => void) => {
   const domNode = document.createElement("div");
-  domNode.className = `rounded-middle border-component border bg-inner p-middle lg:p-5 flex items-center gap-middle mb-middle animate-notification-enter relative w-[82vw] lg:w-96 ${config.className}`;
+  domNode.className = `rounded-medium border-component border bg-inner p-medium lg:p-5 flex items-center gap-medium mb-medium animate-notification-enter relative w-[82vw] lg:w-96 ${config.className}`;
 
   const root = createRoot(domNode);
   root.render(
diff --git a/src/ui/record-result-tag.tsx b/src/ui/record-result-tag.tsx
index 7a99ce420..c600bbe02 100644
--- a/src/ui/record-result-tag.tsx
+++ b/src/ui/record-result-tag.tsx
@@ -35,7 +35,7 @@ export function RecordResultTag({ result }: { result?: RecordResult | null }) {
 
   return (
     <div
-      className="flex items-center gap-small rounded-3xl py-[3px] pl-small pr-middle"
+      className="flex items-center gap-small rounded-3xl py-[3px] pl-small pr-medium"
       style={{ backgroundColor: color }}
     >
       <Image
diff --git a/src/ui/search.tsx b/src/ui/search.tsx
index 24abfb8f6..4c448aee1 100644
--- a/src/ui/search.tsx
+++ b/src/ui/search.tsx
@@ -12,7 +12,7 @@ interface Props {
 export default function Search({ placeholder, className, value, onClear, onChange = () => undefined }: Props) {
   return (
     <div
-      className={`normal-input-wrap valid-input-wrap flex items-center justify-between gap-small rounded-middle border-white/20 px-middle py-2 focus-within:border-primary ${className}`}
+      className={`normal-input-wrap valid-input-wrap flex items-center justify-between gap-small rounded-medium border-white/20 px-medium py-2 focus-within:border-primary ${className}`}
     >
       <Input
         placeholder={placeholder}
diff --git a/src/ui/segmented-tabs.tsx b/src/ui/segmented-tabs.tsx
index bd022163f..e1c0f82eb 100644
--- a/src/ui/segmented-tabs.tsx
+++ b/src/ui/segmented-tabs.tsx
@@ -39,7 +39,7 @@ export default function SegmentedTabs<K extends Key = string>({
           .map(({ key, label, disabled }) => (
             <div
               key={key}
-              className={`flex flex-1 items-center justify-center border-y border-r border-primary transition-colors duration-150 first:rounded-l-middle first:border-l last:rounded-r-middle hover:border-primary/80 ${
+              className={`flex flex-1 items-center justify-center border-y border-r border-primary transition-colors duration-150 first:rounded-l-medium first:border-l last:rounded-r-medium hover:border-primary/80 ${
                 activeKey === key ? "bg-primary hover:bg-primary/80" : "bg-transparent hover:text-primary"
               } ${disabled ? "opacity-60" : ""}`}
             >
diff --git a/src/ui/step-title.tsx b/src/ui/step-title.tsx
index 990735539..bc3458301 100644
--- a/src/ui/step-title.tsx
+++ b/src/ui/step-title.tsx
@@ -5,7 +5,7 @@ interface Props {
 
 export default function StepTitle({ step, title }: Props) {
   return (
-    <div className="flex items-center gap-middle">
+    <div className="flex items-center gap-medium">
       <div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary">
         <span className="text-xl font-bold text-white">{step}</span>
       </div>
diff --git a/src/ui/table.tsx b/src/ui/table.tsx
index d5bae0ea3..548d5ef09 100644
--- a/src/ui/table.tsx
+++ b/src/ui/table.tsx
@@ -71,20 +71,20 @@ export default function Table<T extends { key: Key }>({
       <div className="relative">
         {isOverflow && (
           <div
-            className="pointer-events-none absolute right-0 top-0 z-[1] h-full w-6 rounded-r-middle lg:w-8"
+            className="pointer-events-none absolute right-0 top-0 z-[1] h-full w-6 rounded-r-medium lg:w-8"
             style={{ background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, .3))" }}
           />
         )}
 
         <div
-          className={`overflow-x-auto rounded-middle ${isOverflow ? "cursor-grab" : ""}`}
+          className={`overflow-x-auto rounded-medium ${isOverflow ? "cursor-grab" : ""}`}
           ref={ref}
           style={{ scrollbarWidth: "none" }}
         >
           <div className={`${className}`}>
             {/* header */}
             <div
-              className="grid items-center gap-middle rounded-t-middle bg-component px-middle py-large text-sm font-extrabold text-white lg:px-large"
+              className="grid items-center gap-medium rounded-t-medium bg-component px-medium py-large text-sm font-extrabold text-white lg:px-large"
               style={{ gridTemplateColumns: templateCols }}
             >
               {columns
@@ -97,15 +97,15 @@ export default function Table<T extends { key: Key }>({
             {/* body */}
             <div className="relative">
               {/* loading */}
-              <ComponentLoading loading={!!loading} className="rounded-b-middle" />
+              <ComponentLoading loading={!!loading} className="rounded-b-medium" />
 
               {/* content */}
               {dataSource.length ? (
-                <div className="rounded-b-middle bg-inner">
+                <div className="rounded-b-medium bg-inner">
                   {dataSource.map((row) => (
                     <div
                       key={row.key}
-                      className={`grid items-center gap-middle border-t border-t-white/10 p-middle text-sm font-medium transition-colors lg:px-large ${
+                      className={`grid items-center gap-medium border-t border-t-white/10 p-medium text-sm font-medium transition-colors lg:px-large ${
                         onRowClick ? "hover:cursor-pointer hover:bg-white/5" : ""
                       }`}
                       style={{ gridTemplateColumns: templateCols }}
@@ -144,7 +144,7 @@ export default function Table<T extends { key: Key }>({
       {total !== undefined && currentPage !== undefined && (
         <div className="overflow-x-auto">
           <Pagination
-            className="mt-middle"
+            className="mt-medium"
             total={total}
             pageSize={pageSize}
             currentPage={currentPage}
diff --git a/src/ui/tabs.tsx b/src/ui/tabs.tsx
index 44284e022..a9797f5cb 100644
--- a/src/ui/tabs.tsx
+++ b/src/ui/tabs.tsx
@@ -46,7 +46,7 @@ export default function Tabs<K extends Key = string>({
     <div className={className}>
       {/* labels */}
       <div className="overflow-x-auto">
-        <div className="options-center relative flex gap-middle" ref={(node) => setDividerWidth(node?.scrollWidth)}>
+        <div className="options-center relative flex gap-medium" ref={(node) => setDividerWidth(node?.scrollWidth)}>
           {options.map(({ key, label }, index) => (
             <button
               key={key}
@@ -56,7 +56,7 @@ export default function Tabs<K extends Key = string>({
                 e.stopPropagation();
                 onChange(key);
               }}
-              className={`rounded-middle px-3 py-1 text-sm transition duration-200 hover:bg-white/10 ${
+              className={`rounded-medium px-3 py-1 text-sm transition duration-200 hover:bg-white/10 ${
                 key === activeKey ? "font-extrabold text-primary" : "font-medium text-white"
               }`}
             >
@@ -66,7 +66,7 @@ export default function Tabs<K extends Key = string>({
         </div>
 
         {/* divider & rail */}
-        <div className="relative mt-middle" style={{ width: dividerWidth }}>
+        <div className="relative mt-medium" style={{ width: dividerWidth }}>
           <div className="absolute h-[2px] w-6 bg-primary transition-transform duration-200" ref={railRef} />
           <div className="h-[1px] bg-transparent" />
           <div className="h-[1px] bg-white/20" />
@@ -76,7 +76,7 @@ export default function Tabs<K extends Key = string>({
       {/* content */}
       <SwitchTransition>
         <CSSTransition timeout={200} key={activeKey} nodeRef={nodeRef} classNames="tabs-fade" unmountOnExit>
-          <div ref={nodeRef} className="mt-middle overflow-x-auto">
+          <div ref={nodeRef} className="mt-medium overflow-x-auto">
             {activeItem ? (
               activeItem.children
             ) : (
diff --git a/src/ui/tooltip.tsx b/src/ui/tooltip.tsx
index 6825f2f95..69386719f 100644
--- a/src/ui/tooltip.tsx
+++ b/src/ui/tooltip.tsx
@@ -67,7 +67,7 @@ export default function Tooltip({
             <FloatingArrow ref={arrowRef} style={styles} context={context} fill="#00B2FF" />
             <div
               style={styles}
-              className={`flex items-center rounded-middle bg-primary px-middle py-small ${contentClassName}`}
+              className={`flex items-center rounded-medium bg-primary px-medium py-small ${contentClassName}`}
             >
               {typeof content === "string" ? <span className="text-xs font-extrabold">{content}</span> : content}
             </div>
diff --git a/src/ui/version-switch.tsx b/src/ui/version-switch.tsx
index 336262d8f..c339bdcc6 100644
--- a/src/ui/version-switch.tsx
+++ b/src/ui/version-switch.tsx
@@ -15,7 +15,7 @@ export default function VersionSwitch({ value, onChange }: Props) {
 
   return (
     <div
-      className="relative h-4 w-12 rounded-middle bg-component hover:cursor-pointer"
+      className="relative h-4 w-12 rounded-medium bg-component hover:cursor-pointer"
       ref={thumbRef}
       onClick={() => onChange(value === "v2" ? "v3" : "v2")}
     >
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2d98de896..415abf0b0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,13 +25,13 @@ const config: Config = {
       },
       borderRadius: {
         small: "0.25rem", // 4px
-        middle: "0.5rem", // 8px
+        medium: "0.5rem", // 8px
         large: "1rem", // 16px
         extralarge: "1.5rem", // 24px
       },
       spacing: {
         small: "0.3125rem", // 5px
-        middle: "0.625rem", // 10px
+        medium: "0.625rem", // 10px
         large: "0.9375rem", // 15px
       },
       maxWidth: {